/* ValidHunt brand tokens — locked palette from 2026-06-17 design conversation.
 * Tokens are CSS custom properties so any component can read them via var(--*).
 * Hex values are the only place a color literal should appear in the codebase. */

:root {
    /* Primary brand */
    --brand:        #1A3C34;
    --brand-soft:   #2E5A3A;

    /* Surfaces */
    --surface:      #FFFCF5;
    --background:   #F4F1EB;

    /* Text */
    --ink:          #2C2C2C;
    --ink-muted:    #6B6258;

    /* Earth */
    --earth:        #8B5A2B;
    --earth-soft:   #A67B5B;

    /* Action + state */
    --cta:          #094F1F;
    --cta-hover:    #0c6929;
    --alert:        #FF6200;
    --alert-soft:   rgba(255, 98, 0, 0.08);
    --success:      #4A9C8E;
    --success-soft: rgba(74, 156, 142, 0.10);

    /* Derived utilities */
    --border-soft:   rgba(166, 123, 91, 0.4);
    --border-faint:  rgba(166, 123, 91, 0.2);
    --shadow-card:   0 1px 2px rgba(26, 60, 52, 0.05);
    --shadow-lift:   0 4px 14px rgba(26, 60, 52, 0.10);

    /* Layout */
    --container-narrow: 760px;
    --container-wide:   980px;

    /* Type scale (#310). Every shared UI text element uses one of these
       tokens; raw `font-size:` values across .razor.css files fail the
       type-scale parity test in ValidHunt.Tests/Design/TypeScaleTests.cs
       (once enforced file-by-file — see the test's EnforcedFiles set).
       Modular scale roughly 1.2× so hierarchy reads cleanly at
       phone-at-arm's-length distances. */
    --type-display: 2rem;      /* 32px — welcome hero, splash headline */
    --type-h1:      1.5rem;    /* 24px — page titles */
    --type-h2:      1.25rem;   /* 20px — section titles, card titles */
    --type-h3:      1.05rem;   /* 17px — sub-section titles */
    --type-body:    1rem;      /* 16px — default body text */
    --type-caption: 0.875rem;  /* 14px — labels, hints, chip text */
    --type-small:   0.75rem;   /* 12px — small print, meta, footnotes */

    /* Badge / stamp sub-scale (#331). Deliberately BELOW --type-small
       because these are FITTED GLYPHS inside container geometry (a
       numeric count in a circular badge, an overlay label on a stamp
       graphic), not text hierarchy. Kept in a distinct namespace so
       nothing typographic accidentally reaches for them — badges are
       chrome, not copy. */
    --badge-count:    0.625rem; /* 10px — notification-count badge glyph */
    --stamp-label:    0.55rem;  /* 8.8px — stamp overlay label (desktop) */
    --stamp-label-sm: 0.5rem;   /* 8px — stamp overlay label (mobile step-down) */

    /* Card tokens (#311). Every card-like surface should compose from
       these tokens. Follow-up PRs migrate existing variants component
       by component; new cards use these from day one. */
    --card-radius:      0.75rem;
    --card-padding:     1.25rem;
    --card-padding-sm:  0.75rem;
    --card-bg:          var(--surface);
    --card-border:      1px solid var(--border-soft);
    --card-shadow:      var(--shadow-card);

    /* Aggregator source/pill accents (#382). Distinct from primary
       brand/cta/alert/success because these are TAXONOMY colors — one
       per source domain / item class — used by the aggregator design-
       language primitives (SourceChip, PillMini). Kept in their own
       namespace so nothing else reaches for them as brand color.

       #392 review: --src-editorial was originally mapped to var(--cta)
       under the mistaken assumption that --cta is "cta gold" (it is
       NOT — --cta is #094F1F dark green, the action-button color).
       That mapping produced 1.24:1 contrast on the editorial chip
       (brand-green ink on brand-green background). Editorial gets a
       dedicated warm-gold hex literal here — no other token in the
       palette carries this hue and the source-chip is its only
       consumer, so a hex literal is the right single-source spot. */
    --src-dnr:         var(--brand);          /* WI DNR = authoritative green */
    --src-editorial:   #C9A66B;               /* ValidHunt editorial = warm gold */
    --src-weather:     #4A6C8E;               /* NWS weather = sky slate */
    --src-community:   var(--earth);          /* Community = earth brown */
    --src-enforcement: var(--brand-soft);     /* Enforcement roundups */

    --pill-alert-bg:   var(--alert-soft);
    --pill-alert-fg:   var(--alert);
    --pill-rule-bg:    #EFE3C6;               /* Rule (always-in-force) — warm tan */
    --pill-rule-fg:    #6B4A00;
    --pill-article-bg: var(--success-soft);
    --pill-article-fg: var(--brand);
    --pill-notice-bg:  var(--border-faint);
    --pill-notice-fg:  var(--ink-muted);
}

/* Card base (#311). Apply .card for default treatment; add a variant
   for accents. Callers can layer: <div class="card card--alert"> gets
   base treatment + orange left-border. See docs on the tokens above
   and the migration guidance in each variant's razor.css. */
.card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
}
.card--compact { padding: var(--card-padding-sm); }
.card--flat    { box-shadow: none; }
.card--alert   { border-left: 3px solid var(--alert); }

/* Inter body font — bundled locally (#336). Same offline-correctness
   rationale as Material Symbols below, though the failure mode is
   softer: without the CDN, text renders in the system fallback
   (-apple-system / BlinkMacSystemFont / sans-serif) instead of Inter.
   Legible, just not brand-styled. Bundling removes the last Google
   Fonts CDN dependency, closes the GDPR privacy exposure entirely,
   and pins a specific font version.

   Two variable-weight WOFF2 files (100-900 weight range) cover the
   full brand typography: latin (48 KB) + latin-ext (85 KB) = 133 KB
   total, ~1/30 the size of the Material Symbols glyph font. The
   two-subset split matches Google's own (avoids shipping Cyrillic /
   Greek / Vietnamese glyphs a US hunting app doesn't need). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-var-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('/fonts/inter-var-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;
}

/* Material Symbols Outlined — bundled locally for offline correctness
   (#317). The <Icon> component (#309) renders glyphs via font ligatures
   ("warning" text -> ⚠ glyph). Without the font loaded, the ligature
   text renders inline as raw copy — a hunter on no signal sees the
   literal word "warning" in the middle of a sentence instead of the
   glyph. Bundling closes that failure mode, removes the Google Fonts
   CDN dependency (privacy + reliability), and pins a specific font
   version. The Web + Maui hosts each carry a copy at wwwroot/fonts/
   so shared UI components resolve the font on either surface.

   The Inter body font above is still loaded from Google Fonts CDN —
   bundling Inter is a separate follow-up (Inter renders as text, so
   the CDN-unavailable case degrades to a system fallback rather than
   breaking meaning). */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
    background: var(--background);
    color: var(--ink);
    margin: 0;
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--brand);
    color: #fff;
}

a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s;
}
a:hover { border-bottom-color: var(--brand); }

h1, h2, h3, h4 {
    color: var(--brand);
    margin: 0;
    letter-spacing: -0.01em;
}

code {
    background: rgba(15, 95, 89, 0.07);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    color: var(--ink);
}

/* ─── Reusable building blocks ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.05s, background 0.15s, border-color 0.15s;
    border-bottom: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); border-bottom-color: transparent; }
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-hover); }
.btn--secondary {
    background: transparent;
    color: var(--brand);
    border-color: var(--brand);
}
.btn--secondary:hover { background: rgba(26, 60, 52, 0.06); }
.btn--ghost {
    background: transparent;
    color: var(--ink-muted);
    padding: 0.7rem 0.6rem;
}
.btn--ghost:hover { color: var(--brand); }

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-soft);
}

.section-heading {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--ink-muted);
}

.app-shell {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 1rem;
}

/* ─── Detail-page primitives ──────────────────────────────────────────────
   Shared by SpeciesDetail / SeasonDetail / RuleDetail / ZoneDetail /
   CountyDetail (the Search drill-down family from #58–#63).
   Live in brand.css rather than scoped per-component CSS so all five
   detail components can render cards/chips/pills with the same vocabulary
   without each one redeclaring the rules. */

.detail-section { display: flex; flex-direction: column; gap: 0.55rem; }
.detail-section__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin: 0;
    font-weight: 700;
}
.detail-section__hint {
    font-size: 0.84rem;
    color: var(--ink-muted);
    margin: 0.2rem 0 0 0;
    line-height: 1.45;
}

.detail-cards { display: flex; flex-direction: column; gap: 0.5rem; }

.detail-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.95rem;
    /* Card chrome tokenized (#311). 8px radius + tight padding stay
       local — detail-card variant, tighter than .card default. Used
       across SpeciesDetail / SeasonDetail / RuleDetail / ZoneDetail /
       CountyDetail (the search drill-down family). */
    background: var(--card-bg);
    border: var(--card-border);
    border-left-width: 4px;
    border-left-color: var(--brand);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s, transform 0.06s, border-left-color 0.12s;
}
.detail-card:hover {
    background: var(--background);
    transform: translateY(-1px);
}

.detail-card__title { font-weight: 600; color: var(--ink); font-size: 0.96rem; }

.detail-card__meta {
    font-size: 0.84rem;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}
.detail-card__meta-sep { opacity: 0.5; }

.detail-card__body {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.45;
    margin-top: 0.2rem;
}

/* Statute citation on rule detail (#425). Monospace attribution
   subordinate to the rule's description body. Renders only when
   the curator has populated the field. */
.detail-card__cite {
    margin-top: 0.5rem;
    font-size: var(--type-small);
    color: var(--ink-muted);
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-style: normal;
    letter-spacing: -0.01em;
}

.detail-card__pill {
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    color: #fff;
}
.detail-card__pill--alert   { background: var(--alert); }
.detail-card__pill--earth   { background: var(--earth); }
.detail-card__pill--success { background: var(--success); }
.detail-card__pill--info    { background: var(--ink-muted); }

.detail-card--rule    { border-left-color: var(--alert); }
.detail-card--alert   { border-left-color: var(--alert);     background: rgba(255, 98, 0, 0.04); }
.detail-card--earth   { border-left-color: var(--earth);     background: rgba(139, 90, 43, 0.04); }
.detail-card--success { border-left-color: var(--success);   background: rgba(74, 156, 142, 0.06); }
.detail-card--info    { border-left-color: var(--ink-muted); }

.detail-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(26, 60, 52, 0.07);
    color: var(--brand);
    border: 1px solid rgba(26, 60, 52, 0.25);
    border-radius: 999px;
    font-size: 0.86rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
}
.detail-chip:hover { background: var(--cta); color: #fff; }
.detail-chip__icon { font-size: 0.95rem; }

.status-pill {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.status-pill--brand { background: rgba(26, 60, 52, 0.1); color: var(--brand); }

.detail-empty {
    background: var(--surface);
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ─── Flatpickr brand theme ────────────────────────────────────────────
   Overrides the stock Flatpickr CSS so the popup matches the site:
   surface tone, brand-green selected day, generous radius, soft shadow.
   Lives in brand.css (not scoped) because Flatpickr appends its calendar
   element to <body>, outside any component's CSS-isolation boundary. */

.flatpickr-calendar {
    background: var(--surface) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(20, 14, 8, 0.18), 0 2px 4px rgba(20, 14, 8, 0.06) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    overflow: hidden;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-bottom-color: var(--brand) !important; border-top-color: var(--brand) !important; }

.flatpickr-months {
    background: var(--brand);
    color: #fff;
    padding: 0.55rem 0.45rem 0.5rem 0.45rem;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: rgba(255, 255, 255, 0.92) !important;
    padding: 0.35rem 0.5rem !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #fff !important; }

.flatpickr-current-month { color: #fff !important; font-weight: 700; padding-top: 0 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .cur-year {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: var(--ink); background: var(--surface); }

.flatpickr-weekdays { background: var(--surface); padding-top: 0.4rem; }
.flatpickr-weekday {
    color: var(--ink-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
}

.dayContainer { padding: 0.4rem 0.5rem 0.55rem 0.5rem; }

.flatpickr-day {
    color: var(--ink) !important;
    border-radius: 10px !important;
    font-weight: 500;
    margin: 1px 0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(26, 60, 52, 0.08) !important;
    border-color: transparent !important;
}
.flatpickr-day.today {
    border: 2px solid var(--brand) !important;
    color: var(--brand) !important;
    font-weight: 700;
}
.flatpickr-day.today:hover { background: rgba(26, 60, 52, 0.10) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--cta) !important;
    border-color: var(--cta) !important;
    color: #fff !important;
    font-weight: 700;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(107, 98, 88, 0.45) !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(107, 98, 88, 0.35) !important; }

/* Map active-spot pin — same teardrop shape as Leaflet's default marker,
   tinted with the brand CTA colour via inline SVG. Leaflet's default
   .leaflet-div-icon adds a white background + border to all divIcons;
   we strip those here so only the SVG paints. */
.validhunt-pin--active.leaflet-div-icon,
.validhunt-pin--active {
    background: transparent;
    border: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* #352 — Landowners zoom hint. Bob spotted the chip appearing to
   do nothing when activated at low zoom (parcels only paint at
   z 12+). This chip lives inside the map as a Leaflet Control
   at bottomleft, shows below the threshold, auto-hides on zoom-in
   via addPmtilesLayer's zoomend handler. Lives in brand.css
   because Leaflet controls render outside component CSS-isolation
   scope, same pattern as .parcel-popup*. */
/* #353 phase 1 — in-map basemap switcher (Street / Satellite).
   Attached by leaflet-map.js#attachBasemapSwitcher as a Leaflet
   Control at topright. Two-button toggle group; aria-pressed
   drives the selected-state styling. Lives in brand.css because
   Leaflet controls render outside component CSS-isolation scope
   (same pattern as .parcel-popup / .parcel-zoom-hint). Kept in
   sync with ValidHunt.Maui/wwwroot/css/brand.css. */
.basemap-switcher {
    display: inline-flex;
    background: rgba(255, 252, 245, 0.95);   /* --surface at ~95% */
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* Reset Leaflet's default .leaflet-bar treatment (dark border,
       block layout) — we want a compact horizontal toggle. */
    border: 1px solid rgba(26, 60, 52, 0.20);
}

.basemap-switcher__btn {
    background: transparent;
    color: var(--ink);
    border: none;
    padding: 5px 10px;
    font-family: var(--type-family-body, system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    line-height: 1;
}

.basemap-switcher__btn:not(:last-child) {
    border-right: 1px solid rgba(26, 60, 52, 0.15);
}

.basemap-switcher__btn:hover {
    background: rgba(26, 60, 52, 0.06);
}

/* Keyboard focus indicator. The switcher parent has `overflow: hidden`
   for the rounded-pill treatment, which would clip a standard outward
   focus ring — use negative outline-offset so the ring draws INSIDE
   the button bounds and stays visible. Copilot #359 a11y flag. */
.basemap-switcher__btn:focus-visible {
    outline: 2px solid var(--brand, #1A3C34);
    outline-offset: -2px;
}

.basemap-switcher__btn[aria-pressed="true"] {
    background: var(--brand, #1A3C34);
    color: #fff;
    font-weight: 600;
}

/* When the pressed button is focused, invert the outline so it
   remains visible against the dark-brand background. */
.basemap-switcher__btn[aria-pressed="true"]:focus-visible {
    outline-color: #fff;
}

/* Overlay chips as a Leaflet Control (#416). Rendered by JS
   (leaflet-map.js#attachOverlayChipsControl) so scoped Blazor CSS
   can't reach these class names — they live here alongside the
   sibling basemap-switcher control that stacks in the same
   .leaflet-top-right column. Kept in sync with
   ValidHunt.Maui/wwwroot/css/brand.css. */
.validhunt-overlay-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.validhunt-overlay-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg, #FFFFFF);
    border: 1px solid var(--border-soft, rgba(166, 123, 91, 0.4));
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--ink, #2C2C2C);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(20, 14, 8, 0.08);
    font-family: inherit;
}

.validhunt-overlay-chip:hover {
    border-color: var(--brand, #1A3C34);
    color: var(--brand, #1A3C34);
}

/* Focus ring inside the pill bounds — same treatment as
   .basemap-switcher__btn:focus-visible. */
.validhunt-overlay-chip:focus-visible {
    outline: 2px solid var(--brand, #1A3C34);
    outline-offset: -2px;
}

.validhunt-overlay-chip--on {
    background: var(--brand, #1A3C34);
    color: white;
    border-color: var(--brand, #1A3C34);
}
.validhunt-overlay-chip--on:hover {
    color: white;
}
.validhunt-overlay-chip--on:focus-visible {
    outline-color: #fff;
}

.validhunt-overlay-chip__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-soft, rgba(166, 123, 91, 0.4));
}
.validhunt-overlay-chip--on .validhunt-overlay-chip__dot {
    background: rgba(255, 255, 255, 0.7);
}

.parcel-zoom-hint {
    background: rgba(26, 60, 52, 0.92);
    color: #fff;
    font-family: var(--type-family-body, system-ui, sans-serif);
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    /* Map interactions pass through the chip. Leaflet's Control
       positions the parent container at the map's bottom-left, so
       stacking order is already handled by Leaflet's own control
       pane — no z-index needed on this element (an unpositioned
       element ignores z-index anyway, per Copilot review). */
    pointer-events: none;
}

/* #164 — Bob validation review chip. Compact inline group; two icon
   buttons + collapsible note popover. Deliberately restrained visual
   weight so it doesn't dominate the season/rule/species surfaces
   it's attached to. */
.review-chip {
    display: inline-flex;
    /* #257 review (Mark P2): allow the note popover (`flex-basis: 100%`)
       to wrap onto its own row below the two buttons. Without wrap, the
       textarea lays out beside the buttons and overflows the pill. */
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(26, 60, 52, 0.05);
    border: 1px solid rgba(26, 60, 52, 0.15);
    border-radius: 999px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    /* Constrain the expanded (with-note) width so the pill doesn't
       stretch to the parent's full width when the note popover opens. */
    max-width: 480px;
}
.review-chip--busy { opacity: 0.7; }
.review-chip__btn {
    background: transparent;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    transition: background 120ms ease;
}
.review-chip__btn:hover { background: rgba(26, 60, 52, 0.10); }
.review-chip__btn--active {
    background: var(--brand);
    color: #fff;
}
.review-chip__btn--active:hover { background: var(--brand-soft); }
.review-chip__btn:disabled { cursor: not-allowed; opacity: 0.5; }
.review-chip__clear {
    background: transparent;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    color: rgba(107, 98, 88, 0.65);
    font-size: 0.9rem;
}
.review-chip__clear:hover { color: var(--brand); }
.review-chip__note {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.review-chip__note-label {
    font-size: 0.85rem;
    color: var(--brand);
}
.review-chip__note-input {
    width: 100%;
    min-height: 60px;
    padding: 6px 8px;
    border: 1px solid rgba(26, 60, 52, 0.20);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.review-chip__note-actions {
    display: flex;
    gap: 8px;
}
.review-chip__note-save,
.review-chip__note-clear {
    padding: 4px 10px;
    border: 1px solid rgba(26, 60, 52, 0.20);
    background: #fff;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}
.review-chip__note-save { background: var(--brand); color: #fff; border-color: var(--brand); }
.review-chip__note-save:hover { background: var(--brand-soft); }
.review-chip__note-clear:hover { border-color: var(--brand); color: var(--brand); }

/* #164 — Admin triage view. Simple table layout using CSS grid
   for row alignment; no heavy component library. */
.admin-shell { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.admin-shell__head { margin-bottom: 24px; }
.admin-shell__title { font-size: 1.75rem; color: var(--brand); margin: 4px 0 8px; }
.admin-shell__lead { color: rgba(107, 98, 88, 0.85); }
.admin-shell__denied,
.admin-shell__loading,
.admin-shell__empty {
    padding: 16px;
    background: rgba(26, 60, 52, 0.05);
    border-radius: 6px;
    color: var(--brand);
}
.admin-shell__toolbar { margin: 16px 0; display: flex; gap: 12px; }
.admin-shell__filter { display: inline-flex; gap: 8px; align-items: center; font-size: 0.9rem; }

.admin-review-table {
    display: grid;
    grid-template-columns: 60px 100px minmax(200px, 1fr) 180px minmax(200px, 1.5fr) 140px;
    gap: 0;
    border: 1px solid rgba(26, 60, 52, 0.15);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.9rem;
}
.admin-review-table__head {
    display: contents;
    font-weight: 600;
    color: var(--brand);
}
.admin-review-table__head > * {
    padding: 10px 12px;
    background: rgba(26, 60, 52, 0.08);
    border-bottom: 1px solid rgba(26, 60, 52, 0.15);
}
.admin-review-table__row { display: contents; }
.admin-review-table__row > * {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(26, 60, 52, 0.08);
    background: #fff;
}
.admin-review-table__row:last-child > * { border-bottom: none; }
.admin-review-table__verdict { font-size: 1.1rem; text-align: center; }
.admin-review-table__verdict--thumbsdown { background: rgba(214, 51, 42, 0.06) !important; }
.admin-review-table__note { color: rgba(107, 98, 88, 0.90); }