/* The site header — one implementation, used by Portfolio, Macro and Valuation.
 *
 * It used to be two. Macro and Valuation shared the `.macro-nav` block in
 * macro.css; Portfolio carried a second copy inline in its own <style>, under a
 * different vocabulary (`.utility-nav`, `.nav-icon`, `.btn-refresh`,
 * `.live-badge`) whose numbers had drifted away from it: a 58px bar instead of
 * 60px, a 32px logo instead of 34px, a taller-but-lighter refresh pill, a
 * market-status pill that vanished below 1000px, a pulsing Markets button, and
 * the language switcher mounted in the top bar rather than in the section row.
 * The three screens looked alike without being alike, and every header fix had
 * to be made twice — which is how they drifted in the first place.
 *
 * The geometry, the controls and the section-navigation row are now stated once,
 * here, at the dimensions Macro and Valuation already used. Changing a header
 * dimension changes all three sections, and a page that wants a different header
 * has to say so somewhere a reviewer can see it.
 *
 * Only three things are allowed to differ between the sections: the subtitle
 * under the brand, which tab carries aria-current, and the live values each page
 * puts in the clock and the market-status pill.
 */

/* ── Geometry ────────────────────────────────────────────────────────────────
   The only declaration of these three anywhere. Page stylesheets read them for
   their own sticky offsets and scroll margins; none of them sets them. */
html { --utility-nav-height:60px; --section-nav-height:54px; --site-header-height:114px; }

/* ── The header's own palette ────────────────────────────────────────────────
   Portfolio and Macro carry page palettes that are close but not equal — a
   slightly different gold, a slightly different muted, a nav background two
   hundredths apart in alpha. The chrome cannot be identical while it reads from
   those, so it reads from these instead, and each page keeps its own body
   palette untouched. Values are Macro's, which is the reference. */
[data-theme="dark"] {
  --site-header-nav:rgba(15,17,23,.9); --site-header-nav-border:rgba(60,60,80,.65);
  --site-header-border:#414154; --site-header-text:#f2f2f7; --site-header-text2:#c5c5d5;
  --site-header-muted:#a0a0b7; --site-header-accent:#f59e0b; --site-header-accent-rgb:245,158,11;
  --site-header-toggle:#38384a; --site-header-knob:#f2f2f7;
  --site-header-paper:#23232f; --site-header-line:#2f2f3e; --site-header-shadow:rgba(0,0,0,.58);
  --site-header-red:#ef4444; --site-header-green:#22c55e;
}
[data-theme="light"] {
  --site-header-nav:rgba(240,233,218,.92); --site-header-nav-border:rgba(200,188,170,.82);
  --site-header-border:#c3b7a5; --site-header-text:#2b2112; --site-header-text2:#5c503e;
  --site-header-muted:#766957; --site-header-accent:#a13f0b; --site-header-accent-rgb:161,63,11;
  --site-header-toggle:#c7bcaa; --site-header-knob:#2b2112;
  --site-header-paper:#fbf7ee; --site-header-line:#d6ccbd; --site-header-shadow:rgba(46,34,16,.18);
  --site-header-red:#b91c1c; --site-header-green:#15803d;
}

/* Controls that already live in their own shared stylesheets — the world clock
   in header-clock.css, the language switcher in i18n.css — are written against
   the ordinary page tokens. Rebinding those tokens inside the two header bars
   points them at the header palette without either file having to know about it,
   and without touching anything below the header. */
.site-header, .site-section-nav {
  --border:var(--site-header-line);
  --border2:var(--site-header-border);
  --text:var(--site-header-text);
  --text2:var(--site-header-text2);
  --muted:var(--site-header-muted);
  --gold:var(--site-header-accent);
  --gold-rgb:var(--site-header-accent-rgb);
  --paper:var(--site-header-paper);
  --shadow:var(--site-header-shadow);
  --red:var(--site-header-red);
}

/* ── The utility bar ─────────────────────────────────────────────────────────── */
.site-header { position:sticky; top:0; z-index:80; height:var(--utility-nav-height); border-bottom:1px solid var(--site-header-nav-border); background:var(--site-header-nav); backdrop-filter:blur(16px); color:var(--site-header-text); }
.site-header-inner { width:100%; max-width:1440px; height:100%; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-header-brand { min-width:0; display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.site-header-logo { width:34px; height:34px; flex:0 0 34px; overflow:hidden; border-radius:9px; box-shadow:0 4px 14px -8px var(--site-header-shadow); }
.site-header-logo img { display:block; width:100%; height:100%; object-fit:cover; }
.site-header-brand-copy { min-width:0; display:block; overflow:hidden; }
.site-header-title { display:block; color:var(--site-header-text); font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:700; letter-spacing:.035em; white-space:nowrap; }
.site-header-sub { display:block; margin-top:1px; color:var(--site-header-muted); font-family:'IBM Plex Sans',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.site-header-actions { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; }

/* ── Utility controls ────────────────────────────────────────────────────────── */
.theme-toggle { display:flex; align-items:center; gap:7px; border:0; background:transparent; color:inherit; cursor:pointer; }
.theme-toggle-label { min-width:27px; color:var(--site-header-muted); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.toggle-track { position:relative; width:44px; height:25px; flex:0 0 44px; border:1px solid var(--site-header-border); border-radius:13px; background:var(--site-header-toggle); }
.toggle-knob { position:absolute; top:3px; left:3px; width:17px; height:17px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--site-header-knob); box-shadow:0 1px 4px rgba(0,0,0,.28); font-size:14px; line-height:1; transition:transform .22s; }
[data-theme="light"] .toggle-knob { transform:translateX(19px); }

/* The quiet pill (market status) and the gold one (Markets) are the same control
   with a different border, so the shape is described once. */
.site-header-button, .site-header-badge { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 11px; border:1px solid var(--site-header-border); border-radius:999px; background:rgba(128,128,128,.05); color:var(--site-header-text2); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.site-header-button { border-color:var(--site-header-accent); color:var(--site-header-accent); cursor:pointer; }
/* The market-status dot. Its colour is the only thing that distinguishes one
   state from another, it is set by class rather than inline so no section can
   paint its own, and it does not animate — a pulse on one section's dot and not
   the others' is the same control reading as two different controls. */
.site-header-badge-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--site-header-red); animation:none; }
.site-header-badge.is-open .site-header-badge-dot { background:var(--site-header-green); }
.site-header-badge.is-extended .site-header-badge-dot { background:var(--site-header-accent); }

.site-header-refresh { min-height:36px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--site-header-border); border-radius:999px; background:rgba(128,128,128,.05); color:var(--site-header-text2); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.04em; cursor:pointer; }
.site-header-refresh:hover { border-color:var(--site-header-accent); color:var(--site-header-accent); }
.site-header-refresh.is-loading span:first-child { animation:site-header-spin .8s linear infinite; }
@keyframes site-header-spin { to { transform:rotate(360deg); } }

/* ── The section-navigation row ──────────────────────────────────────────────── */
.site-section-nav { position:sticky; top:var(--utility-nav-height); z-index:70; height:var(--section-nav-height); background-color:var(--bg-solid,var(--bg)); background-image:var(--bg-grad,var(--bg)); background-attachment:fixed; transition:background-color .25s; color:var(--site-header-text); }
.site-section-inner { width:100%; max-width:1440px; height:100%; margin:0 auto; padding:12px 20px 0; display:flex; align-items:flex-start; justify-content:flex-start; }
.site-section-links { width:380px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:stretch; gap:0; padding:4px; border:1px solid var(--site-header-border); border-radius:12px; background:rgba(128,128,128,.035); }
.site-section-links a { position:relative; min-width:0; min-height:32px; display:flex; align-items:center; justify-content:center; padding:0 12px; border:0; border-radius:9px; background:transparent; color:var(--site-header-muted); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; white-space:nowrap; transition:color .18s,background .18s; }
.site-section-links a::after { content:""; position:absolute; bottom:3px; left:50%; width:36px; height:2px; border-radius:999px; background:var(--site-header-accent); transform:translateX(-50%) scaleX(0); transition:transform .18s; }
.site-section-links a:hover { background:rgba(var(--site-header-accent-rgb),.055); color:var(--site-header-accent); }
.site-section-links a[aria-current="page"] { background:rgba(var(--site-header-accent-rgb),.1); color:var(--site-header-accent); font-weight:700; }
.site-section-links a[aria-current="page"]::after { transform:translateX(-50%) scaleX(1); }

/* ── Responsive ──────────────────────────────────────────────────────────────
   The same two breakpoints for all three sections. A page that collapses its own
   header earlier is a page whose header no longer matches the others. */
/* Between roughly 700 and 860 the bar is too narrow for the brand to sit at full
   size beside a full set of controls, and the brand starts to clip — sooner in
   French, where the language button is wider. Portfolio already had this step;
   it is shared now, so the three sections take it together. */
@media(min-width:701px) and (max-width:860px) {
  .site-header-inner { padding-inline:12px; gap:8px; }
  .site-header-brand { gap:8px; }
  .site-header-title { font-size:13px; }
  .site-header-sub,.theme-toggle-label { display:none; }
  .site-header-actions { gap:6px; }
}

@media(max-width:700px) {
  html { --utility-nav-height:60px; --section-nav-height:52px; --site-header-height:112px; }
  .site-header { z-index:180; }
  .site-header-inner { padding:0 8px; gap:5px; }
  .site-header-sub,.theme-toggle-label,.site-header-refresh span:last-child { display:none; }
  .site-header-title { font-size:13px; }
  .site-header-actions { gap:4px; }
  .site-header-refresh { width:36px; justify-content:center; padding:0; }
  .site-section-inner { padding:8px 8px 0; }
  .site-section-links { width:100%; }
  .site-section-links a { min-height:34px; padding-inline:6px; font-size:11px; }
  .site-header-button,.site-header-badge { min-height:34px; padding-inline:7px; font-size:11px; }
  .site-header-badge { width:28px; padding:0; }
  /* The pill collapses to its dot, but the words are the content of a
     role="status" live region: display:none would take them out of the
     accessibility tree and leave a screen reader with an empty status. Clipped
     to a 1px box out of flow instead, so the flex row still sees one child and
     the badge is the same 28px it was. */
  .site-header-badge-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
}

/* Below roughly 470 the brand words no longer fit beside a full row of controls
   — measured, in both languages — so the logo carries the brand on its own and
   stays a link home. The mark used to be dropped only under 390, which left the
   words clipped on the common 414-430 phone widths. */
@media(max-width:470px) {
  .site-header-brand-copy { display:none; }
  .site-header-logo { width:32px; height:32px; flex-basis:32px; }
}