/* ============================================================================
   MMR shared token layer — MAR-66
   ============================================================================

   WHY THIS FILE EXISTS
   --------------------
   The prototype Company Workspace (v2/company-workspace.html) drifted away from
   the production look: it had grown its own palette, its own radii and a
   monospace-everything type scale. Copying production's finished CSS into the
   prototype would have fixed the screenshot and created a second source of
   truth for the design language — the same failure mode, one release later.

   So this file carries only the *tokens*, and it derives them the way
   production derives them: production computes its Report Card appearance from
   two stacked layers, and this file reproduces both, in order.

     Layer A  = the :root block authored inside market-dashboard.html
     Layer B  = mmr-theme.css, which is <link>ed AFTER that inline <style>
                (market-dashboard.html:568) and therefore wins, because it uses
                the :root:root selector to out-specify the page's own :root.

   The result of the cascade is what a browser actually paints on
   marketmomentumradar.com/report-card, and it is what the prototype must match.
   Measured live on 2026-08-12 with Playwright:

     .card / .tile background   rgb(14, 26, 43)   = #0e1a2b   (Layer B --surface)
     .card / .tile border       rgb(33, 50, 77)   = #21324d   (Layer B --border)
     .card / .tile radius       14px                          (Layer B --r-card)
     .card padding              24px
     .tile padding              12px 14px
     box-shadow                 rgba(255,255,255,.02) 0 1px 0,
                                rgba(0,0,0,.45) 0 10px 34px   (Layer A --shadow)
     .app background            rgb(7, 16, 27)    = #07101b   (Layer B --bg)
     prose                      Inter 15.5px / 1.6
     .tile .tv                  JetBrains Mono 21px / 700
     .tile .tl                  JetBrains Mono 10px / 400, uppercase, .08em
     accent                     rgb(39, 226, 129) = #27e281   (Layer B --accent)

   NOTE ON THE ACCENT. Layer A authors --accent:#22e07a; Layer B overrides it to
   #27e281 and Layer B wins, so production paints #27e281. Both values are kept
   below exactly where production keeps them, so the computed accent here equals
   the computed accent there. Chasing the authored value instead of the painted
   one would have re-introduced drift under the name of fixing it.

   NOTE ON FONTS. Production pulls Inter from the Google Fonts CDN. The
   prototype is required to be self-contained (no network at all), so the two
   families are self-hosted below from v2/fonts/*.woff2 (latin subsets, 80 KB
   for the pair). Same families, same stacks, no CDN.

   This file styles NOTHING on its own beyond the handful of global affordances
   mmr-theme.css also provides (selection, focus ring, scrollbar). Components
   stay in the page that owns them, so production remains the structural source
   of truth and this layer stays a vocabulary rather than a second skin.
   ============================================================================ */

/* ---------- self-hosted equivalents of production's webfonts ---------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/inter-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:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/jetbrains-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;
}

/* ---------- Layer A — as authored in market-dashboard.html :root ---------- */
:root{
  --bg:#070d1a; --surface:#0d1526; --surface-2:#111b30; --surface-3:#1a2438;
  --border:#1d2a45; --border-soft:#152036;
  --text:#e8eef8; --muted:#8b9bb5; --faint:#5a6a85;
  --accent:#22e07a; --accent-2:#4ce88f; --accent-soft:rgba(34,224,122,.13);
  --bull:#22e07a; --bull-soft:rgba(34,224,122,.14);
  --bear:#ff5d6c; --bear-soft:rgba(255,93,108,.14);
  --ctx:#9184e0; --ctx-soft:rgba(145,132,224,.15);
  --calm:#4da3ff; --calm-soft:rgba(77,163,255,.15);
  --shadow:0 1px 0 rgba(255,255,255,.02),0 10px 34px rgba(0,0,0,.45);
  --font-display:"Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Arial,sans-serif;
  --font-mono:"Cascadia Code","Cascadia Mono","Consolas",ui-monospace,SFMono-Regular,monospace;
}

/* ---------- Layer B — as authored in mmr-theme.css (:root:root wins) ---------- */
:root:root{
  --bg:#07101b; --bg2:#0a1523;
  --surface:#0e1a2b; --surface2:#111f33; --surface-2:#111f33; --surface-3:#16243a; --panel:#0e1a2b;
  --border:#21324d; --border2:#2b4165; --border-soft:#1a2942; --line:#21324d;
  --text:#f2f6fb; --muted:#9babc2; --faint:#6f829c;
  --accent:#27e281; --accent-2:#4ce89a; --accent-soft:rgba(39,226,129,.13);
  --bull:#27e281; --bull-soft:rgba(39,226,129,.14); --green:#27e281; --teal:#2fe6bd;
  --bear:#ff6876; --bear-soft:rgba(255,104,118,.14); --red:#ff6876;
  --warn:#ffb547; --amber:#ffb547;
  --calm:#5aa7ff; --blue:#5aa7ff; --ctx:#9184e0;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --sans:var(--font-sans); --mono:var(--font-mono);
  /* radius scale (landing language). MAR-66: 14px cards supersede the older
     square-corner preference — approved, and it is what production paints. */
  --r-card:14px; --r-lg:20px; --r-pill:999px; --r-input:10px; --r-sm:10px;
}

/* ---------- measured production metrics, named so pages stop guessing ----------
   Every value below is lifted from a real production rule; the line number is
   the rule inside market-dashboard.html's single <style> block that owns it. */
:root:root{
  --prose-size:15.5px;                  /* .app  font-size            (L41) */
  --prose-leading:1.6;                  /* .app  line-height          (L41) */
  --pad-card:clamp(16px,2.6vw,24px);    /* .card padding             (L114) */
  --pad-panel:20px;                     /* .erc-panel padding        (L338) */
  --pad-tile:12px 14px;                 /* .tile padding             (L168) */
  --pad-cell:9px 11px;                  /* .cf-tile padding           (L85) */
  --tv-size:21px;                       /* .tile .tv font-size       (L170) */
  --tl-size:10px;                       /* .tile .tl font-size       (L169) */
  --tl-tracking:.08em;                  /* .tile .tl letter-spacing  (L169) */
  --gap-tile:10px;                      /* .tiles gap                (L167) */
  --gap-card:16px;                      /* .grid gap / .erc-panel mb (L115) */
  --shell-max:1180px;                   /* .shell max-width           (L43) */
  --hairline:rgba(33,50,77,.5);         /* .erc-table td border      (L420) */
  --row-hover:rgba(255,255,255,.035);   /* table row hover           (L557) */
}

/* ---------- MAR-78: the production COMPONENT metrics ----------------------
   The layer above describes production's *ground* — surfaces, type scale,
   spacing. It was enough for a page that only had to look like production.
   It is not enough for a page that has to reuse production's components.

   The Workspace merged in four data sections that production already renders
   well — the quarterly history, the five-year comparison, the moat assessment
   and the score construction — and each of them was re-drawn in the prototype's
   own flat style instead of production's. Re-drawing is the bug. So every
   number production's own .erc-* / .sb-* / .moat-* / .cf-* rules carry is
   lifted here, once, and the components below are expressed in these names.

   Source is market-dashboard.html's single <style> block; the line number after
   each token is the rule that owns it there. market-dashboard.html is read-only
   in this work — nothing below changes it, these are transcriptions.

   ONE DELIBERATE DEVIATION, stated rather than hidden: production authors these
   components with square corners, because mmr-theme.css's radius list reaches
   .erc-panel and .erc-scorebox but not the smaller parts. This page keeps the
   14px/10px rounding language on every container it draws. Radius is the only
   property that differs; type, colour, spacing, weight and emphasis are 1:1.  */
:root:root{
  /* panel heading — .erc-h                                          (L322) */
  --erc-h-size:14px; --erc-h-weight:700;
  /* the "· section name" qualifier production puts beside a heading  (L1983) */
  --erc-hq-size:12.5px; --erc-hq-weight:600;
  /* table — table.erc-table / th / td                          (L441,442,443) */
  --erc-th-size:11px; --erc-th-weight:700; --erc-th-pad:9px 10px;
  --erc-td-size:13.5px; --erc-td-pad:11px 10px;
  --erc-table-min:660px;
  /* the four semantic cell classes                                  (L445) */
  --esc-size:15px; --esc-weight:900; --ename-weight:800;
  /* .echip — production's inline badge                              (L446) */
  --echip-size:11px; --echip-weight:800; --echip-pad:2px 8px;
  --chip-bull-bg:rgba(39,226,129,.14);
  --chip-bear-bg:rgba(255,104,118,.14);
  --chip-warn-bg:rgba(255,181,71,.14);
  --chip-calm-bg:rgba(90,167,255,.14);
  /* .erc-note — the blue callout                                    (L522) */
  --note-size:12px; --note-pad:8px 12px; --note-gap:10px;
  --note-bg:rgba(90,167,255,.10); --note-border:rgba(90,167,255,.25);
  /* .erc-scorebox and its parts                                  (L76..L83) */
  --sb-pad:12px 14px; --sb-t-size:10px; --sb-t-tracking:.05em;
  --sb-f-size:14.5px; --sb-p-size:12.5px; --sb-r-size:12px;
  --sb-pill-size:11px; --sb-pill-pad:1px 6px;
  /* .moat-*                                                    (L569..L581) */
  --moat-score-size:42px; --moat-score-weight:900;
  --moat-meta-size:12.5px; --moat-meta-leading:1.7;
  --moat-sub-size:10px; --moat-sub-tracking:.06em;
  --moat-rel-size:9px; --moat-rel-weight:800; --moat-rel-tracking:.06em;
  --moat-top-gap:18px;
  /* .cf-* — production's chart-card chrome                      (L67..L74) */
  --cf-tk-size:9.5px; --cf-tk-tracking:.04em;
  --cf-tv-size:17px; --cf-tv-weight:700;
  --cf-ctitle-size:10.5px; --cf-ctitle-tracking:.03em;
  --cf-box-pad:10px; --cf-box-bg:rgba(7,13,26,.35);
  --cf-tile-pad:9px 11px; --cf-gap:14px;
}

/* ---------- global affordances mmr-theme.css also provides ---------- */
html{scroll-behavior:smooth}
::selection{background:rgba(39,226,129,.28);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
*{scrollbar-color:#2b4165 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#22344f;border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#2b4165;background-clip:content-box}
h1,h2,h3{letter-spacing:-.02em}
img{max-width:100%;height:auto}
table{max-width:100%}