/* ===================================================================
   Ready to Stand Behind — Civic Clarity core tokens and status treatments
   Per Visual Design System and Production Asset Plan v0.2
   Fixed light theme. Production Phase 1.
   =================================================================== */

:root {
  /* --- Core visual tokens (approved, unchanged) ------------------- */
  --canvas:        #F4F2EC;   /* warm neutral working ground        */
  --paper:         #FFFFFF;   /* document and panel surfaces        */
  --ink:           #1F2D33;   /* primary text                       */
  --transit-navy:  #173B4F;   /* headers, primary actions, rules    */
  --evidence-teal: #2C7473;   /* focus, selection, route accent     */
  --muted-ink:     #5C6E74;   /* secondary text, labels             */
  --supported:     #2F6B58;   /* supported / complete               */
  --needs-review:  #7B5616;   /* revision required                  */
  --unresolved:    #8B3A3A;   /* unresolved                         */
  --border:        #CED8D7;   /* dividers and panel borders         */

  /* --- Spacing scale --------------------------------------------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- Shape ------------------------------------------------------ */
  --r-control: 6px;
  --r-panel:   9px;
  --r-document: 2px;          /* client-facing artifacts, near-square */
  --target:    44px;

  /* --- Typography ------------------------------------------------- */
  --ui:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* --- Elevation and focus ---------------------------------------- */
  --shadow: 0 1px 3px rgba(31, 45, 51, .08), 0 8px 24px rgba(31, 45, 51, .06);
  --focus-ring: 2px solid var(--evidence-teal);
  --focus-offset: 2px;

  --shell-max: 1440px;
}

/* --- Focus: never removed ----------------------------------------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-control);
}

/* --- Typographic roles -------------------------------------------- */
.label {
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-ink); margin: 0;
}
.client-artifact { font-family: var(--serif); border-radius: var(--r-document); }

/* ===================================================================
   STATUS TREATMENTS
   Six approved states. Every status renders an icon AND a text label.
   Color is secondary and never the sole carrier of meaning.
   =================================================================== */

.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 14px; font-weight: 500; line-height: 1.3;
}
.status .icon { width: 16px; height: 16px; flex-shrink: 0; }

.status--supported  { color: var(--supported); }     /* circle-check   */
.status--revision   { color: var(--needs-review); }  /* pencil         */
.status--unresolved { color: var(--unresolved); }    /* triangle-alert */
.status--awaiting   { color: var(--transit-navy); }  /* clock          */
.status--withheld   { color: var(--muted-ink); }     /* eye-off        */
.status--disclosed  { color: var(--needs-review); }  /* info           */

/* ===================================================================
   MAP-01 PRESENTATION
   The schematic is legible down to 960px. Below that it is presented in
   a horizontally scrollable region at its minimum legible width rather
   than scaled into illegibility. MAP-02 carries the full information as
   text at every width and is the primary path for any user who cannot
   or does not want to read the graphic.
   =================================================================== */

.map-figure { margin: 0; }

.map-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--paper);
}
.map-scroll:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.map-scroll img { display: block; width: 100%; min-width: 960px; height: auto; }

.map-scroll-hint {
  font-size: 13px; color: var(--muted-ink);
  margin: var(--s2) 0 0;
}
@media (min-width: 1000px) { .map-scroll-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}