/* ==========================================================================
   Free calculator styling, in the terminal's language.

   These pages predate the /tools redesign and shipped their own look: 12-16px
   rounded cards, Montserrat 800 numerals, generic form controls. Once they moved
   into the tools rail they sat beside the terminal looking like a different
   product, which is exactly the "sore thumb" problem.

   This sheet rebuilds them in the terminal's vocabulary: flat surfaces separated
   by hairlines rather than rounded cards, 10px uppercase MONO labels, tabular
   numerals on every figure so columns of digits line up, and denser padding.

   Tokens are redeclared as --c-* rather than importing tools-terminal.css,
   because that sheet also styles body, .workspace and the rail and would fight
   these pages. Loaded AFTER each page's inline <style>, so it wins on the
   selectors it restates and leaves the chart internals alone.
   ========================================================================== */

:root {
  --c-bg:#0A0A0A; --c-surface-1:#101010; --c-surface-2:#171717; --c-surface-3:#212121;
  --c-hairline:rgba(255,255,255,.09); --c-hairline-heavy:rgba(255,255,255,.17);
  --c-ink:#F2F2F2; --c-ink-2:#C8C8C8; --c-ink-muted:#9C9C9C;
  --c-accent:#D4BE84; --c-accent-line:rgba(212,190,132,.38); --c-accent-fill:rgba(212,190,132,.14);
  --c-pos:#4FB98A; --c-neg:#E0705A;
  --c-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,'Cascadia Mono',monospace;
  --c-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
:root[data-theme="light"] {
  --c-bg:#FBFAF7; --c-surface-1:#FFFFFF; --c-surface-2:#EFEDE8; --c-surface-3:#E4E1DA;
  --c-hairline:rgba(0,0,0,.11); --c-hairline-heavy:rgba(0,0,0,.20);
  --c-ink:#131316; --c-ink-2:#3A3A3E; --c-ink-muted:#5C5C62;
  --c-accent:#7D6316; --c-accent-line:rgba(125,99,22,.34); --c-accent-fill:rgba(125,99,22,.10);
  --c-pos:#1B6B4A; --c-neg:#9C3220;
}

body { background:var(--c-bg); color:var(--c-ink); font-family:var(--c-ui); }
.wrap { max-width:1180px; }
h1 { font-family:'Montserrat',var(--c-ui); font-weight:700; font-size:27px;
  letter-spacing:-.015em; }
.sub { color:var(--c-ink-muted); font-size:15px; max-width:68ch; }
.grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:16px; }
@media (max-width:900px){ .grid{grid-template-columns:minmax(0,1fr);} h1{font-size:23px;} }

/* Flat + hairline, like the terminal's tables. */
.card { background:var(--c-surface-1); border:1px solid var(--c-hairline);
  border-radius:10px; padding:18px; }

/* 10px uppercase mono — the terminal's column-head treatment. */
label { font-family:var(--c-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-ink-muted); font-weight:500; margin-bottom:6px; }

input, select { background:var(--c-surface-2); color:var(--c-ink);
  border:1px solid var(--c-hairline); border-radius:8px; padding:10px 12px;
  font-size:15px; font-family:var(--c-mono); font-variant-numeric:tabular-nums;
  transition:border-color var(--duration-quick,150ms) var(--ease-smooth-out,ease),
             background var(--duration-quick,150ms) var(--ease-smooth-out,ease); }
select { font-family:var(--c-ui); }
input:hover, select:hover { background:var(--c-surface-3); }
input:focus, select:focus { outline:none; border-color:var(--c-accent-line);
  background:var(--c-surface-3); }

/* Result tiles. One hairline grid instead of six floating rounded chips, so the
   figures read as a data block the way the terminal's stat rows do. */
/* Borders live on the CELLS, not the gaps. A gap-as-border grid leaves the
   container colour showing wherever the last row is short, which read as a
   phantom empty tile. This is how the terminal's own .stat is built. */
.stats { gap:0; background:var(--c-surface-1); border:1px solid var(--c-hairline);
  border-radius:10px; overflow:hidden; }
.stat { background:transparent; border:0; border-radius:0;
  border-right:1px solid var(--c-hairline); border-bottom:1px solid var(--c-hairline);
  padding:13px 15px 14px; min-width:0; }
.stat .k { font-family:var(--c-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-ink-muted); font-weight:500; }
.stat .v { font-family:var(--c-mono); font-weight:600; font-size:21px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:7px;
  line-height:1.05; color:var(--c-ink); }
.stat.hero { grid-column:1/-1; background:var(--c-accent-fill);
  border-right:0; border-bottom:1px solid var(--c-hairline); }
.stat.hero .v { font-size:29px; }
.v.green { color:var(--c-pos); }
.v.red   { color:var(--c-neg); }
.v.gold  { color:var(--c-accent); }

/* Segmented control: square, hairline, mono label — matches the terminal's
   table/cards switch rather than a gold gradient pill. */
.toggle { background:var(--c-surface-1); border:1px solid var(--c-hairline);
  border-radius:8px; padding:0; overflow:hidden; }
.toggle button { background:transparent; color:var(--c-ink-2); border:0;
  padding:9px 16px; font-family:var(--c-mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background var(--duration-quick,150ms) var(--ease-smooth-out,ease); }
.toggle button + button { border-left:1px solid var(--c-hairline); }
.toggle button:hover { background:var(--c-surface-3); }
.toggle button.on { background:var(--c-accent-fill); color:var(--c-accent); }

.explain, .disclaimer, footer { color:var(--c-ink-muted); font-size:13px; line-height:1.6; }
footer { margin-top:34px; padding-top:18px; border-top:1px solid var(--c-hairline); }
svg { max-width:100%; height:auto; }

@media (prefers-reduced-motion: reduce) {
  input, select, .toggle button { transition:none; }
}