/* Signal Dark — shared design system (P4 foundation, epic #1525)
 *
 * Lifted verbatim from the production mockups' <style> blocks:
 *   tests/parity/mockups/detail-full.html  (tokens, .frame, .cut, .mono, shared chrome)
 *   tests/parity/mockups/pwa-redesign.html (light-theme variant + .btn / .bdg / .sect / .statgrid)
 *
 * Dark is the default. Light is applied via a `light` class on the root
 * container (`.proto`), matching the parity harness `_apply_theme` toggle.
 *
 * Self-hosted fonts only (offline + parity-stable). NO Google Fonts CDN.
 */

/* Inter Tight @font-face inlined here (NOT @import'd from ../fonts/inter-tight.css):
   the server serves .css under /fonts/ as font/woff2, so the @import was refused
   ("not a supported stylesheet MIME type") and Inter Tight silently fell back to
   system sans everywhere. signal-dark.css is served as text/css, so inlining works. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/inter-tight-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/inter-tight-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Bold.ttf") format("truetype");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: "Inter Tight", sans-serif; }

/* ── Design tokens ──────────────────────────────────────────────────────
 * Dark default (lifted verbatim from detail-full.html .proto). Brand lime
 * `--acc` plays the dual role of interactive + good-deal in dark.
 *
 * The brand/interactive role and the deal-semantic role are split into
 * separate vars so the light theme can swap brand→Swiss-red while keeping
 * "good deal" green (spec lock). In dark both collapse onto lime.
 *   --accT  / --accFill  → interactive / brand accent (buttons, links, on-state)
 *   --good  / --goodFill → deal-semantic "good"
 */
.proto {
  --bg: #0f1013;
  --card: #15171b;
  --card2: #1a1d22;
  --line: #24272e;
  --line2: #2e323a;
  --text: #f2f3f5;
  --mut: #878d97;
  --mut2: #7b828c;

  --acc: #d6ff3d;        /* legacy single-accent token kept for verbatim rules */
  --acc-ink: #10130a;
  --accT: #d6ff3d;       /* interactive/brand */
  --accFill: #d6ff3d;
  --acc-ink2: #10130a;

  --good: #d6ff3d;       /* deal-semantic good */
  --goodFill: #d6ff3d;
  --good-ink: #10130a;
  --fair: #e3b34a;
  --high: #e8795a;
}

/* Light theme — brand accent = Swiss red #e8390e (owner lock: green stops
 * working in light), semantic good stays green #0e8a3e, fair amber. Lifted
 * from pwa-redesign.html .proto.light. */
.proto.light {
  --bg: #f4f2ee;
  --card: #ffffff;
  --card2: #efece6;
  --line: #ddd9d1;
  --line2: #cbc6bc;
  --text: #16181c;
  --mut: #6b6f78;
  --mut2: #6b6258;

  --acc: #e8390e;        /* light: brand=red. Single-accent verbatim rules become red. */
  --acc-ink: #ffffff;
  --accT: #e8390e;
  --accFill: #e8390e;
  --acc-ink2: #ffffff;

  --good: #0e8a3e;       /* deal-semantic good stays green */
  --goodFill: #0e8a3e;
  --good-ink: #ffffff;
  --fair: #c98a16;
  --high: #d2542f;
}

/* ── Phone frame ────────────────────────────────────────────────────────
 * The `.frame` is the 390px phone column the parity harness screenshots. */
.frame {
  width: 390px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 18px 50px rgba(20, 20, 30, .28);
  background: var(--bg);
  color: var(--text);
}

/* status bar — the faux "9:41" mockup row.
 * The live app shell (index-sd.html) NO LONGER renders this (#1525 QA: it had
 * no function, stole vertical space, and the phone/Telegram OS already draws a
 * real status bar). The rule is kept ONLY for the standalone per-screen preview
 * harnesses (home-sd.html, detail-sd.html, …) which still include `.sb` as a
 * static mock. Do not rely on it in the running SPA. */
.sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px 7px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  color: var(--mut);
}
.sb .ic { display: flex; gap: 5px; align-items: center; }

/* shared atoms */
.ph { background-size: cover; background-position: center; }
.cut { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.mono { font-family: "JetBrains Mono", monospace; }

/* badges */
.bdg {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .1em;
  padding: 4px 9px;
  background: var(--card2);
  color: var(--mut);
  outline: 1px solid var(--line2);
}
.bdg.lm { background: var(--acc); color: var(--acc-ink); outline: none; }

/* primary monospace control button (canvas chrome / toggles) */
.cbtn {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--card2);
  color: var(--text);
  cursor: pointer;
  border: 1px solid var(--line2);
  letter-spacing: .04em;
}

/* CTA buttons */
.btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 15px 0;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform .12s ease-out;
  font-family: "Inter Tight";
}
.btn:active { transform: scale(.97); }
.btn.p { background: var(--accFill); color: var(--acc-ink2); }
.btn.s { background: var(--card2); color: var(--text); outline: 1px solid var(--line2); flex: 0 0 104px; }

/* section panel */
.sect { margin: 16px 18px 0; background: var(--card); border: 1px solid var(--line); }
.sect .shd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  color: var(--mut2);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
}
.sect .shd b { color: var(--acc); }

/* page header row with back button — SHARED atom (home, filters, results, plate,
 * detail, garage, insights, tools, compare). Lives here (not home.css) so every
 * screen + its standalone harness gets a padded, styled header regardless of
 * which screen CSS is loaded (#1525 P4: 6 of 9 harnesses don't load home.css). */
.hdr { display: flex; align-items: center; gap: 11px; padding: 12px 18px 0; }
.hdr .hb {
  width: 32px; height: 32px;
  background: var(--card2); outline: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); flex-shrink: 0;
  border: none; padding: 0; font-family: inherit; cursor: pointer;  /* button reset */
}
.hdr .ht { font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; flex: 1; }
.hdr .hx { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--accT); letter-spacing: .1em; cursor: pointer; }

/* Masthead version-label clearance for the floating theme toggle.
 * The app-version label (`.mast .x`, e.g. "v e0a3252a", rendered by home /
 * results / insights) right-aligns to the masthead's 18px right padding. The
 * theme toggle (`.sd-tt`, index-sd.html) floats absolute at `top:9px; right:12px`
 * sized 28×28, so its left edge sits 40px from the frame's right edge — i.e. it
 * overlaps the version text's corner and the two collide ("v e0a3252a ☀").
 * Reserve a right gutter on `.x` so its text clears the toggle: 40px pushes the
 * label's right edge to ~58px from the frame edge, well clear of the toggle's
 * 40px left edge. Selector is `.frame .mast .x` (specificity 0,3,0) so it wins
 * over `home.css`'s `.mast .x` (0,2,0), which loads AFTER signal-dark.css; the
 * `.frame` ancestor is present in the live SPA shell and every standalone
 * harness, so the gutter applies everywhere the masthead renders. The toggle
 * keeps its top-right slot (z-index:40) as Batch-1 established. */
.frame .mast .x { margin-right: 40px; }

/* 2-col stat grid (performance / economy) */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; }
.statgrid .st {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.statgrid .st:nth-child(2n) { border-right: none; }
.statgrid .st:nth-last-child(-n+2) { border-bottom: none; }
.statgrid .v {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.statgrid .v small { font-size: 10px; color: var(--mut); font-weight: 700; }
.statgrid .k {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}
.statgrid .bgic {
  position: absolute;
  right: -12px;
  bottom: -16px;
  width: 64px;             /* watermark scale — CSS wins over the 46px markup attr */
  height: 64px;
  color: var(--accT);
  opacity: .12;            /* large faint watermark, mirrors the brand-logo card mark */
  z-index: 0;
  pointer-events: none;
}

/* key/value detail row */
.trow {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.trow:last-child { border-bottom: none; }
.trow .k {
  color: var(--mut);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .1em;
  font-weight: 700;
  padding-top: 2px;
  font-family: "JetBrains Mono", monospace;
}
.trow .v { font-weight: 800; }

/* bottom nav */
.fnav { display: flex; margin-top: 18px; background: #0b0c0f; border-top: 1px solid var(--line); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.proto.light .fnav { background: #e7e3db; }
.fnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0 12px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--mut2);
  font-family: "JetBrains Mono", monospace;
}
.fnav a.on { color: var(--accT); }

/* ── Accessibility: focus-visible ring ──────────────────────────────────── */
:is(button, [role="button"], a[href], [tabindex="0"], input, select):focus-visible {
  outline: 2px solid var(--accT);
  outline-offset: 2px;
}

/* ── Accessibility: reduced-motion — suppress shared transitions ─────────── */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}