/* ============ Journey Atlas: Surveyor's Line — tokens ============ */
    :root{
      --paper:#F3F5EC;
      --ink:#21342B;
      --ink-soft:#44564C;
      --gumleaf:#2D5E4B;
      --gumleaf-deep:#234C3C;
      --wattle:#F0B429;
      --contour:#C9BC9C;
      --creek:#3E6B85;
      --white:#FFFFFF;
      --paper-deep:#EAEDE0;
      --font-display:"Bricolage Grotesque","Barlow Condensed",sans-serif;
      --font-body:"Roboto","Atkinson Hyperlegible",system-ui,sans-serif;
      --font-data:"B612 Mono","Courier New",monospace;
      --radius-card:10px;
      --radius-plate:8px;
      --radius-section:14px;
      --wrap:920px;
      /* Type scale — one ramp for every page; stop re-declaring clamp()s. */
      --fs-hero:clamp(34px,6.5vw,46px);
      --fs-h2:clamp(24px,3.4vw,28px);
      --fs-h3:22px;
      --fs-body:17px;
      --fs-small:14.5px;
      --fs-micro:12.5px;
      /* Spacing scale */
      --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
      --sp-5:20px; --sp-6:26px; --sp-7:32px; --sp-8:40px;
      --ring:0 0 0 3px rgba(45,94,75,.22);
      /* Filled controls (white text sits on these) */
      --btn-bg:var(--gumleaf);
      --btn-hover:var(--gumleaf-deep);
    }

    /* ============ Dark theme — Australian flag palette ============ */
    /* Deep flag-navy ground, white type, red accents; the wattle-gold
       "you" marker stays — it's the star of the map. Set before first
       paint by the head script (stored choice, else OS preference). */
    :root[data-theme="dark"]{
      color-scheme:dark;
      --paper:#0C1836;
      --paper-deep:#14224A;
      --white:#17264E;            /* card surface: a raised navy */
      --ink:#F2F5FC;
      --ink-soft:#AEBBDD;
      --gumleaf:#E88F98;          /* links + accents: soft flag rose */
      --gumleaf-deep:#C9707A;
      --contour:#31417A;
      --creek:#8FB2E8;
      --ring:0 0 0 3px rgba(232,143,152,.26);
      /* Muted brick red so buttons read calm and white text keeps contrast */
      --btn-bg:#8E2F3C;
      --btn-hover:#75252F;
    }

    /* ============ Base ============ */
    *,*::before,*::after{ box-sizing:border-box; }
    body{
      margin:0; background:var(--paper); color:var(--ink);
      font:400 17px/1.6 var(--font-body);
      -webkit-font-smoothing:antialiased; min-height:100vh;
    }
    h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .4em; color:var(--ink); }
    p{ margin:0 0 1em; }
    a{ color:var(--gumleaf); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
    a:hover{ text-decoration-thickness:2px; }
    :focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; }
    img,svg{ max-width:100%; }
    .mono{ font-family:var(--font-data); font-size:.94em; }
    .eyebrow{ font:400 13px/1.4 var(--font-data); color:var(--ink-soft); letter-spacing:.04em; margin:0 0 10px; }
    .skip-link{ position:absolute; left:-9999px; top:0; background:var(--white); color:var(--ink); padding:10px 16px; z-index:30; }
    .skip-link:focus{ left:8px; top:8px; }

    /* ============ Header & nav ============ */
    .site-header{ border-bottom:1px solid var(--contour); background:var(--paper); }
    .header-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 14px; min-height:60px; max-width:var(--wrap); margin:0 auto; padding:0 16px; }
    .wordmark{ display:inline-flex; align-items:center; gap:7px; font:600 24px/1 var(--font-display); color:var(--ink); text-decoration:none; flex:none; }
    .wordmark-dot{ width:11px; height:11px; border-radius:50%; background:var(--wattle); border:2px solid var(--ink); flex:none; margin-top:2px; }
    .brand-lockup{ display:inline-flex; align-items:center; gap:8px; }
    .beta-tag{ font:700 10px/1 var(--font-data); letter-spacing:.1em; color:#5a3d00;
      background:var(--wattle); border:1px solid var(--ink); border-radius:5px; padding:3px 5px 2px;
      text-transform:uppercase; align-self:center; }
    .header-tools{ display:flex; align-items:center; gap:12px; }
    .plus-pill{ font:700 12px/1 var(--font-data); color:#001b10; background:var(--wattle); border:1.5px solid var(--ink); border-radius:99px; padding:5px 11px 6px; text-decoration:none; white-space:nowrap; }
    .plus-pill:hover{ filter:brightness(1.06); }
    /* Status colours: green = you're on Plus; red+amber = logged in, not yet. */
    .plus-pill.is-plus{ background:var(--btn-bg); color:#fff; border-color:var(--btn-hover); }
    .plus-pill.no-plus{ background:var(--wattle); color:#8a1c10; border-color:#b3261e; }
    .account-link{ font:700 14px/1.3 var(--font-body); color:var(--ink); }
    .avatar{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--btn-bg); color:#fff; font:600 17px/1 var(--font-display); text-decoration:none; flex:none; border:0; padding:0; cursor:pointer; box-shadow:none; }
    .avatar:hover{ background:var(--btn-hover); }
    .acct{ position:relative; }
    .acct-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:160px; background:var(--white);
      border:1px solid var(--contour); border-radius:10px; box-shadow:0 12px 32px -10px rgba(33,52,43,.4);
      padding:6px; display:none; z-index:40; }
    .acct.open .acct-menu{ display:block; }
    .acct-menu a{ display:block; padding:9px 12px; border-radius:7px; font-size:14.5px; color:var(--ink); text-decoration:none; }
    .acct-menu a:hover{ background:var(--paper); color:var(--gumleaf); }
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:38px; background:var(--white); border:1px solid var(--contour); border-radius:6px; cursor:pointer; padding:0; }
    .site-nav{ display:none; order:4; width:100%; border-top:1px solid var(--contour); padding:10px 0 14px; }
    .site-nav.open{ display:block; }
    .site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
    .site-nav a{ display:inline-block; font:700 15px/1.4 var(--font-body); color:var(--ink); text-decoration:none; padding:8px 2px; white-space:nowrap; }
    .site-nav a:hover{ color:var(--gumleaf); }
    .site-nav a[aria-current="page"]{ color:var(--gumleaf); box-shadow:inset 0 -3px 0 var(--gumleaf); }
    .site-nav .nav-admin a{ font-weight:400; color:var(--ink-soft); font-size:15px; }
    /* Bricolage runs wider than the old condensed face — the inline nav only
       appears once it genuinely fits, so it never wraps onto a second line. */
    @media (min-width:980px){
      .nav-toggle{ display:none; }
      .site-nav{ display:block; order:0; width:auto; border-top:0; padding:0; flex:1; margin-left:16px; min-width:0; }
      .site-nav ul{ flex-direction:row; gap:15px; align-items:center; }
      .site-nav a{ padding:18px 0; }
      .site-nav .nav-admin{ margin-left:auto; }
    }

    /* ============ Layout ============ */
    .wrap{ max-width:var(--wrap); margin:0 auto; padding:30px 16px 70px; }
    .page-head{ margin:10px 0 22px; }
    .page-head h1{ font-size:clamp(34px,6.5vw,46px); margin:0 0 8px; max-width:22ch; }
    .page-head p{ color:var(--ink-soft); margin:0; font-size:16.5px; max-width:62ch; }
    .section-pad{ padding:24px 0 0; }

    /* ============ Cards, grids, tabs ============ */
    .grid{ display:grid; gap:16px; }
    .cols-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
    .cols-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
    .card{ background:var(--white); border:1px solid var(--contour); border-radius:var(--radius-card); box-shadow:0 1px 0 var(--contour); padding:20px 22px; margin-bottom:16px; }
    a.card{ display:block; text-decoration:none; color:var(--ink); }
    a.card:hover{ border-color:var(--gumleaf); box-shadow:0 1.5px 0 var(--gumleaf); }
    .card h2{ font:600 22px/1.15 var(--font-display); color:var(--ink); margin:0 0 14px; }
    .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 22px; }
    .tab{ padding:8px 14px; border-radius:8px; border:1px solid var(--contour); background:var(--white); color:var(--ink); font-size:14.5px; text-decoration:none; }
    .tab:hover{ border-color:var(--gumleaf); text-decoration:none; }
    .tab.active{ background:var(--btn-bg); color:#fff; border-color:var(--btn-bg); font-weight:700; }

    /* ============ Stats, tables, pills ============ */
    .stat .v{ font:700 27px/1.25 var(--font-data); color:var(--ink); }
    .stat .l{ color:var(--ink-soft); font-size:14px; margin-top:2px; }
    .stat .sub{ color:var(--creek); font:400 12.5px/1.5 var(--font-data); margin-top:8px; }
    table{ width:100%; border-collapse:collapse; font-size:15px; }
    th,td{ text-align:left; padding:10px 10px; border-bottom:1px solid var(--contour); }
    th{ color:var(--ink-soft); font:400 12px/1.4 var(--font-data); letter-spacing:.04em; }
    td.num,th.num{ text-align:right; font-family:var(--font-data); font-size:.94em; }
    tbody tr:last-child td{ border-bottom:0; }
    tr:hover td{ background:rgba(45,94,75,.05); }
    .pill{ display:inline-block; padding:2px 9px; border-radius:6px; background:var(--paper-deep); border:1px solid var(--contour); font:400 12.5px/1.6 var(--font-data); color:var(--ink); }
    .up{ color:var(--gumleaf); font-weight:700; } .down{ color:var(--creek); font-weight:700; }
    .muted{ color:var(--ink-soft); font-size:14px; }

    /* ============ Alternatives teasers ============ */
    .alts{ margin-top:16px; }
    .alts-h{ font:600 21px/1.15 var(--font-display); color:var(--ink); margin:0 0 12px; }
    .alt-card{ background:var(--paper); border:1px solid var(--contour); border-radius:8px; padding:12px 14px; }
    .alt-t{ font:400 12px/1.5 var(--font-data); letter-spacing:.03em; color:var(--ink-soft); margin-bottom:8px; }
    .alt-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--contour); font-size:14.5px; color:var(--ink); text-decoration:none; }
    .alt-row:last-child{ border-bottom:0; }
    .alt-row:hover{ color:var(--gumleaf); }
    .alt-row .num{ color:var(--ink-soft); font-family:var(--font-data); font-size:.92em; white-space:nowrap; }

    /* ============ Forms & buttons ============ */
    input,select,textarea{ background:var(--white); color:var(--ink); border:1px solid var(--contour); border-radius:8px; padding:9px 11px; font:400 15px/1.4 var(--font-body); }
    input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--gumleaf); box-shadow:var(--ring); }
    input::placeholder{ color:#7d8b81; }
    button,.btn{ display:inline-block; background:var(--btn-bg); color:#fff; border:1.5px solid var(--btn-bg); border-radius:8px; padding:10px 18px 11px; font:600 17px/1.15 var(--font-display); letter-spacing:.02em; cursor:pointer; text-decoration:none; }
    button:hover,.btn:hover{ background:var(--btn-hover); border-color:var(--btn-hover); }
    .btn-outline{ display:inline-block; font:600 17px/1.15 var(--font-display); letter-spacing:.02em; color:var(--gumleaf); background:transparent; border:1.5px solid var(--gumleaf); border-radius:8px; padding:10px 18px 11px; text-decoration:none; cursor:pointer; }
    .btn-outline:hover{ background:var(--white); }
    .row{ display:flex; gap:14px; flex-wrap:wrap; align-items:end; }
    .chart-box{ position:relative; height:320px; }
    .chart-box.sm{ height:240px; }

    /* ============ Sign plates, chips, steps (Surveyor components) ============ */
    .plate{ display:block; width:min(272px,100%); background:var(--white); border:1.5px solid var(--ink); border-radius:var(--radius-plate); box-shadow:0 1.5px 0 var(--contour); padding:10px 14px 11px; }
    .plate-num{ display:block; font:700 19px/1.3 var(--font-data); white-space:normal; overflow-wrap:break-word; }
    .plate-sub{ display:block; font-size:13.5px; line-height:1.45; color:var(--ink-soft); margin-top:2px; }
    .chip{ display:flex; align-items:center; justify-content:center; min-height:40px; background:var(--wattle); border:2px solid var(--ink); border-radius:6px; font:700 17px var(--font-data); color:var(--ink); }
    .step-num{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:var(--white); border:1.5px solid var(--ink); border-radius:var(--radius-plate); box-shadow:0 1.5px 0 var(--contour); font:700 17px var(--font-data); }

    /* ============ Queue Track (signature) ============ */
    .track-svg{ width:100%; height:auto; overflow:visible; display:block; }
    .t-lab{ font:400 11px var(--font-data); fill:var(--ink-soft); }
    .t-lab-strong{ font:700 11px var(--font-data); fill:var(--ink); }
    .t-tag{ font:700 11.5px var(--font-data); fill:var(--gumleaf); }
    .t-mile{ font:400 11px var(--font-data); fill:var(--ink-soft); }
    .track-dot{ animation:track-slide .6s cubic-bezier(.2,.7,.3,1) .15s both; }
    @keyframes track-slide{ from{ transform:translateX(9px);} to{ transform:translateX(0);} }
    .track-caption{ font-size:14px; color:var(--ink-soft); margin:8px 0 0; }
    /* The reach-milestone caption overflows the panel on narrow screens. */
    @media (max-width:520px){ .t-mile{ display:none; } }

    /* ============ Footer ============ */
    .site-footer{ margin-top:34px; padding:0 0 40px; }
    .footer-motif{ width:100%; height:44px; display:block; }
    .site-footer .footer-wrap{ max-width:var(--wrap); margin:0 auto; padding:22px 16px 0; }
    .footer-provenance{ font:400 13px/1.6 var(--font-data); color:var(--ink-soft); margin:0 0 8px; }
    .footer-disclaimer{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); max-width:48ch; margin:0; }
    .footer-grid{ display:grid; gap:22px 44px; }
    .footer-col{ display:flex; flex-direction:column; gap:7px; font-size:14.5px; }
    .footer-h{ font:400 11.5px/1 var(--font-data); letter-spacing:.08em; text-transform:uppercase;
      color:var(--ink-soft); margin-bottom:3px; }
    .footer-col a{ color:var(--gumleaf); text-decoration:none; width:fit-content; }
    .footer-col a:hover{ text-decoration:underline; }
    @media (min-width:720px){ .footer-grid{ grid-template-columns:1.7fr 1fr 1fr; } }

    /* ============ View mode: Simple / Detailed toggle (reusable) ============ */
    /* Default (no .is-detailed) = Simple: detail is hidden from first paint,
       so there's no flash of the full page. .is-detailed flips it. */
    .vm:not(.is-detailed) .detail-only{ display:none !important; }
    .vm.is-detailed .simple-only{ display:none !important; }
    .viewmode-bar{ display:flex; align-items:center; justify-content:flex-end;
      gap:10px; margin:2px 0 4px; }
    .viewmode-bar .vm-label{ font:400 12px/1 var(--font-data); letter-spacing:.08em;
      text-transform:uppercase; color:var(--ink-soft); }
    .vm-pills{ display:inline-flex; border:1px solid var(--contour); border-radius:999px;
      overflow:hidden; background:var(--white); }
    .vm-pill{ appearance:none; -webkit-appearance:none; border:0; background:transparent;
      cursor:pointer; font:600 13.5px var(--font-body); color:var(--ink-soft);
      padding:7px 17px; line-height:1; }
    .vm-pill+.vm-pill{ border-left:1px solid var(--contour); }
    .vm-pill[aria-pressed="true"]{ background:var(--btn-bg); color:#fff; }

    /* ============ Floating chat widget ============ */
    .cw-fab{ position:fixed; right:20px; bottom:20px; z-index:60; width:56px; height:56px;
      border-radius:50%; background:var(--btn-bg); border:0; cursor:pointer; padding:0;
      box-shadow:0 6px 20px -6px rgba(33,52,43,.55); display:flex; align-items:center; justify-content:center; }
    .cw-fab:hover{ background:var(--btn-hover); }
    .cw-fab svg{ width:27px; height:27px; }
    .cw-panel{ position:fixed; right:20px; bottom:20px; z-index:61; width:372px; max-width:92vw;
      height:min(560px,74vh); background:var(--white); border:1px solid var(--contour); border-radius:14px;
      box-shadow:0 18px 50px -12px rgba(33,52,43,.45); display:none; flex-direction:column; overflow:hidden; }
    .cw-panel.open{ display:flex; }
    .cw-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--btn-bg); color:#fff; }
    .cw-title{ font:600 16px/1.1 var(--font-display); flex:1; }
    .cw-sub{ display:block; font:400 11.5px var(--font-data); opacity:.85; margin-top:1px; }
    .cw-close{ background:none; border:0; box-shadow:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
    .cw-close:hover{ background:none; opacity:.8; }
    .cw-thread{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--paper); }
    .cw-msg{ max-width:88%; padding:9px 12px; border-radius:10px; font-size:14.5px; line-height:1.5; }
    .cw-msg p{ margin:0 0 6px; } .cw-msg p:last-child{ margin:0; }
    .cw-msg.assistant{ background:var(--white); border:1px solid var(--contour); align-self:flex-start; }
    .cw-msg.user{ background:rgba(45,94,75,.12); border:1px solid rgba(45,94,75,.3); align-self:flex-end; }
    .cw-msg.note{ background:none; border:0; color:var(--ink-soft); font-size:13.5px; align-self:stretch; max-width:100%; }
    .cw-foot{ border-top:1px solid var(--contour); padding:10px 12px; }
    .cw-compose{ display:flex; gap:8px; align-items:flex-end; }
    .cw-compose textarea{ flex:1; resize:none; min-height:40px; max-height:120px; font-size:14.5px; padding:8px 10px; }
    .cw-send{ padding:9px 14px; font-size:14px; }
    .cw-quota{ font:400 11.5px var(--font-data); color:var(--ink-soft); margin:6px 2px 0; }
    @media (max-width:480px){
      .cw-panel{ right:8px; left:8px; bottom:8px; width:auto; max-width:none; height:min(80vh,620px); }
      .cw-fab{ right:16px; bottom:16px; }
    }

    /* ============ Info tooltip (i) ============ */
    .info{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
      border-radius:50%; border:1.3px solid var(--ink-soft); background:var(--white); color:var(--ink-soft);
      font:700 11px/1 var(--font-data); cursor:pointer; padding:0; vertical-align:middle; box-shadow:none; margin-left:4px; }
    .info:hover{ border-color:var(--ink); color:var(--ink); background:var(--white); }
    /* Popover is appended to <body> and position:fixed (JS-placed), so an
       overflow:hidden card or tab can never clip it. */
    .info-pop{ position:fixed; width:max-content; max-width:min(300px,92vw);
      background:var(--white); color:var(--ink); border:1px solid var(--contour);
      border-radius:8px; box-shadow:0 10px 28px -8px rgba(33,52,43,.45); padding:10px 13px;
      font:400 13px/1.5 var(--font-body); text-align:left; z-index:200; display:none; white-space:normal; }

    /* ============ Plus locked teaser + nudge ============ */
    .plus-tag{ display:inline-block; font:700 11px/1 var(--font-data); color:#001b10; background:var(--wattle);
      border:1px solid var(--ink); border-radius:4px; padding:3px 8px 4px; vertical-align:middle; margin-left:6px; }
    .alts-locked{ border:1px dashed var(--contour); border-radius:10px; padding:16px; background:var(--paper); }

    /* ---- Locked (blur) overlay ---- */
    .locked{ position:relative; }
    .locked > .locked-content{ filter:blur(6px); pointer-events:none; user-select:none; opacity:.9; }
    .locked-veil{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:12px; text-align:center; padding:20px;
      background:radial-gradient(120% 100% at 50% 42%, rgba(243,245,236,.32), rgba(243,245,236,.74)); }
    .locked-veil .lock-ic{ width:28px; height:28px; }
    .locked-veil p{ margin:0; font:600 15px/1.4 var(--font-body); color:var(--ink); max-width:32ch; }
    .locked-cta{ display:inline-block; font:600 15px/1.1 var(--font-display); letter-spacing:.02em; color:#001b10;
      background:var(--wattle); border:2px solid var(--ink); border-radius:8px; padding:10px 18px; text-decoration:none; }
    .locked-cta:hover{ filter:brightness(1.06); }

    /* ---- Plus glow: gold pulse + diagonal sheen ---- */
    @keyframes plus-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,180,41,0); } 50%{ box-shadow:0 0 0 4px rgba(240,180,41,.28); } }
    @keyframes plus-sheen{ 0%{ background-position:160% 0; } 55%,100%{ background-position:-60% 0; } }
    .glow{ position:relative; animation:plus-pulse 2.8s ease-in-out infinite; overflow:hidden; }
    .glow::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.6) 48%, transparent 64%);
      background-size:240% 100%; animation:plus-sheen 3.6s ease-in-out infinite; }

    /* ---- Ref table + boost table ---- */
    .ref-grid{ width:auto; font-size:14px; margin:0; }
    .ref-grid th{ text-align:left; color:var(--ink-soft); font:400 12.5px/1.6 var(--font-data); padding:4px 16px 4px 0; vertical-align:top; white-space:nowrap; border:0; }
    .ref-grid td{ padding:4px 0; border:0; }
    .boost-table{ width:100%; font-size:14.5px; margin-top:18px; }
    .boost-table th{ text-align:left; color:var(--ink-soft); font:400 12px/1.4 var(--font-data); letter-spacing:.04em; padding:6px 10px; border-bottom:1px solid var(--contour); }
    .boost-table td{ padding:11px 10px; border-bottom:1px solid var(--contour); vertical-align:middle; color:var(--ink-soft); }
    .boost-table td strong{ color:var(--ink); }
    .boost-table tr:last-child td{ border-bottom:0; }
    .boost-table .chip{ display:inline-flex; min-height:0; width:46px; height:30px; }
    .nudge{ position:fixed; left:16px; bottom:16px; z-index:59; max-width:340px; display:flex; align-items:center;
      gap:10px; background:var(--ink); color:#fff; border-radius:12px; padding:11px 14px;
      box-shadow:0 14px 40px -10px rgba(33,52,43,.6); font-size:14px; line-height:1.4; }
    /* The class display:flex overrides the browser's [hidden]{display:none}; this
       makes the `hidden` attribute actually hide it (so it stays gone until the
       delay shows it, and the × can dismiss it). */
    .nudge[hidden]{ display:none; }
    .nudge-cta{ color:var(--wattle); font-weight:700; white-space:nowrap; text-decoration:none; }
    .nudge-cta:hover{ text-decoration:underline; }
    .nudge-x{ background:none; border:0; box-shadow:none; color:#fff; opacity:.7; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
    .nudge-x:hover{ opacity:1; background:none; }
    @media (max-width:480px){ .nudge{ left:8px; right:78px; max-width:none; bottom:14px; } }

    /* ============ Mobile ============ */
    @media (max-width:640px){
      .wrap{ padding:22px 14px 60px; }
      .card{ padding:16px; overflow-x:auto; }
      th,td{ padding:8px 6px; font-size:13px; }
      td.num,th.num{ white-space:nowrap; }
      .chart-box{ height:280px; }
      .grid{ gap:12px; }
    }

    @media (prefers-reduced-motion: reduce){
      .track-dot{ animation:none; }
      .glow{ animation:none; box-shadow:0 0 0 2px rgba(240,180,41,.45); }
      .glow::after{ display:none; }
      *,*::before,*::after{ transition:none !important; animation-duration:.01ms !important; }
    }

    /* ============ Bordered sections — the page structural unit ============ */
    /* A page is a stack of .section panels: bordered, breathing room, each
       opened by a .section-head (eyebrow + display heading + optional link). */
    .section{ background:var(--white); border:1.5px solid var(--contour);
      border-radius:var(--radius-section); box-shadow:0 1px 0 var(--contour);
      padding:clamp(18px,3vw,28px); margin:0 0 var(--sp-6); }
    .section > :last-child{ margin-bottom:0; }
    .section.tinted{ background:var(--paper-deep); }
    .section-head{ display:flex; align-items:baseline; justify-content:space-between;
      gap:6px var(--sp-4); flex-wrap:wrap; margin:0 0 var(--sp-4); }
    .section-head > div{ min-width:0; }
    .section-head .eyebrow{ margin:0 0 6px; }
    .section-head h2{ font:600 var(--fs-h2)/1.1 var(--font-display); margin:0; }
    .section-sub{ color:var(--ink-soft); font-size:var(--fs-small); margin:6px 0 0; max-width:62ch; }
    .section-link{ font-size:var(--fs-small); white-space:nowrap; margin-left:auto; }
    .section .card{ box-shadow:none; }

    /* ============ Trend/status chips (occupation cards, movement) ============ */
    .trend-chip{ display:inline-block; font:700 11.5px/1 var(--font-data);
      border-radius:999px; padding:4px 10px 5px; border:1px solid; white-space:nowrap; }
    .trend-chip.good{ color:var(--gumleaf); background:rgba(45,94,75,.08); border-color:rgba(45,94,75,.35); }
    .trend-chip.warm{ color:#7a5600; background:rgba(240,180,41,.16); border-color:rgba(240,180,41,.55); }
    .trend-chip.cool{ color:var(--creek); background:rgba(62,107,133,.1); border-color:rgba(62,107,133,.35); }

    /* ============ Stat tile with delta ============ */
    .stat-tile{ background:var(--white); border:1px solid var(--contour); border-radius:var(--radius-card);
      padding:14px 16px; }
    .stat-tile .t-label{ font:400 11.5px/1.4 var(--font-data); letter-spacing:.06em;
      text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
    .stat-tile .t-value{ font:700 26px/1.15 var(--font-data); color:var(--ink); }
    .stat-tile .t-delta{ font:700 12.5px/1.4 var(--font-data); margin-top:4px; }
    .stat-tile .t-delta.up{ color:var(--gumleaf); }
    .stat-tile .t-delta.down{ color:var(--creek); }

    /* ============ Occupation autocomplete (ARIA combobox) ============ */
    .ac-wrap{ position:relative; min-width:0; }
    .ac-wrap > input{ width:100%; }
    .ac-list{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
      margin:0; padding:5px; list-style:none; background:var(--white);
      border:1px solid var(--contour); border-radius:10px;
      box-shadow:0 14px 36px -12px rgba(33,52,43,.4); max-height:322px; overflow-y:auto; }
    .ac-list li{ display:flex; align-items:baseline; gap:9px; padding:9px 11px;
      border-radius:7px; font-size:15px; color:var(--ink); cursor:pointer; }
    .ac-list li:hover, .ac-list li.ac-active{ background:var(--paper); color:var(--gumleaf); }
    .ac-code{ font:700 12px/1.4 var(--font-data); color:var(--ink-soft);
      background:var(--paper-deep); border:1px solid var(--contour); border-radius:5px;
      padding:2px 7px 3px; white-space:nowrap; }
    .row .ac-wrap{ min-width:280px; }

    /* ============ First-visit guide (inside the assistant panel) ============ */
    .cw-fab{ width:auto; border-radius:999px; padding:0 18px 0 14px; height:52px; gap:9px; }
    .cw-fab-label{ font:600 16px/1 var(--font-display); color:#fff; letter-spacing:.02em; }
    .cw-guide{ padding:14px 14px 16px; border-bottom:1px solid var(--contour); background:var(--white); }
    .cw-guide-q{ font:600 19px/1.2 var(--font-display); margin:0 0 10px; }
    .cw-guide-chips{ display:flex; flex-wrap:wrap; gap:8px; }
    .cw-chip{ background:var(--paper); color:var(--ink); border:1px solid var(--contour);
      border-radius:999px; padding:8px 14px 9px; font:600 13.5px/1.2 var(--font-body);
      cursor:pointer; box-shadow:none; }
    .cw-chip:hover{ border-color:var(--gumleaf); background:var(--white); color:var(--gumleaf); }
    .cw-chip.active{ background:var(--gumleaf); border-color:var(--gumleaf); color:#fff; }
    .cw-chip-skip{ border-style:dashed; color:var(--ink-soft); font-weight:400; background:transparent; }
    .cw-guide-pick{ margin-top:12px; }
    .cw-guide-blurb{ font-size:14px; line-height:1.5; color:var(--ink-soft); margin:0 0 8px; }
    .cw-guide-beta{ font-size:13.5px; color:#7a5600; background:rgba(240,180,41,.15);
      border:1px solid rgba(240,180,41,.5); border-radius:8px; padding:7px 10px; margin:0 0 10px; }
    .cw-guide-go{ font-size:15px; padding:9px 16px 10px; }


    /* ============ Theme toggle ============ */
    .theme-toggle{ display:inline-flex; align-items:center; justify-content:center;
      width:34px; height:34px; border-radius:50%; background:var(--white);
      border:1px solid var(--contour); cursor:pointer; padding:0; box-shadow:none; }
    .theme-toggle svg{ fill:var(--ink-soft); }
    .theme-toggle:hover{ background:var(--white); border-color:var(--ink); }
    .theme-toggle:hover svg{ fill:var(--ink); }

    /* ============ Dark-theme component fixes ============ */
    /* Inline SVGs that carry hard-coded ink/contour hex from the light theme */
    :root[data-theme="dark"] .nav-toggle line{ stroke:var(--ink); }
    :root[data-theme="dark"] .footer-motif path{ stroke:var(--contour); }
    :root[data-theme="dark"] .track-svg line{ stroke:var(--ink-soft); }
    :root[data-theme="dark"] .track-svg polygon{ fill:var(--ink-soft); }
    :root[data-theme="dark"] .track-svg circle{ stroke:var(--paper); }
    :root[data-theme="dark"] .alt-bar line{ stroke:var(--ink-soft); }
    :root[data-theme="dark"] .alt-bar circle{ stroke:var(--paper); }
    :root[data-theme="dark"] .movement-card h3 svg polyline{ stroke:var(--ink-soft); }
    /* Surfaces that hard-code light rgba tints */
    :root[data-theme="dark"] .nudge{ background:var(--paper-deep); color:var(--ink);
      border:1px solid var(--contour); }
    :root[data-theme="dark"] .nudge-x{ color:var(--ink); }
    :root[data-theme="dark"] .locked-veil{
      background:radial-gradient(120% 100% at 50% 42%, rgba(12,24,54,.35), rgba(12,24,54,.82)); }
    :root[data-theme="dark"] .cw-msg.user{ background:rgba(255,100,115,.14);
      border-color:rgba(255,100,115,.4); }
    :root[data-theme="dark"] .journey-msg{ background:var(--paper-deep);
      border-color:var(--contour); }
    :root[data-theme="dark"] tr:hover td{ background:rgba(255,100,115,.06); }
    :root[data-theme="dark"] .plate{ border-color:var(--ink-soft); }
    :root[data-theme="dark"] .step-num, :root[data-theme="dark"] .chip{ border-color:var(--paper); }
    :root[data-theme="dark"] .forecast-card{ border-color:var(--ink-soft); }

    /* ============ Compact one-row header on phones ============ */
    /* The theme toggle + wider display face pushed the tools row past small
       viewports, splitting the header in two. Shrink everything until both
       groups fit on one line. */
    @media (max-width:560px){
      .header-row{ gap:0 8px; padding:0 12px; min-height:52px; }
      .wordmark{ font-size:19px; gap:5px; }
      .wordmark-dot{ width:9px; height:9px; border-width:1.5px; }
      .beta-tag{ font-size:9px; padding:2px 4px; letter-spacing:.08em; }
      .brand-lockup{ gap:6px; }
      .header-tools{ gap:7px; }
      .theme-toggle{ width:30px; height:30px; }
      .theme-toggle svg{ width:14px; height:14px; }
      .plus-pill{ font-size:11px; padding:4px 9px 5px; }
      .account-link{ font-size:13px; }
      .avatar{ width:30px; height:30px; font-size:15px; }
      .nav-toggle{ width:36px; height:33px; }
    }
    @media (max-width:370px){ .beta-tag{ display:none; } }

    /* ============ Dark theme: generic re-skin of decorative inline SVGs ==== */
    /* Templates draw plates, maps, glyphs and arrows with the light theme's
       literal ink/green/creek hex in presentation attributes. CSS wins over
       attributes, so exact-value selectors re-map them all on the navy
       ground; the gold marker (#F0B429) stays gold on purpose. Data-driven
       fill-opacity attributes (choropleth maps) are untouched. */
    :root[data-theme="dark"] svg [stroke="#21342B"]{ stroke:var(--ink-soft); }
    :root[data-theme="dark"] svg [fill="#21342B"]{ fill:var(--ink-soft); }
    :root[data-theme="dark"] svg [stroke="#2D5E4B"]{ stroke:#8FB2E8; }
    :root[data-theme="dark"] svg [fill="#2D5E4B"]{ fill:#8FB2E8; }
    :root[data-theme="dark"] svg [stroke="#3E6B85"]{ stroke:var(--creek); }
    :root[data-theme="dark"] svg [fill="#3E6B85"]{ fill:var(--creek); }
    :root[data-theme="dark"] svg [stroke="#C9BC9C"]{ stroke:var(--contour); }
    :root[data-theme="dark"] svg [fill="#C9BC9C"]{ fill:var(--contour); }

    /* Native form controls follow the theme accent. */
    input[type="checkbox"], input[type="radio"]{ accent-color:var(--gumleaf); }
    :root[data-theme="dark"] input[type="checkbox"],
    :root[data-theme="dark"] input[type="radio"]{ accent-color:#E88F98; }