/* gis-bmw-chrome.css — BMW M chrome for the GIS toolbar and modal cards
 * ---------------------------------------------------------------------------
 * Two components from the BMW M design system, applied to the map viewers:
 *
 *   button-primary-outline  -> the main GIS navbar buttons
 *   card geometry           -> the tool modal panels
 *
 * ADDITIVE BY DESIGN. This file only ever loads LAST, after each town's own
 * stylesheet, and every rule is scoped to the toolbar or to a named modal root.
 * To back the whole look out, delete the one <link> line from each viewer's
 * index.html — nothing else references it and no town CSS was edited.
 *
 * ── What was adapted, and why ───────────────────────────────────────────────
 *
 * SIZE. BMW specs button-primary-outline at 48px tall, 16x32 padding, 14px
 * type. The GIS toolbar runs 26px tall at 9.5px so twelve tools fit one row.
 * Forcing BMW's metrics would wrap the toolbar and push the map down, so the
 * geometry here is left exactly as each town already had it. What is adopted
 * is everything that makes the button read as BMW: transparent fill, a 1px
 * outline, square corners, and an uppercase letterspaced label.
 *
 * TRACKING. BMW calls for 1.5px on 14px type — a ratio of 0.107em. Copying
 * 1.5px literally onto 9.5px type would read as 0.16em and fall apart. The
 * ratio is what makes the label feel machined, so the ratio is what carries
 * over.
 *
 * THEME. These viewers ship a light mode as well as the default dark. BMW has
 * no light surface to copy, so light mode gets the same silhouette inverted to
 * ink-on-paper. Without this, flipping the theme would leave white outlines on
 * a white toolbar.
 *
 * NOT COPIED: the M tricolor stripe. It is BMW's identity marker, and the
 * guide is explicit that it is brand-identity only. A municipal assessing tool
 * should not wear another company's brand stripe.
 *
 * v=20260726-bmwchrome
 */

/* ══════════════════════════════════════════════════════════════════════════
   button-primary-outline — the main GIS navbar
   ══════════════════════════════════════════════════════════════════════════ */

#toolbar .btn-toggle {
    /* Transparent over the map, outline only — the BMW primary-outline. */
    background: transparent;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    box-shadow: none;

    /* typography.button, held to the toolbar's own size (see header note). */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.107em;
}

/* The stock button paints a diagonal gloss sweep through ::before. A gradient
   sheen is the opposite of the flat industrial silhouette, so it is switched
   off rather than left to fight the transparent fill. */
#toolbar .btn-toggle::before {
    display: none;
}

#toolbar .btn-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    background-image: none;
    border-color: #ffffff;
    color: #ffffff;
    /* The stock hover lifts the button 1px. BMW buttons do not move. */
    transform: none;
    box-shadow: none;
}

#toolbar .btn-toggle:active {
    transform: none;
}

/* Active/pressed inverts to a white fill with canvas-black text — BMW's
   binary on/off, and far easier to scan across a twelve-button row than a
   tinted background would be. */
#toolbar .btn-toggle.active {
    background: #ffffff;
    background-image: none;
    border-color: #ffffff;
    color: #000000;
    box-shadow: none;
}

#toolbar .btn-toggle.active::before {
    display: none;
}

#toolbar .btn-toggle.active svg {
    stroke: #000000;
}

/* Keyboard focus has to stay visible against both the outline and the fill. */
#toolbar .btn-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Light mode: same silhouette, inverted. BMW documents no light surface, so
   this is the honest translation rather than a copied token. */
html:not(.dark-mode) #toolbar .btn-toggle {
    border-color: rgba(15, 23, 42, 0.55);
    color: #0f172a;
}

html:not(.dark-mode) #toolbar .btn-toggle:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: #0f172a;
    color: #0f172a;
}

html:not(.dark-mode) #toolbar .btn-toggle.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

html:not(.dark-mode) #toolbar .btn-toggle.active svg {
    stroke: #ffffff;
}

html:not(.dark-mode) #toolbar .btn-toggle:focus-visible {
    outline-color: #0f172a;
}

/* ══════════════════════════════════════════════════════════════════════════
   Card geometry — the tool modals
   ══════════════════════════════════════════════════════════════════════════

   Desktop only. On touch the modals are already restyled into iOS bottom
   sheets by each town's own `(pointer: coarse)` block, which owns its rounded
   top corners and drag affordance. Squaring those corners would break a
   deliberate, separately-designed mobile pattern, so this stops at the
   desktop breakpoint.

   #group-layer-picker-root is deliberately absent: it is a floating glass
   panel on the map, not a modal card.                                        */

@media (hover: hover) and (pointer: fine) {

    /* The React panels carry inline borderRadius and boxShadow, which no
       stylesheet can outrank — hence !important on exactly those two
       properties, and nothing else. */
    #TIF-root > div > div,
    #tif-root > div > div,
    #tif-compare-root > div > div,
    #stats-root > div > div,
    #compare-root > div > div,
    #groups-root > div > div,
    #stack-ranking-root > div > div,
    #edit-root > div > div,
    .e-modal,
    .pia-sc-modal {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: 1px solid #3c3c3c;      /* colors.hairline */
    }

    /* Surface tone is dark-mode only. In light mode the panel keeps the town's
       own light background — a #1a1a1a card under dark body text would be
       unreadable. */
    html.dark-mode #TIF-root > div > div,
    html.dark-mode #tif-root > div > div,
    html.dark-mode #tif-compare-root > div > div,
    html.dark-mode #stats-root > div > div,
    html.dark-mode #compare-root > div > div,
    html.dark-mode #groups-root > div > div,
    html.dark-mode #stack-ranking-root > div > div,
    html.dark-mode #edit-root > div > div,
    html.dark-mode .e-modal,
    html.dark-mode .pia-sc-modal {
        background-color: #1a1a1a !important;   /* colors.surface-card */
    }

    /* Square the corners of cards and controls nested inside a modal. The
       radius scale is "almost always 0"; leaving rounded pills inside a square
       card is what would make the treatment read as half-applied. Inputs are
       included; circular icon buttons are not — rounded.full is the one
       sanctioned exception, so anything already fully round stays round. */
    #TIF-root .rounded-2xl, #TIF-root .rounded-3xl, #TIF-root .rounded-xl,
    #tif-root .rounded-2xl, #tif-root .rounded-3xl, #tif-root .rounded-xl,
    #tif-compare-root .rounded-2xl, #tif-compare-root .rounded-3xl, #tif-compare-root .rounded-xl,
    #stats-root .rounded-2xl, #stats-root .rounded-3xl, #stats-root .rounded-xl,
    #compare-root .rounded-2xl, #compare-root .rounded-3xl, #compare-root .rounded-xl,
    #groups-root .rounded-2xl, #groups-root .rounded-3xl, #groups-root .rounded-xl,
    #stack-ranking-root .rounded-2xl, #stack-ranking-root .rounded-3xl, #stack-ranking-root .rounded-xl,
    #edit-root .rounded-2xl, #edit-root .rounded-3xl, #edit-root .rounded-xl {
        border-radius: 0;
    }

    /* Stats Compare is this codebase's own markup, so it can take the full
       treatment without fighting Tailwind. */
    .pia-sc-btn,
    .pia-sc-maplink,
    .pia-sc-tab {
        border-radius: 0;
    }

    .pia-sc-btn {
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.107em;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.55);
    }

    html:not(.dark-mode) .pia-sc-btn {
        border-color: rgba(15, 23, 42, 0.55);
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Type — BMW's 700 / 300 contrast
   ══════════════════════════════════════════════════════════════════════════

   BMW Type Next Latin is licensed and not available here. The design guide
   names the substitute itself: Inter at 700/300, with display tracking pulled
   to -0.5px to match BMW Type's tighter setting at large sizes. Inter ships in
   this webroot as a VARIABLE font (100-900), so Light 300 is a real weight and
   not a synthesised one.

   SCOPE. This applies to the toolbar and the modal cards — the surfaces this
   file already governs. It deliberately does not reach the map dock, the data
   grid, or the civic-ledger pages, which are on a documented serif system.
   Retyping those is a bigger decision than a chrome restyle.

   SIZES. The display ladder (80 / 56 / 40 / 32px) is published below as tokens
   because it belongs to the system, but a map modal has no 80px headline to
   put it on. What is APPLIED here stops at title-lg — anything larger would
   push the tool controls below the fold on a laptop.

   LIGHT WEIGHT AND LEGIBILITY. Body drops to 300 only at 14px and above. Small
   UI text and numerals stay at 400: Light at 11px on a dark panel loses too
   much stroke contrast to read at a glance, and these are working numbers.   */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/gis/shared/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/gis/shared/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bmw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* The full published ladder. Display steps carry Inter's -0.5px correction. */
    --bmw-display-xl: 700 80px/1.0 var(--bmw-font);
    --bmw-display-lg: 700 56px/1.05 var(--bmw-font);
    --bmw-display-md: 700 40px/1.1 var(--bmw-font);
    --bmw-display-sm: 700 32px/1.15 var(--bmw-font);
    --bmw-title-lg: 700 24px/1.3 var(--bmw-font);
    --bmw-title-md: 400 20px/1.4 var(--bmw-font);
    --bmw-title-sm: 400 18px/1.4 var(--bmw-font);
    --bmw-body-md: 300 16px/1.5 var(--bmw-font);
    --bmw-body-sm: 300 14px/1.5 var(--bmw-font);
    --bmw-caption: 400 12px/1.4 var(--bmw-font);
}

@media (hover: hover) and (pointer: fine) {

    /* One family across the modal chrome. */
    #TIF-root, #tif-root, #tif-compare-root, #stats-root, #compare-root,
    #groups-root, #stack-ranking-root, #edit-root, .e-modal, .pia-sc-modal {
        font-family: var(--bmw-font);
    }

    /* Headings: heavy, and UPPERCASE at the top two levels as the guide asks. */
    /* WEIGHT AND CASE ONLY — no font-size, no line-height.
       An earlier pass set these to the BMW ladder outright (24px headings,
       14px body). On modals authored at 12-20px that pushed "Project Inputs"
       onto two lines, wrapped every field label, and shoved the View/Edit Lots
       button clean out of the TIF panel. The BMW voice is the 700/300 split and
       the uppercase setting; the sizes belong to whoever built the layout. */
    #TIF-root h1, #tif-root h1, #tif-compare-root h1, #stats-root h1,
    #compare-root h1, #groups-root h1, #stack-ranking-root h1, #edit-root h1,
    #TIF-root h2, #tif-root h2, #tif-compare-root h2, #stats-root h2,
    #compare-root h2, #groups-root h2, #stack-ranking-root h2, #edit-root h2,
    .e-modal h1, .e-modal h2 {
        font-weight: 700;
        letter-spacing: -0.3px;      /* Inter substitute correction */
        text-transform: uppercase;
    }

    #TIF-root h3, #tif-root h3, #tif-compare-root h3, #stats-root h3,
    #compare-root h3, #groups-root h3, #stack-ranking-root h3, #edit-root h3,
    .e-modal h3 {
        font-weight: 700;
        letter-spacing: 0;
    }

    /* Body prose to Light weight only — size stays as authored. */
    #TIF-root p, #tif-root p, #tif-compare-root p, #stats-root p,
    #compare-root p, #groups-root p, #stack-ranking-root p, #edit-root p,
    .e-modal p {
        font-weight: 300;
    }

    /* label-uppercase: 700 with the signature 1.5px tracking. */
    .pia-sc-rail h4,
    .pia-sc-table thead th,
    .pia-sc-lit {
        font-family: var(--bmw-font);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    /* Working numbers stay at 400 — see the legibility note above. */
    .pia-sc-table tbody td {
        font-family: var(--bmw-font);
        font-weight: 400;
    }

    .pia-sc-table tbody td.best {
        font-weight: 700;
    }
}

/* typography.button — the navbar labels, already uppercase and letterspaced
   above; this only swaps them onto the BMW family. */
#toolbar .btn-toggle {
    font-family: var(--bmw-font);
}


/* ══════════════════════════════════════════════════════════════════════════
   Modal interiors
   ══════════════════════════════════════════════════════════════════════════

   The card shell above only reached the outer panel. These rules take the
   contents the rest of the way: square corners, hairline borders, uppercase
   letterspaced labels, and the 700/300 weight split.

   Selectors are raised one level (.pia-sc-backdrop .pia-sc-x rather than
   .pia-sc-x) because gis-stats-compare.js injects its stylesheet at runtime,
   which lands after this file and would otherwise win on source order at
   equal specificity.

   Semantic colour is preserved. BMW would flatten the ranking bars and the
   GOOD/BETTER/BEST badges to mono, but those hues carry meaning an assessor
   reads at a glance — squaring them keeps the silhouette without throwing away
   the signal.                                                                */

@media (hover: hover) and (pointer: fine) {

    /* ── Stats Compare ──────────────────────────────────────────────────── */
    .pia-sc-backdrop .pia-sc-title {
        font: var(--bmw-title-lg);
        letter-spacing: -0.5px;
        text-transform: uppercase;
    }

    .pia-sc-backdrop .pia-sc-sub {
        font: var(--bmw-body-sm);
    }

    .pia-sc-backdrop .pia-sc-head {
        background: #000000;              /* colors.canvas */
    }

    .pia-sc-backdrop .pia-sc-rail h4,
    .pia-sc-backdrop .pia-sc-table thead th,
    .pia-sc-backdrop .pia-sc-btn,
    .pia-sc-backdrop .pia-sc-tab {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .pia-sc-backdrop .pia-sc-tab.active {
        color: #ffffff;
        border-bottom-color: #ffffff;     /* category-tab-active: white underline */
    }

    .pia-sc-backdrop .pia-sc-item,
    .pia-sc-backdrop .pia-sc-dot {
        border-radius: 0;
    }

    /* ── Stack Ranking ──────────────────────────────────────────────────── */
    .stack-ranking-modal,
    .stack-ranking-icon,
    .stack-ranking-badge,
    .stack-ranking-stat-card,
    .stack-ranking-chart-container,
    .stack-ranking-toggle-btn,
    .stack-ranking-search-group,
    .stack-ranking-legend-color,
    .stack-ranking-bar-track,
    .stack-ranking-bar-fill,
    .stack-ranking-group-section,
    .stack-ranking-controls select,
    .stack-ranking-controls input,
    .stack-ranking-modal input,
    .stack-ranking-modal select {
        border-radius: 0;
    }

    .stack-ranking-modal {
        border: 1px solid #3c3c3c;
        box-shadow: none;
    }

    .stack-ranking-header {
        background: #000000;
    }

    .stack-ranking-header h2,
    .stack-ranking-title-area > :first-child {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -0.5px;
    }

    /* spec-cell: a big 700 number over an uppercase letterspaced label. */
    .stack-ranking-stat-card {
        background: #0d0d0d;              /* colors.surface-soft */
        border: 1px solid #3c3c3c;
    }

    .stack-ranking-stat-label,
    .stack-ranking-control-group > label,
    .stack-ranking-chart-title,
    .stack-ranking-legend-item {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .stack-ranking-stat-value {
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    /* Toggle pills become primary-outline buttons; active inverts to a white
       fill, the same binary the navbar now uses. */
    .stack-ranking-toggle-btn {
        background: transparent;
        background-image: none;
        border: 1px solid rgba(255, 255, 255, 0.55);
        color: #e2e8f0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        box-shadow: none;
    }

    .stack-ranking-toggle-btn.active {
        background: #ffffff;
        background-image: none;
        border-color: #ffffff;
        color: #000000;
        box-shadow: none;
    }

    .stack-ranking-chart-container,
    .stack-ranking-group-section {
        background: #0d0d0d;
        border: 1px solid #3c3c3c;
    }

    .stack-ranking-modal input,
    .stack-ranking-modal select {
        background: #1a1a1a;
        border: 1px solid #3c3c3c;
        color: #ffffff;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Density
   ══════════════════════════════════════════════════════════════════════════

   BMW's spacing scale is built for marketing bands with a car in them —
   24px inside cards, 40px inside spec cells, 96px between sections. A modal
   that has to show thirty ranked lots or a full TIF projection cannot spend
   that, and the generous setting reads as dead space rather than composure.
   These pull the buffers in without touching the type or the silhouette.     */

@media (hover: hover) and (pointer: fine) {

    .pia-sc-backdrop .pia-sc-table th,
    .pia-sc-backdrop .pia-sc-table td {
        padding: 6px 10px;
    }

    .pia-sc-backdrop .pia-sc-head {
        padding: 12px 16px;
    }

    .pia-sc-backdrop .pia-sc-rail {
        padding: 10px;
    }

    .pia-sc-backdrop .pia-sc-item {
        padding: 3px 4px;
    }

    .pia-sc-backdrop .pia-sc-scroll {
        padding: 12px;
    }

    .pia-sc-backdrop .pia-sc-tab {
        padding: 7px 10px;
    }

    .stack-ranking-stat-card {
        padding: 10px 12px;
    }

    .stack-ranking-controls,
    .stack-ranking-summary {
        gap: 10px;
    }

    .stack-ranking-bar-row {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}


/* ── TIF Calculator ─────────────────────────────────────────────────────────
   This one is Tailwind-built rather than semantically classed, so the buffers
   are utility classes. p-6 resolves to 19.5px here (the root is 13px), which
   is a lot of air around a projection table. Scoped hard to the TIF roots so
   the utility overrides cannot leak into any other modal.

   The emerald/blue scenario gradients are left alone: BMW would flatten them,
   but GOOD / BETTER / BEST is the one place colour is carrying the reading. */

@media (hover: hover) and (pointer: fine) {

    #tif-root .p-6, #TIF-root .p-6 { padding: 12px; }
    #tif-root .p-5, #TIF-root .p-5 { padding: 10px; }
    #tif-root .p-4, #TIF-root .p-4 { padding: 10px; }
    #tif-root .px-6, #TIF-root .px-6 { padding-left: 12px; padding-right: 12px; }
    #tif-root .py-6, #TIF-root .py-6 { padding-top: 12px; padding-bottom: 12px; }
    #tif-root .gap-6, #TIF-root .gap-6 { gap: 12px; }
    #tif-root .gap-4, #TIF-root .gap-4 { gap: 10px; }

    /* Finish the radius sweep — the earlier pass only caught xl/2xl/3xl.
       rounded-full is untouched: circular controls are the one exception the
       BMW radius scale sanctions. */
    #TIF-root .rounded, #tif-root .rounded,
    #TIF-root .rounded-lg, #tif-root .rounded-lg,
    #TIF-root .rounded-md, #tif-root .rounded-md,
    #TIF-root .rounded-sm, #tif-root .rounded-sm,
    #tif-compare-root .rounded, #tif-compare-root .rounded-lg, #tif-compare-root .rounded-md,
    #stats-root .rounded, #stats-root .rounded-lg, #stats-root .rounded-md,
    #compare-root .rounded, #compare-root .rounded-lg, #compare-root .rounded-md,
    #groups-root .rounded, #groups-root .rounded-lg, #groups-root .rounded-md,
    #stack-ranking-root .rounded, #stack-ranking-root .rounded-lg, #stack-ranking-root .rounded-md,
    #edit-root .rounded, #edit-root .rounded-lg, #edit-root .rounded-md {
        border-radius: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Consistency pass
   ══════════════════════════════════════════════════════════════════════════

   An audit of all seven modals found the treatment had only reached the two
   surfaces that were styled by name. This closes the gaps.

   FONT. Buttons, inputs and selects do not inherit font-family — the user
   agent stylesheet sets them to Arial outright — so every control in every
   modal was still Arial. Tailwind's own `font-sans` (ui-sans-serif) was also
   beating the root rule on five of the seven panels. Both are named here.

   BUTTON METRIC. Padding ranged from 1px 6px to 9.75px 19.5px across the set.
   One metric now covers every text button. The right padding is 1.5px short of
   the left on purpose: letter-spacing adds a trailing space after the last
   character, and taking it back off the right edge is what re-centres the
   label — the same correction keeps single-glyph close buttons centred rather
   than nudged.                                                               */

@media (hover: hover) and (pointer: fine) {

    #TIF-root, #tif-root, #tif-compare-root, #stats-root, #compare-root,
    #groups-root, #stack-ranking-root, #edit-root,
    #TIF-root .font-sans, #tif-root .font-sans, #tif-compare-root .font-sans,
    #stats-root .font-sans, #compare-root .font-sans, #groups-root .font-sans,
    #stack-ranking-root .font-sans, #edit-root .font-sans,
    #TIF-root button, #tif-root button, #tif-compare-root button,
    #stats-root button, #compare-root button, #groups-root button,
    #stack-ranking-root button, #edit-root button,
    #TIF-root input, #tif-root input, #tif-compare-root input,
    #stats-root input, #compare-root input, #groups-root input,
    #stack-ranking-root input, #edit-root input,
    #TIF-root select, #tif-root select, #tif-compare-root select,
    #stats-root select, #compare-root select, #groups-root select,
    #stack-ranking-root select, #edit-root select,
    .e-modal button, .e-modal input, .e-modal select,
    .pia-sc-backdrop button, .pia-sc-backdrop input, .pia-sc-backdrop select {
        font-family: var(--bmw-font);
    }

    /* typography.button, applied across every modal. */
    #TIF-root button, #tif-root button, #tif-compare-root button,
    #stats-root button, #compare-root button, #groups-root button,
    #stack-ranking-root button, #edit-root button,
    .e-modal button,
    .pia-sc-backdrop .pia-sc-btn,
    .pia-sc-backdrop .pia-sc-tab {
        border-radius: 0;
        text-transform: uppercase;
        font-weight: 700;
        /* 0.6px, not the 1.5px the guide specifies. BMW sets 1.5px on 14px type
           in a marketing band with room to spare. In the TIF sidebar the same
           tracking plus uppercase widened "View/Edit Lots" enough to push it off
           the panel edge. The label still reads machined at 0.6px; it just fits. */
        letter-spacing: 0.6px;
    }

    /* Close controls are icon buttons, not labels — no tracking to correct,
       and they stay square rather than inheriting the label metric. */
    .pia-sc-backdrop .pia-sc-x {
        border-radius: 0;
        text-transform: none;
        letter-spacing: normal;
        padding: 6px 8px;
    }

    /* Residual curves the earlier sweeps missed. */
    .pia-sc-backdrop .pia-sc-btn,
    .pia-sc-backdrop .pia-sc-modal,
    .stack-ranking-toggle-group,
    .stack-ranking-search-group,
    .stack-ranking-control-group,
    .stack-ranking-legend,
    .stack-ranking-badge {
        border-radius: 0;
    }

    /* Match the hairline every other panel uses — this one was picking up a
       gold civic-ledger border. */
    .pia-sc-backdrop .pia-sc-modal {
        border: 1px solid #3c3c3c;
    }
}


/* ── Stack Ranking, after looking at it ─────────────────────────────────────
   Three things a screenshot showed that the computed-style audit could not:

   The control band sat on the town's navy while the cards beneath were near
   black, so the modal read as two different surfaces stacked. Both are on the
   BMW surfaces now.

   The four summary figures were white, blue, white and purple — four colours
   for four equivalent numbers, which invents a hierarchy that is not there.
   They are all white; the labels stay muted.

   And the vertical gaps between the control band, the summary row and the
   ranked list were doing nothing but adding height.                          */

@media (hover: hover) and (pointer: fine) {

    .stack-ranking-controls {
        background: #0d0d0d;
        border-bottom: 1px solid #3c3c3c;
        padding: 10px 14px;
    }

    .stack-ranking-summary {
        padding: 10px 14px;
    }

    .stack-ranking-body {
        padding-top: 0;
    }

    .stack-ranking-stat-value {
        color: #ffffff;
        font-weight: 700;
    }

    .stack-ranking-stat-label {
        color: #7e7e7e;              /* colors.muted */
    }

    .stack-ranking-icon {
        border-radius: 0;
    }

    .stack-ranking-chart-header {
        padding: 8px 12px;
    }
}

@media (hover: hover) and (pointer: fine) {
    /* The band behind the summary cards was still the town navy against a
       near-black modal. */
    .stack-ranking-body {
        background: #1a1a1a;
    }

    /* Two of the four summary figures carry an inline colour — blue on Total
       Assessed, violet on Average — so an inline style is the only thing there
       is to beat. Four equivalent numbers should not wear four colours. */
    .stack-ranking-modal .stack-ranking-stat-value {
        color: #ffffff !important;
    }
}


/* ── Modal surfaces ─────────────────────────────────────────────────────────
   The panel itself was on the BMW card colour but the sections inside were
   not: TIF paints them with Tailwind utilities bound to the town's CSS
   variables, so it stayed navy while Stack Ranking went near-black. Two
   modals, two different surfaces, which is exactly what reads as "weird".

   The bracketed Tailwind class names need escaping — .bg-[var(--bg-primary)]
   is a literal class name, not a selector.                                   */

@media (hover: hover) and (pointer: fine) {

    #tif-root .bg-\[var\(--bg-primary\)\], #TIF-root .bg-\[var\(--bg-primary\)\],
    #tif-compare-root .bg-\[var\(--bg-primary\)\],
    #stats-root .bg-\[var\(--bg-primary\)\],
    #compare-root .bg-\[var\(--bg-primary\)\],
    #groups-root .bg-\[var\(--bg-primary\)\],
    #edit-root .bg-\[var\(--bg-primary\)\] {
        background-color: #1a1a1a;       /* colors.surface-card */
    }

    #tif-root .bg-\[var\(--bg-secondary\)\], #TIF-root .bg-\[var\(--bg-secondary\)\],
    #tif-compare-root .bg-\[var\(--bg-secondary\)\],
    #stats-root .bg-\[var\(--bg-secondary\)\],
    #compare-root .bg-\[var\(--bg-secondary\)\],
    #groups-root .bg-\[var\(--bg-secondary\)\],
    #edit-root .bg-\[var\(--bg-secondary\)\] {
        background-color: #0d0d0d;       /* colors.surface-soft */
    }

    /* Modal headers match the black header Stack Ranking and Stats Compare use. */
    #tif-root .bg-slate-900, #TIF-root .bg-slate-900,
    #tif-compare-root .bg-slate-900, #stats-root .bg-slate-900,
    #compare-root .bg-slate-900, #groups-root .bg-slate-900,
    #edit-root .bg-slate-900 {
        background-color: #000000;       /* colors.canvas */
    }
}


/* ── Surfaces, properly ─────────────────────────────────────────────────────
   Chasing the Tailwind class names did not work: bg-[var(--bg-primary)] is an
   arbitrary-value utility whose generated name varies, and some sections set
   the variable inline instead. Rebinding the variables on the modal root is
   the robust move — every reference resolves at paint time, so it catches the
   utility classes, the inline styles and anything added later, without naming
   any of them.

   Only background variables are rebound. Text and border tokens are left
   alone so nothing loses contrast.                                           */

@media (hover: hover) and (pointer: fine) {

    #TIF-root, #tif-root, #tif-compare-root, #stats-root, #compare-root,
    #groups-root, #stack-ranking-root, #edit-root {
        --bg-primary: #1a1a1a;      /* colors.surface-card */
        --bg-secondary: #0d0d0d;    /* colors.surface-soft */
        --bg-tertiary: #262626;     /* colors.surface-elevated */
        --bg-dark: #000000;         /* colors.canvas */
    }
}


/* ── The scenario gradients ─────────────────────────────────────────────────
   These were kept through several passes on the reasoning that GOOD / BETTER /
   BEST is carrying meaning. With the surfaces around them flattened to BMW
   black, three tinted gradient panels became the only thing in the modal still
   speaking the old language — which is what kept reading as off.

   The guide is unambiguous: no gradient fills, no gradient backdrops behind
   type. So the fills go flat and the signal moves entirely to the parts that
   were always carrying it — the solid GOOD / BETTER / BEST badge and the
   coloured scenario heading. Nothing is lost from the reading; the panel just
   stops shouting underneath it.                                              */

@media (hover: hover) and (pointer: fine) {

    #tif-root .bg-gradient-to-r, #TIF-root .bg-gradient-to-r,
    #tif-root .bg-gradient-to-br, #TIF-root .bg-gradient-to-br,
    #tif-root .bg-gradient-to-b, #TIF-root .bg-gradient-to-b,
    #tif-compare-root .bg-gradient-to-r, #tif-compare-root .bg-gradient-to-br,
    #stats-root .bg-gradient-to-r, #stats-root .bg-gradient-to-br,
    #compare-root .bg-gradient-to-r, #compare-root .bg-gradient-to-br {
        background-image: none;
        background-color: #0d0d0d;      /* colors.surface-soft */
        border: 1px solid #3c3c3c;      /* colors.hairline */
    }
}


/* ── Info callouts ──────────────────────────────────────────────────────────
   The TIF sidebar's "Year 0 / Year 1+" note is a Tailwind bg-blue-50 callout —
   a near-white box with blue text, which was fine on the old navy panel and is
   a hole punched in a black one. It becomes a surface-soft block with a
   hairline; the text stays as authored so the emphasis inside it survives.    */

@media (hover: hover) and (pointer: fine) {

    #tif-root .bg-blue-50, #TIF-root .bg-blue-50,
    #tif-compare-root .bg-blue-50, #stats-root .bg-blue-50,
    #compare-root .bg-blue-50, #groups-root .bg-blue-50,
    #edit-root .bg-blue-50,
    #tif-root .bg-orange-50, #TIF-root .bg-orange-50,
    #compare-root .bg-orange-50 {
        background-color: #0d0d0d;
        border-color: #3c3c3c;
    }
}


/* ── Richmond's Stack Ranking wrapper ───────────────────────────────────────
   Richmond nests an extra .stack-ranking-layout between the overlay and the
   modal that Island Falls does not have, and it carries a rule at two-class
   specificity that was re-adding the shadow and a slate border over the
   single-class rule above. Matching that specificity settles it, and the two
   towns' Stack Ranking now render identically.                               */

@media (hover: hover) and (pointer: fine) {

    .stack-ranking-modal-overlay .stack-ranking-modal,
    .stack-ranking-layout .stack-ranking-modal,
    .stack-ranking-modal-overlay .stack-ranking-layout {
        border-color: #3c3c3c;
        box-shadow: none;
        border-radius: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Map options dialog
   ══════════════════════════════════════════════════════════════════════════

   The startup dialog from gis-options-panel.js — the first thing seen on every
   load, and the last surface still on 18px corners, a drop shadow and blue
   filled pills.

   Everything is scoped under .pia-opts: the class names are generic enough
   (.pia-btn, .pia-row, .lbl) that unscoped rules would reach well past this
   dialog.

   NOTE on the segments: case and tracking are deliberately not applied to
   .pia-seg children. The four-up Parcel Dock row has no slack — uppercasing
   and tracking "Click-to-open" pushed it past its slot and wrapped the row.
   The on/off fill carries the treatment instead, and nowrap stops any future
   label doing the same.

   The Parcel Dock row overlapping the checkbox beneath it is a PRE-EXISTING
   bug in the dialog, present before any of this styling and unrelated to it.
   It is logged separately rather than papered over here.                     */

@media (hover: hover) and (pointer: fine) {

    .pia-opts {
        border-radius: 0;
        background: #1a1a1a;
        border: 1px solid #3c3c3c;
        box-shadow: none;
        font-family: var(--bmw-font);
    }

    .pia-opts-head {
        background: #000000;              /* colors.canvas */
        border-radius: 0;
    }

    .pia-opts-head .head {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -0.3px;
    }

    .pia-opts-sec > .lbl,
    .pia-opts .pia-row > .lbl {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .pia-opts .pia-sub,
    .pia-opts .pia-hint,
    .pia-opts .pia-seg-note {
        font-weight: 300;                 /* body Light */
    }

    .pia-opts .pia-seg,
    .pia-opts .pia-btn,
    .pia-opts .pia-opts-x,
    .pia-opts .pia-chk,
    .pia-opts .pia-rng {
        border-radius: 0;
    }

    .pia-opts .pia-seg > * {
        border-radius: 0;
        font-weight: 700;
        white-space: nowrap;
    }

    .pia-opts .pia-seg > .on {
        background: #ffffff;
        background-image: none;
        color: #000000;
        box-shadow: none;
    }

    .pia-opts .pia-btn {
        background: transparent;
        background-image: none;
        border: 1px solid rgba(255, 255, 255, 0.55);
        color: #e2e8f0;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.6px;
        box-shadow: none;
    }

    .pia-opts .pia-btn.primary {
        background: #ffffff;
        background-image: none;
        border-color: #ffffff;
        color: #000000;
    }
}