/* King County labor force embeds: shared styles.
   Built to the Workforce Index data-viz spec: the page's glass card is the
   background (these pages stay transparent), accessible marks inside, Archivo /
   IBM Plex Mono type, light + dark via the warnTheme bridge. */

:root {
  --font-headline: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Archivo", Arial, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, Menlo, monospace;

  /* Brand: chrome only */
  --wdc-blue: #72acd4;
  --wdc-green: #e1e427;
  --wdc-orange: #ffc50c;
  --wdc-dark: #414141;

  /* Tile fills, same as the page's .wi-theme--* helpers */
  --fill-blue: rgba(114, 172, 212, 0.98);
  --fill-orange: rgba(255, 197, 12, 0.95);
  --fill-green: rgba(225, 228, 39, 0.95);
  --fill-gray: rgba(229, 229, 229, 0.95);

  /* Orange section: amber leads the data (spec §2) */
  --dv-lead: #b26a00;
  --dv-lead-soft: rgba(178, 106, 0, 0.1);

  --dv-ink: #2a2a2a;
  --dv-muted: #6b6b6b;
  --dv-axis: #9aa0a6;
  --dv-grid: #e6e8eb;
  --dv-gap: rgba(107, 113, 120, 0.1);

  --field-bg: rgba(255, 255, 255, 0.6);
  --border: rgba(65, 65, 65, 0.14);
  --tip-bg: #fff;
  --tip-border: rgba(65, 65, 65, 0.15);
}

[data-theme="dark"] {
  --dv-lead: #cc7700;
  --dv-lead-soft: rgba(204, 119, 0, 0.16);

  --dv-ink: #eceff2;
  --dv-muted: #aeb6bd;
  --dv-axis: #6b7480;
  --dv-grid: rgba(255, 255, 255, 0.12);
  --dv-gap: rgba(255, 255, 255, 0.06);

  --field-bg: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.16);
  --tip-bg: rgba(30, 58, 80, 0.96);
  --tip-border: rgba(255, 255, 255, 0.16);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: transparent; /* embed contract: the host card is the background */
  color: var(--dv-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* color-scheme goes on body, never the root. When an iframe's root
   color-scheme differs from the host page's (Squarespace leaves it at
   "normal"), the browser paints an opaque backdrop behind the frame: a black
   box in dark mode. On body it still themes form controls and scrollbars. */
body { color-scheme: light; }
[data-theme="dark"] body { color-scheme: dark; }

/* Standalone preview (not in an iframe): paint a page so it's readable. */
html.is-standalone body { background: #f4f7fa; padding: 24px 16px; }
html.is-standalone[data-theme="dark"] body { background: #1e3a50; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.num { font-variant-numeric: tabular-nums; }

.error { color: #c0392b; padding: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}