/* ============================================================
   Cantillon Research: site theme (redesign phase 1, Oct 2026)

   Linked on every READING page by scripts/inject_chrome.py, just
   before </head>, so it loads after each page's inline <style>.
   Tool pages (terminal, scan, screen, scanner, avwap-scanner) do
   NOT get this file and keep their original dark look.

   Light is the default. A visitor who picks dark in the menu gets
   <html data-cr-theme="dark">, which keeps each page's original
   dark palette but with the readability fixes below.

   Every light rule is scoped to :root:not([data-cr-theme="dark"]).
   That selector out-ranks a page's own :root block, so it wins
   whatever the source order. Edit tokens here, not in pages.
   ============================================================ */

@font-face{
  font-family:"Schibsted Grotesk"; font-style:normal; font-display:swap; font-weight:400 900;
  src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2-variations"),
      url(/assets/fonts/schibsted-grotesk-latin-wght-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk"; font-style:normal; font-display:swap; font-weight:400 900;
  src:url(/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Schibsted Grotesk"; font-style:italic; font-display:swap; font-weight:400 900;
  src:url(/assets/fonts/schibsted-grotesk-latin-wght-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk"; font-style:italic; font-display:swap; font-weight:400 900;
  src:url(/assets/fonts/schibsted-grotesk-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── 1. Type, both themes ─────────────────────────────────
   One family for everything. The old trio (DM Serif Display,
   DM Sans, IBM Plex Mono) is what read as "generated". */
:root{
  --cr-font:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:var(--cr-font);
  --serif:var(--cr-font);
  --mono:var(--cr-font);
  --display:var(--cr-font);
  --body:var(--cr-font);
}
html{ font-size:17px; -webkit-text-size-adjust:100%; }
@media (max-width:640px){
  html{ font-size:16px; }
  /* Nothing may push the page sideways on a phone. Wide tables scroll. */
  body{ overflow-x:hidden; }
  table{ display:block; max-width:100%; overflow-x:auto; }
  /* Homepage book banner: an inline two-column grid that never stacked. */
  #book > div{ grid-template-columns:1fr !important; gap:2rem !important; }
}
body{
  font-family:var(--cr-font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Small caps-lock labels with wide tracking were the single
   biggest readability problem. Sentence case everywhere. */
body *{ text-transform:none !important; letter-spacing:normal !important; font-variant-numeric:normal !important; }

/* Headings: weight carries the hierarchy now, not an italic
   gold word in a display serif. */
h1,h2,h3,h4,h5,h6{ font-family:var(--cr-font) !important; font-weight:750; text-wrap:balance; }
h1{ letter-spacing:-.022em !important; line-height:1.1; }
h2{ letter-spacing:-.015em !important; line-height:1.2; }
:is(h1,h2,h3,h4) :is(em,i){ font-style:normal !important; }

/* Numbers line up in tables and stat blocks. */
/* No tabular figures: in Schibsted Grotesk the tnum feature also widens
   the full stop and colon, so "56.8%" prints as "56 . 8%". */
p, li{ font-family:var(--cr-font); }

/* Inline font stacks written into the paywall gate and older pages. */
[style*="IBM Plex Mono" i], [style*="DM Serif" i], [style*="DM Sans" i],
[style*="font-family:var(--mono)" i], [style*="font-family: var(--mono)" i]{ font-family:var(--cr-font) !important; }

/* ── 2. Light palette (default) ───────────────────────── */
:root:not([data-cr-theme="dark"]){
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-2:#F6F7F9;
  --bg-3:#F1F3F6;
  --bg-4:#E9ECF1;
  --bg2:#F6F7F9; --bg3:#F1F3F6;
  --surface:#FFFFFF; --surface2:#F6F7F9; --surface-2:#F6F7F9; --surface-3:#F1F3F6;
  --card:#FFFFFF; --card2:#F6F7F9; --panel:#FFFFFF; --panel-2:#F6F7F9;

  --border:#DCE0E6;
  --line:#DCE0E6; --line-2:#E9ECF1;
  --border-gold:#C9D3E3; --gold-border:#C9D3E3;

  --text-1:#121722;
  --text-2:#3B4352;
  --text-3:#5E6776;
  --text:#121722; --text2:#3B4352; --text3:#5E6776; --sub:#3B4352; --subtext:#3B4352;
  --muted:#5E6776; --text-muted:#5E6776; --dim:#5E6776;
  --ink:#121722; --ink-2:#3B4352; --ink-3:#5E6776;

  /* Gold is retired as the accent. The name stays because 340
     pages reference var(--gold). */
  --gold:#1B3A6B;
  --gold-light:#2A5294;
  --gold2:#2A5294;
  --gold-dim:rgba(27,58,107,.08);
  --gold-subtle:rgba(27,58,107,.05);
  --accent:#1B3A6B; --accent-ink:#FFFFFF; --accent-soft:rgba(27,58,107,.08);
  --blue:#1B3A6B; --cyan:#0B6E8A; --cyan-dim:rgba(11,110,138,.08); --cyan-bdr:rgba(11,110,138,.3);

  /* Market colours carry meaning: green buy, red sell, amber wait. */
  --bull:#0E7A4F; --green:#0E7A4F; --pos:#0E7A4F;
  --bear:#B42318; --red:#B42318; --neg:#B42318;
  --warn:#9A5800; --amber:#9A5800; --orange:#A84B0C;
  --purple:#6B3FA0; --neutral:#5E6776;
}
:root:not([data-cr-theme="dark"]) body{ background:#FFFFFF; color:#121722; }

/* Literal colours that pages hard-code instead of using tokens.
   Each block names the classes found in the 26 Oct 2026 audit. */
:root:not([data-cr-theme="dark"]) :is(
  .cta-form button, .btn-primary, .sub-btn, .nav-subscribe, .nav-sub, .nav-cta,
  .members-cta a.cta-btn, .paywall-btn, .email-gate-submit, .cta-btn, .login-btn,
  .modal-btn, .btn.solid, .bgw-btn, .gate-btn, .btn-login, .paywall-unlock-btn
){
  background:#1B3A6B !important; color:#FFFFFF !important; border-color:#1B3A6B !important;
}
:root:not([data-cr-theme="dark"]) :is(
  .cta-form button, .btn-primary, .sub-btn, .nav-subscribe, .members-cta a.cta-btn,
  .paywall-btn, .email-gate-submit, .cta-btn, .login-btn, .modal-btn, .btn.solid, .bgw-btn
):hover{ background:#2A5294 !important; }

:root:not([data-cr-theme="dark"]) :is(.cta-form input, .email-gate input, input[type="email"], input[type="text"], input[type="search"], select, textarea){
  background:#FFFFFF; color:#121722; border-color:#B9C0CB;
}
:root:not([data-cr-theme="dark"]) ::placeholder{ color:#6B7380; }

/* Faint white hairlines vanish on white. Give every table row
   and divider a real rule. */
:root:not([data-cr-theme="dark"]) :is(td, th){ border-color:#E3E6EB; }
:root:not([data-cr-theme="dark"]) :is(.data-table th, thead th){ background:#F6F7F9; color:#3B4352; }
:root:not([data-cr-theme="dark"]) hr{ border-color:#DCE0E6; }

/* Amber and orange text that was tuned for black. */
:root:not([data-cr-theme="dark"]) :is(
  .setup-val.warn, .tag-warn, .stat-val.warn, .regime-val.warn, .kl-tag.watch,
  .breadth-val.warn, .inst-stat-val.warn, .tag.warn, .gate-tag.wait
){ color:#9A5800 !important; }
:root:not([data-cr-theme="dark"]) :is(
  .delta-text .spec, .inst-name .spec-text, .regime-val.spec, .inst-stats .spec,
  .inst-levels .spec, .s-spec
){ color:#A84B0C !important; }
:root:not([data-cr-theme="dark"]) :is(.dt-then.bear, .v13-score-neg){ color:#B42318 !important; }
:root:not([data-cr-theme="dark"]) .dt-then.bull{ color:#0E7A4F !important; }
:root:not([data-cr-theme="dark"]) :is(.options-cta-label, .tag-purple){ color:#6B3FA0 !important; }

/* Dark panels hard-coded inside otherwise token-driven pages. */
:root:not([data-cr-theme="dark"]) :is(
  .options-cta, .callout, .hero-card, .one-thing, .verdict-header, .l1-wrap,
  .paywall-card, .modal, .about-credential, .demo-bar
){ background:#F6F7F9 !important; color:#121722; }
:root:not([data-cr-theme="dark"]) :is(.tab-bar, .header){ background-color:#FFFFFF; }
:root:not([data-cr-theme="dark"]) .options-cta a.cta-btn{ background:#6B3FA0 !important; color:#FFFFFF !important; }

/* Text explicitly set to white on a handful of report pages. */
:root:not([data-cr-theme="dark"]) :is(
  .kpi-value, td.num, .scenario-title, .check-q, .verdict p, .opt-title, .hero-card
){ color:#121722 !important; }

/* Badges that sat on black: keep the tint, darken the ink. */
:root:not([data-cr-theme="dark"]) :is(.free-badge){ color:#0E7A4F !important; background:#E3F3EB !important; border-color:#9FD3B9 !important; }
:root:not([data-cr-theme="dark"]) :is(.elite-badge, .tag.gold){ color:#1B3A6B !important; background:#E7EDF7 !important; border-color:#C9D3E3 !important; }

/* Gold rule and dot decorations in front of eyebrows and section
   heads. These were part of the "generated" look. */
:root:not([data-cr-theme="dark"]) :is(
  .section-head, .brief-label, .eyebrow, .hero-eyebrow, .section-label, .report-eyebrow
)::before{ background:#1B3A6B !important; }

/* Locked-cell tint and the gold-tinted cards and callouts. */
:root:not([data-cr-theme="dark"]) .locked{ background:#F1F3F6 !important; color:#5E6776 !important; }
:root:not([data-cr-theme="dark"]) :is(.one-sentence, .cta, .paywall-gate, .decision-tree){
  border-color:#C9D3E3 !important;
}
:root:not([data-cr-theme="dark"]) .one-sentence{ background:#F6F8FB !important; }

/* Chart captures are dark TradingView screenshots. Frame them so
   they read as pictures on a white page. */
:root:not([data-cr-theme="dark"]) :is(figure.chart img, .chart img, .term-img){
  border-radius:8px; border:1px solid #DCE0E6;
}

/* Links in running text. */
:root:not([data-cr-theme="dark"]) :is(p, li, td) a:not([class]){ color:#1B3A6B; text-decoration-color:rgba(27,58,107,.35); text-underline-offset:2px; }

/* Inline colours. 230 pages carry the free-capture block and the
   paywall gate with hard-coded dark-theme colours in style="". */
:root:not([data-cr-theme="dark"]) :is([style*="background:#0f0f11" i],[style*="background: #0f0f11" i]){ background:#FFFFFF !important; }
:root:not([data-cr-theme="dark"]) :is([style*="color:#f0ede6" i],[style*="color: #f0ede6" i]){ color:#121722 !important; }
:root:not([data-cr-theme="dark"]) :is([style*="background:#c5a250" i],[style*="background: #c5a250" i]){ background:#1B3A6B !important; color:#FFFFFF !important; }
:root:not([data-cr-theme="dark"]) :is([style*="color:#c5a250" i],[style*="color: #c5a250" i],[style*="rgba(201,168,76,1)" i]):not([style*="background:#c5a250" i]){ color:#1B3A6B !important; }
:root:not([data-cr-theme="dark"]) :is([style*="color:#5a5753" i],[style*="color: #5a5753" i],[style*="color:#9a9690" i],[style*="color: #9a9690" i],[style*="color:#888" i],[style*="color:#666" i],[style*="color:#aaa" i]){ color:#5E6776 !important; }
:root:not([data-cr-theme="dark"]) :is([style*="rgba(255,255,255,0.18)" i],[style*="rgba(255,255,255,0.08)" i]){ border-color:#DCE0E6 !important; }
:root:not([data-cr-theme="dark"]) :is([style*="rgba(197,162,80,0.4)" i],[style*="rgba(201,168,76,0.3)" i]){ border-color:#C9D3E3 !important; }
:root:not([data-cr-theme="dark"]) [style*="rgba(201,168,76,0.08)" i]{ background:#F6F8FB !important; }
:root:not([data-cr-theme="dark"]) :is([style*="color:#2dd47a" i],[style*="color: #2dd47a" i],[style*="color:#4caf85" i],[style*="color: #4caf85" i],[style*="color:#27ae60" i]){ color:#0E7A4F !important; }
:root:not([data-cr-theme="dark"]) :is([style*="color:#c0392b" i],[style*="color: #c0392b" i],[style*="color:#c9504c" i],[style*="color: #c9504c" i],[style*="color:#e02e2e" i],[style*="color:#f87171" i],[style*="color:#ff3d5a" i]){ color:#B42318 !important; }
:root:not([data-cr-theme="dark"]) :is([style*="color:#e5a800" i],[style*="color: #e5a800" i]){ color:#9A5800 !important; }
:root:not([data-cr-theme="dark"]) #freeEmailInput{ background:#FFFFFF !important; color:#121722 !important; }

/* research.html macro widgets: bright greens and reds tuned for black. */
:root:not([data-cr-theme="dark"]) :is(
  .macro-layer-state.on, .macro-layer-state.improving, .macro-widget-signal.bull, .macro-widget-signal.bull-strong,
  .macro-widget-signal.improving, .macro-widget-signal.fired, .sc-pct.gn, .fbr-off, .sp-pos, .ry-hero.rp, .pc-hero.normal
){ color:#0E7A4F !important; }
:root:not([data-cr-theme="dark"]) :is(
  .macro-layer-state.off, .macro-widget-signal.bear, .macro-widget-signal.bear-strong, .sc-pct.rd, .sp-neg,
  .ry-hero.rn, .pc-hero.elevated, .macro-regime-chip
){ color:#B42318 !important; }
:root:not([data-cr-theme="dark"]) :is(.macro-stat-label, .macro-widget-title, .macro-layer-name){ color:#5E6776 !important; }
:root:not([data-cr-theme="dark"]) .post-type-tag.elite{ color:#1B3A6B !important; }

/* Smaller one-page fixes found in the render check. */
:root:not([data-cr-theme="dark"]) :is(.logo-mark, .nav-logo-mark){ background:#C5A250 !important; color:#121722 !important; }
:root:not([data-cr-theme="dark"]) :is(.tag.free, .lh-exp){ color:#0E7A4F !important; }
:root:not([data-cr-theme="dark"]) .lh-con{ color:#B42318 !important; }
:root:not([data-cr-theme="dark"]) :is(.dt-then.warn, .lh-stb){ color:#9A5800 !important; }
:root:not([data-cr-theme="dark"]) .g-tag-flow{ color:#1B3A6B !important; background:#E7EDF7 !important; }
:root:not([data-cr-theme="dark"]) .pro-gate{ background:rgba(255,255,255,.82) !important; }
:root:not([data-cr-theme="dark"]) :is(.pro-gate-label, .pro-unlock-btn){ color:#1B3A6B !important; }

/* SVG charts (Nordic Files and others) draw with presentation
   attributes tuned for black. CSS out-ranks those attributes. */
svg text[font-family]{ font-family:var(--cr-font); }
:root:not([data-cr-theme="dark"]) :is([fill="#f0ede6" i],[fill="#e8e4dc" i]){ fill:#121722; }
:root:not([data-cr-theme="dark"]) :is([fill="#9a9690" i],[fill="#7a7773" i],[fill="#5a5753" i]){ fill:#5E6776; }
:root:not([data-cr-theme="dark"]) [fill="#c5a250" i]{ fill:#1B3A6B; }
:root:not([data-cr-theme="dark"]) :is([fill="#0a0a0b" i],[fill="#0f0f11" i],[fill="#141417" i]){ fill:#F1F3F6; }
:root:not([data-cr-theme="dark"]) [stroke="#c5a250" i]{ stroke:#1B3A6B; }

/* Today's Scan (scan.html): the Liquid 100 board was coloured for black. */
:root:not([data-cr-theme="dark"]) :is(.board.l1 th, .board.l1 td.tk, .tk){ color:#1B3A6B !important; }
:root:not([data-cr-theme="dark"]) .board.l1 td.tk{ font-weight:650; }
:root:not([data-cr-theme="dark"]) :is(.l1-bear, .l1-short){ color:#B42318 !important; }
:root:not([data-cr-theme="dark"]) .l1-coil{ color:#2A5294 !important; }

/* ── 3. Dark theme (opt-in): the page's own palette, readable ── */
:root[data-cr-theme="dark"]{
  color-scheme:dark;
  --text-1:#F2F0EB;
  --text-2:#C9C5BE;
  --text-3:#A7A39C;
  --muted:#A7A39C; --text-muted:#A7A39C;
}

/* ── 4. Theme switch in the nav ───────────────────────── */
nav.cr-nav .cr-theme{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; margin:0 .15rem;
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text-2); cursor:pointer;
}
nav.cr-nav .cr-theme:hover{ color:var(--text-1); }
nav.cr-nav .cr-theme svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
nav.cr-nav .cr-theme .cr-sun{ display:none; }
:root[data-cr-theme="dark"] nav.cr-nav .cr-theme .cr-sun{ display:block; }
:root[data-cr-theme="dark"] nav.cr-nav .cr-theme .cr-moon{ display:none; }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}
/* Link from a File page back to its deep dive (inject_chrome.py) */
.cr-deeplink{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin:1rem 0 1.4rem;padding:.85rem 1.1rem;border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;background:var(--bg-2);font-size:.97rem;color:var(--text-2)}
.cr-deeplink b{color:var(--text-1);font-weight:700}
.cr-deeplink a{font-weight:650;white-space:nowrap}

/* Gate note under the deep dive sign-up form: readable in both themes */
[style*="color:#5a5753"]{color:var(--text-3)!important}

/* CR-RELATED: "More Cantillon Files" on every File page (scripts/file_seo.py, 2 Nov 2026) */
.cr-related{margin:2.6rem 0 1.4rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.cr-related h2{font-size:1.2rem;line-height:1.3;margin:0 0 .9rem}
.cr-related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 1.4rem}
.cr-related li{display:flex;flex-direction:column;padding:.6rem 0;border-bottom:1px solid var(--border)}
.cr-related li a{font-weight:500;color:var(--gold)}
.cr-related li a span{color:var(--text-3);font-weight:400;margin-left:.35rem}
.cr-related small{color:var(--text-3);font-size:.85rem}
.cr-related-hub{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}