/* Dial components, measured off dialkit.dev/photostack:
   rows 36px at radius 8, a fill that shows the value, hashmarks every 10%,
   6px gaps, panel at radius 16.

   Palette and type follow sahilgarg.work: a white page in black and one blue,
   set in Geist. Only Regular of each face exists, so the browser is never asked
   to fake a weight — `font-synthesis: none` makes a missing weight visible
   rather than smeared. Nothing on the page is bold.

   The one departure from "white + black + one blue": a red for negative money.
   Losses are the main thing this page has to report, and reporting them in the
   accent would turn most of the page blue. Geist is OFL; see fonts/OFL-Geist.txt. */
@font-face {
  font-family: "Geist Sans";
  src: url("/assets/fonts/GeistSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Serif";
  src: url("/assets/fonts/GeistSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --d-bg: #fff;
  --d-page: #fff;
  --d-surface: #0a0a0a08;
  --d-surface-hover: #0a0a0a12;
  --d-fill: #0a0a0a12;
  --d-border: #0a0a0a14;
  --d-text: #0a0a0a;
  --d-label: #0a0a0a94;
  --d-section: #0a0a0ab3;
  --d-faint: #0a0a0a61;
  --d-hash: #0a0a0a14;
  --d-accent: #2f45ff;
  --d-neg: #c4321f;
  --d-shadow: none;
  --d-lift: 0 1px 2px #0a0a0a0a, 0 18px 40px -24px #0a0a0a40;
  --d-row: 36px;
  --d-gap: 6px;
  --d-radius: 16px;
  --d-serif: "Geist Serif", "Times New Roman", Times, serif;
  --d-sans: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --d-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --d-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
/* The reference is a white page, so dark mode is this palette turned down onto
   its charcoal rather than a second design. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-bg: #1c1b1a; --d-page: #141312; --d-surface: #f2f0ec0a; --d-surface-hover: #f2f0ec14;
    --d-fill: #f2f0ec1a; --d-border: #f2f0ec1f; --d-text: #f2f0ec; --d-label: #f2f0eca3;
    --d-section: #f2f0ecc7; --d-faint: #f2f0ec66; --d-hash: #f2f0ec1f;
    --d-accent: #8c9bff; --d-neg: #e8705e;
    --d-lift: 0 1px 2px #00000040, 0 18px 40px -24px #00000080;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { font-synthesis: none; }
/* nothing is bold: only Regular exists, and strong should not be faked */
strong, b { font-weight: 400; }
body {
  margin: 0; background: var(--d-page); color: var(--d-text);
  font: 15px/1.5 var(--d-serif); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--d-accent); color: #fff; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--d-bg), 0 0 0 4px var(--d-accent); border-radius: 6px; }

/* ---- panel ---- */
.panel {
  background: var(--d-bg); border: 1px solid var(--d-border); border-radius: var(--d-radius);
  box-shadow: var(--d-lift);
  padding: 10px; display: flex; flex-direction: column; gap: var(--d-gap);
}
.panel-title {
  font-size: 13px; letter-spacing: -.01em;
  padding: 2px 6px 6px; display: flex; justify-content: space-between; align-items: center;
}
.section {
  font-family: var(--d-sans); font-size: 11px; color: var(--d-section); letter-spacing: .02em;
  padding: 10px 6px 2px; display: flex; justify-content: space-between; align-items: center;
}

/* ---- the row: label left, value right, the fill shows the number ---- */
.row {
  position: relative; height: var(--d-row); border-radius: 8px; background: var(--d-surface);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; overflow: hidden; user-select: none;
  transition: background 150ms var(--d-ease);
}
.row:hover { background: var(--d-surface-hover); }
.row-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%);
  background: var(--d-fill); pointer-events: none;
  transition: width 90ms linear;
}
.row-hash { position: absolute; inset: 0; pointer-events: none; }
.row-hash i {
  position: absolute; top: 50%; width: 1px; height: 8px; margin-top: -4px;
  background: var(--d-hash); border-radius: 999px;
}
.row-label { position: relative; color: var(--d-label); font-size: 13.5px; white-space: nowrap; }
.row-value {
  position: relative; font-family: var(--d-mono); font-size: 12.5px; color: var(--d-text);
  white-space: nowrap;
}
.row[data-drag] { cursor: ew-resize; }
.row[data-drag]:active { background: var(--d-surface-hover); }
.row.ro { cursor: default; }
.row.ro:hover { background: var(--d-surface); }
.row.big { height: 44px; }
.row.big .row-value { font-size: 15px; }
.row-value.neg { color: var(--d-neg); }
.row-value small { color: var(--d-faint); font-size: 11px; margin-left: 3px; }

/* ---- select row ---- */
.row select {
  position: relative; appearance: none; background: none; border: 0; color: var(--d-text);
  font: 13.5px var(--d-serif); text-align: right; cursor: pointer; padding-right: 14px;
  max-width: 62%; text-overflow: ellipsis;
}
.row select:focus { outline: none; }
.row .chev { position: absolute; right: 10px; color: var(--d-faint); pointer-events: none; font-size: 10px; }

/* ---- estimate / source marks ---- */
.tag {
  font-family: var(--d-sans); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--d-faint);
  border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 6px;
}
.tag.warn { color: var(--d-accent); }