/* WA Economic & Revenue Forecast Tracker — Chamber design system for the tracker page.
   Brand: Navy #174477 · Deep navy #0d1f3c · Blue #347FAD · Sky #54BFE7 · Coral #FE5F55 · Pale #A8C4DB.
   Type: Oswald (titles, big numbers, tabs) + Lato (everything else).
   The markup and chart code come from the original dashboard unchanged; this file restyles their classes.
   The chart code reads the --cds-* and --color-* tokens below for axes, grids, tooltips and hollow points. */

:root {
  --wf-navy: #174477; --wf-deep: #0d1f3c; --wf-ink: #0d1f3c; --wf-blue: #347fad; --wf-sky: #54bfe7;
  --wf-coral: #fe5f55; --wf-pale: #a8c4db; --wf-bg: #f5f8fb; --wf-line: #dfe7ef; --wf-line-strong: #c8d8e8;
  --wf-muted: #51627a; --wf-text: #2f3f52;
  --wf-sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --wf-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --wf-radius: 14px; --wf-radius-sm: 8px;
  --wf-shadow: 0 2px 10px rgba(13, 31, 60, 0.05), 0 1px 2px rgba(13, 31, 60, 0.04);
  --wf-shadow-hover: 0 10px 28px rgba(13, 31, 60, 0.10);

  /* tokens the dashboard code reads */
  --color-fg: var(--wf-ink); --color-fg-muted: var(--wf-muted); --color-bg: #ffffff; --color-panel: #ffffff;
  --color-border-line: var(--wf-line); --color-ok: #2e7d32; --color-warn: #d99100; --color-bad: #c62828;
  --font-anthropic-sans: var(--wf-sans); --font-anthropic-serif: var(--wf-display);
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 24px;
  --cds-gap-xs: 6px; --cds-gap-sm: 10px; --cds-gap-md: 16px; --cds-gap-lg: 28px;
  --cds-radius: var(--wf-radius); --cds-font-weight-medium: 600;
  --cds-font-size-caption: 14px; --cds-font-size-body: 15px; --cds-font-size-heading: 22px; --cds-font-size-title: clamp(28px, 3vw, 38px);
  --cds-chart-axis: #b8c7d6; --cds-chart-grid: #e6edf3; --cds-chart-reference: #8a9bb0; --cds-chart-muted: #a8c4db;
  --cds-surface-popover: var(--wf-deep); --cds-border: var(--wf-deep); --cds-shadow-popover: 0 10px 28px rgba(13, 31, 60, 0.28); --cds-text-secondary: var(--wf-sky);
  --cds-dur-slow: .3s;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--wf-bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wf-bg); color: var(--wf-ink); font-family: var(--wf-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--wf-blue); }
a:hover { color: var(--wf-navy); }
:focus-visible { outline: 3px solid rgba(84, 191, 231, 0.75); outline-offset: 2px; }

/* ---------- standalone chrome (hidden when embedded in bellevuechamber.org) ---------- */
.site-header { background: linear-gradient(135deg, #0a1228 0%, #174477 60%, #0d1f3c 100%); color: #fff; }
.site-header .inner { max-width: 1280px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-header img { height: 40px; width: auto; display: block; }
.site-header .crumb { font-family: var(--wf-display); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #a8c4db; }
.site-header .crumb b { color: #fff; font-weight: 500; }
.site-header a { color: inherit; text-decoration: none; }
.site-header a:hover { color: var(--wf-sky); }
.site-main { padding: 32px 20px 48px; }
#dash-root { max-width: 1280px; margin: 0 auto; }
.site-footer { border-top: 1px solid var(--wf-line); background: #fff; }
.site-footer .inner { max-width: 1280px; margin: 0 auto; padding: 20px 20px 32px; font-size: 13px; color: var(--wf-muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- layout ---------- */
#dash-root { --dash-gutter: 24px; }
.wf { display: flex; flex-direction: column; gap: 24px; font-family: var(--wf-sans); font-variant-numeric: tabular-nums; max-width: 1280px; margin-inline: auto; }
.wf-page { display: flex; flex-direction: column; gap: 20px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 20px; }

/* ---------- header: title, source line, takeaway callout, view-as-of ---------- */
.wf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "src src" "take asof" "fresh fresh"; gap: 14px 28px; align-items: center; }
.wf-title { grid-area: title; font-family: var(--wf-display); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: .5px; color: var(--wf-navy); margin: 0; text-wrap: balance; }
.wf-title::after { content: ""; display: block; width: 72px; height: 3px; background: var(--wf-coral); margin-top: 14px; }
#source-note { grid-area: src; color: var(--wf-text); font-size: 16px; line-height: 1.65; margin: 0; max-width: 76ch; }
.wf-take { color: var(--wf-text); font-size: 15px; margin: 0; }
#takeaway, .wf-story { grid-area: take; display: block; background: #fff; border: 1px solid var(--wf-line); border-left: 4px solid var(--wf-coral); border-radius: 0 10px 10px 0; padding: 18px 24px 18px; font-size: 19px; line-height: 1.6; color: var(--wf-ink); margin: 0; }
.wf-story-kicker { display: block; font-family: var(--wf-display); font-weight: 500; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--wf-blue); margin-bottom: 6px; }
.wf-story b { font-family: var(--wf-display); font-weight: 600; font-size: 28px; line-height: 1; color: var(--wf-navy); vertical-align: -3px; padding: 0 2px; }
.wf-story strong { font-weight: 700; color: var(--wf-navy); }
.wf-story[hidden], #takeaway[hidden] { display: none; }
#takeaway .wf-tk-measure { font-weight: 700; color: var(--wf-navy); }
#takeaway .wf-tk-year { font-weight: 700; color: var(--wf-navy); }
#takeaway b { font-family: var(--wf-display); font-weight: 600; font-size: 28px; line-height: 1; color: var(--wf-navy); vertical-align: -3px; padding: 0 2px; }
#takeaway #tk-change { font-weight: 700; color: var(--wf-navy); }
.wf-asof { grid-area: asof; display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 0; min-width: 14rem; }
.wf-asof-note { margin: 0; font-size: 13px; line-height: 1.5; color: #7a4e00; background: #fff6e0; border: 1px solid #f3dc9c; border-radius: var(--wf-radius-sm); padding: 8px 12px; max-width: 32ch; }
.wf-fresh { grid-area: fresh; margin: 0; font-size: 13px; color: var(--wf-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.wf-fresh .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); display: inline-block; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15); }
.wf-fresh .dot.warn { background: var(--color-warn); box-shadow: 0 0 0 3px rgba(217, 145, 0, 0.18); }

/* ---------- tabs: a segmented pill bar ---------- */
.wf-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #e6edf3; padding: 5px; border-radius: 999px; border: 0; align-self: flex-start; }
.wf-tab { font-family: var(--wf-display); font-weight: 500; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; background: transparent; color: var(--wf-navy); border: 0; border-radius: 999px; padding: 11px 24px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.wf-tab:hover { background: rgba(255, 255, 255, 0.7); }
.wf-tab[aria-selected="true"] { background: var(--wf-navy); color: #fff; box-shadow: 0 4px 12px rgba(23, 68, 119, 0.3); }
.wf-tab:focus-visible { outline-offset: -3px; outline-color: var(--wf-sky); }

/* ---------- controls ---------- */
.wf-controls { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; padding: 2px 0 18px; border-bottom: 1px solid var(--wf-line-strong); }
.wf-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--wf-sans); font-size: 14px; font-weight: 700; color: var(--wf-ink); min-width: 0; }
.wf select { font: 400 15px/1.3 var(--wf-sans); color: var(--wf-ink); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23174477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--wf-line-strong); border-radius: var(--wf-radius-sm); padding: 10px 36px 10px 12px; max-width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wf select:hover { border-color: var(--wf-blue); }
.wf select:focus-visible { outline: none; border-color: var(--wf-navy); box-shadow: 0 0 0 3px rgba(84, 191, 231, 0.35); }
.wf-seg { display: inline-flex; border: 1px solid var(--wf-line-strong); border-radius: 999px; overflow: hidden; background: #fff; }
.wf-seg button { font: 700 13px/1.2 var(--wf-sans); letter-spacing: .3px; background: #fff; color: var(--wf-muted); border: 0; padding: 10px 18px; cursor: pointer; transition: background .15s, color .15s; }
.wf-seg button + button { border-left: 1px solid var(--wf-line); }
.wf-seg button:hover { color: var(--wf-navy); background: var(--wf-bg); }
.wf-seg button[aria-pressed="true"] { background: var(--wf-navy); color: #fff; }
.wf-seg button:focus-visible { outline-offset: -3px; }
.wf-chip { font-size: 15px; color: var(--wf-ink); padding: 6px 10px; border: 1px dashed var(--wf-line-strong); border-radius: var(--wf-radius-sm); white-space: nowrap; }

/* ---------- stat tiles ---------- */
.wf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 20px; }
.wf-tile { background: #fff; border: 1px solid var(--wf-line); border-left: 4px solid var(--wf-navy); border-radius: 0 10px 10px 0; box-shadow: var(--wf-shadow); padding: 20px 24px 18px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#h-tile-latest, #r-tile-latest { border-left-color: var(--wf-coral); }
.wf-tile-label { font-size: 15px; font-weight: 700; color: var(--wf-ink); }
.wf-tile-value { font-family: var(--wf-display); font-weight: 600; font-size: clamp(36px, 3.4vw, 46px); line-height: 1.05; min-height: 1.05em; color: var(--wf-navy); }
.wf-tile-note { font-size: 14px; font-weight: 700; color: var(--wf-muted); min-height: 1.3em; }

/* ---------- cards ---------- */
.wf-card { background: #fff; border: 1px solid var(--wf-line); border-radius: 10px; box-shadow: var(--wf-shadow); padding: 22px 24px 22px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-card h3 { font-family: var(--wf-display); font-weight: 600; font-size: 23px; line-height: 1.25; color: var(--wf-navy); margin: 0 0 2px; text-wrap: balance; }
.wf-note { font-size: 15px; line-height: 1.6; color: var(--wf-text); margin: 0; }
.wf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 700; color: var(--wf-text); margin-top: 2px; }
.wf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.wf-sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.wf-sw.dot { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- charts ---------- */
.wf-chart { position: relative; min-height: 300px; margin-top: 6px; }
.wf-chart.short { min-height: 260px; }
.wf svg { display: block; max-width: 100%; }
.wf svg text { font-family: var(--wf-sans); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.wf-tip { position: absolute; background: var(--wf-deep); color: #fff; border: 0; border-radius: 10px; box-shadow: var(--cds-shadow-popover); padding: 10px 13px; font-size: 14px; font-weight: 700; line-height: 1.45; pointer-events: none; white-space: nowrap; z-index: 2; }
.wf-tip .wf-tip-h { font-family: var(--wf-display); font-weight: 500; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wf-sky); margin-bottom: 2px; }
.wf-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--wf-muted); }
.wf-fail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-bad); }

/* ---------- tables ---------- */
.wf-tablebox { max-height: 30rem; overflow: auto; border: 1px solid var(--wf-line); border-radius: 10px; margin-top: 6px; }
.wf-tablebox-auto { max-height: none; overflow-x: auto; }
.wf-tablebox::-webkit-scrollbar { height: 8px; width: 8px; }
.wf-tablebox::-webkit-scrollbar-thumb { background: var(--wf-line-strong); border-radius: 4px; }
.wf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.wf-table th { position: sticky; top: 0; z-index: 1; background: var(--wf-bg); text-align: left; font-size: 14px; font-weight: 700; color: var(--wf-navy); padding: 12px 14px; border-bottom: 2px solid var(--wf-line-strong); white-space: normal; min-width: 6.5rem; vertical-align: bottom; line-height: 1.3; }
#reet-table th { min-width: 0; }
.wf-table td { padding: 10px 14px; border-bottom: 1px solid var(--wf-line); vertical-align: top; color: var(--wf-text); }
.wf-table tbody tr:last-child td { border-bottom: 0; }
.wf-table tbody tr:nth-child(even) td { background: #fafcfe; }
.wf-table tbody tr:hover td { background: #eef5fb; }
.wf-table td.num, .wf-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-table td:first-child { font-weight: 700; color: var(--wf-ink); }
#h-bench td:first-child, #h-bench td:nth-child(2), #r-bench td:first-child { white-space: nowrap; }
.wf-table td.txt { min-width: 20rem; line-height: 1.5; font-weight: 400; }
.wf-table tr.wf-total td { font-weight: 700; color: var(--wf-navy); background: #f0f5fa; border-top: 2px solid var(--wf-navy); }
.wf-pos { color: var(--color-ok); }
.wf-neg { color: var(--color-bad); }

/* ---------- states ---------- */
.wf [data-dash-source-state=empty] { color: transparent; }
.wf [data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
.dash-skeleton { color: transparent !important; background: linear-gradient(90deg, #e6edf3 25%, #f3f6f9 50%, #e6edf3 75%); background-size: 200% 100%; animation: wf-shimmer 1.4s infinite; border-radius: 6px; }
@keyframes wf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.wf-error { background: #fdecea; border: 1px solid #f5c6c2; color: #8a1f1f; border-radius: var(--wf-radius-sm); padding: 10px 14px; margin: 0; font-size: 14px; }

/* ---------- embedded in bellevuechamber.org ---------- */
html.is-embed, html.is-embed body { background: transparent; }
html.is-embed .site-header, html.is-embed .site-footer { display: none; }
html.is-embed .site-main { padding: 4px 0 8px; }
html.is-embed .wf-title, html.is-embed #source-note, html.is-embed #wf-fresh, html.is-embed .wf-tabs { display: none; } /* the page hero carries the title, the live block and the tab chips */
html.is-embed .wf-head { grid-template-areas: "take asof"; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .wf-head { grid-template-columns: 1fr; grid-template-areas: "title" "src" "take" "asof" "fresh"; }
  html.is-embed .wf-head { grid-template-areas: "take" "asof"; }
  .wf-asof { min-width: 0; }
  .wf-asof-note { max-width: none; }
}
@media (max-width: 640px) {
  .site-main { padding: 20px 14px 36px; }
  .wf { gap: 20px; }
  .wf-tabs { display: flex; align-self: stretch; }
  .wf-tab { flex: 1 1 auto; text-align: center; padding: 10px 10px; font-size: 12px; letter-spacing: 1.2px; }
  .wf-controls { padding: 14px 16px; gap: 14px 18px; }
  .wf-card { padding: 20px 16px 18px; }
  .wf-tile { padding: 20px 18px 18px; }
  #takeaway, .wf-story { padding: 16px 18px; font-size: 16px; }
  .wf-story b, #takeaway b { font-size: 24px; }
  .wf-table td.txt { min-width: 15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-tile, .wf-tab, .wf select, .wf-seg button { transition: none; }
  .dash-skeleton { animation: none; }
}
@media print {
  .site-header, .wf-tabs, .site-footer { display: none; }
  .wf-page[hidden] { display: flex !important; }
  .wf-card, .wf-tile, .wf-controls, #takeaway, .wf-asof { box-shadow: none; }
}