/* ==========================================================================
   Invest Atlanta KPI dashboard.

   BRAND TOKENS — the only block to edit when the palette or typefaces change.
   Everything below is written against roles, so substituting these values
   restyles the whole dashboard.

   Values are Invest Atlanta's own, read from investatlanta.com's stylesheet
   (2026-09-02): navy #002D56 (text, headings, nav), cyan #009DDC (primary,
   links, buttons, the "At A Glance" figures), medium blue #0070AF, green
   #5e9732, borders #dbe2e9, light ground #f6f8f9, muted grey #7c878e. The
   header on the site runs a #009DDC → #0070AF → #002D56 gradient; the logo
   is #0e2b4d + #009ade. The site's type is Futura PT and Bree Serif from
   Adobe Typekit, which is licensed to their domain only, so this page uses
   the closest Google Fonts equivalents: Jost for Futura, Bree Serif itself.
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- brand ------------------------------------------------------------ */
  --brand-ink:        #002d56;   /* navy */
  --brand-accent:     #009ddc;   /* cyan */
  --brand-mid:        #0070af;
  --brand-green:      #5e9732;
  --brand-gradient: linear-gradient(90deg, #009ddc, #0070af, #002d56);
  --font-display: "Jost", "Futura PT", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Jost", "Futura PT", Futura, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Bree Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- surfaces & ink: white, crisp -------------------------------------- */
  --surface-page:     #ffffff;
  --surface-1:        #ffffff;
  --surface-2:        #f6f8f9;
  --border:           #dbe2e9;
  --border-strong:    #b9c6d2;
  --text-primary:     #002d56;
  --text-secondary:   #3f556b;
  --text-muted:       #7c878e;

  /* --- categorical: brand cyan / green / navy ---------------------------- */
  --series-1:         #009ddc;   /* cyan  — Economic Development */
  --series-2:         #5e9732;   /* green — Community Development */
  --series-3:         #002d56;   /* navy  — Other / unclassified */

  /* --- sequential cyan→navy ramp, for magnitude -------------------------- */
  --seq-250: #8fd3f2; --seq-350: #3fb6e6; --seq-450: #009ddc; --seq-550: #0070af;

  --warn:             #d98a00;
  --grid:             #e6ecf1;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,45,86,.06), 0 1px 8px rgba(0,45,86,.05);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --brand-ink:      #e6eef6;
    --brand-accent:   #2fb3ea;
    --brand-mid:      #1f8ccc;
    --brand-green:    #7ab84f;
    --surface-page:   #0b1a2b;
    --surface-1:      #10223a;
    --surface-2:      #172c47;
    --border:         #24405e;
    --border-strong:  #365780;
    --text-primary:   #f2f6fa;
    --text-secondary: #bccbdb;
    --text-muted:     #8aa0b6;
    --series-1:       #2fb3ea;
    --series-2:       #7ab84f;
    --series-3:       #8fb3d9;
    --seq-250: #0d4a73; --seq-350: #0f6ea3; --seq-450: #2fb3ea; --seq-550: #7fd0f3;
    --warn:           #e0a030;
    --grid:           #1d3350;
    --shadow: 0 1px 2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-ink:      #e6eef6;
  --brand-accent:   #2fb3ea;
  --brand-mid:      #1f8ccc;
  --brand-green:    #7ab84f;
  --surface-page:   #0b1a2b;
  --surface-1:      #10223a;
  --surface-2:      #172c47;
  --border:         #24405e;
  --border-strong:  #365780;
  --text-primary:   #f2f6fa;
  --text-secondary: #bccbdb;
  --text-muted:     #8aa0b6;
  --series-1:       #2fb3ea;
  --series-2:       #7ab84f;
  --series-3:       #8fb3d9;
  --seq-250: #0d4a73; --seq-350: #0f6ea3; --seq-450: #2fb3ea; --seq-550: #7fd0f3;
  --warn:           #e0a030;
  --grid:           #1d3350;
  --shadow: 0 1px 2px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-primary);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 20px 64px; }

/* --- header / filters ----------------------------------------------------- */
/* The site's header gradient, as a thin rule across the top of the page. */
body::before { content: ""; display: block; height: 5px; background: var(--brand-gradient); }
header.top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 18px; }
.brand { display: flex; flex-direction: column; gap: 10px; }
.wordmark { display: inline-block; width: 232px; max-width: 60vw; line-height: 0; }
.wordmark svg { width: 100%; height: auto; display: block; }
.wordmark .ink { fill: var(--brand-ink); }
.wordmark .cyan { fill: var(--brand-accent); }
h1 { font: 600 26px/1.2 var(--font-display); margin: 0 0 4px; color: var(--brand-ink);
  letter-spacing: -.005em; }
.sub { color: var(--text-secondary); font: italic 15px/1.4 var(--font-serif); margin: 0; }

/* Filters live in one row above the charts. */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600; }
/* Every filter control renders from this one rule, not from the browser's
   native widget: Safari draws <select> and search fields at its own height,
   so the custom year picker (a button) sat visibly taller than its
   neighbours. appearance:none puts them all on the same 34px box, and the
   selects get one shared chevron. */
select, input[type="search"], button {
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 0 10px; height: 34px; line-height: 32px;
}
select, .picker {
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237c878e' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
select { min-width: 128px; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button { cursor: pointer; }
button:hover, select:hover { border-color: var(--brand-accent); }
button.ghost { background: transparent; }
button.ghost[aria-pressed="true"] { background: var(--surface-2); border-color: var(--brand-accent); }
button.sm { padding: 0 8px; height: 28px; line-height: 26px; font-size: 12px; }

/* Year picker: a button that opens a small panel of presets + checkboxes. A
   native <select multiple> needs modifier keys and shows as a tall box; this
   reads as one filter control like its neighbours. */
.field.multi { position: relative; }
.picker { min-width: 128px; text-align: left; }
.menu { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px;
  min-width: 220px; padding: 8px; background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.menu-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.menu-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.menu-list label { display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  font-size: 13px; border-radius: 6px; cursor: pointer; }
.menu-list label:hover { background: var(--surface-2); }
.menu-list input { width: auto; margin: 0; }
.menu-hint { font-size: 11px; color: var(--text-muted); margin: 6px 4px 0; }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* --- panels --------------------------------------------------------------- */
section.panel { background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; }
.panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 14px; }
h2 { font: 600 16px/1.3 var(--font-display); margin: 0; color: var(--brand-ink); }
.panel-note { font-size: 12px; color: var(--text-muted); margin: 0; max-width: 62ch; }

/* --- headline stat tiles -------------------------------------------------- */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.card { background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
/* Reserve two lines for the label so the big numbers align across the row
   whether or not a label wraps. */
.card .label { font: 400 12.5px/1.25 var(--font-serif); color: var(--text-secondary);
  display: block; margin-bottom: 6px; min-height: 2.5em; }
.card .value { font: 600 30px/1.1 var(--font-display); letter-spacing: -.01em;
  color: var(--brand-accent); font-variant-numeric: tabular-nums; display: block; }
.card .meta { font-size: 11px; color: var(--text-muted); margin-top: auto;
  padding-top: 5px; display: block; }
.card.flagged { border-color: var(--warn); }
.card .flag { color: var(--warn); font-weight: 600; }

/* --- charts --------------------------------------------------------------- */
.chart-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .chart-grid.two { grid-template-columns: 1fr 1fr; } }
figure { margin: 0; }
figcaption { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis-label { fill: var(--text-muted); font-size: 11px; }
svg.chart .val-label { fill: var(--text-secondary); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
svg.chart .bar { transition: opacity .12s; }
svg.chart .hit { fill: transparent; cursor: pointer; }
svg.chart.dim .bar { opacity: .35; }
svg.chart .bar.unselected { opacity: .38; }   /* years outside the active selection */
svg.chart .bar.active { opacity: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.tooltip { position: fixed; z-index: 40; pointer-events: none; opacity: 0;
  transition: opacity .1s; background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px;
  font-size: 12px; box-shadow: 0 4px 16px rgba(11,11,11,.16); max-width: 280px; }
.tooltip[data-show="true"] { opacity: 1; }
.tooltip .tt-title { font-weight: 600; margin-bottom: 4px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px;
  font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tooltip .tt-row b { color: var(--text-primary); font-weight: 600; }

/* --- tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.section-row td { background: var(--surface-2); font-weight: 600;
  color: var(--brand-ink); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover td { background: var(--surface-2); }
.adj { color: var(--text-muted); font-size: 11px; }

/* --- map ------------------------------------------------------------------ */
#map { height: 460px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); }
.map-fallback { display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 24px; text-align: center; color: var(--text-secondary);
  font-size: 13px; }

/* --- misc ---------------------------------------------------------------- */
.banner { border-left: 3px solid var(--warn); background: var(--surface-2);
  padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 13px;
  color: var(--text-secondary); margin-bottom: 16px; }
.banner b { color: var(--text-primary); }
.loading { color: var(--text-muted); font-size: 13px; padding: 20px 0; }
.error { color: #b3261e; font-size: 13px; }  /* semantic, same in both themes */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
footer { color: var(--text-muted); font-size: 12px; margin-top: 28px; line-height: 1.6; }

/* MapLibre popups, themed. The library ships light-only defaults. */
.maplibregl-popup-content { background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(11,11,11,.16); }
.maplibregl-popup-tip { border-top-color: var(--surface-1) !important;
  border-bottom-color: var(--surface-1) !important; }
.ia-district-popup .maplibregl-popup-content { padding: 6px 9px; }