/*
 * The made-this house style across the site, without touching the pages.
 * The server loads made-this.css first and this file last on every page
 * (?style=off shows the pages as they were).
 *
 * It points every page's own tokens at the made-this ones, so app.css, the
 * chart scripts and the side pages pick up the palette and the one font
 * (Inter; its tabular figures stand in for the pages' monospace). :not(#_) lifts each rule above the pages' own
 * :root rules, which include dark-mode ones of higher specificity.
 */

:root:not(#_) {
  color-scheme: light dark;

  /* app.css — the dashboard pages */
  --bg: var(--mt-paper); --panel: var(--mt-surface); --line: var(--mt-rule);
  --grid: color-mix(in srgb, var(--mt-rule) 55%, var(--mt-surface));
  --text: var(--mt-ink-2); --muted: var(--mt-muted);
  --accent: var(--mt-ok); --warn: var(--mt-warn); --bad: var(--mt-bad);
  --dev-newyork: var(--mt-blue); --dev-london: var(--mt-amber);
  --dev-paris: var(--mt-magenta); --dev-tokyo: var(--mt-series-4);
  --live: var(--mt-ok); --off: var(--mt-rule);   /* the live grid's dot; never defined before */

  /* /chips, /chips_cm, /cost */
  --fg: var(--mt-ink); --rule: var(--mt-rule);
  --copper: var(--mt-amber); --copper-soft: color-mix(in srgb, var(--mt-amber) 14%, transparent);
  --ok: var(--mt-ok);
  --bar-heat: var(--mt-magenta); --bar-light: var(--mt-amber); --bar-strip: var(--mt-blue);
  --mod-rgb: var(--mt-magenta); --mod-lux: var(--mt-blue); --mod-dht: var(--mt-series-4);
  --usb: var(--mt-blue); --pwr: var(--mt-amber); --eth: var(--mt-magenta); --io: var(--mt-series-4);
  --a: var(--mt-blue); --b: var(--mt-amber); --c: var(--mt-magenta);

  /* /buildbook */
  --paper: var(--mt-paper); --sheet: var(--mt-surface);
  --ink: var(--mt-ink); --ink-2: var(--mt-muted); --teal: var(--mt-blue);

  /* fonts: every display, body and mono face becomes Inter */
  --font-display: var(--mt-font); --font-body: var(--mt-font); --font-mono: var(--mt-font);
  --f-display: var(--mt-font);    --f-body: var(--mt-font);    --f-mono: var(--mt-font);
  --fd: var(--mt-font);           --fb: var(--mt-font);        --fm: var(--mt-font);
}

/* Tabular figures where the pages used monospace for numbers, so columns
   still line up. Not everywhere: Inter's tnum widens hyphens in prose. */
td:not(#_), th:not(#_), .mono:not(#_), .value:not(#_), .period:not(#_), .tip:not(#_) b,
.stats b:not(#_), .axis:not(#_), .ov-labels:not(#_),
.idc:not(#_) div, svg text:not(#_), .mt-num:not(#_) {
  font-variant-numeric: tabular-nums;
}

body:not(#_) { font-family: var(--mt-font); }

/* Headings: Inter Display Black, as in the style repo */
h1:not(#_), h2:not(#_) {
  font-family: var(--mt-font);
  font-variation-settings: "opsz" 32;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: none;
}
h3:not(#_) {
  font-family: var(--mt-font);
  font-variation-settings: "opsz" 32;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}
header h1:not(#_) { color: var(--mt-ink); }   /* the dashboard's site title */

/* No spaced-out capitals anywhere. The labels above headings go; the ones
   that name a reading or a control stay, as plain sentence-case text. */
.eyebrow, header .label { display: none !important; }
:not(#_):not(.made-this):not(.made-this *) { text-transform: none !important; }
.label, .tag, .kicker, .stats span, .tab b, .chip, .opt b, th, .step .state,
tr.grp td, .grid td:first-child, .split h3, .fit .lbl {
  letter-spacing: normal !important;
}
.label, .tag, .control > .tag, .overview .tag { font-weight: 600; font-size: 12px; color: var(--mt-muted); }

/* Hard-coded dark colours in app.css and the dashboard pages, which would
   sit wrong in light mode */
.range button[aria-pressed=true] { background: var(--mt-ink) !important; color: var(--mt-paper) !important; }
.brand:hover h1 { color: var(--mt-ink) !important; }
.tip { background: var(--mt-surface) !important; color: var(--mt-ink-2); box-shadow: var(--mt-shadow) !important; }
.ov-box { background: color-mix(in srgb, var(--sel, var(--mt-blue)) 12%, transparent) !important;
          border-color: var(--sel, var(--mt-blue)) !important; }
.ov-handle { background: var(--sel, var(--mt-blue)) !important; }
input:not([type=range]):not([type=checkbox]), textarea {
  background: var(--mt-surface) !important; color: var(--mt-ink) !important; border-color: var(--mt-rule) !important;
}
input:focus, textarea:focus { border-color: var(--mt-ink) !important; }
button:not(.range button):not(.cube):not(.tab):not(.chip) {
  font-family: var(--mt-font);
}
/* /settings: Save is the badge's pill */
button.save { background: var(--mt-ink) !important; color: var(--mt-paper) !important;
              border-color: var(--mt-ink) !important; font-weight: 700; }

/* /cost: the big prices were sized for a condensed face; Inter needs less */
.grid td.big { font-size: clamp(18px, 4.4vw, 26px); letter-spacing: -0.02em; }

/* /buildbook: the drawing-set look (hard 1.5px ink outlines, square corners)
   becomes the house cards: hairline rule, rounded, a soft shadow */
.titleblock, .hero, .card, .tablewrap, .steps {
  border: 1px solid var(--mt-rule) !important;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--mt-shadow);
}
.hero .viewer { border-color: var(--mt-rule) !important; }
.tabs { border-bottom: 1px solid var(--mt-rule) !important; gap: 6px !important; }
.tab { border: 0 !important; border-radius: 10px 10px 0 0; }
.tab[aria-selected="true"] { background: var(--mt-surface); box-shadow: inset 0 -3px 0 var(--mt-ink); }
.tab i, .glance li i { border: 0 !important; border-radius: 50%; }
.card button { border: 0 !important; border-radius: 8px; background: var(--mt-ink) !important;
               color: var(--mt-paper) !important; font-weight: 700 !important; }