/* Chat surface stylesheet - extracted verbatim from homepage.html
   (modularize F2). Sections keep their original ── headers. */
  /* ── Shared design tokens (identical values to place.html) ──────────── */
  :root {
    --bg: #FAFBFC;
    --bg-card: #FFFFFF;
    --bg-rail: #F4F5F7;
    --bg-strip: #1A2A3A;

    --ink-1: #0F1B2A;
    --ink-2: #3A4A5C;
    --ink-3: #6A7585;
    --ink-4: #9AA4B2;

    --line-1: #E4E7EC;
    --line-2: #D0D5DD;

    --dw-blue: #2D6A99;
    --dw-blue-dark: #003A66;
    --dw-orange: #E8872A;

    --ok: #1D8C6B;
    --warn: #C08A20;
    --stale: #B8486E;

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'Manrope', -apple-system, system-ui, sans-serif;
  }

  body { font-family: var(--sans); background: var(--bg); -webkit-font-smoothing: antialiased; }

  /* Map the existing Material-icon class onto the Symbols font we now load,
     so all 26 existing icon spots render without touching their markup. */
  .material-icons-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
    vertical-align: middle;
  }
  /* Hide the icon ligature text until the Material Symbols font loads, so the raw
     word ("auto_awesome", "place", …) never flashes (FOUT). Revealed by the
     reveal script below once the font is ready (with a timeout fallback). */
  html:not(.icons-ready) .material-icons-outlined { visibility: hidden; }
  /* Font failed to load (blocked/offline): no icon beats ligature text. */
  html.icons-off .material-icons-outlined { display: none; }
  /* A repeated canned ask jumps back to its existing answer; pulse the
     question bubble so the jump reads as "you already have this". */
  @keyframes dwcJumpPulse { 0% { box-shadow: 0 0 0 0 rgba(232, 135, 42, .55); }
                            100% { box-shadow: 0 0 0 14px rgba(232, 135, 42, 0); } }
  .chat-msg.dwc-jumped .bubble { animation: dwcJumpPulse 1.2s ease-out 2; }
  /* All numerals use the mono face, matching place.html's panel values. */
  .dw-figure { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; }
  /* AI answer data card + chart */
  .ai-cards { display: grid; gap: 12px; }
  /* Answer cards stack on phones (the inline 340px columns overflow otherwise). */
  @media (max-width: 640px) { .ai-cards { grid-template-columns: 1fr !important; } }

  /* Hero turnstile - the orange tagline rotates through the value props. */
  .hero-turnstile {
    display: inline-block;
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
  }
  .hero-turnstile.is-swapping { opacity: 0; transform: translateY(-0.22em); }
  @media (prefers-reduced-motion: reduce) { .hero-turnstile { transition: none; } }

  /* "Try asking" suggestion pills — readable chips instead of a crowded link
     list. .go-chip shares the look but navigates instead of firing a chat
     question (ask.js binds every .ask-chip to the composer). */
  .ask-chip, .go-chip {
    display: inline-flex; align-items: center;
    font-size: 12px; line-height: 1.2; color: #3A4A5C;
    background: #fff; border: 1px solid #E4E7EC; border-radius: 9999px;
    padding: 5px 11px; text-decoration: none; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  }
  .ask-chip:hover, .go-chip:hover {
    color: #003A66; border-color: #2D6A99; background: #F4F9FD;
    box-shadow: 0 1px 4px rgba(45,106,153,0.10);
  }
  .go-chip .material-icons-outlined { font-size: 14px; margin-right: 5px; color: #9AA4B2; }
  .go-chip:hover .material-icons-outlined { color: #E8872A; }

  /* Use-case carousel controls. */
  .uc-dot { width: 8px; height: 8px; border-radius: 9999px; background: #CBD5E1;
    border: none; padding: 0; cursor: pointer; transition: background .2s, width .2s; }
  .uc-dot.is-active { background: #E8872A; width: 22px; }
  .uc-arrow { width: 34px; height: 34px; border-radius: 9999px; border: 1px solid #CBD5E1;
    background: #fff; color: #475569; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; transition: border-color .2s, color .2s; }
  .uc-arrow:hover { border-color: #2D6A99; color: #2D6A99; }
  @media (prefers-reduced-motion: reduce) { .uc-track { transition: none; } }

  /* Bare mode: chrome-less chat surface for embedding beside the report PDF. */
  html.chat-bare .site-strip,
  html.chat-bare .site-topbar,
  html.chat-bare .chat-hero-head { display: none !important; }
  .ai-card { background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; }
  .ai-place { font-size: 15px; color: #0F1B2A; font-weight: 700; line-height: 1.2; }
  .ai-label { font-size: 12px; color: #6A7585; font-weight: 600; margin-bottom: 4px; }
  .ai-value { font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 700; color: #0F1B2A; line-height: 1.05; letter-spacing: -0.02em; }
  .ai-value .ai-year { font-size: 13px; color: #9AA4B2; font-weight: 500; font-family: 'Manrope', sans-serif; margin-left: 4px; }
  .ai-trend { font-size: 12px; margin-top: 4px; font-weight: 500; color: #6A7585; }
  .ai-trend.down { color: #B8486E; }
  .ai-trend.up { color: #1D8C6B; }
  .ai-chart { margin-top: 12px; width: 100%; aspect-ratio: 320 / 116; }
  .aic-svg { width: 100%; height: 100%; display: block; }
  .aic-line { fill: none; stroke: #2D6A99; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .aic-area { fill: #2D6A99; opacity: 0.08; stroke: none; }
  .aic-axis { stroke: #E4E7EC; stroke-width: 1; }
  .aic-dot { fill: #E8872A; }
  .aic-pt { cursor: pointer; }
  .aic-pt:hover { fill: #2D6A99; fill-opacity: 0.85; }
  .ai-axis { display: flex; justify-content: space-between; font-size: 10px; color: #9AA4B2; font-family: ui-monospace, monospace; margin-top: 3px; letter-spacing: 0.03em; }
  .ai-source { margin-top: 8px; font-size: 11px; color: #9AA4B2; font-weight: 500; }
  .ai-source a { color: #2D6A99; text-decoration: underline; }
  .ai-source a:hover { color: #E8872A; }
  .ai-link { margin-top: 12px; font-size: 13px; color: #2D6A99; text-decoration: none; font-weight: 600; align-self: flex-start; }
  .ai-link:hover { color: #003A66; text-decoration: underline; }
  /* Row of chart-to-surface links (place page · Explorer · map). */
  .ai-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
  .ai-links .ai-link { margin-top: 0; }
  /* Compact choropleth map card (from the show_map tool) - mirrors .ai-card. */
  .aimap-card { margin-top: 12px; max-width: 420px; }
  .ai-scatter { width: 100%; height: auto; display: block; margin-top: 8px; }
  .aimap-card .ai-label { text-transform: capitalize; }
  .tract-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
  .tract-stat { background: #F7F3F0; border-radius: 6px; padding: 5px 9px; font-size: 10.5px; color: #6A7585; line-height: 1.25; }
  .tract-stat b { display: block; font-size: 15px; color: #922B21; font-weight: 700; }
  .tract-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11.5px; }
  .tract-tbl th { text-align: left; color: #9AA4B2; font-weight: 600; border-bottom: 1px solid #EEF0F3; padding: 3px 6px; }
  .tract-tbl td { padding: 3px 6px; border-bottom: 1px solid #F4F5F7; color: #3A4452; }
  .tract-tbl .tr-rk { color: #B0B8C2; font-size: 10px; }
  .tract-note { margin-top: 8px; font-size: 10.5px; color: #9AA4B2; line-height: 1.4; }
  .need-tbl td:nth-child(2) b { color: #922B21; }
  .need-drv { display: inline-block; background: #F7F3F0; border-radius: 5px; padding: 1px 6px; font-size: 10.5px; color: #5A6B7B; margin: 1px 2px 1px 0; white-space: nowrap; }
  .tract-card { max-width: none; }
  .tract-charts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; align-items: flex-start; }
  .tract-chart { flex: 1 1 260px; min-width: 0; }
  .tract-chart-h { font-size: 10.5px; color: #9AA4B2; font-weight: 600; margin-bottom: 2px; }
  .tract-map { width: 100%; height: auto; display: block; }
  .tract-map path { transition: stroke 0.08s; cursor: pointer; }
  .tract-legend { display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: #9AA4B2; margin-top: 3px; justify-content: center; }
  .tract-legend span { width: 14px; height: 9px; display: inline-block; border-radius: 1px; }
  /* cross-highlight: same tract lit across map, scatter, table */
  .tract-card path.tr-hi { stroke: #1B2430 !important; stroke-width: 1.6 !important; }
  .tract-card circle.tr-dot.tr-hi { fill: #1B2430; fill-opacity: 1; stroke: #fff; stroke-width: 1; }
  .tract-card tr.tr-hi { background: #fbeee8; }
  .tract-card tr.tr-cell { cursor: default; }
  .aimap-wrap { margin-top: 12px; width: 100%; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 8px; padding: 8px; }
  /* Catalog card: datasets grouped by SITE TOPIC, each section with its
     topic icon + an Explore link into the topic page. */
  .cat-sec { margin-top: 14px; }
  .cat-sec-head { display: flex; align-items: center; gap: 8px; }
  .cat-sec-icon { width: 26px; height: 26px; border-radius: 7px;
    background: var(--dw-blue-light, #E8F1F8); color: var(--dw-blue);
    display: flex; align-items: center; justify-content: center; }
  .cat-sec-icon .material-icons-outlined { font-size: 16px; }
  .cat-sec-title { font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 700; color: var(--dw-blue); }
  .cat-sec-more { margin-left: auto; font-size: 12px; color: var(--dw-blue);
    text-decoration: none; }
  .cat-sec-more:hover { text-decoration: underline; }
  .cat-ds { padding: 10px 0; border-top: 1px solid var(--line, #e5eaf0); }
  .cat-ds:first-of-type { border-top: 0; }
  .cat-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .cat-title { font-weight: 600; font-size: 14px; color: var(--dw-blue); text-decoration: none; }
  .cat-title:hover { text-decoration: underline; }
  .cat-cov { font-size: 11.5px; color: var(--ink-4); font-family: var(--mono); }
  .cat-org { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
  .cat-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
  .cat-exs { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
  .cat-ex { font-size: 12px; color: var(--dw-blue); text-decoration: none;
    border: 1px solid var(--line, #dbe3ec); border-radius: 999px; padding: 2px 10px; }
  .cat-ex:hover { border-color: var(--dw-blue); background: #E8F1F8; }

  .aimap-svg { width: 100%; height: auto; max-height: 280px; display: block; }
  /* Same boundary treatment as the full /map page: filled parent backdrop with
     a constant screen-pixel stroke, so children float in geographic context
     even when most of them shade at the lightest ramp stop. */
  .aimap-outline { fill: #EEF3F8; stroke: #9FB4C8; stroke-width: 1.25;
    stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
  .aimap-f { stroke: #fff; stroke-width: 0.6; stroke-linejoin: round;
    vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .12s; }
  .aimap-f:hover { opacity: 0.72; }
  .aimap-legend { margin-top: 10px; }
  .aimap-ramp { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
  .aimap-ramp > span { flex: 1; }
  .aimap-labels { display: flex; justify-content: space-between; font-size: 10px; color: #9AA4B2; font-family: ui-monospace, monospace; margin-top: 3px; }
  /* "Richer data available" stand-out marker + hover tooltip. */
  .ai-rich { position: relative; display: inline-flex; align-items: center; gap: 5px;
    margin-top: 12px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; color: #B0640F;
    background: linear-gradient(180deg,#FDF6EC,#FBF1E6); border: 1px solid #EFD6B6;
    border-radius: 999px; text-decoration: none; cursor: pointer; align-self: flex-start;
    box-shadow: 0 1px 2px rgba(176,100,15,.10); transition: background .12s, border-color .12s, box-shadow .12s; }
  .ai-rich:hover { border-color: #B0640F; box-shadow: 0 2px 8px rgba(176,100,15,.18); }
  .ai-rich-ic { font-size: 16px; }
  .ai-rich-mini { padding: 2px; margin: 0 0 0 2px; border-radius: 50%; box-shadow: none; gap: 0; }
  .ml-leg .ai-rich-mini { align-self: center; }
  .ai-rich-tip { position: absolute; bottom: calc(100% + 9px); left: 0; z-index: 40; width: 248px;
    padding: 9px 12px; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: #fff;
    background: #0F1B2A; border-radius: 9px; box-shadow: 0 8px 24px rgba(15,27,42,.26);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
  .ai-rich-tip b { color: #FBC98A; font-weight: 700; }
  .ai-rich:hover .ai-rich-tip { opacity: 1; visibility: visible; transform: translateY(0); }
  .ai-rich-mini .ai-rich-tip { left: 50%; margin-left: -124px; }
  /* AI ranking list card */
  .rk-card { background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; padding: 8px 6px; }
  .rk-head { font-size: 11px; color: #6A7585; font-weight: 600; padding: 4px 10px 8px; border-bottom: 1px solid #E4E7EC; margin-bottom: 4px; }
  .rk-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; text-decoration: none; color: inherit; }
  .rk-row:hover { background: #F4F5F7; }
  .rk-row.rk-hi { background: #FDF1E7; box-shadow: inset 3px 0 0 #E8872A; }
  .rk-row.rk-hi .rk-place { font-weight: 700; color: #1B2430; }
  .rk-rank { width: 18px; text-align: right; font-family: ui-monospace, monospace; font-size: 12px; color: #9AA4B2; }
  .rk-gap { text-align: center; color: #C2C9D2; font-size: 12px; line-height: 8px; padding: 2px 0; letter-spacing: 2px; }
  .demo-card { max-width: none; }
  .demo-scroll { max-height: 440px; overflow: auto; margin-top: 8px; border: 1px solid #EDF0F3; border-radius: 8px; }
  .demo-table { width: 100%; font-size: 12.5px; }
  .demo-table th { position: sticky; top: 0; background: #F7F9FB; z-index: 1; white-space: nowrap; }
  .demo-table td, .demo-table th { padding: 5px 9px; }
  .demo-table tbody tr:nth-child(even) { background: #FBFCFD; }
  .rk-place { flex: 1; font-size: 14px; color: #0F1B2A; }
  .rk-row:hover .rk-place { color: #2D6A99; }
  .rk-val { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: #0F1B2A; }

  /* ── One-click follow-up refinement chips ── */
  .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .ai-chip { font-size: 12.5px; font-weight: 600; color: #2D6A99; background: #EAF2F8;
    border: 1px solid #B9D3E6; border-radius: 14px; padding: 5px 11px; cursor: pointer;
    font-family: inherit; line-height: 1.3; }
  .ai-chip:hover { background: #DCEAF5; border-color: #2D6A99; }

  /* ── Multi-line comparison card ── */
  .ml-card { grid-column: 1 / -1; }
  .ml-chart { margin-top: 10px; width: 100%; aspect-ratio: 520 / 200; }
  .ml-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
  .ml-leg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #0F1B2A; font-size: 12.5px; }
  .ml-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
  .ml-leg-name { font-weight: 600; color: #0F1B2A; text-decoration: none; }
  .ml-leg-name:hover { color: #2D6A99; text-decoration: underline; }
  .ml-leg-val { font-family: ui-monospace, 'JetBrains Mono', monospace; color: #6A7585; }
  .ml-src { color: #6A7585; text-decoration: underline; text-decoration-color: #C5CCD6; text-underline-offset: 2px; }
  .ml-src:hover { color: #2D6A99; text-decoration-color: #2D6A99; }

  /* ── "View data" affordance + slide-out raw-data drawer ── */
  .ai-data-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 3px 8px;
    font-size: 11.5px; font-weight: 600; color: #6A7585; background: #F4F5F7; border: 1px solid #E4E7EC;
    border-radius: 6px; cursor: pointer; align-self: flex-start; line-height: 1.4; font-family: inherit; }
  .ai-data-btn:hover { color: #2D6A99; border-color: #B9D3E6; background: #EAF2F8; }
  .ai-data-btn .material-icons-outlined { font-size: 14px; }
  .rk-head-wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 10px 8px; border-bottom: 1px solid #E4E7EC; margin-bottom: 4px; }
  .rk-head-wrap .rk-head { padding: 0; border: 0; margin: 0; }
  .rk-head-wrap .ai-data-btn { margin-top: 0; }

  .dw-backdrop { position: fixed; inset: 0; background: rgba(15,27,42,.18); opacity: 0; pointer-events: none;
    transition: opacity .22s ease; z-index: 998; }
  .dw-backdrop.show { opacity: 1; pointer-events: auto; }
  .dw-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 92vw); background: #fff;
    border-left: 1px solid #E4E7EC; box-shadow: -8px 0 28px rgba(15,27,42,.14); z-index: 999;
    transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column; }
  .dw-drawer.open { transform: translateX(0); }
  .dw-drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid #E4E7EC; }
  .dw-drawer-title { flex: 1; min-width: 0; }
  .dw-drawer-title .dw-t1 { font-size: 15px; font-weight: 700; color: #0F1B2A; line-height: 1.25; }
  .dw-drawer-title .dw-t2 { font-size: 12px; color: #6A7585; font-weight: 600; margin-top: 2px; }
  .dw-close { flex: none; border: 0; background: transparent; cursor: pointer; color: #6A7585; padding: 2px;
    border-radius: 6px; display: flex; }
  .dw-close:hover { background: #F4F5F7; color: #0F1B2A; }
  .dw-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 24px; }
  .dw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .dw-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: #9AA4B2; font-weight: 700; padding: 8px 8px 6px; border-bottom: 1px solid #E4E7EC; position: sticky; top: 0; background: #fff; }
  .dw-table td { padding: 6px 8px; border-bottom: 1px solid #F0F1F4; color: #0F1B2A; }
  .dw-table td.dw-num, .dw-table th.dw-num { text-align: right; font-family: ui-monospace, 'JetBrains Mono', monospace; }
  .dw-table tr.dw-yr td { background: #F8F9FB; font-weight: 700; border-top: 1px solid #E4E7EC; }
  .dw-table tr.dw-yr.dw-hl td { background: #FBF1E6; color: #B0640F; }
  .dw-table tr.dw-month td:first-child { padding-left: 18px; color: #6A7585; }
  .dw-foot { margin-top: 14px; font-size: 11.5px; color: #6A7585; line-height: 1.5; }
  .dw-foot a { color: #2D6A99; font-weight: 600; text-decoration: none; }
  .dw-foot a:hover { text-decoration: underline; }
  .dw-copy-wrap { margin-top: 14px; }
  .dw-copy-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
    font-size: 12.5px; font-weight: 600; color: #2D6A99; background: #fff; cursor: pointer;
    border: 1px solid #D5DAE1; border-radius: 7px; transition: background .12s, border-color .12s; }
  .dw-copy-btn:hover { background: #F4F7FA; border-color: #2D6A99; }
  .dw-copy-btn .material-icons-outlined { font-size: 16px; }
  .dw-dl-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
    margin-left: 8px; font-size: 12.5px; font-weight: 600; color: #fff; background: #2D6A99;
    cursor: pointer; border: 1px solid #2D6A99; border-radius: 7px; text-decoration: none;
    transition: background .12s; }
  .dw-dl-btn:hover { background: #245880; }
  .dw-dl-btn .material-icons-outlined { font-size: 16px; }

  /* ── Dedicated /chat surface: a single column that fills the viewport BELOW
     the header (height set by JS → --chat-h, since the header height varies),
     conversation scrolling, composer pinned to the bottom. ── */
  #hero.chat-page { padding: 0; }
  #hero.chat-page .hero-grid {
    display: flex; flex-direction: column; gap: 0;
    height: var(--chat-h, calc(100vh - 96px));
    max-width: 1040px; margin: 0 auto; padding: 14px 24px 18px; }
  #hero.chat-page .mission-col,
  #hero.chat-page #hero-tabs,
  #hero.chat-page #panel-place { display: none; }
  #hero.chat-page .search-col,
  #hero.chat-page #hero-search,
  #hero.chat-page #panel-ask {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%;
    position: relative; }
  #hero.chat-page #chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 0 14px; }
  #hero.chat-page #chat-log.hidden { display: none; }
  #hero.chat-page #ask-form { flex: none; padding-top: 12px; border-top: 1px solid #E4E7EC; }
  /* Translucent "jump to latest" button - appears whenever content sits below the fold. */
  #chat-jump {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px; z-index: 6;
    width: 38px; height: 38px; border-radius: 50%; display: none;
    align-items: center; justify-content: center; cursor: pointer;
    background: rgba(255, 255, 255, .8); backdrop-filter: blur(5px);
    border: 1px solid #D6DEE8; box-shadow: 0 3px 12px rgba(15, 27, 42, .16);
    color: #2D6A99; transition: background .15s, box-shadow .15s, opacity .15s; }
  #chat-jump.show { display: flex; }
  #chat-jump:hover { background: #fff; box-shadow: 0 4px 16px rgba(15, 27, 42, .22); }
  #chat-jump .material-icons-outlined { font-size: 20px; }
  /* Composer: smaller, in line with the conversation text (was oversized). */
  #hero.chat-page #ask-input { font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
  #hero.chat-page #ask-form .px-6 { padding-left: 18px; padding-right: 12px; }
  #hero.chat-page #ask-submit { padding-top: 6px; padding-bottom: 6px; }
  #hero.chat-page #ask-examples { flex: none; margin-top: 12px; }
  .chat-hero-head { text-align: center; }
  /* Landing (no question yet): center heading + composer; hide examples once chatting. */
  #hero.chat-page:not(.chat-active) #panel-ask { justify-content: center; }
  #hero.chat-page.chat-active .chat-hero-head,
  #hero.chat-page.chat-active #ask-examples { display: none; }

  .chat-msg { margin: 16px 0; }
  .chat-msg.user { display: flex; justify-content: flex-end; }
  .chat-msg.user .bubble { background: #003A66; color: #fff; padding: 9px 14px; border-radius: 16px 16px 4px 16px; max-width: 80%; font-size: 15px; line-height: 1.45; }
  .chat-msg.assistant { display: flex; gap: 10px; }
  .chat-msg.assistant .ai-sparkle { color: #E8872A; flex: none; font-size: 18px; line-height: 1.5; }
  .chat-msg.assistant .ai-body { flex: 1; min-width: 0; }
  .ai-text { color: #0F1B2A; line-height: 1.6; font-size: 15px; white-space: pre-wrap; }
  .ai-text p { margin: 0 0 8px; } .ai-text p:last-child { margin-bottom: 0; }
  .ai-text ul { margin: 4px 0 8px; padding-left: 20px; list-style: disc; }
  .ai-text li { margin-bottom: 3px; }
  .ai-text a { color: #2D6A99; text-decoration: underline; font-weight: 600; }
  .ai-text a:hover { color: #E8872A; }
  /* The crown reply renders links too (City+ card links live here). */
  .dwc-reply a { color: #2D6A99; text-decoration: underline; font-weight: 600; }
  .dwc-reply a:hover { color: #E8872A; }
  /* City+ card/fold jump links: unmistakably a link, with a jump affordance -
     these scroll the page BEHIND the drawer to the card. */
  .ai-text a.dwc-cardlink, .dwc-reply a.dwc-cardlink {
    color: #2D6A99; font-weight: 700;
    text-decoration: underline; text-decoration-color: #E8872A;
    text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .ai-text a.dwc-cardlink::after, .dwc-reply a.dwc-cardlink::after {
    content: ' \2197'; font-size: 12px; color: #E8872A; font-weight: 700; }
  .ai-text a.dwc-cardlink:hover, .dwc-reply a.dwc-cardlink:hover { color: #E8872A; }
  .ai-text.typing::after { content: '▋'; color: #9AA4B2; margin-left: 1px; animation: aicaret 1s steps(1) infinite; }
  /* Live activity log while the pipeline works: newest line bright with a
     caret, older lines fade toward the top and scroll away (max 4 kept). */
  .ask-log { display: flex; flex-direction: column; gap: 2px; }
  .ask-log-line { font-size: 13px; color: #8A94A4; opacity: .3;
    transition: opacity .5s ease; animation: asklinein .3s ease; }
  .ask-log-line:nth-last-child(2) { opacity: .55; }
  /* Newest line: shimmer sweep (the line visibly "works" even when the
     pipeline is deep in one long stage) + a ticking seconds counter. */
  .ask-log-line:last-child { opacity: 1; color: transparent;
    background: linear-gradient(100deg, #7C8797 42%, #1E2A3A 50%, #7C8797 58%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    animation: asklinein .3s ease, askshimmer 2.2s linear infinite; }
  .ask-log-tick { font-size: 11px; letter-spacing: .02em; }
  @keyframes asklinein { from { opacity: 0; transform: translateY(5px); } }
  @keyframes askshimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  /* Source-chooser: pick which variable a forked metric means */
  .dwc-clarify { white-space: normal; }
  .dwc-clarify-q { font-weight: 600; color: #0F1B2A; margin: 2px 0 10px; }
  .dwc-clarify-opt { display: block; width: 100%; text-align: left; cursor: pointer;
    background: #FFF; border: 1px solid #D6DEE8; border-radius: 10px; padding: 10px 12px;
    margin: 0 0 8px; transition: border-color .12s, background .12s; }
  .dwc-clarify-opt:hover:not(:disabled) { border-color: #2D6A99; background: #F5F9FC; }
  .dwc-clarify-opt:disabled { cursor: default; opacity: .55; }
  .dwc-clarify-opt.chosen { border-color: #2D6A99; background: #EAF2F8; opacity: 1; }
  .dwc-clarify-label { font-weight: 600; color: #1B3A57; font-size: 14px; }
  .dwc-clarify-why { color: #5A6B7B; font-size: 13px; line-height: 1.45; margin-top: 2px; }
  /* Free-form escape hatch: none of the options fit -> describe it in your own words */
  .dwc-clarify-none { border-style: dashed; }
  .dwc-clarify-none .dwc-clarify-label { color: #2D6A99; }
  .dwc-clarify-form { display: flex; gap: 8px; margin: 2px 0 4px; }
  .dwc-clarify-form input { flex: 1; font: inherit; font-size: 14px; color: #0F1B2A;
    background: #FFF; border: 1px solid #2D6A99; border-radius: 10px; padding: 10px 12px; }
  .dwc-clarify-form button { font: inherit; font-weight: 600; font-size: 14px; color: #FFF;
    background: #2D6A99; border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; }
  .dwc-clarify-form button:hover { background: #24567D; }
  .rk-toggle { font: inherit; font-size: 12px; font-weight: 600; color: #2D6A99;
    background: #F5F9FC; border: 1px solid #D6DEE8; border-radius: 999px;
    padding: 3px 10px; cursor: pointer; margin-left: 8px; white-space: nowrap; }
  .rk-toggle:hover { border-color: #2D6A99; background: #EAF2F8; }
  /* Labeled backfill: an older-vintage value shown muted with its own year -
     context, never ranked or summed. MOE spans hide until the card's toggle. */
  .demo-fill { color: #98A2B3; font-style: italic; }
  .demo-fill-yr { font-size: 10px; color: #AEB6C2; font-style: normal; }
  .demo-moe { display: none; color: #98A2B3; font-size: 11px; white-space: nowrap; }
  .demo-card.show-moe .demo-moe { display: inline; }
  .demo-moe-toggle { font: inherit; font-size: 12px; font-weight: 600; color: #2D6A99;
    background: #F5F9FC; border: 1px solid #D6DEE8; border-radius: 999px;
    padding: 3px 10px; cursor: pointer; margin-left: 8px; white-space: nowrap; }
  .demo-moe-toggle:hover { border-color: #2D6A99; background: #EAF2F8; }
  .demo-moe-toggle[data-on="1"] { background: #2D6A99; color: #fff; border-color: #2D6A99; }
  @keyframes aicaret { 50% { opacity: 0; } }
  .ai-extra { margin-top: 12px; }
  .ai-thinking { display: inline-flex; gap: 5px; align-items: center; height: 24px; }
  .ai-thinking span { width: 6px; height: 6px; border-radius: 50%; background: #9AA4B2; animation: aidot 1.2s infinite ease-in-out; }
  .ai-thinking span:nth-child(2) { animation-delay: .15s; }
  .ai-thinking span:nth-child(3) { animation-delay: .3s; }
  @keyframes aidot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
  .topic-icon { font-size: 28px; }

  /* ── Answer envelope ── the chrome around the grounded reply: sources line,
     honesty seam, and the "How we know this" receipts panel. All content is
     server-computed; styling uses this page's own tokens. ── */
  .dwc-crown { background: #fff; border: 1px solid #E4E7EC; border-radius: 12px;
    overflow: hidden; margin-bottom: 14px;
    box-shadow: 0 1px 0 rgba(15,27,42,.02), 0 18px 40px -30px rgba(15,27,42,.30); }
  /* the seam: where coverage or comparison does not hold (always shown when present) */
  .dwc-seam { display: flex; gap: 8px; align-items: flex-start; margin: 14px 16px 0;
    font-size: 11.5px; line-height: 1.45; color: #B0640F;
    background: linear-gradient(180deg,#FDF6EC,#FBF1E6); border: 1px solid #EFD6B6;
    border-radius: 8px; padding: 8px 11px; }
  .dwc-seam .material-icons-outlined { font-size: 13px; margin-top: 1px; flex: none; }
  .dwc-seam b { font-weight: 700; }
  /* foot: deep links into the app (left) + copy-ready memo (right) */
  .dwc-foot { display: flex; justify-content: flex-end; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding: 11px 16px; border-top: 1px solid #E4E7EC; background: #F7F8FA; }
  .dwc-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-right: auto; }
  .dwc-linkrow { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12px; }
  .dwc-linkplace { color: #6A7585; font-weight: 700; }
  .dwc-linkrow a { color: #2D6A99; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid rgba(45,106,153,.35); }
  .dwc-linkrow a:hover { border-bottom-color: #2D6A99; }
  .dwc-copy { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
    font-size: 12.5px; font-weight: 600; color: #2D6A99; background: #fff; cursor: pointer;
    border: 1px solid #D5DAE1; border-radius: 7px; font-family: inherit;
    transition: background .12s, border-color .12s; }
  .dwc-copy:hover { background: #EAF2F8; border-color: #2D6A99; }
  .dwc-copy .material-icons-outlined { font-size: 16px; }
  /* Always-present copy row (outside the collapsible receipts panel). */
  .dwc-copyrow { display: flex; justify-content: flex-end; margin-top: 8px; }

  /* ── Casual crown ("conversation + receipts"): the warm grounded reply is the
     visible answer; the full technical card collapses behind "How we know this".
     The seam stays visible (honesty is not opt-in), just quieter. ── */
  .dwc-casual { padding: 14px 16px 10px; }
  .dwc-reply { font-size: 15px; line-height: 1.6; color: #0F1B2A; min-height: 1.6em;
    white-space: pre-wrap; }
  .dwc-srcline { font-size: 11px; color: #9AA4B2; margin-top: 10px; }
  .dwc-srcline .dwc-srclink { color: #6A7585; text-decoration: none;
    border-bottom: 1px solid #D5DAE1; }
  .dwc-srcline .dwc-srclink:hover { color: #2D6A99; border-bottom-color: #2D6A99; }
  .dwc-casual .dwc-seam-casual { margin: 12px 0 0;
    background: #FCF8F1; border-color: #F0E2CC; font-size: 12px; }
  .dwc-how { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
    padding: 5px 10px 5px 12px; font-size: 12px; font-weight: 600; color: #6A7585;
    background: #F7F8FA; border: 1px solid #E4E7EC; border-radius: 7px;
    cursor: pointer; font-family: inherit; transition: color .12s, border-color .12s; }
  .dwc-how:hover { color: #2D6A99; border-color: #B9D3E6; }
  .dwc-how-chev { font-size: 16px; transition: transform .18s ease; }
  .dwc-how.open .dwc-how-chev { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) { .dwc-how-chev { transition: none; } }
  .dwc-panel { margin: 10px -16px -10px; border-top: 1px solid #E4E7EC; }
  /* The charts/maps that are now the panel's evidence need their own gutter
     (the panel is full-bleed to the crown edges). */
  .dwc-evidence { padding: 12px 16px 2px; }
  .dwc-evidence:empty { display: none; }
  /* Visuals the question explicitly requested (visual_lead): part of the main
     answer, above the sources line. */
  .dwc-leadvis { margin-top: 12px; }
  .dwc-leadvis:empty { display: none; }
  .dwc-methods { margin: 12px 16px 0; font-size: 11.5px; line-height: 1.45;
    color: #6A7585; background: #F7F8FA; border: 1px solid #E4E7EC;
    border-radius: 8px; padding: 8px 11px; }

  /* ── Shared site chrome (mirrors place.html's status strip + top nav) ──
     If base.html already renders a global header/nav, delete the matching
     markup block at the top of the content block to avoid doubling it. */
  /* Brand bar - kept for contrast at the very top; status content removed,
     original height preserved. */
  .site-strip {
    background: var(--bg-strip);
    height: 30px;
    border-bottom: 1px solid #0a1722;
  }
  .site-strip .pill { display: inline-flex; align-items: center; gap: 6px; }
  .site-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; }
  .site-strip .dot.warn { background: var(--warn); }
  .site-strip a { color: #6FB1E5; text-decoration: none; }
  .site-strip a:hover { text-decoration: underline; }
  .site-strip .spacer { flex: 1; }

  .site-topbar {
    background: var(--bg-card); border-bottom: 1px solid var(--line-1);
    padding: 14px 24px; min-height: 62px; display: flex; align-items: center; gap: 32px;
  }
  .site-topbar .brand { font-weight: 700; color: var(--dw-blue-dark); font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
  .site-topbar .brand span { color: var(--dw-orange); }
  .site-topbar .nav { display: flex; gap: 24px; font-size: 15px; align-items: center; flex: 1; }
  /* Account entry hugs the right edge (auth.js swaps its label live). */
  .site-topbar .nav-drop--account { margin-left: auto; }
  .site-topbar .nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
  .site-topbar .nav a.active { color: var(--dw-blue-dark); border-bottom-color: var(--dw-orange); font-weight: 600; }
  .site-topbar .nav a:hover { color: var(--dw-blue); }
  /* Explore dropdown: a pure menu trigger (never navigates itself) - hover
     or click on desktop, flat rows in the mobile accordion. */
  .site-topbar .nav-drop { position: relative; display: flex; align-items: center; }
  .site-topbar .nav-parent { background: none; border: none; border-bottom: 1.5px solid transparent; padding: 4px 0; margin: 0; cursor: pointer; font: inherit; line-height: inherit; color: var(--ink-2); display: inline-flex; align-items: baseline; }
  .site-topbar .nav-parent:hover { color: var(--dw-blue); }
  .site-topbar .nav-drop.open .nav-menu { display: flex; }
  .site-topbar .nav-caret { font-size: 9px; margin-left: 5px; color: var(--ink-4); }
  .site-topbar .nav-menu {
    position: absolute; top: calc(100% + 8px); left: -14px; z-index: 70;
    width: 340px; background: #fff; border: 1px solid var(--line-1);
    border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 27, 42, 0.16);
    padding: 8px; display: none; flex-direction: column;
  }
  .site-topbar .nav-menu::before { content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
  .site-topbar .nav-drop:hover .nav-menu,
  .site-topbar .nav-drop:focus-within .nav-menu { display: flex; }
  /* Each item names the tool and says what it does, like a mega-menu. */
  .site-topbar .nav-menu a { display: block; padding: 9px 12px; border-radius: 9px; border-bottom: none; white-space: normal; transition: background .1s; }
  .site-topbar .nav-menu a:hover { background: var(--bg-rail); }
  .site-topbar .nav-menu .nm-title { display: block; font-size: 15px; font-weight: 700; color: var(--dw-blue-dark); line-height: 1.25; }
  .site-topbar .nav-menu a:hover .nm-title { color: var(--dw-blue); }
  .site-topbar .nav-menu .nm-desc { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin-top: 2px; }
  /* Build / City+: single-item dropdown that just describes the one destination. */
  .site-topbar .nav-drop--solo .nav-menu { width: 300px; }
  .site-topbar .right { margin-left: auto; display: flex; gap: 16px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
  .site-topbar .right kbd { background: var(--bg-rail); border: 1px solid var(--line-1); border-radius: 4px; padding: 2px 6px; font-size: 10px; }
  /* Hamburger: hidden on desktop, shown on mobile to collapse the nav into an accordion. */
  .site-topbar .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; margin-left: auto; padding: 9px; background: transparent; border: 1px solid var(--line-1); border-radius: 8px; cursor: pointer; }
  .site-topbar .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink-2); border-radius: 2px; transition: transform .2s, opacity .2s; }
  @media (max-width: 760px) {
    .site-topbar { flex-wrap: wrap; gap: 12px 20px; }
    .site-topbar .nav-toggle { display: flex; }
    /* align-items:stretch + text-align:left, explicitly: the desktop rules
       centre these for a horizontal bar, and inherited centring in a column
       leaves every row floating on its own axis with no common edge. */
    /* flex-basis:100%, not width:100%. The desktop rule sets `flex: 1`, whose
       flex-basis:0% beats width on a flex item, so the nav kept sharing the
       first line with the brand and hamburger instead of wrapping below them
       - which is what squeezed the whole menu into the right-hand margin. */
    .site-topbar .nav { order: 3; flex: 0 0 100%; display: none; flex-direction: column;
                        align-items: stretch; text-align: left; gap: 0; font-size: 15px; }
    .site-topbar.open .nav { display: flex; }
    .site-topbar .nav a { padding: 13px 2px; border-bottom: none; border-top: 1px solid var(--line-1); }
    .site-topbar .nav-drop { flex-direction: column; align-items: stretch; }
    .site-topbar .nav-drop--account { margin-left: 0; }
    .site-topbar .nav-caret { display: none; }
    /* The submenu is a floating white CARD on desktop. Inline in the mobile
       sheet there is no card, so the background has to go too - leaving it
       set is what painted a white block across a dark header. */
    .site-topbar .nav-parent { width: 100%; text-align: left; justify-content: flex-start;
                               padding: 13px 2px; border-top: 1px solid var(--line-1); }
    .site-topbar .nav-menu { position: static; width: auto; display: flex;
                             background: transparent; border: none; box-shadow: none;
                             border-radius: 0; padding: 0 0 4px 14px; }
    .site-topbar .nav-menu::before { display: none; }
    /* Children of Explore: indented, and no rule above each one, so the
       separators read as top-level items only. */
    /* 13px, not 10: at 10 these came out 38px tall, under the 44px
       minimum touch target. Matches the top-level rows. */
    .site-topbar .nav-menu a { padding: 13px 2px; border-top: none; }
    /* The desktop hover fill is a LIGHT rail colour, meant for the white
       card. Inline on a dark header it painted a near-white pill under
       near-white text, i.e. invisible on tap. A neutral translucent grey
       reads on either theme and cannot vanish. */
    .site-topbar .nav-menu a:hover { background: rgba(128, 128, 128, .16); }
    .site-topbar .nav-menu .nm-title { font-size: 14.5px; font-weight: 600; color: inherit; }
    .site-topbar .nav-menu .nm-desc { display: none; }
    /* A solo dropdown's only child is the SAME link with the same label; on
       desktop the card earns its place with a description, which is hidden
       here. So it is pure duplication at mobile.
       The :hover/:focus reveals must be named explicitly: they carry an
       extra pseudo-class, so a plain `display:none` on this selector loses
       to them and the duplicate reappears on tap. */
    .site-topbar .nav-drop--solo .nav-menu,
    .site-topbar .nav-drop--solo:hover .nav-menu,
    .site-topbar .nav-drop--solo:focus-within .nav-menu,
    .site-topbar .nav-drop--solo.open .nav-menu { display: none; }
    .site-topbar.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .site-topbar.open .nav-toggle span:nth-child(2) { opacity: 0; }
    .site-topbar.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .site-topbar .right { display: none; }
  }

  /* Keep the live map frame from collapsing to nothing before the DC web
     component hydrates (or if it fails to load in a given environment). */
  .hero-viz-frame .hero-viz { min-height: 320px; }
  .hero-viz-frame .hero-viz:empty::before {
    content: "Loading live data…"; display: flex; align-items: center; justify-content: center;
    height: 320px; color: var(--ink-4); font-size: 13px; font-family: var(--mono);
  }

  .hero-bg {
    background-color: #FAFBFD;
    background-image:
      linear-gradient(to right, rgba(45,106,153,0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(45,106,153,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .hero-viz { min-height: 340px; }
  .hero-viz datacommons-map {
    --dc-headings-color: #003a66;
    --dc-font-family: 'Manrope', system-ui, sans-serif;
  }
  /* Strip DC's internal card container - the wrapper is a shadow-DOM
     part ("container"), so we reach it with ::part(). Also target the
     light-DOM class in case the component renders without shadow. */
  .hero-viz datacommons-map::part(container),
  .hero-viz datacommons-map .chart-container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Styled container around the live map. Orange accent bar + "LIVE" tab
     to signal this isn't a static image - it's live data from the commons.
     Floats on the grid-patterned hero background. */
  .hero-viz-frame {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow:
      0 20px 40px -12px rgba(0, 58, 102, 0.15),
      0 8px 16px -8px rgba(0, 58, 102, 0.08),
      0 0 0 1px rgba(45, 106, 153, 0.08);
    padding: 28px 20px 16px;
    overflow: hidden;
  }
  .hero-viz-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #E8872A 0%, #2D6A99 100%);
  }
  .hero-viz-tab {
    position: absolute;
    top: 12px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FDF0E4;
    color: #C06A15;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
  }
  .hero-viz-tab::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E8872A;
    box-shadow: 0 0 0 0 rgba(232, 135, 42, 0.7);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232, 135, 42, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(232, 135, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 135, 42, 0); }
  }