/* NWS Data Explorer — the /nws section of Maverick Wx (amendment A10).
   Loads *after* the site stylesheet, which owns the masthead and the site wordmark.
   This file owns everything below the bar.

   Technical-blueprint look: steel-blue on paper, condensed headings, square-cornered
   hairline "wireframe" cards. That character is kept deliberately — it is what makes a
   reference section read differently from a storm viewer — but the ground, the ink and
   the accent now come from Maverick's palette, so the two read as one site with two
   rooms rather than two sites. The accent ramp needed no work at all: this file's
   --color-accent-500 and the site's --accent were already the same steel (#5980a6).

   Light + dark, system default with a manual override. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */

:root {
  /* Blueprint neutrals, on Maverick's ground */
  --color-ground: #f4f7fa;  /* site --bg */
  --color-surface: #ffffff; /* site --card */
  --color-text: #1a2733;    /* site --ink */

  /* Steel accent ramp */
  --color-accent-100: #eef6ff;
  --color-accent-200: #d4e5f5;
  --color-accent-300: #a9c6e2;
  --color-accent-400: #7ea6cd;
  --color-accent-500: #5980a6;
  --color-accent-600: #4d7196;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;
  --color-accent: var(--color-accent-500);

  /* Neutral ramp */
  --color-neutral-100: #e6e6e7;
  --color-neutral-200: #d3d3d5;
  --color-neutral-300: #b9b9bc;
  --color-neutral-400: #9a9a9e;
  --color-neutral-500: #7c7c80;
  --color-neutral-600: #616164;
  --color-neutral-700: #4a4a4d;
  --color-neutral-800: #333335;
  --color-neutral-900: #202021;

  --color-divider: color-mix(in srgb, #1a2733 16%, transparent);
  --color-divider-strong: color-mix(in srgb, #1a2733 30%, transparent);

  /* Status semantics */
  --ok: #1d6142;
  --ok-bg: #e4efe9;
  --warn: #8a5a00;
  --warn-bg: #f3ecda;
  --critical: #a01b1b;
  --critical-bg: #f2e2e2;

  --code-bg: color-mix(in srgb, #1a2733 6%, transparent);

  --font-heading: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --sidebar-w: 252px;
  --topbar-h: 63px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-ground: #0b1622;  /* site --bg (dark) */
    --color-surface: #12202f; /* site --card (dark) */
    --color-text: #e7eef5;    /* site --ink (dark) */

    --color-accent-100: #1c2c3b;
    --color-accent-200: #23374a;
    --color-accent-300: #35526d;
    --color-accent-400: #4a6f92;
    --color-accent-500: #6b95bd;
    --color-accent-600: #7ea6cd;
    --color-accent-700: #9dbfe0;
    --color-accent-800: #c0d6ec;
    --color-accent-900: #0e1a25;
    --color-accent: var(--color-accent-500);

    --color-neutral-100: #23262a;
    --color-neutral-200: #2c3035;
    --color-neutral-300: #3a3f45;
    --color-neutral-400: #565c63;
    --color-neutral-500: #7b8188;
    --color-neutral-600: #9aa0a7;
    --color-neutral-700: #b6bbc1;
    --color-neutral-800: #d2d6da;
    --color-neutral-900: #eceef0;

    --color-divider: color-mix(in srgb, #e7eef5 18%, transparent);
    --color-divider-strong: color-mix(in srgb, #e7eef5 32%, transparent);

    --ok: #7fcfa6;
    --ok-bg: #14251d;
    --warn: #e3bd6b;
    --warn-bg: #2a2213;
    --critical: #f08b8b;
    --critical-bg: #2c1618;

    --code-bg: color-mix(in srgb, #e7eef5 10%, transparent);
  }
}

:root[data-theme='dark'] {
  --color-ground: #0b1622;  /* site --bg (dark) */
  --color-surface: #12202f; /* site --card (dark) */
  --color-text: #e7eef5;    /* site --ink (dark) */

  --color-accent-100: #1c2c3b;
  --color-accent-200: #23374a;
  --color-accent-300: #35526d;
  --color-accent-400: #4a6f92;
  --color-accent-500: #6b95bd;
  --color-accent-600: #7ea6cd;
  --color-accent-700: #9dbfe0;
  --color-accent-800: #c0d6ec;
  --color-accent-900: #0e1a25;
  --color-accent: var(--color-accent-500);

  --color-neutral-100: #23262a;
  --color-neutral-200: #2c3035;
  --color-neutral-300: #3a3f45;
  --color-neutral-400: #565c63;
  --color-neutral-500: #7b8188;
  --color-neutral-600: #9aa0a7;
  --color-neutral-700: #b6bbc1;
  --color-neutral-800: #d2d6da;
  --color-neutral-900: #eceef0;

  --color-divider: color-mix(in srgb, #e7eef5 18%, transparent);
  --color-divider-strong: color-mix(in srgb, #e7eef5 32%, transparent);

  --ok: #7fcfa6;
  --ok-bg: #14251d;
  --warn: #e3bd6b;
  --warn-bg: #2a2213;
  --critical: #f08b8b;
  --critical-bg: #2c1618;

  --code-bg: color-mix(in srgb, #e7eef5 10%, transparent);
}

/* ---------- Reset / base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.005em; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

code, pre, .mono { font-family: var(--mono); }
code { background: var(--code-bg); padding: 1px 5px; font-size: 0.9em; }
pre { background: var(--code-bg); padding: 12px 15px; overflow-x: auto; border: 1px solid var(--color-divider); border-radius: 0; }
pre code { background: none; padding: 0; }

.muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent-800); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

/* ---------- Blueprint primitives ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 16px 18px;
}

.blueprint { position: relative; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px; color: var(--color-divider-strong);
  pointer-events: none;
}
.blueprint > .corner::before,
.blueprint > .corner::after {
  content: ''; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-0.5px); }
.blueprint > .corner::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-0.5px); }
.blueprint > .corner.tl { left: -6px; top: -6px; }
.blueprint > .corner.tr { right: -6px; top: -6px; }
.blueprint > .corner.bl { left: -6px; bottom: -6px; }
.blueprint > .corner.br { right: -6px; bottom: -6px; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 0; line-height: 1.5;
  background: var(--color-neutral-100); color: var(--color-neutral-800);
  border: 1px solid transparent;
}
.tag--outline { background: transparent; border: 1px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 62%, transparent); text-transform: none; letter-spacing: 0.02em; }
.tag--neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag--accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag--quiet { background: transparent; border: 1px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tag--alert { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--code { font-family: var(--mono); text-transform: none; letter-spacing: 0; background: var(--code-bg); color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* Chips (status severity) */
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 0;
  font-size: 11px; font-weight: 600; font-family: var(--font-heading); letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.chip--ok, .chip--none { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.chip--caution { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip--critical { background: var(--critical-bg); color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.chip--accent { background: var(--color-accent-100); color: var(--color-accent-800); border-color: color-mix(in srgb, var(--color-accent-500) 40%, transparent); }
.chip--unknown, .chip--quiet { background: transparent; color: color-mix(in srgb, var(--color-text) 55%, transparent); border-color: var(--color-divider); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.01em;
  padding: 7px 14px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--color-divider-strong); background: transparent; color: var(--color-text);
  text-decoration: none;
}
.btn:hover { border-color: var(--color-accent-500); color: var(--color-accent-700); background: var(--color-accent-100); text-decoration: none; }
.btn--primary { background: var(--color-accent-500); border-color: var(--color-accent-500); color: #fff; }
.btn--primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.btn--primary:active { background: var(--color-accent-700); }
.btn--secondary { background: transparent; }
.btn--small { padding: 5px 10px; font-size: 12px; }
.btn--onaccent { border-color: color-mix(in srgb, #fff 35%, transparent); color: #eaf1f8; }
.btn--onaccent:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; border-color: #fff; }
.btn--onaccent.btn--filled { background: #eaf1f8; color: var(--color-accent-900); border-color: #eaf1f8; }
.btn--onaccent.btn--filled:hover { background: #fff; color: var(--color-accent-900); }

/* ---------- App shell ---------- */

/* The site masthead sits above this shell. It is sticky on the storm pages, where it
   is the only bar; here the section has its own sticky topbar, and two stacked sticky
   bars is precisely the bug the storm site already fixed once for its data banner. So
   on /nws the masthead scrolls away and the topbar is the one that stays.

   --masthead-h comes from the site stylesheet, which loads first. The fallback is
   here so this file is not silently wrong if it is ever loaded on its own. */
.masthead { position: static; }

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: calc(100vh - var(--masthead-h, 74px));
  overflow: hidden;
}

/* The section brand in the sidebar. Not `.brand` — that is the site wordmark in the
   masthead, and two elements claiming the same class in the same document is how a
   sidebar ends up wearing the masthead's white-on-navy type. */
.section-brand { display: flex; align-items: center; gap: 9px; color: var(--color-text); }
.section-brand:hover { text-decoration: none; }

.sidebar {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--color-divider);
  background: var(--color-surface);
  overflow-y: auto;
}

.sidebar-brand { padding: 18px 20px 12px; }
.brand-mark { color: var(--color-accent-500); font-size: 20px; line-height: 1; }
.brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.tag--outline.tag { margin-top: 9px; font-size: 9.5px; letter-spacing: 0.07em; }

.sidebar-nav { padding: 4px 12px; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  text-decoration: none; border-radius: 0;
}
.nav-link:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text); text-decoration: none; }
.nav-icon { display: grid; place-items: center; width: 18px; height: 18px; color: color-mix(in srgb, var(--color-text) 55%, transparent); flex: none; }
.nav-label { flex: 1; }
.nav-badge { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.nav-link[aria-current='page'] {
  color: var(--color-accent-700); background: var(--color-accent-100);
  box-shadow: inset 2px 0 0 var(--color-accent-500);
}
.nav-link[aria-current='page'] .nav-icon { color: var(--color-accent-500); }
.nav-link[aria-current='page'] .nav-badge { color: var(--color-accent-700); }

.sidebar-divider { margin: 10px 16px; height: 1px; background: var(--color-divider); }

/* Mini status panel */
.mini-panel { padding: 2px 16px 6px; }
.mini-panel-label {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0 0 9px;
}
.mini-card { gap: 10px; padding: 13px 14px; color: var(--color-text); }
.mini-card:hover { text-decoration: none; border-color: var(--color-accent-400); }
.mini-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mini-ico { display: grid; place-items: center; width: 15px; height: 15px; color: var(--color-accent-500); flex: none; }
.mini-name { flex: 1; }
.mini-num { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.mini-foot {
  font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent);
  border-top: 1px solid var(--color-divider); padding-top: 8px;
}

.sidebar-foot { margin-top: auto; padding: 16px; }
.disclaimer { font-size: 10.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0 0 8px; }
.sidebar-foot-links { font-size: 11px; margin: 0; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Content column */
.content { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px; min-height: var(--topbar-h);
  border-bottom: 1px solid var(--color-divider); background: var(--color-ground);
  flex: none;
}
.drawer-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--color-divider); background: transparent;
  color: var(--color-text); cursor: pointer; flex: none;
}
.topsearch { position: relative; flex: 1 1 auto; max-width: 560px; }
.topsearch-spacer { flex: 1 1 auto; }
.topsearch-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: color-mix(in srgb, var(--color-text) 45%, transparent); display: grid; place-items: center; pointer-events: none; }
.topsearch-input, .input {
  width: 100%; height: 38px; padding: 0 12px 0 34px; font: inherit; font-size: 14px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.topsearch-input:focus { border-color: var(--color-accent-500); outline: none; box-shadow: 0 0 0 1px var(--color-accent-500); }

.seg { display: inline-flex; border: 1px solid var(--color-divider); flex: none; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-opt span {
  display: block; padding: 7px 12px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); cursor: pointer; white-space: nowrap;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--color-accent-500); outline-offset: -2px; }
/* Reflect the active reading mode. Reading is the default. */
html:not([data-mode='dev']) .seg-opt input[value='reading'] + span,
html[data-mode='dev'] .seg-opt input[value='dev'] + span {
  background: var(--color-accent-100); color: var(--color-accent-800);
}

.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 1px solid var(--color-divider); background: transparent; color: color-mix(in srgb, var(--color-text) 65%, transparent); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--color-divider-strong); color: var(--color-text); }
.source-note { flex: none; font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); text-align: right; line-height: 1.35; margin: 0; }
.source-note code { font-size: 11px; background: none; padding: 0; }

main { flex: 1; overflow-y: auto; scroll-behavior: smooth; }

.stale-banner {
  margin: 0; background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  padding: 9px 24px; font-size: 13px;
}

/* Reading/developer mode: hide the dev-only bits unless in dev mode. */
.base-url, .curl { display: none; }
html[data-mode='dev'] .curl { display: block; }
html[data-mode='dev'] .base-url { display: inline; }

/* ---------- Panes & page furniture ---------- */

.pane { padding: 26px 28px 72px; max-width: 860px; min-width: 0; }
.pane--single, .pane--home { max-width: 1080px; margin: 0 auto; }
.pane--prose { max-width: 760px; }
.pane--message { max-width: 780px; margin: 0 auto; }

.page-header { margin-bottom: 24px; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.3rem); margin: 0 0 8px; }
.lede { font-size: 15px; color: color-mix(in srgb, var(--color-text) 74%, transparent); max-width: 64ch; margin: 0 0 6px; }
.pane-meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 6px 0 20px; }
.result-count { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 0 0 22px; }
.kicker { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 10px; }
.section-kicker { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0 0 14px; }

.empty {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  padding: 32px; border: 1px dashed var(--color-divider); text-align: center;
}

.callout { background: var(--color-surface); border-left: 3px solid var(--color-divider-strong); padding: 14px 18px; margin: 18px 0; }
.callout--warn { background: var(--warn-bg); border-left-color: var(--warn); }

.breadcrumb { font-size: 13px; font-family: var(--font-heading); margin: 0 0 16px; }
.source-link { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 14px; }

.prose { max-width: 72ch; }
.prose h2 { font-size: 1.3rem; margin: 32px 0 10px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* ---------- Split layouts (rail + pane) ---------- */

.split { display: grid; align-items: start; }
.split--explorer, .split--glossary, .split--products { grid-template-columns: 236px 1fr; }
.split--concepts { grid-template-columns: 230px 1fr; }
.split--sdm { grid-template-columns: 236px 1fr; }

.rail { padding: 24px 14px 24px 24px; }
.rail--sticky { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
.rail-label { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0 0 10px; }
.rail-label + .facet-group { margin-bottom: 20px; }
.facet-group { display: flex; flex-direction: column; gap: 1px; }

.facet {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); text-decoration: none; border-radius: 0;
}
.facet:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text); text-decoration: none; }
.facet span:first-child { flex: 1; }
.facet-count { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.facet--active { color: var(--color-accent-700); background: var(--color-accent-100); box-shadow: inset 2px 0 0 var(--color-accent-500); }
.facet--active .facet-count { color: var(--color-accent-700); }
.facet-clear { display: inline-block; margin-top: 14px; font-size: 12px; font-family: var(--font-heading); }

.toc-link { display: flex; gap: 9px; padding: 7px 10px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 75%, transparent); text-decoration: none; }
.toc-link:hover { color: var(--color-text); text-decoration: none; background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.toc-num { color: var(--color-accent-600); font-family: var(--font-heading); font-weight: 700; }

/* ---------- Home ---------- */

.home-title { font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.04; margin: 0 0 14px; max-width: 20ch; }
.home-lede { font-size: 17px; max-width: 62ch; margin-bottom: 24px; }

.home-search { position: relative; max-width: 620px; margin-bottom: 40px; }
.home-search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--color-accent-500); display: grid; place-items: center; pointer-events: none; }
.home-search-input {
  width: 100%; height: 52px; padding: 0 16px 0 46px; font: inherit; font-size: 16px;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-divider); border-radius: 0;
}
.home-search-input:focus { border-color: var(--color-accent-500); outline: none; box-shadow: 0 0 0 1px var(--color-accent-500); }

.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 44px; }
.task { gap: 9px; padding: 20px; background: var(--color-surface); color: var(--color-text); }
.task:hover { text-decoration: none; border-color: var(--color-accent-400); }
.task-ico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--color-accent-500); }
.task-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; }
.task-body { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.task-cta { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--color-accent-700); }

.dashboard-wrap { margin-bottom: 44px; }
.dashboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dashboard-head h2 { font-size: 1.5rem; margin: 0; }
.dashboard-head a { font-family: var(--font-heading); font-weight: 600; font-size: 13px; }
.dashboard { padding: 0; background: var(--color-surface); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dash-cell { padding: 18px 20px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.dash-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0 0 9px; }
.dash-value { margin: 0 0 8px; }
.dash-note { font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 6px 0 0; }
.dash-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.dash-list li { display: flex; flex-direction: column; }
.dash-list a { font-family: var(--font-heading); font-weight: 600; }
.dash-list strong { font-weight: 600; }

.home-feed { margin-bottom: 44px; }
.home-feed .dashboard-head h2 { font-size: 1.4rem; }

/* Developer on-ramp band */
.devband {
  flex-direction: row; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 24px; background: var(--color-accent-900); color: #eaf1f8;
}
.devband:hover { text-decoration: none; }
.devband > .corner { color: color-mix(in srgb, #fff 45%, transparent); }
.devband-text { flex: 1 1 320px; }
.devband-kicker { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #9bbbdc; margin: 0 0 7px; }
.devband-title { font-family: var(--font-heading); font-weight: 600; font-size: 23px; margin: 0 0 6px; color: #fff; }
.devband-body { margin: 0; font-size: 13.5px; color: #c7d6e6; max-width: 60ch; }
.devband-body code { color: #eaf1f8; background: color-mix(in srgb, #fff 12%, transparent); padding: 1px 5px; }
.devband-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Explorer ---------- */

.cat-section { scroll-margin-top: 16px; margin-bottom: 34px; }
.cat-section h2 { font-size: 1.45rem; margin: 0 0 4px; }
.cat-blurb { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent); max-width: 70ch; margin: 0 0 16px; }
.endpoint-list { display: flex; flex-direction: column; gap: 12px; }

.endpoint { gap: 9px; padding: 16px 18px; background: var(--color-surface); scroll-margin-top: 16px; }
.endpoint-head { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.method { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.06em; font-size: 10px; padding: 2px 7px; background: var(--color-accent-800); color: #fff; }
.endpoint-path { font-size: 13.5px; background: none; padding: 0; color: var(--color-text); word-break: break-all; }
.endpoint-path .base-url { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.endpoint-plain { margin: 0; font-size: 13.5px; line-height: 1.55; }
.endpoint-audience { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 0; }
.endpoint-audience-ico { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-top: 2px; flex: none; color: var(--color-accent-500); }

details.params, details.example { border: 0; }
details.params > summary, details.example > summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  color: var(--color-accent-700); list-style: none; display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
}
details.params > summary::-webkit-details-marker, details.example > summary::-webkit-details-marker { display: none; }
details.params > summary::before, details.example > summary::before { content: '+'; font-family: var(--mono); }
details[open].params > summary::before, details[open].example > summary::before { content: '–'; }

.example-body { border: 1px dashed var(--color-divider); padding: 13px 15px; margin-top: 9px; display: flex; flex-direction: column; gap: 9px; background: var(--color-ground); }
.example-body > .corner { color: color-mix(in srgb, var(--color-text) 22%, transparent); }
.example-label { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0; }
.example-path { font-size: 13px; word-break: break-all; color: var(--color-accent-800); background: none; padding: 0; }
.example-path .base-url { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.example-note { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.example-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.try-output { margin-top: 2px; }
.try-output pre { max-height: 420px; overflow: auto; font-size: 12px; margin: 0; }
.curl { margin-top: 2px; border-top: 1px solid var(--color-divider); padding-top: 9px; }
.curl-label { display: flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0 0 5px; }
.curl-block { font-size: 12px; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* Concepts */
.pane--prose .lede { margin-bottom: 30px; }
.concept { margin-bottom: 36px; scroll-margin-top: 16px; }
.concept h2 { font-size: 1.5rem; margin: 0 0 10px; }
.concept-num { color: var(--color-accent-500); }
.concept p { font-size: 14.5px; margin: 0 0 12px; color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.concept ul { font-size: 14.5px; }
.chain { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.chain li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--color-divider); background: var(--color-surface); }
.chain-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent-500); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.chain li > div { flex: 1; }
.chain code { display: block; margin-bottom: 5px; font-size: 13.5px; color: var(--color-accent-800); background: none; padding: 0; }
.chain span { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.code-dark { background: var(--color-accent-900); color: #eaf1f8; padding: 12px 15px; font-size: 13px; border: 0; }

/* ---------- Products ---------- */

.product-group { margin-bottom: 30px; }
.product-group h2 { font-size: 1.3rem; margin: 0 0 12px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.product { gap: 7px; padding: 14px 16px; background: var(--color-surface); }
.product-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.product-code { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-accent-800); background: var(--color-accent-100); padding: 1px 7px; }
.product-name { font-size: 13px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.product-plain { margin: 0; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.product-link { font-size: 11.5px; font-family: var(--font-heading); font-weight: 600; margin-top: 2px; }

/* Try page */
.try-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 24px 0; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.field--grow { flex: 1 1 320px; }
.field input, .field select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--color-divider-strong); background: var(--color-surface); color: var(--color-text); border-radius: 0; min-width: 180px; }
.try-status { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); min-height: 1.4em; }
.try-result { min-height: 120px; max-height: 560px; overflow: auto; font-size: 12px; }

/* ---------- SDM feed ---------- */

.sdm-intro { padding: 26px 28px 0; max-width: 1080px; }
.sdm-intro + .dashboard-wrap { padding: 0 28px; max-width: 1080px; }
.split--sdm { padding-top: 8px; }
.freshness { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0 0 16px; }
.freshness-error { display: block; color: var(--critical); margin-top: 4px; }

.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item { gap: 8px; padding: 14px 18px; background: var(--color-surface); color: var(--color-text); }
.feed-item:hover { text-decoration: none; border-color: var(--color-accent-400); }
.feed-item--alert { border-left: 3px solid var(--color-accent-500); }
.feed-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.feed-headline { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.2; }
.feed-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ---------- Message card ---------- */

.message-card { gap: 0; padding: 26px 28px; background: var(--color-surface); }
.message-card--alert { border-left: 3px solid var(--color-accent-500); }
.card-badges { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.card-title { font-size: 1.7rem; margin: 0 0 8px; line-height: 1.15; }
.card-meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 58%, transparent); margin: 0 0 4px; }
.card-body { margin-top: 18px; }

.section { border-top: 1px solid var(--color-divider); padding-top: 18px; margin-top: 18px; }
.card-body > .section:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.section-title { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 0 0 9px; }
.section-kind { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; background: var(--color-neutral-100); color: var(--color-neutral-800); padding: 3px 9px; font-weight: 600; font-family: var(--font-heading); }
.section-heading { font-family: var(--mono); font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); font-weight: 400; }
.section p { font-size: 14.5px; margin: 0 0 12px; }
.section p:last-child { margin-bottom: 0; }

.gloss { text-decoration: underline dotted; text-underline-offset: 3px; color: inherit; cursor: help; }
.gloss:hover { color: var(--color-accent-700); }

.ai-note { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); background: var(--color-ground); padding: 10px 14px; border-left: 3px solid var(--color-divider-strong); }

.raw-details { margin-top: 22px; border-top: 1px solid var(--color-divider); padding-top: 14px; }
.raw-details summary { cursor: pointer; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--color-accent-700); }
.raw-note { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 10px 0; }
.raw-text { font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--color-ground); }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin: 12px 0; border: 1px solid var(--color-divider); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
thead th { background: color-mix(in srgb, var(--color-text) 4%, transparent); font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, var(--color-text) 60%, transparent); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
.station-id { white-space: nowrap; }
.callsign { font-family: var(--mono); font-weight: 700; display: block; }
.wmo { font-family: var(--mono); font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.raw-status { font-size: 11.5px; white-space: nowrap; }
.code-flag { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--warn); background: var(--warn-bg); padding: 1px 7px; }
.param-table td .muted { display: block; }
.unparsed { margin-top: 10px; font-size: 13px; }
.unparsed summary { cursor: pointer; color: var(--color-accent-700); font-family: var(--font-heading); font-weight: 600; }

/* ---------- Sectors & CWD ---------- */

.sector-block { background: var(--color-ground); border: 1px solid var(--color-divider); padding: 14px 16px; margin-bottom: 12px; }
.sector-plain { margin: 0 0 10px; font-size: 14px; }
.sector-facts, .cwd-facts { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.sector-facts dt, .cwd-facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, var(--color-text) 50%, transparent); font-weight: 700; font-family: var(--font-heading); }
.sector-facts dd, .cwd-facts dd { margin: 2px 0 0; font-size: 13.5px; }
.cwd-facts { background: var(--color-ground); border: 1px solid var(--color-divider); padding: 14px 16px; }
.map-link { font-size: 12px; margin-left: 8px; }

/* Outlook list */
.outlook-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.outlook-list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.outlook-list--inline { margin-top: 12px; }
.outlook-day { min-width: 84px; font-family: var(--font-heading); font-weight: 600; }

/* ---------- Glossary ---------- */

.glossary-section { scroll-margin-top: 16px; margin-bottom: 30px; }
.glossary-section > h2 { font-size: 1.3rem; margin: 0 0 4px; }
.glossary-section > p { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 74%, transparent); max-width: 72ch; }
.glossary { margin: 0; }
.glossary-entry { padding: 15px 0; border-bottom: 1px solid var(--color-divider); scroll-margin-top: 16px; }
.glossary-entry:target { background: var(--warn-bg); padding-left: 12px; padding-right: 12px; border-bottom-color: transparent; }
.glossary-entry dt { font-family: var(--font-heading); font-weight: 600; font-size: 17px; margin-bottom: 5px; }
.glossary-entry dd { margin: 0; max-width: 72ch; }
.glossary-short { font-weight: 500; margin: 0 0 6px; font-size: 14px; }
.glossary-entry dd p:last-child { margin: 0; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 66%, transparent); line-height: 1.55; }
.aliases { font-weight: 400; font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); font-family: var(--font-body); margin-left: 6px; }
.provenance { font-style: italic; }

/* ---------- Drawer scrim (small screens) ---------- */

.drawer-scrim { position: fixed; inset: 0; background: color-mix(in srgb, #000 45%, transparent); z-index: 40; }

/* ---------- Responsive: sidebar → drawer ---------- */

@media (max-width: 900px) {
  .app { display: block; height: auto; overflow: visible; }
  .content { overflow: visible; }
  main { overflow: visible; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, var(--sidebar-w));
    z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease;
    border-right: 1px solid var(--color-divider);
  }
  .app[data-drawer-open] .sidebar, .sidebar[data-open] { transform: translateX(0); }
  .drawer-toggle { display: inline-flex; }
  .topbar { position: sticky; top: 0; z-index: 30; }

  .rail--sticky { position: static; max-height: none; }
  .split--explorer, .split--glossary, .split--products, .split--concepts, .split--sdm { grid-template-columns: 1fr; }
  .rail { padding: 20px 22px 4px; }
  .facet-group { flex-flow: row wrap; }
  .facet { border: 1px solid var(--color-divider); }
  .facet--active { box-shadow: none; border-color: var(--color-accent-500); }

  .pane, .sdm-intro, .sdm-intro + .dashboard-wrap { padding-left: 22px; padding-right: 22px; }
  .source-note { display: none; }
}

@media (min-width: 901px) {
  .drawer-scrim { display: none !important; }
}

@media (max-width: 560px) {
  .seg-opt span { padding: 7px 9px; font-size: 12px; }
  .topbar { gap: 10px 8px; padding: 10px 16px; flex-wrap: wrap; }
  .topsearch { flex: 1 1 100%; order: 5; max-width: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar, .stale-banner, .skip-link, .drawer-scrim { display: none; }
  .app { display: block; height: auto; }
  main { overflow: visible; }
  .card { border: 1px solid #999; }
  .blueprint > .corner { display: none; }
  .raw-details[open] { display: block; }
}