/* ============================================================
   The Trading Paper — one look for every page (#26)
   Loaded last in <head> of every page. `html:root` outranks each
   page's own `:root` block, so old per-page palettes may stay in
   place: this file decides the colours, light and dark.
   ============================================================ */

html:root{
  --bg:#f7f3ec; --paper:#fffdf7; --ink:#1a1a1a; --muted:#6b6b6b;
  --border:#d4cfc4; --line:#d4cfc4; --rule:#1a1a1a; --cream:#ece6d8;
  --red:#b91c1c; --red-bg:rgba(185,28,28,.07);
  --green:#166534; --green-bg:rgba(22,101,52,.08);
  --gold:#8b6914; --gold-bg:rgba(139,105,20,.09); --accent:#8b6914;
  --blue:#1d4ed8; --blue-bg:rgba(29,78,216,.07);
  --purple:#7c3aed; --purple-bg:rgba(124,58,237,.08);
  color-scheme:light;
}
html:root[data-theme="dark"]{
  --bg:#121315; --paper:#1a1c20; --ink:#e6e8ec; --muted:#9ea4b0;
  --border:#2d3139; --line:#2d3139; --rule:#404652; --cream:#202227;
  --red:#ef4444; --red-bg:rgba(239,68,68,.10);
  --green:#22c55e; --green-bg:rgba(34,197,94,.10);
  --gold:#d4a72c; --gold-bg:rgba(212,167,44,.10); --accent:#d8af4e;
  --blue:#60a5fa; --blue-bg:rgba(96,165,250,.10);
  --purple:#a78bfa; --purple-bg:rgba(167,139,250,.12);
  color-scheme:dark;
}

/* Same paper and the same reading face on every page; headlines stay serif. */
html, html body{background:var(--bg); color:var(--ink)}
html body{font-family:'Noto Sans Georgian',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}

/* Moving between pages: a short cross-fade instead of a blank flash
   (Chrome / Edge / Safari 18+; other browsers just load as before). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* One header on every page (#28): masthead.js renders it, and the
   Portfolio AI tabs sit in its sub-row — so the app's own top bar hides.
   Its cloud/device status strip (.pai-mode) stays. */
html body:has(header.tpm) .pai-nav-in{display:none}

/* Phones: the section row scrolls sideways in one line, like the main tabs. */
@media (max-width:720px){
  html body nav.tpm-subnav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    padding-left:14px;padding-right:14px;gap:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body nav.tpm-subnav::-webkit-scrollbar{display:none}
  html body nav.tpm-subnav a{flex:0 0 auto;white-space:nowrap}
}

/* One page width and one page-title size (#30). The header spans the window;
   every page's content column is the same width under it. */
html:root{--page-w:1200px}
html body > :is(.wrap, .pwrap, main.container){max-width:var(--page-w);margin-left:auto;margin-right:auto}
html body > :is(.wrap, .pwrap) h1{font-size:clamp(28px,3.2vw,38px);line-height:1.12;letter-spacing:-.5px}

/* Embedded widgets (TradingView iframes) keep the browser's default scheme,
   the same as the document inside them — otherwise the page's dark scheme
   makes the browser paint an opaque white backdrop behind them (#38). */
html:root iframe{color-scheme:normal}