/* ---------------------------------------------------------------------------
   Paper HUD -- the 3D renderer's interface skin.

   Ilu's "morning nautical chart" design system (sim/lagos-live: tailwind
   config + src/index.css, forked from Portwise, MIT): cream paper panels with
   hairline borders and a soft lift, ink type, and five signal colours.  The
   panels float over the 3D city.

   Everything here is scoped to body.renderer-3d, which js/render3d/scene.js
   sets only when the WebGL renderer is running, so ?renderer=2d keeps the
   original dark HUD exactly as it was.  No layout is changed: the grid,
   --indicator-h and every offset in css/main.css still hold (see
   test/layout-fit.test.js); only colour, type and surfaces are.
   --------------------------------------------------------------------------- */

body.renderer-3d {
    --p-ink: #12233F;
    --p-paper: #FFFDF8;
    --p-canvas: #F3EFE6;
    --p-hairline: #E3DDD0;
    --p-sand: #EDE8DC;
    --p-slate: #6B7280;
    --p-signal: #F2622E;
    --p-signal-soft: #FDE6DC;
    --p-moss: #2F8F6B;
    --p-moss-soft: #DDF0E7;
    --p-amber: #E8A317;
    --p-amber-ink: #9A6A08;
    --p-amber-soft: #FBF0D5;
    --p-brick: #C8423B;
    --p-brick-soft: #F8E0DD;
    --p-harbor: #2C6FB0;
    --p-harbor-soft: #DFEBF6;
    --p-shadow: 0 1px 0 rgba(18,35,63,0.04), 0 10px 28px -14px rgba(18,35,63,0.28);
    --p-lift: 0 14px 40px -16px rgba(18,35,63,0.38);
    --p-font: "Be Vietnam Pro", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
    --p-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

    /* main.css's own variables, re-pointed at the paper palette */
    --ui-ink: var(--p-ink);
    --ui-muted: var(--p-slate);
    --ui-line: var(--p-hairline);
    --ui-surface: var(--p-paper);
    --ui-glass: rgba(255, 253, 248, .94);
    --ui-mint: var(--p-moss);
    --ui-blue: var(--p-harbor);
    --ui-gold: var(--p-signal);

    background: var(--p-canvas);
    color: var(--p-ink);
    font-family: var(--p-font);
    font-feature-settings: "ss01", "cv11";
}

/* -- the scene ------------------------------------------------------------- */
body.renderer-3d #main-view-wrapper { background: var(--p-canvas); }
body.renderer-3d #main-view-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}
/* The 2D canvas stays on top as the transparent input surface. */
body.renderer-3d #main-view {
    position: relative;
    z-index: 1;
    filter: none;
}
body.renderer-3d #main-view-cursor { display: none; }
body.renderer-3d #main-view:focus-visible { outline-color: var(--p-signal); }

/* -- top bar: a paper strip, palette in an ink tray --------------------------- */
body.renderer-3d::before {
    background: var(--p-paper);
    border-bottom: 1px solid var(--p-hairline);
    box-shadow: var(--p-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.renderer-3d #indicator-text {
    border-right-color: var(--p-hairline);
    background: none;
}
body.renderer-3d .hud-date { fill: var(--p-ink); font-family: var(--p-font); font-weight: 700; }
body.renderer-3d .hud-label { fill: var(--p-slate); font-family: var(--p-font); letter-spacing: 1.4px; }
body.renderer-3d .hud-value { fill: var(--p-ink); font-family: var(--p-mono); font-weight: 600; }
body.renderer-3d .hud-value-funds { fill: var(--p-moss); }
body.renderer-3d .hud-rule { fill: var(--p-hairline); }
body.renderer-3d .hud-tool { fill: var(--p-ink); font-family: var(--p-font); }
body.renderer-3d .hud-cost { fill: var(--p-slate); font-family: var(--p-mono); }
/* Ilu TimeBar: ink play button on paper */
body.renderer-3d .speedbtn-off { fill: var(--p-paper); stroke: var(--p-hairline); }
body.renderer-3d .speedbtn-on { fill: var(--p-ink); stroke: var(--p-ink); }
body.renderer-3d .speedbtn-off + .speedbtn-glyph,
body.renderer-3d .speedbtn-off ~ .speedbtn-glyph { fill: var(--p-ink); }
body.renderer-3d .speedbtn-on ~ .speedbtn-glyph { fill: var(--p-paper); }
body.renderer-3d #button-speed-pause:hover .speedbtn-off,
body.renderer-3d #button-speed-normal:hover .speedbtn-off,
body.renderer-3d #button-speed-fast:hover .speedbtn-off { fill: var(--p-sand); stroke: var(--p-hairline); }

body.renderer-3d .indicator-menu-item {
    border-color: transparent;
    background: transparent;
    color: var(--p-ink);
    font-family: var(--p-font);
    font-weight: 600;
}
body.renderer-3d .indicator-menu-item:hover {
    border-color: transparent;
    background: var(--p-signal-soft);
    color: #B8441A;
}
body.renderer-3d #indicator-build-icons {
    border: 1px solid var(--p-ink);
    background: var(--p-ink);
    box-shadow: var(--p-shadow);
}
body.renderer-3d #build-icon-hilight {
    border-color: var(--p-signal);
    background: rgba(242, 98, 46, .16);
    box-shadow: 0 0 0 3px rgba(242, 98, 46, .14);
}
body.renderer-3d #build-icon-recommendation {
    border-color: var(--p-amber);
    box-shadow: 0 0 0 3px rgba(232, 163, 23, .2), 0 0 18px rgba(232, 163, 23, .55);
}
body.renderer-3d #build-tool-tip {
    border-color: var(--p-hairline);
    background: var(--p-paper);
    box-shadow: var(--p-lift);
    color: var(--p-ink);
    font-family: var(--p-font);
}

body.renderer-3d #indicator-demands-wrapper {
    border-left-color: var(--p-hairline);
    background: none;
}
body.renderer-3d #indicator-demands rect[style*="#2b2f38"] {
    fill: var(--p-sand) !important;
    stroke: var(--p-hairline) !important;
}
body.renderer-3d #indicator-demands rect[style*="fill:none"] { stroke: var(--p-hairline) !important; }
body.renderer-3d #indicator-demands line { stroke: rgba(18, 35, 63, .12) !important; }
body.renderer-3d #indicator-demands text { fill: var(--p-ink) !important; font-family: var(--p-font); }

/* -- floating paper cards ---------------------------------------------------- */
body.renderer-3d #nigeria-context,
body.renderer-3d #minimap-view-wrapper,
body.renderer-3d #site-survey,
body.renderer-3d #build-feedback,
body.renderer-3d #controls-guide,
body.renderer-3d #camera-controls,
body.renderer-3d #tier-celebration,
body.renderer-3d #compact-status {
    border: 1px solid var(--p-hairline);
    border-radius: 14px;
    background: var(--p-paper);
    box-shadow: var(--p-shadow);
    color: var(--p-ink);
    font-family: var(--p-font);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.renderer-3d #nigeria-context::after { display: none; }

/* Inside the cards: ink type on paper, hairline rules.  The broad rule sets
   the default; the semantic accents below restore meaning. */
body.renderer-3d #nigeria-context *,
body.renderer-3d #site-survey *,
body.renderer-3d #build-feedback *,
body.renderer-3d #controls-guide *,
body.renderer-3d #tier-celebration *,
body.renderer-3d #compact-status * {
    color: var(--p-ink);
    border-color: var(--p-hairline);
    text-shadow: none;
}
body.renderer-3d #nigeria-context :is(small, em, p, label, dt, .dash-note, .mandate-next-meta span:first-child, #nigeria-context-status, .nigeria-context-head small),
body.renderer-3d #site-survey :is(p, small),
body.renderer-3d #controls-guide dt {
    color: var(--p-slate);
}
/* eyebrows: Ilu .eyebrow */
body.renderer-3d #nigeria-context :is(.dash-card-head, .dash-card-head span, .mandate-chip, .nigeria-research-head, .nigeria-services-heading, .nigeria-systems-heading),
body.renderer-3d #site-survey small,
body.renderer-3d #controls-guide strong {
    color: var(--p-slate);
    letter-spacing: .12em;
}
body.renderer-3d #nigeria-context :is(h3, strong, #mandate-title) { color: var(--p-ink); }
body.renderer-3d #nigeria-context h3 { font-family: var(--p-font); font-weight: 700; letter-spacing: -.01em; }

/* inner surfaces */
body.renderer-3d #nigeria-context :is(.dash-card, .nigeria-resource, .nigeria-service-count, .nigeria-mandate, .mandate-next, .nigeria-system-readout > span, .person-card, .built-row, .nigeria-intel, .nigeria-research, #city-tier-progress, .nigeria-map-frame) {
    border-color: var(--p-hairline);
    background: #FFFFFF;
    box-shadow: none;
}
body.renderer-3d #nigeria-context .nigeria-map-frame { background: var(--p-canvas); }
body.renderer-3d #nigeria-context :is(.mandate-track, .city-tier-track, .nigeria-research-track, .person-track, .nigeria-resource > i) {
    background: var(--p-sand);
}
body.renderer-3d #nigeria-context :is(.mandate-track i, #city-tier-bar, .nigeria-research-track i, .person-track i) {
    background: var(--p-signal);
    box-shadow: none;
}
body.renderer-3d #nigeria-context .nigeria-mandate.is-complete .mandate-track i { background: var(--p-moss); }
body.renderer-3d #nigeria-context .nigeria-resource > i { background: var(--p-moss); }
body.renderer-3d #nigeria-context .nigeria-resource.is-low > i { background: var(--p-brick); }

/* semantic colour */
body.renderer-3d #nigeria-context :is(.is-good, .mandate-check.is-done .check-mark, .mandate-check.is-done .check-value) { color: var(--p-moss); }
body.renderer-3d #nigeria-context :is(.is-warn, .is-deficit) { color: var(--p-brick); }
body.renderer-3d #nigeria-context .nigeria-system-readout > span.is-warn { background: var(--p-brick-soft); border-color: transparent; }
body.renderer-3d #nigeria-context .nigeria-system-readout > span.is-good { background: var(--p-moss-soft); border-color: transparent; }
body.renderer-3d #nigeria-context .mandate-chip { background: var(--p-signal-soft); color: #B8441A; border-color: transparent; }
body.renderer-3d #nigeria-context #city-tier-label { color: var(--p-signal); }
body.renderer-3d #nigeria-context .nigeria-map-label { color: var(--p-ink); text-shadow: 0 0 3px var(--p-paper); }

/* tabs: Ilu's top-nav active state (signal-soft pill) */
body.renderer-3d #nigeria-context .dash-tabs { background: var(--p-sand); border-color: transparent; }
body.renderer-3d #nigeria-context .dash-tabs [role="tab"] { color: var(--p-slate); background: transparent; }
body.renderer-3d #nigeria-context .dash-tabs [role="tab"]:hover { color: var(--p-ink); background: rgba(255, 255, 255, .6); }
body.renderer-3d #nigeria-context .dash-tabs [role="tab"][aria-selected="true"] {
    color: #B8441A;
    background: var(--p-paper);
    box-shadow: var(--p-shadow);
}
body.renderer-3d #nigeria-context .dash-badge { background: var(--p-signal); color: var(--p-paper); }

/* buttons: primary = signal, secondary = paper */
body.renderer-3d #nigeria-context :is(#mandate-next-action, .mandate-claim) {
    border: 1px solid var(--p-signal);
    background: var(--p-signal);
    box-shadow: 0 6px 16px -8px rgba(242, 98, 46, .7);
}
body.renderer-3d #nigeria-context :is(#mandate-next-action, .mandate-claim) * ,
body.renderer-3d #nigeria-context :is(#mandate-next-action, .mandate-claim) { color: var(--p-paper); }
body.renderer-3d #nigeria-context :is(#mandate-next-action:hover, #mandate-next-action:focus-visible, .mandate-claim:hover) { background: #DB5321; }
body.renderer-3d #nigeria-context #mandate-next-action.is-explanation { background: var(--p-paper); border-color: var(--p-hairline); box-shadow: none; }
body.renderer-3d #nigeria-context #mandate-next-action.is-explanation,
body.renderer-3d #nigeria-context #mandate-next-action.is-explanation * { color: var(--p-ink); }
body.renderer-3d #nigeria-context :is(button:not(#mandate-next-action):not(.mandate-claim):not([role="tab"]), select, input:not([type="range"])) {
    border: 1px solid var(--p-hairline);
    background: var(--p-paper);
    color: var(--p-ink);
}
body.renderer-3d #nigeria-context :is(button:not(#mandate-next-action):not(.mandate-claim):not([role="tab"]):hover, select:hover) {
    border-color: var(--p-ink);
    background: var(--p-sand);
}
body.renderer-3d #nigeria-context .nigeria-anchor small { color: var(--p-slate); }
body.renderer-3d #nigeria-context input[type="range"] { accent-color: var(--p-signal); }
body.renderer-3d #nigeria-context .nigeria-context-link { color: var(--p-harbor); }

/* -- minimap -------------------------------------------------------------------- */
body.renderer-3d #minimap-view-wrapper::before {
    border-color: var(--p-hairline);
    background: var(--p-paper);
    color: var(--p-slate);
    font-family: var(--p-font);
}
body.renderer-3d #minimap-city-name { fill: var(--p-ink); font-family: var(--p-font); font-weight: 700; }
body.renderer-3d #minimap-nigeria-markers circle { fill: var(--p-signal); stroke: var(--p-paper); }
body.renderer-3d #minimap-nigeria-markers text { fill: var(--p-ink); stroke: var(--p-paper); }
body.renderer-3d #minimap-view-area.nigeria-mode { fill: rgba(242, 98, 46, .12) !important; stroke: var(--p-signal); }
body.renderer-3d #minimap-view-footprint { fill: rgba(242, 98, 46, .12); stroke: var(--p-signal); }
body.renderer-3d .roundbtn-on { fill: var(--p-ink); stroke: var(--p-ink); }
body.renderer-3d .roundbtn-off { fill: var(--p-paper); stroke: var(--p-hairline); }

/* -- camera controls: Ilu's stack of paper icon buttons ---------------------------- */
body.renderer-3d #camera-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    top: 14px;
}
body.renderer-3d #camera-controls button {
    min-width: 40px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--p-hairline);
    border-radius: 10px;
    background: var(--p-paper);
    color: var(--p-ink);
    font-family: var(--p-font);
    font-size: 13px;
}
body.renderer-3d #camera-controls button#camera-gold-survey,
body.renderer-3d #camera-controls button#camera-night,
body.renderer-3d #camera-controls button:last-child { font-size: 11px; letter-spacing: .02em; color: var(--p-ink); }
body.renderer-3d #camera-controls button:hover,
body.renderer-3d #camera-controls button:focus-visible {
    border-color: var(--p-ink);
    background: var(--p-sand);
}
body.renderer-3d #camera-controls button[aria-pressed="true"] {
    border-color: var(--p-ink);
    background: var(--p-ink);
    color: var(--p-paper);
    box-shadow: none;
}

/* -- banners, toasts ----------------------------------------------------------------- */
body.renderer-3d #season-banner {
    border: 1px solid var(--p-hairline);
    background: var(--p-paper);
    box-shadow: var(--p-shadow);
    color: var(--p-ink);
    font-family: var(--p-font);
}
body.renderer-3d #season-note { color: var(--p-slate); }
body.renderer-3d #season-banner[data-tone="dry"] strong { color: var(--p-amber-ink); }
body.renderer-3d #season-banner[data-tone="dry"] .season-drop { background: var(--p-amber); box-shadow: 0 0 0 4px var(--p-amber-soft); }
body.renderer-3d #season-banner[data-tone="wet"] strong,
body.renderer-3d #season-banner[data-tone="peak"] strong { color: var(--p-harbor); }
body.renderer-3d #season-banner[data-tone="wet"] .season-drop,
body.renderer-3d #season-banner[data-tone="peak"] .season-drop { background: var(--p-harbor); box-shadow: 0 0 0 4px var(--p-harbor-soft); }
body.renderer-3d #site-survey-toggle { border: 1px solid var(--p-hairline); background: var(--p-paper); color: var(--p-ink); }
body.renderer-3d #site-survey[data-grade="poor"] #site-survey-title { color: var(--p-brick); }
body.renderer-3d #build-feedback[data-tone="warn"] { border-left-color: var(--p-amber); }
body.renderer-3d #controls-guide-close { border-color: var(--p-hairline); color: var(--p-ink); }
body.renderer-3d #message-ticker-content {
    border: 1px solid var(--p-hairline);
    border-radius: 999px;
    background: var(--p-paper);
    box-shadow: var(--p-lift);
    color: var(--p-ink);
    font-family: var(--p-font);
}
body.renderer-3d #compact-status button { border: 1px solid var(--p-hairline); background: var(--p-paper); color: var(--p-ink); }

/* -- polish pass ------------------------------------------------------------------------ */

/* Camera controls as a slim icon rail (map-app style) instead of a column of
   word buttons.  Labels stay in the DOM -- font-size 0 keeps them as each
   button's accessible name, and title= still gives the hover hint. */
body.renderer-3d #camera-controls {
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    box-shadow: var(--p-lift);
}
body.renderer-3d #camera-controls button {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-color: transparent;
    border-radius: 9px;
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}
body.renderer-3d #camera-controls #camera-zoom-out { margin-bottom: 5px; }
body.renderer-3d #camera-controls #camera-zoom-out::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -7px;
    height: 1px;
    background: var(--p-hairline);
}
body.renderer-3d #camera-controls button#camera-help { font-size: 14px; font-weight: 700; }
body.renderer-3d #camera-controls button:is(#camera-recenter, #camera-gold-survey, #camera-night, #camera-tilt) {
    font-size: 0;
    letter-spacing: 0;
}
body.renderer-3d #camera-controls :is(#camera-recenter, #camera-gold-survey, #camera-night, #camera-tilt)::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
body.renderer-3d #camera-recenter {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000'/%3E%3Cpath d='M12 2v3.5M12 18.5V22M2 12h3.5M18.5 12H22'/%3E%3C/svg%3E");
}
body.renderer-3d #camera-gold-survey {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 4h12l4 5-10 11L2 9z'/%3E%3Cpath d='M2 9h20M9 4l3 16 3-16'/%3E%3C/svg%3E");
}
body.renderer-3d #camera-tilt {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 19 7.5 8h9L21 19z'/%3E%3Cpath d='M5.2 13.5h13.6M12 8v11'/%3E%3C/svg%3E");
}
body.renderer-3d #camera-night {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
}
body.renderer-3d #camera-controls button:hover,
body.renderer-3d #camera-controls button:focus-visible {
    border-color: transparent;
    background: var(--p-sand);
}
body.renderer-3d #camera-controls button#camera-gold-survey[aria-pressed="true"] {
    background: var(--p-amber-soft);
    color: var(--p-amber-ink);
    box-shadow: inset 0 0 0 1px rgba(232, 163, 23, .5);
}
body.renderer-3d #camera-controls button:is(#camera-night, #camera-tilt)[aria-pressed="true"] {
    background: var(--p-ink);
    color: var(--p-paper);
}

/* Minimap: flat paper buttons in place of the glossy XP-style ones, and a
   home glyph that stays visible on the ink "on" state. */
body.renderer-3d #minimap-view-wrapper::before {
    border: 0;
    background: var(--p-sand);
    color: var(--p-slate);
    letter-spacing: .12em;
}
body.renderer-3d :is(#minimap-cw, #minimap-ccw) circle {
    fill: var(--p-paper) !important;
    stroke: var(--p-hairline) !important;
    filter: drop-shadow(0 2px 3px rgba(18, 35, 63, .14));
}
body.renderer-3d :is(#minimap-cw, #minimap-ccw) path { stroke: var(--p-ink) !important; stroke-width: 2 !important; }
body.renderer-3d :is(#minimap-cw, #minimap-ccw):hover circle { fill: var(--p-sand) !important; }
body.renderer-3d #minimap-sw .roundbtn-on + path { fill: var(--p-paper) !important; }
body.renderer-3d #minimap-sw .roundbtn-off + path { fill: var(--p-ink) !important; }
body.renderer-3d #minimap-sw circle { filter: drop-shadow(0 2px 3px rgba(18, 35, 63, .14)); }
body.renderer-3d #minimap-view g[transform="translate(180,20)"] > circle:first-child {
    fill: var(--p-paper) !important;
    stroke: var(--p-hairline) !important;
}
body.renderer-3d #minimap-view g[transform="translate(180,20)"] > circle:nth-child(2) { fill: var(--p-ink) !important; }
body.renderer-3d #minimap-compass path:first-child { fill: var(--p-signal) !important; }
body.renderer-3d #minimap-compass path:nth-child(2) { fill: #C9C2B2 !important; }
body.renderer-3d #minimap-compass text { fill: var(--p-ink) !important; font-family: var(--p-font) !important; }
body.renderer-3d #minimap-nigeria-map { filter: saturate(.85) brightness(1.04); }

/* "Hide mission details": a quiet disclosure row, not a boxed button. */
body.renderer-3d #nigeria-context #briefing-toggle#briefing-toggle {
    align-items: center;
    margin-top: 10px;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid var(--p-hairline);
    border-radius: 0;
    background: transparent;
    color: var(--p-slate);
    font: 700 10.5px/1.3 var(--p-font);
    letter-spacing: .12em;
    text-transform: uppercase;
}
body.renderer-3d #nigeria-context #briefing-toggle * { color: inherit; }
body.renderer-3d #nigeria-context #briefing-toggle#briefing-toggle:hover {
    border-color: var(--p-hairline);
    background: transparent;
    color: var(--p-ink);
}

/* Title card wordmark */
#popup-window.popup-title-frame #popup-title-logo .title-wordmark { fill: #fbf8ef; }

/* -- dialogs on paper ------------------------------------------------------------------
   The city desk dialogs (budget, graph, evaluation, statistics, save/load...)
   kept css/dialogs.css's dark green while every panel around them is cream.
   Same layout, paper surfaces.  The title card keeps its own green/cream
   split (it is a splash, not a report). */
body.renderer-3d #popup-window-back {
    background: rgba(18, 35, 63, .32);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
}
body.renderer-3d #popup-window.popup-frame {
    border: 1px solid var(--p-hairline);
    background: var(--p-paper);
    box-shadow: 0 40px 90px -30px rgba(18, 35, 63, .55);
    color: var(--p-ink);
    font-family: var(--p-font);
}
body.renderer-3d #popup-window.popup-frame #popup-title { color: var(--p-ink); }
body.renderer-3d #popup-window.popup-frame #popup-title::before { color: var(--p-slate); }
body.renderer-3d #popup-window.popup-frame > :is(#popup-list, #popup-svg-wrapper, #popup-canvas-wrapper, #popup-text) {
    scrollbar-color: var(--p-hairline) transparent;
}
body.renderer-3d #popup-window.popup-frame #popup-text { color: var(--p-ink); }

body.renderer-3d .dialog-data-group { border-color: var(--p-hairline); background: #FFFFFF; }
body.renderer-3d .dialog-data-row { border-bottom-color: rgba(18, 35, 63, .07); }
body.renderer-3d .dialog-data-row.is-divider { border-bottom-color: var(--p-hairline); }
body.renderer-3d .dialog-data-label { color: var(--p-slate); }
body.renderer-3d h3.dialog-data-label { color: #B8441A; }
body.renderer-3d .dialog-data-value { color: var(--p-ink); }
body.renderer-3d .dialog-value-pair small { color: var(--p-slate); }
body.renderer-3d .dialog-stepper { border-color: var(--p-hairline); background: var(--p-canvas); }
body.renderer-3d .dialog-stepper button { background: var(--p-paper); color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-hairline); }
body.renderer-3d .dialog-stepper button:hover { background: var(--p-sand); }

body.renderer-3d .dialog-actions { border-top-color: var(--p-hairline); }
body.renderer-3d :is(.dialog-primary, #file-download) {
    border-color: var(--p-signal);
    background: var(--p-signal);
    color: #FFFFFF;
    font-family: var(--p-font);
    box-shadow: 0 8px 18px -10px rgba(242, 98, 46, .8);
}
body.renderer-3d :is(.dialog-primary, #file-download):hover { background: #DB5321; }
body.renderer-3d .dialog-secondary { border-color: var(--p-hairline); background: var(--p-paper); color: var(--p-ink); font-family: var(--p-font); }
body.renderer-3d .dialog-secondary:hover { border-color: var(--p-ink); background: var(--p-sand); }
body.renderer-3d .dialog-dismiss { border-color: var(--p-hairline); background: var(--p-paper); color: var(--p-ink); }
body.renderer-3d .dialog-dismiss:hover { background: var(--p-sand); }
body.renderer-3d #popup-window :is(button, a, input):focus-visible { outline-color: var(--p-signal); }

body.renderer-3d #popup-window.popup-frame :is(.popup-item, .popup-item-selected) {
    border-color: var(--p-hairline);
    background: #FFFFFF;
    color: var(--p-ink);
    font-family: var(--p-font);
}
body.renderer-3d #popup-window.popup-frame .popup-item:hover { border-color: var(--p-ink); background: var(--p-sand); }
body.renderer-3d #popup-window.popup-frame .popup-item-selected {
    border-color: var(--p-signal);
    background: var(--p-signal-soft);
    color: #8F3412;
    box-shadow: inset 3px 0 var(--p-signal);
}

body.renderer-3d #popup-window.popup-frame #popup-file-drop { border-color: var(--p-hairline); background: var(--p-canvas); }
body.renderer-3d #popup-window.popup-frame #popup-file-drop div { color: var(--p-ink); }
body.renderer-3d #popup-file-download h3 { color: var(--p-ink); }
body.renderer-3d :is(#save-city-meta, .save-help) { color: var(--p-slate); }
body.renderer-3d #save-feedback { color: var(--p-moss); }
body.renderer-3d #popup-file-download label { color: var(--p-slate); }
body.renderer-3d #save-filename { border-color: var(--p-hairline); background: #FFFFFF; color: var(--p-ink); }

/* graph small multiples */
body.renderer-3d .graph-note { color: var(--p-slate); }
body.renderer-3d .graph-view-toggle { border-color: var(--p-hairline); color: var(--p-ink); }
body.renderer-3d .graph-view-toggle:hover,
body.renderer-3d .graph-view-toggle:focus-visible { border-color: var(--p-ink); background: var(--p-sand); }
body.renderer-3d .graph-panel { border-color: var(--p-hairline); background: #FFFFFF; }
body.renderer-3d .graph-panel:focus-visible { border-color: var(--p-signal); box-shadow: 0 0 0 3px rgba(242, 98, 46, .16); }
body.renderer-3d .graph-panel-title { color: var(--p-ink); }
body.renderer-3d .graph-panel-title i { background: var(--series-color-light); }
body.renderer-3d .graph-panel-value { color: var(--p-ink); }
body.renderer-3d .graph-panel-delta { color: var(--p-slate); }
body.renderer-3d .graph-panel-readout { color: var(--p-amber-ink); }
body.renderer-3d .graph-panel .graph-grid { stroke: rgba(18, 35, 63, .07); }
body.renderer-3d .graph-panel :is(.graph-baseline, .graph-tick) { stroke: rgba(18, 35, 63, .18); }
body.renderer-3d .graph-panel .graph-axis { fill: var(--p-slate); }
body.renderer-3d .graph-panel .graph-nodata { fill: rgba(18, 35, 63, .035); }
body.renderer-3d .graph-panel :is(.graph-raw, .graph-trend) { stroke: var(--series-color-light); }
body.renderer-3d .graph-panel .graph-raw { opacity: .32; }
body.renderer-3d .graph-panel .graph-dot { fill: var(--series-color-light); stroke: #FFFFFF; }
body.renderer-3d .graph-panel .graph-cursor { stroke: var(--p-ink); opacity: .35; }
body.renderer-3d .graph-table-wrap { border-color: var(--p-hairline); background: #FFFFFF; }
body.renderer-3d .graph-table caption { color: var(--p-slate); }
body.renderer-3d .graph-table :is(th, td) { border-top-color: rgba(18, 35, 63, .07); }
body.renderer-3d .graph-table tr:first-of-type th { color: var(--p-slate); }
body.renderer-3d .graph-table th[scope="row"] { color: var(--p-ink); }
body.renderer-3d .graph-table td { color: var(--p-ink); }
/* Graph series toggles already carry a colour stripe; no second selection bar. */
body.renderer-3d #popup-window.popup-frame[data-layout="graph"] .popup-item-selected { box-shadow: none; }

/* -- Providence city mandate (css/providence.css) as a paper card ------------- */
body.renderer-3d #providence-mission {
    border: 1px solid var(--p-hairline);
    border-radius: 14px;
    background: var(--p-paper);
    box-shadow: var(--p-lift);
    color: var(--p-ink);
    font-family: var(--p-font);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.renderer-3d .providence-mission-head { border-bottom-color: var(--p-hairline); }
body.renderer-3d .providence-mission-head span { color: #B8441A; }
body.renderer-3d .providence-mission-head strong { color: var(--p-ink); font-family: var(--p-font); font-weight: 700; }
body.renderer-3d .providence-mission-head button { border-color: var(--p-hairline); background: var(--p-paper); color: var(--p-ink); }
body.renderer-3d .providence-mission-body > p,
body.renderer-3d .providence-mission-meta,
body.renderer-3d .providence-goal em,
body.renderer-3d .providence-goal p,
body.renderer-3d #providence-mission .providence-boundary { color: var(--p-slate); }
body.renderer-3d .providence-mission-meta strong { color: var(--p-signal); }
body.renderer-3d .providence-goal { border-color: var(--p-hairline); background: #FFFFFF; }
body.renderer-3d .providence-goal strong { color: var(--p-ink); }
body.renderer-3d .providence-goal div > span { color: var(--p-signal); }
body.renderer-3d .providence-goal i { background: var(--p-signal); }
body.renderer-3d .providence-goal.is-complete { border-color: transparent; background: var(--p-moss-soft); }
body.renderer-3d .providence-goal.is-complete i { background: var(--p-moss); }
body.renderer-3d .providence-return { background: var(--p-signal); color: var(--p-paper); font-family: var(--p-font); }
body.renderer-3d #providence-mission.is-complete .providence-return { background: var(--p-moss); }

/* Policies tab on paper. */
body.renderer-3d #nigeria-context :is(.policy-card, .policy-forecast) { border-color: var(--p-hairline); background: #FFFFFF; }
body.renderer-3d #nigeria-context .policy-forecast { background: var(--p-canvas); }
body.renderer-3d #nigeria-context .policy-card.is-enacted { border-left: 3px solid var(--p-moss); }
body.renderer-3d #nigeria-context .policy-group-track { background: var(--p-sand); }
body.renderer-3d #nigeria-context .policy-group-track b { background: var(--p-amber); }
body.renderer-3d #nigeria-context .policy-group-track b.is-high { background: var(--p-moss); }
body.renderer-3d #nigeria-context .policy-group-track b.is-low { background: var(--p-brick); }
body.renderer-3d #nigeria-context .policy-since { color: var(--p-moss); }
body.renderer-3d #nigeria-context .policy-chips .is-good { background: var(--p-moss-soft); color: var(--p-moss); }
body.renderer-3d #nigeria-context .policy-chips .is-warn { background: var(--p-brick-soft); color: var(--p-brick); }
body.renderer-3d #nigeria-context .policy-forecast dd.is-good { color: var(--p-moss); }
body.renderer-3d #nigeria-context .policy-forecast dd.is-warn { color: var(--p-brick); }
body.renderer-3d #nigeria-context p.policy-verdict { color: var(--p-ink); border-left-color: var(--p-amber); }
body.renderer-3d #nigeria-context .policy-verdict[data-level="recommend"] { border-left-color: var(--p-moss) !important; }
body.renderer-3d #nigeria-context .policy-verdict[data-level="not_now"] { border-left-color: var(--p-brick) !important; }
body.renderer-3d #nigeria-context .action-reason { color: var(--p-brick); }