/* Terminal look, shared by every page: included last in <head>, so it
       overrides the page styles. Flat, square, dark, no motion (the ticker
       and the map's arc draw-in are the only exceptions). Copy text is Space
       Grotesk; the terminal chrome (app bar, headings, table heads, figures,
       controls) is Space Mono; the ticker is VT323. The palette is softened:
       slate rather than black, off-white rather than white. Chart and status
       colours are the validated dark-mode set (dataviz validate_palette.js
       against #111111; the slate plane is within a step of it). */
    :root, :root:not([data-theme="light"]) {
        color-scheme: dark;
        --plane: #16181b; --surface: #1c1f23;
        --ink: #d5d4cd; --ink-2: #aaa9a2; --muted: #898881;
        --border: rgba(255,255,255,0.11); --hair: #2b2e33;
        /* Highlight: #724EC2 for outlines, borders, bars and fills; a lighter tint
           for links and highlighted text, which #724EC2 is too dark to carry on
           this plane (3:1; the tint is 6:1). Deep violet washes for selected cells. */
        --brand: #724ec2; --accent: #a58be2; --active-wash: #231c36; --sel: #2b2245;
        --st-none: #898781; --st-imposes: #d95926; --st-bans: #3987e5;
        --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
        --axis: #383835; --wash: #232321;
        --sans: "Space Grotesk", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
        --mono: "Space Mono", "Noto Sans Mono CJK SC", "DejaVu Sans Mono", ui-monospace, Menlo, Consolas, monospace;
        --tick: "VT323", "Noto Sans Mono CJK SC", ui-monospace, monospace;
    }
    html, body, textarea { font-family: var(--sans) !important; }
    button, input, select, code, kbd, pre, samp, .appbar, .appbar *, h1, h2, h3, h4, th, .num, td.num, td.d, td.date,
    .date, .kpi .v, .stat .v, .hero .big, .btn, .chip, .tag, .stage, .pager, .crumbs, .count-line, .tally b, .dn,
    .search, .mb, .ab, .kicker, .eyebrow, ol.tasks li::before, svg text, svg.chart text, .chart svg {
        font-family: var(--mono) !important;
    }
    body { background: var(--plane); color: var(--ink); font-size: 13.5px; line-height: 1.55; }
    *, *::before, *::after { transition: none !important; animation: none !important;
                             box-shadow: none !important; text-shadow: none !important; }
    .ov-bg { filter: none !important; }
    ::selection { background: #45367a; color: var(--ink); }
    a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
    a:hover { color: var(--ink); }
    /* In tables, lists of cards and the app bar a link is already obvious. */
    td a, .brand, .card a, .dl a, .switch a, .mainnav a { text-decoration: none; }
    td a:hover, .card a:hover { text-decoration: underline; }
    th[title], dt[title], h2[title], .tip[title], .kpi[title] .l, .stat[title] .l { cursor: help; text-decoration: underline dotted var(--muted);
                                                    text-underline-offset: 3px; }
    .panel { overflow-x: auto; }
    .grid2 > *, .cards > *, .kpis > * { min-width: 0; }
    @media (max-width: 640px) { .stage { white-space: normal; } .panel table { min-width: 520px; } }
    .coverage div div { border: 0 !important; padding: 0 !important; }
    :focus-visible { outline: 1px solid var(--brand) !important; outline-offset: 1px; }

    /* Square boxes. Dots and rings in keys and badges stay round: they are glyphs. */
    .card, .kpi, .panel, .btn, .chart, .seg, .zoom, .finding, .hero, .coverage, .switch, .switch a,
    .compare div, .dl a, .chip, .ab, .mb, #tip, .map-key, .quotes blockquote, .sowhat, .tools label,
    form.filters input, form.filters select, input, select, textarea, button, details, .bar, .bar i,
    .table-scroll, .tbl, .topic-sum, .pager a, .pager span, .tile, .badge, .panel-box, .card2,
    .brand .mark, table { border-radius: 0 !important; }

    /* Headings are plain bold lines, not display type. */
    h1, h2, h3, h4, .ins-head h1, .finding h2 { font-weight: 700; letter-spacing: 0 !important; }
    header h1, .ins-head h1 { font-size: 21px; }
    .finding h2 { font-size: 16px; }
    h2.sec { font-size: 14px; margin-top: 26px; }
    h2.sec::before { content: '## '; color: var(--muted); }
    .hero .big { font-size: 44px; letter-spacing: 0; }
    .kpi .v, .stat .v { font-size: 22px; letter-spacing: 0; }
    /* Headline figures read like a terminal readout: the ticker's face, large, in the chart colours. */
    .kpi .v { font-family: var(--tick) !important; font-size: 40px; line-height: 1; color: var(--accent); }
    .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--hair);
               border-top: 3px solid var(--brand); background: var(--surface); margin: 12px 0 16px; }
    .readout .ro { display: block; padding: 10px 14px 12px; border-right: 1px solid var(--hair); text-decoration: none;
                   color: var(--ink); min-width: 0; }
    .readout .ro:last-child { border-right: 0; }
    .readout a.ro:hover { background: var(--hair); }
    .readout .v { display: block; font-family: var(--tick) !important; font-size: 50px; line-height: .95;
                  color: var(--c, var(--accent)); white-space: nowrap; }
    .readout .l { display: block; font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.35; }
    .readout .ro[title] { cursor: help; }
    .readout a.ro[title] { cursor: pointer; }
    @media print { .readout .v { font-size: 30px; } }
    .eyebrow, .kicker, .panel th, .tbl th { letter-spacing: 0 !important; }

    /* App bar layout (also defined in _policy_style; repeated for pages with their own sheet). */
    .appbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
              border-bottom: 1px solid var(--hair); }
    .brand { display: flex; align-items: center; color: var(--ink); }
    .brand b, .brand small { display: block; }
    .brand small { color: var(--muted); }
    .mainnav { display: flex; flex-wrap: wrap; align-self: flex-end; }
    select { max-width: 100%; }
    /* App bar: a prompt line, then the commands. */
    .appbar { padding: 10px 0 0; margin-bottom: 16px; gap: 6px 18px; }
    .brand { gap: 0; padding-bottom: 8px; }
    .brand .mark { display: none; }
    .brand b { font-size: 13px; font-weight: 700; }
    .brand b::before { content: '$ '; color: var(--muted); }
    .brand small { font-size: 11px; }
    .mainnav { gap: 0; }
    .mainnav a, nav.tabs a { padding: 4px 8px; font-size: 13px; text-decoration: none; border-bottom: 0; margin-bottom: 0;
                             color: var(--ink-2); }
    .mainnav a::before, nav.tabs a::before { content: '['; color: var(--muted); }
    .mainnav a::after, nav.tabs a::after { content: ']'; color: var(--muted); }
    .mainnav a.on, nav.tabs a.on { background: var(--sel); color: var(--ink); font-weight: 700; outline: 1px solid var(--brand); }
    .mainnav a.on::before, .mainnav a.on::after, nav.tabs a.on::before, nav.tabs a.on::after { color: var(--accent); }
    .mainnav a:hover, nav.tabs a:hover { color: var(--ink); text-decoration: underline; }
    .navtoggle { display: none; }
    @media (max-width: 640px) {
        .navtoggle { display: inline-block; font-size: 13px; padding: 3px 10px; background: var(--plane); color: var(--ink);
                     border: 1px solid var(--hair); cursor: pointer; }
        .appbar:not(.navopen) .mainnav, .appbar:not(.navopen) .lensbar { display: none; }
        .appbar.navopen .navtoggle { outline: 1px solid var(--brand); }
    }
    .mainnav a.aside { margin-left: 8px; }
    /* Search in the app bar: a prompt and a field, nothing more. */
    .navsearch { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; max-width: 340px; padding-bottom: 6px; }
    .navsearch label { color: var(--muted); font-size: 12px; }
    .navsearch label::before { content: '$ '; }
    .navsearch input { flex: 1; min-width: 0; height: 26px; font-size: 12.5px; padding: 2px 6px; background: var(--plane);
                       color: var(--ink); border: 1px solid var(--border); border-radius: 0; }
    .navsearch input:focus { border-color: var(--ink); outline: none; }

    /* Audience lens: a second command line under the app bar. */
    .lensbar { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: 12px;
               padding: 4px 0 6px; border-top: 1px dashed var(--hair); }
    .lensbar a { padding: 1px 7px; color: var(--ink-2); text-decoration: none; }
    .lensbar a.lh { color: var(--muted); padding-left: 0; }
    .lensbar a.lh::before { content: '$ '; }
    .lensbar a.lh::after { content: ':'; }
    .lensbar a.on { background: var(--active-wash); color: var(--ink); font-weight: 700; outline: 1px solid var(--brand); }
    .lensbar a:hover { color: var(--ink); text-decoration: underline; }
    @media print { .lensbar { display: none !important; } }
    /* Machine-translated English title under a Chinese one. */
    .en { color: var(--ink-2); font-size: 11.5px; font-weight: 400; line-height: 1.35; margin-top: 1px; }
    .h1-en { font-size: 13px; margin: -2px 0 10px; }
    /* What the current view is for, and its tasks: one line each. */
    .lens-intro { border: 1px solid var(--border); border-left: 3px solid var(--brand); background: var(--surface);
                  padding: 8px 12px; margin: 4px 0 14px; }
    .lens-intro .li-head { font-size: 12.5px; }
    .lens-intro .li-q { display: flex; align-items: center; gap: 8px; color: var(--ink-2); margin-top: 6px; }
    /* The question a view answers, marked with a square icon. */
    .q-icon, .lens-intro .li-q::before {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
        border: 1px solid var(--brand); background: var(--sel); color: var(--accent);
        font: 700 14px/1 var(--mono) !important; cursor: help; }
    .lens-intro .li-q::before { content: '?'; }
    /* What the current view picks out on this page, under the view switch. */
    .lens-strip { display: flex; align-items: flex-start; gap: 10px; margin: -8px 0 14px; padding: 7px 10px;
                  background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--brand);
                  font-size: 12.5px; color: var(--ink-2); }
    .lens-strip b { color: var(--ink); font-family: var(--mono) !important; font-size: 12px; margin-right: 4px; }
    .lens-strip .ls-links { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; margin-left: 8px; }
    .lens-strip .ls-links a::before { content: '→ '; color: var(--muted); }
    @media print { .lens-strip { display: none !important; } }
    ol.tasks { list-style: none; margin: 6px 0 0; padding: 0; display: grid;
               grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 18px; font-size: 12.5px; }
    ol.tasks li { min-width: 0; counter-increment: task; }
    ol.tasks li::before { content: counter(task) '. '; color: var(--muted); }
    ol.tasks a { font-weight: 700; }
    ol.tasks span { display: block; color: var(--muted); font-size: 11.5px; padding-left: 2ch; }
    .mb.ends { border-style: dotted; }

    /* Controls: flat, bordered, inverse when pressed. */
    .btn, form.filters input, form.filters select, .seg button, .zoom button, .tools label {
        height: 28px; font-size: 12.5px; background: var(--plane); }
    .btn.primary { background: var(--sel); border-color: var(--brand); color: var(--ink); font-weight: 700; }
    .btn:hover { border-color: var(--ink-2); }
    .seg button[aria-pressed="true"], .switch a.on { background: var(--sel) !important; color: var(--ink) !important;
                                                      outline: 1px solid var(--brand); }
    .seg button:hover, .zoom button:hover, .switch a:hover { background: var(--hair); color: var(--ink); }
    .switch { padding: 0; gap: 0; }
    .switch a { padding: 5px 10px; font-size: 12.5px; text-decoration: none; }
    .card:hover { border-color: var(--ink-2); }
    .card.stretch, .card.stretch:hover { text-decoration: none; }

    /* Denser panels and tables. */
    .card, .kpi { padding: 10px 12px; }
    .finding .body { padding: 16px 18px 6px; }
    .finding details summary { padding: 8px 18px; }
    .finding details .inner, .dl { padding-left: 18px; padding-right: 18px; }
    .hero { padding: 18px 20px; gap: 20px; }
    .panel th, .panel td { padding: 5px 10px; }
    .panel th, .tbl th { text-transform: none; font-size: 11.5px; }
    .quotes blockquote, .sowhat { border-left-width: 2px; }
    #tip { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; }
    .chip, .ab, .mb { font-size: 11px; }
    /* Current page, selected chip: a tinted cell, not inverse video. */
    .pager .cur, .chips a.on { background: var(--sel) !important; color: var(--ink) !important; outline: 1px solid var(--brand); }

    /* Ticker: the newest announcements, one at a time (5 s each, a draining
       bar shows the time left), sliding up to the next. The one moving part
       of the chrome, so it is exempt from the no-motion rule by name;
       hovering or focusing it, or the pause button, holds it. */
    .ticker { --tk-h: 50px; display: flex; align-items: stretch; position: relative; height: var(--tk-h);
              margin: 0 0 4px; background: var(--surface); border: 1px solid var(--hair);
              font-family: var(--tick) !important; font-size: 22px; line-height: 26px; }
    .ticker * { font-family: var(--tick) !important; }
    .ticker .tk-label { flex: none; padding: 0 10px; color: var(--accent); border-right: 1px solid var(--hair);
                        letter-spacing: 0.04em; line-height: var(--tk-h); }
    .ticker .tk-window { flex: 1; min-width: 0; height: var(--tk-h); overflow: hidden; }
    .ticker .tk-list { list-style: none; margin: 0; padding: 0; transition: transform 0.45s ease-in-out !important; }
    .ticker .tk-list.tk-snap { transition: none !important; }
    .ticker .tk-item { height: var(--tk-h); padding: 3px 10px 0; }
    .ticker .tk-item a { display: block; color: var(--ink); text-decoration: none; }
    .ticker .tk-item a:hover .tk-head { text-decoration: underline; }
    .ticker .tk-head, .ticker .tk-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ticker .tk-sub { font-size: 18px; line-height: 18px; color: var(--s3); }
    .ticker .tk-date, .ticker .tk-iss { color: var(--muted); }
    .ticker .tk-m { color: var(--s4); }
    .ticker .tk-count { flex: none; padding: 0 8px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: var(--tk-h); }
    .ticker .tk-pause { flex: none; width: 34px; height: auto; padding: 0; border: 0; border-left: 1px solid var(--hair);
                        background: transparent; color: var(--ink-2); cursor: pointer; font-size: 18px; }
    .ticker .tk-pause:hover { color: var(--ink); background: var(--hair); }
    .ticker .tk-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hair); }
    .ticker .tk-bar i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left center; }
    .ticker .tk-bar i.run { animation: tk-drain 5s linear forwards !important; }
    .ticker.hold .tk-bar i.run, .ticker.paused .tk-bar i.run { animation-play-state: paused !important; }
    @keyframes tk-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
    @media (prefers-reduced-motion: reduce) { .ticker .tk-list { transition: none !important; } }
    @media (max-width: 640px) { .ticker { font-size: 20px; } .ticker .tk-sub { font-size: 16px; } .ticker .tk-label, .ticker .tk-count { display: none; } }
    @media print { .ticker { display: none !important; } }

    @media print {
        /* A page prints as a brief: no navigation or search, panels kept whole, links show as text. */
        .mainnav, .navsearch, .crumbs, .actions, details > summary { display: none !important; }
        .panel, .kpi, .card, .find, table tr { break-inside: avoid; }
        body { font-size: 11px; }
        a { color: inherit !important; text-decoration: none !important; }
        :root, :root:not([data-theme="light"]) {
            color-scheme: light;
            --plane: #ffffff; --surface: #ffffff; --ink: #0b0b0b; --ink-2: #52514e; --muted: #6f6e69;
            --border: rgba(11,11,11,0.18); --hair: #e1e0d9; --active-wash: #f1edfa;
            --brand: #724ec2; --accent: #724ec2; --st-none: #898781; --st-imposes: #eb6834; --st-bans: #2a78d6;
            --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --axis: #c3c2b7; --wash: #f0efec;
        }
    }