/* ============================================================================
   DEVELOPER GUIDE / REFERENCE chrome — dev-reference.html (primary) and
   dev-getting-started.html (legacy). Pairs with _devguide.js. Pieces:
     • .doc       — shared article layout (header, .sect panels) — UNLAYERED
                    tail below: the semantic base styles (h1/h2/p/a) in
                    colors_and_type.css are unlayered and would beat any
                    layered rule on those elements (see notes/pitfalls.md
                    "CSS layers").
     • .dg-drawer — side menu: fixed left column ≥1360px, slide-in panel
                    below (floating .dg-fab menu button + .dg-scrim).
     • .dg-bar    — reference-view toolbar (back · title · spec/raw/width).
     • .dg-map    — grouped component map (specialised table renderer).
     • .dg-modal  — per-component reference dialog (legacy mode + fallback).
     • .dg-pal    — command palette (Ctrl/Cmd + K).
   Preview-only — never ship (listed in the guide's "Preview-only chrome").
   Link AFTER _devdocs.css.
   ============================================================================ */
@layer components {

/* ── Header search button ──────────────────────────────────────────────── */
.doc__tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.dg-kbtn {
  all: unset;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--color-fg-tertiary);
  transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
.dg-kbtn:hover { color: var(--color-fg-secondary); background: var(--gov-color-neutral-50); }
.dg-kbtn:focus-visible {
  box-shadow: var(--shadow-focus);
  transition: background-color 100ms ease-out, color 100ms ease-out,
              box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
.dg-kbtn .bi { font-size: 12px; }
.dg-kbtn__keys { display: inline-flex; gap: 3px; margin-left: auto; }

/* ── Icon button (toolbars, modal header) ──────────────────────────────── */
.dg-ibtn {
  all: unset;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-fg-tertiary);
  transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
.dg-ibtn:hover { color: var(--gov-color-primary-600); background: var(--gov-color-neutral-50); }
.dg-ibtn:focus-visible {
  box-shadow: var(--shadow-focus);
  transition: background-color 100ms ease-out, color 100ms ease-out,
              box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
.dg-ibtn[hidden] { display: none; }

/* ── Side menu — drawer (fixed column ≥1360px, off-canvas below) ───────── */
.dg-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 70;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: thin;
}
.dg-rail { display: flex; flex-direction: column; gap: 20px; }
.dg-rail__search { width: 100%; }
.dg-rail__group { display: flex; flex-direction: column; }
.dg-rail__cap {
  font: 600 10px/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-fg-tertiary);
  padding: 0 9px 5px;
}
.dg-rail__link {
  all: unset;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 5px;
  font: 400 12.5px/1.55 var(--font-sans);
  color: var(--color-fg-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
.dg-rail__link:hover { background: var(--gov-color-neutral-50); color: var(--color-fg-default); }
.dg-rail__link.is-cur { background: var(--gov-color-primary-50); color: var(--gov-color-primary-700); font-weight: 500; }
.dg-rail__link:focus-visible {
  box-shadow: var(--shadow-focus);
  transition: background-color 100ms ease-out, color 100ms ease-out,
              box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}

/* Language segmented control (PAGE mode, bottom of the menu). */
.dg-lang { display: flex; gap: 4px; padding: 0 9px; }
.dg-lang button {
  all: unset;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  box-sizing: border-box;
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  font: 500 11px/1 var(--font-sans);
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--color-border-default);
  color: var(--color-fg-secondary);
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
  transition: background-color 100ms ease-out, color 100ms ease-out,
              border-color 100ms ease-out, box-shadow 140ms ease-out;
}
.dg-lang button:hover { background: var(--gov-color-neutral-50); color: var(--color-fg-default); }
.dg-lang button[aria-pressed="true"] {
  background: var(--gov-color-primary-50);
  border-color: var(--gov-color-primary-200);
  color: var(--gov-color-primary-700);
}
.dg-lang button:focus-visible {
  box-shadow: var(--shadow-focus);
  transition: background-color 100ms ease-out, color 100ms ease-out,
              border-color 100ms ease-out, box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}

/* Floating menu button — counterpart of the top-right Inspector cluster. */
.dg-fab {
  all: unset;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  box-sizing: border-box;
  display: none;
  position: fixed; top: 14px; left: 14px;
  z-index: 68;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: 7px;
  font-size: 16px;
  color: var(--color-fg-secondary);
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-1);
  transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
.dg-fab:hover { color: var(--gov-color-primary-600); background: var(--gov-color-neutral-50); }
.dg-fab:focus-visible {
  box-shadow: var(--shadow-focus);
  transition: background-color 100ms ease-out, color 100ms ease-out,
              box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
.dg-scrim { display: none; }

@media (min-width: 1360px) {
  .dg-drawer { width: 236px; padding: 36px 10px 48px 16px; }
}
@media (max-width: 1359.98px) {
  .dg-drawer {
    width: 254px;
    padding: 16px 14px 32px;
    background: var(--color-bg-surface, var(--gov-color-neutral-0));
    border-right: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-3);
    transform: translateX(-103%);
    /* delayed visibility keeps the closed panel untabbable + out of the
       a11y tree without JS bookkeeping (devdocs collapse pattern) */
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.16, 1, .3, 1), visibility 0s 240ms;
  }
  .dg-drawer.is-open {
    transform: none;
    visibility: visible;
    transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
  }
  .dg-fab { display: inline-flex; }
  .dg-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 69;
    background: rgba(11, 18, 32, 0.45);
    opacity: 0;
    pointer-events: none;            /* opacity:0 is still hit-testable */
    transition: opacity 200ms ease-out;
  }
  .dg-scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* ── Views (PAGE mode) — home article ⇄ in-column reference ────────────── */
.dg-view { display: flex; flex-direction: column; gap: 30px; }
.dg-view[hidden] { display: none; }
.dg-view { transition: opacity 130ms ease-out; }
.dg-view.is-out { opacity: 0; }
.dg-view.is-in { opacity: 0; transition: none; }

/* ── Reference-view toolbar ────────────────────────────────────────────── */
.dg-bar { display: flex; align-items: center; gap: 14px; }
.dg-bar__back {
  width: 34px; height: 34px;
  font-size: 15px;
  flex: none;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
}
.dg-bar__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dg-bar__eyebrow {
  font: 600 10px/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gov-color-primary-600);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.dg-bar__acts { margin-left: auto; display: flex; gap: 4px; align-self: flex-start; }

/* ── Component map — grouped tables (specialised renderer) ─────────────── */
.dg-map { display: flex; flex-direction: column; gap: 22px; }
.dg-map__grp { overflow-x: auto; }
.dg-map__cap {
  font: 600 10px/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--gov-color-primary-600);
  padding-bottom: 6px;
}
.dg-map__tbl { table-layout: fixed; min-width: 560px; }

/* ── Reference modal (legacy mode + out-of-registry fallback) ──────────── */
.dg-modal {
  border: 0; padding: 0; margin: auto;
  width: min(840px, calc(100vw - 40px));
  max-height: min(86vh, 1040px);
  border-radius: 10px;
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
  color: var(--color-fg-default);
  box-shadow: var(--shadow-3);
  /* Expand/restore resize glide (reduced motion collapses it globally). */
  transition: width 220ms cubic-bezier(.16, 1, .3, 1), max-height 220ms cubic-bezier(.16, 1, .3, 1);
}
/* Expanded (data-dg="max" toggle) — use (nearly) the whole window; height
   stays content-driven, only the caps widen. */
.dg-modal.is-max {
  width: min(1320px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}
.dg-modal[open] { display: flex; flex-direction: column; }
.dg-modal::backdrop { background: rgba(11, 18, 32, 0.45); backdrop-filter: blur(2px); }
.dg-modal__head {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-default);
}
.dg-modal__eyebrow {
  font: 600 10px/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gov-color-primary-600);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.dg-modal__title {
  font: 600 15px/1.3 var(--font-sans);
  color: var(--color-fg-default);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dg-modal__acts { margin-left: auto; display: flex; gap: 4px; }
.dg-modal__body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 22px;
}
@media (max-width: 560px) { .dg-modal__body { padding: 14px; } }

/* ── Command palette ───────────────────────────────────────────────────── */
.dg-pal {
  border: 0; padding: 0;
  margin: 10vh auto auto;
  width: min(580px, calc(100vw - 40px));
  border-radius: 10px;
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
  color: var(--color-fg-default);
  box-shadow: var(--shadow-3);
}
.dg-pal[open] { display: flex; flex-direction: column; }
.dg-pal::backdrop { background: rgba(11, 18, 32, 0.45); backdrop-filter: blur(2px); }
.dg-pal__in {
  flex: none;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-fg-tertiary);
}
.dg-pal__in .bi { font-size: 13px; }
.dg-pal__in input {
  all: unset;
  flex: 1 1 auto; min-width: 0;
  font: 400 13.5px/1.5 var(--font-sans);
  color: var(--color-fg-default);
}
.dg-pal__in input::placeholder { color: var(--color-fg-tertiary); }
.dg-pal__list {
  overflow-y: auto;
  max-height: min(46vh, 430px);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.dg-pal__item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--color-fg-secondary);
}
.dg-pal__item .bi { font-size: 12px; color: var(--color-fg-tertiary); flex: none; }
.dg-pal__item[aria-selected="true"] { background: var(--gov-color-primary-50); color: var(--gov-color-primary-700); }
.dg-pal__item[aria-selected="true"] .bi { color: var(--gov-color-primary-600); }
.dg-pal__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-pal__grp {
  margin-left: auto; padding-left: 12px;
  font: 500 9.5px/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-fg-tertiary);
  white-space: nowrap; flex: none;
}
.dg-pal__empty { margin: 0; padding: 14px; font-size: 12.5px; color: var(--color-fg-tertiary); }
.dg-pal__foot {
  flex: none;
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 9px 14px;
  border-top: 1px solid var(--color-border-default);
  font-size: 11px;
  color: var(--color-fg-tertiary);
}
.dg-pal__foot span { display: inline-flex; align-items: center; gap: 4px; }

} /* end @layer components — devguide */

/* ══ UNLAYERED — shared article layout + anchor overrides ═════════════════
   Two reasons this block sits outside @layer (see notes/pitfalls.md "CSS
   layers"): (1) the semantic base styles in colors_and_type.css (h1/h2/p,
   `a { color; underline }`, `code { 0.95em }`) are unlayered and beat ANY
   layered rule on those elements; (2) this block used to live as page-inline
   CSS (unlayered) in dev-getting-started.html — moving it here verbatim-
   unlayered keeps the cascade identical for both pages. The CONTENT is
   rendered from markdown by _devguide.js — edit docs/*.md, never section
   HTML in the pages. */
body { background: var(--gov-color-neutral-50); }
.doc {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 28px 64px;
  display: flex; flex-direction: column; gap: 30px;
}
/* Wide mode (toolbar "Expand width" toggle). ≥1360px the left inset clears
   the fixed menu column; below it only viewport padding caps it. */
.doc.is-wide { max-width: min(1320px, calc(100vw - 48px)); }
@media (min-width: 1360px) { .doc.is-wide { max-width: min(1320px, calc(100vw - 508px)); } }
/* Keep the article clear of the floating menu button when the column hugs
   the viewport edge. */
@media (max-width: 1023.98px) { .doc { padding-top: 60px; } }
.doc__head { display: flex; flex-direction: column; gap: 8px; }
.doc__eyebrow {
  font: 600 11px var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--gov-color-primary-600);
  display: flex; align-items: center; gap: 7px;
}
.doc__head h1 {
  margin: 0;
  font: 600 28px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-fg-default);
}
.doc__lede {
  margin: 0;
  font-size: 14.5px; line-height: 1.65;
  color: var(--color-fg-secondary);
  text-wrap: pretty;
  max-width: 64ch;
}
/* Sections render into #doc-sections; display:contents hands them to the
   view column's gap so spacing stays in one place. */
#doc-sections { display: contents; }
.sect {
  background: var(--color-bg-surface, var(--gov-color-neutral-0));
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.sect h2 {
  margin: 0;
  font: 600 16.5px/1.3 var(--font-sans);
  color: var(--color-fg-default);
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.sect h2 .n { font: 600 11px var(--font-mono); color: var(--color-fg-tertiary); letter-spacing: 0.05em; }
.sect h2 .sub { font: 400 13px/1.4 var(--font-mono); color: var(--color-fg-tertiary); letter-spacing: 0; }
/* Reference-view toolbar title (h1 element — must beat the unlayered base). */
.dg-bar h1 {
  margin: 0;
  font: 600 22px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--color-fg-default);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Scale the shared block vocabulary up for a full doc page. */
.doc .devdocs__note { font-size: 13px; line-height: 1.65; }
.doc .devdocs__list { font-size: 13px; line-height: 1.7; }
.doc .devdocs__code { font-size: 11.5px; }
.doc .devdocs__tbl { font-size: 12.5px; }
.doc .devdocs__tbl td { padding-top: 6px; padding-bottom: 6px; }
.doc .devdocs__tbl a { color: var(--gov-color-primary-600); text-decoration: none; }
.doc .devdocs__tbl a:hover { text-decoration: underline; }
.doc__foot { font-size: 12px; color: var(--color-fg-tertiary); line-height: 1.6; }
.doc__foot a { color: var(--gov-color-primary-600); text-decoration: none; }
.doc__foot a:hover { text-decoration: underline; }
@media (max-width: 560px) { .doc { padding-left: 16px; padding-right: 16px; padding-bottom: 48px; } .sect { padding: 16px 16px; } }

/* Anchor overrides — colors_and_type.css styles `a` (link ink + underline)
   OUTSIDE any layer; unlayered beats every layered rule, so chrome anchors
   (icon buttons, rail links) need their colours re-stated here. */
a.dg-ibtn, a.dg-ibtn:visited { color: var(--color-fg-tertiary); text-decoration: none; }
a.dg-ibtn:hover { color: var(--gov-color-primary-600); }
a.dg-rail__link, a.dg-rail__link:visited { color: var(--color-fg-secondary); text-decoration: none; }
a.dg-rail__link:hover { color: var(--color-fg-default); }
a.dg-rail__link.is-cur, a.dg-rail__link.is-cur:visited, a.dg-rail__link.is-cur:hover { color: var(--gov-color-primary-700); }

/* ── Navigation loader — top-edge progress bar (built by _devguide.js) ────
   Shown while a reference fetch+render hop takes longer than ~120ms. The
   bar translates in from the left (WAA drives transform); its LEFT edge is
   faded by a mask, which reads as the "tail" when the finished bar exits
   to the right. Decent but visible: 3px, primary gradient, soft glow. */
.dg-loader {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 96;                 /* above the drawer (70) + fab (68); dialogs are top-layer */
  overflow: hidden;
  pointer-events: none;
  display: none;
}
.dg-loader.is-on { display: block; }
.dg-loader__bar {
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    var(--gov-color-primary-400),
    var(--gov-color-primary-600) 55%,
    var(--gov-color-primary-500));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--gov-color-primary-500) 45%, transparent);
}