/**
 * DHCW Single Record Design System: website chrome.
 *
 * Layout and chrome only. Every colour, size and space resolves to a built
 * token custom property; nothing here invents a value.
 *
 * Structure mirrors the approved Figma page template:
 *   Masthead  utility row (40px) + main row (64px), Navy/900
 *   Layout    200px sidebar + content column, max 1440px (XLarge)
 */

/* ── base ─────────────────────────────────────────────────────────────────── */
/* Sticky footer: body is a full-height flex column so `.layout` can grow to
   fill whatever the masthead and footer don't use. On a short page (e.g.
   "Using figma") this is what keeps the footer pinned to the bottom of the
   viewport instead of floating right under the content, and — because
   `.layout` is the grid `.sidebar` stretches inside — it's also what makes
   the sidebar's white background reach all the way down to the footer
   instead of stopping at the content's own (shorter) height. */
html { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sr-color-text-primary);
  background: var(--sr-color-surface-background);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--sr-color-surface-small-cards);
  color: var(--sr-color-text-primary);
  padding: 8px 12px;
  border-radius: 4px;
}
.skip:focus { left: 8px; top: 8px; }

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

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--sr-color-border-focus);
  outline-offset: 2px;
}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead { background: var(--color-navy-900); color: var(--sr-color-text-inverse); }
.masthead__row { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; }

.masthead__utility { height: 40px; justify-content: flex-end; gap: 24px; }
.masthead__utility a,
.masthead__utility button {
  font: inherit;
  font-size: 14px;
  color: var(--sr-color-text-inverse);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .92;
}
.masthead__utility a:hover,
.masthead__utility button:hover { opacity: 1; text-decoration: underline; }
.masthead__utility svg { width: 16px; height: 16px; flex: none; }

.masthead__main { height: 64px; gap: 32px; }
.masthead__brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.masthead__brand img { height: 48px; width: auto; display: block; }

/* ── primary navigation ───────────────────────────────────────────────────── */
.primary-nav { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; }
.primary-nav a {
  font-size: 15px;
  line-height: 1;
  color: var(--sr-color-text-inverse);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 4px;
  white-space: nowrap;
}
.primary-nav a:hover { background: rgba(255, 255, 255, .12); }
.primary-nav a[aria-current="page"] {
  background: var(--sr-color-interactive-link);
  font-weight: 500;
}

/* ── header search ────────────────────────────────────────────────────────── */
/* `flex: none` at a fixed 240px could not shrink, so between 1001px (where the
   masthead stops wrapping) and roughly 1150px the search field was pushed past
   the right edge and scrolled every page on the site sideways by ~84px.
   `0 1 240px` keeps 240px as the preferred width and lets it give way. */
.search { position: relative; flex: 0 1 240px; min-width: 120px; }
.search__field { display: flex; align-items: center; gap: 8px; background: var(--sr-color-surface-small-cards); border-radius: 8px; padding: 0 12px; height: 40px; }
.search__icon { display: flex; flex: none; color: var(--sr-color-text-secondary); }
.search__field svg { width: 16px; height: 16px; display: block; }
.search__input {
  font: inherit;
  font-size: 14px;
  color: var(--sr-color-text-primary);
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
}
.search__input::placeholder { color: var(--sr-color-text-secondary); }
.search__field:focus-within { outline: 3px solid var(--sr-color-border-focus); outline-offset: 2px; }

.search__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--sr-color-surface-small-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 41, 74, .18);
  padding: 4px;
  z-index: 30;
}
.search__panel[hidden] { display: none; }
.search__result {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--sr-color-text-primary);
}
.search__result:hover,
.search__result.is-active { background: var(--sr-color-surface-accent); }
.search__result strong { display: block; font-size: 15px; font-weight: 500; color: var(--sr-color-interactive-link); }
.search__result span { display: block; font-size: 13px; color: var(--sr-color-text-secondary); }
.search__empty { padding: 12px; font-size: 14px; color: var(--sr-color-text-secondary); }

/* ── layout ───────────────────────────────────────────────────────────────── */
.layout {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: stretch;
}
.layout--nosidebar { grid-template-columns: minmax(0, 1fr); }

/* The column fills the full height of the layout row, so its background runs the
   length of the page. The nav inside it is what sticks while the page scrolls. */
.sidebar {
  background: var(--sr-color-surface-small-cards);
  border-radius: 0 0 8px 0;
}
.sidebar__inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 24px 0;
}
.sidebar__title {
  margin: 0 0 16px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sr-color-text-primary);
}
.sidebar a {
  display: block;
  padding: 10px 24px;
  font-size: 15px;
  color: var(--sr-color-text-primary);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: var(--sr-color-surface-subtle); }
.sidebar a[aria-current="page"] {
  color: var(--sr-color-interactive-link);
  font-weight: 500;
  border-left-color: var(--sr-color-interactive-link);
}

/* One page width, everywhere.
   Pages used to come in two shapes: an 800px column, or a "wide" one that also
   dropped `.layout`'s 1280px cap — so on a widescreen monitor some pages grew
   past the masthead while their neighbours sat still. That was the difference
   the reader saw, and it read as a bug rather than a distinction.
   Now every documentation page fills the same column, capped with the masthead
   and the site footer at 1440px, the XLarge breakpoint from the grid
   foundation — a widescreen monitor gets the extra column rather than 640px of
   margin. Only the prototype embeds go edge to edge, and
   they use a shell of their own with no masthead to line up against. */
.content { --content-gutter: 40px; padding: var(--content-gutter); max-width: none; }

/* Filling the column does not mean setting prose 1000px wide: a 110-character
   line is hard to track back from. Text blocks keep a readable measure while
   component previews, tables and code panels use the whole width. */
.content > :is(p, ul, ol, blockquote, dl) { max-width: 72ch; }


/* ── content typography (bound to the token scale) ────────────────────────── */
/* Category eyebrow. It is the caption type variant, not a size of its own, and
   it sits tight to the h1 below it — the two read as one titling set rather
   than as two separate lines of page furniture. */
.breadcrumbs {
  margin: 0 0 4px;
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}
/* `:not(:where(.showcase__preview *))` on every page-copy rule below is load-bearing.
   A showcase preview holds the real component's markup, and these rules were
   reaching into it: `.content h2` (0,1,1) outranks the component's own
   `.sr-patient-banner__name { margin: 0 }` (0,1,0), so its 40px top margin
   pushed the patient's name well below the alert cards it is meant to align
   with — in every variant on the page. Excluding preview descendants is the
   fix that keeps page copy styled without the site restyling what it
   documents.

   It is wrapped in `:where()` so it costs no specificity. Bare
   `:not(.showcase__preview *)` scored (0,1,0) of its own, which quietly pushed
   every rule here to (0,2,1) and put them above the site's own component rules:
   `.card h3` (0,1,1) lost, so every card on the site rendered its heading at
   16px with a 28px top margin instead of the 20px and 0 its own rule asks for —
   including the comment below saying card headings use Heading S, which had not
   been true in a browser since this exclusion was added. `:not(:where(…))`
   excludes exactly the same elements and adds nothing. */
.content h1:not(:where(.showcase__preview *)) { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0 0 12px; }
.content h2:not(:where(.showcase__preview *)) { font-size: 20px; line-height: 28px; font-weight: 700; margin: 40px 0 12px; }
.content h3:not(:where(.showcase__preview *)) { font-size: 16px; line-height: 24px; font-weight: 700; margin: 28px 0 8px; }
.content h4:not(:where(.showcase__preview *)) { font-size: 16px; line-height: 24px; font-weight: 500; margin: 20px 0 8px; }
.content p:not(:where(.showcase__preview *)),
.content li:not(:where(.showcase__preview *)) { font-size: 16px; line-height: 24px; }
.content p:not(:where(.showcase__preview *)) { margin: 0 0 16px; }
.content ul:not(:where(.showcase__preview *)) { margin: 0 0 16px; padding-left: 20px; }
.content li:not(:where(.showcase__preview *)) { margin-bottom: 8px; }
.content .lede { color: var(--sr-color-text-secondary); margin-bottom: 32px; }
/* Excluded from previews for the same reason as the headings above: a
   component's own links carry its colours. Unscoped, this painted every
   BottomNav tab blue, hiding the fact that only the current tab is blue. */
.content a:not(:where(.showcase__preview *)) { color: var(--sr-color-interactive-link); }
.content hr { border: 0; border-top: 1px solid var(--sr-color-border-default); margin: 40px 0; }
.content code {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: .9em;
  background: var(--sr-color-surface-subtle);
  padding: 1px 5px;
  border-radius: 4px;
}
.muted { color: var(--sr-color-text-secondary); font-size: 14px; }

.callout {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--sr-color-status-info);
  background: var(--sr-color-status-info-surface);
  border-radius: 0 6px 6px 0;
}
.callout p:last-child { margin-bottom: 0; }
/* For a callout that corrects something a reader may already have been told.
   Warning rather than critical: nothing is broken, but following the old
   instructions wastes an afternoon. */
.callout--warning {
  border-left-color: var(--sr-color-status-warning);
  background: var(--sr-color-status-warning-surface);
}
.callout--warning .codepanel { margin: 12px 0; }
.content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--sr-color-border-focus);
  background: var(--sr-color-surface-accent);
  border-radius: 0 6px 6px 0;
}
.content blockquote p:last-child { margin-bottom: 0; }

/* ── tables ───────────────────────────────────────────────────────────────────
   The documentation tables on this site are styled to match the Table
   component, not to a look of their own: tinted header row, no rule under it,
   and a subtle divider between body rows (Figma 1363:22598). A 2px strong rule
   under the header was the site's own invention and made every table on the
   site — including the Table component's own example — read as a different
   component from the one we publish.

   `:not(.sr-table)` matters: the Table component's demo renders real
   `.sr-table` markup, and these page-level rules were overriding its padding,
   alignment and header border, so the component page showed something the
   component does not actually produce. */
/* `contain: paint` for the same reason `.sr-table-wrap` has it: `overflow-x`
   alone scrolls the table but does not stop it extending the page's own
   horizontal scroll (15px on the Grids page at 390px). No visual change. */
.table-wrap { overflow-x: auto; margin: 0 0 24px; contain: paint; }
.content table:not(.sr-table) {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  background: var(--sr-color-surface-section-cards);
}
.content table:not(.sr-table) th,
.content table:not(.sr-table) td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2);
  border-bottom: 1px solid var(--sr-color-border-subtle);
}
.content table:not(.sr-table) th {
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
  background-color: var(--color-info-blue-50);
  border-bottom: 0;
}
.content table:not(.sr-table) td { color: var(--sr-color-text-secondary); }

/* ── cards ────────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 0 0 32px; }
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--sr-color-surface-small-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: 8px;
  padding: 20px;
}
.card:hover { border-color: var(--sr-color-interactive-link); }
/* Card headings use Heading S (20/28 Bold) from the type scale. */
/* Decorative icon above the card heading. It takes the link colour so the card
   reads as one interactive object rather than an icon beside a link. */
.card__icon { display: block; margin: 0 0 12px; color: var(--sr-color-interactive-link); }
.card__icon svg { width: 24px; height: 24px; }
/* 8px top and bottom. The top margin collapses against the icon's 12px bottom,
   so the icon sits 12px above the title rather than the 28px it had while the
   page-copy rule was winning. */
.card h3 { margin: 8px 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--sr-color-interactive-link); }
.card p { margin: 0; font-size: 14px; line-height: 20px; color: var(--sr-color-text-secondary); }

/* ── bare page shell (prototype embeds only) ────────────────────────────────
   No masthead, primary nav or sidebar — the embed's own bar is the only
   chrome, so the prototype gets the full browser viewport the way the real
   product eventually will. */
body.bare { margin: 0; }

/* ── embedded prototype (Sandpack, DDR-019) ─────────────────────────────────
   Sandpack renders its own preview/editor panes, but owns no page-level
   chrome, so the back-link, title and the Preview/Code toggle are our own
   navy bar above it, rendered by the same React root. Both panels stay
   mounted at all times and are shown/hidden with .is-hidden rather than
   conditionally rendered — unmounting SandpackPreview drops its live bundler
   connection, and remounting it renders blank until a full page reload. */
.embed--full {
  position: fixed;
  inset: 0;
}
.embed__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.embed__loading {
  margin: 0;
  padding: 40px;
  text-align: center;
  color: var(--sr-color-text-secondary);
}
.embed__bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-navy-900);
}
.embed__title {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sr-color-text-inverse);
  text-align: center;
}
.embed__back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sr-color-text-inverse);
  /* Matches the masthead's existing link-on-navy treatment (same opacity
     convention as .masthead__utility a) for consistency. Both are a known
     contrast gap — there is no dedicated "link on dark surface" semantic
     token yet — tracked rather than invented here; see DL-029. */
  opacity: 0.92;
}
.embed__back:hover { opacity: 1; text-decoration: underline; }
.embed__back svg { width: 16px; height: 16px; }
.embed__toggle {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  overflow: hidden;
}
.embed__toggle button {
  padding: 6px 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sr-color-text-inverse);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.embed__toggle button + button { border-left: 1px solid rgba(255, 255, 255, 0.3); }
.embed__toggle button.is-active {
  background: var(--sr-color-text-inverse);
  color: var(--color-navy-900);
}
/* Sandpack's default theme sets `layout: { height: "300px" }`, and its own rule
   `.sp-layout > .sp-stack { height: var(--sp-layout-height) }` reads it — that
   300px was the cut-off, with `.sp-preview-container`'s own `overflow: auto`
   producing the scrollbar inside the cut area. Two things are needed:
   1. Override --sp-layout-height so it fills the panel instead.
   2. Give that percentage a DEFINITE basis to resolve against. .embed__panel
      takes its height from `flex: 1`, which counts as an indefinite height for
      percentage resolution, so a plain `height: 100%` chain collapses to auto.
      Absolutely filling the panel removes that ambiguity. */
/* SandpackProvider's theme provider injects its own <div class="sp-wrapper">
   between .embed__inner and the panels. It is `all: initial; display: block`
   with no height, so it silently broke the flex chain: the panels were no
   longer flex items of .embed__inner, collapsed to zero height, and (once
   their contents were absolutely positioned) rendered nothing at all.
   Re-establish the chain through it. */
.embed__inner > .sp-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.embed__panel { position: relative; flex: 1 1 auto; min-height: 0; }
.embed__panel.is-hidden { display: none; }
/* !important is load-bearing: Sandpack sets `.sp-layout { position: relative }`
   at the same specificity as this rule, and injects it at runtime (stitches),
   so it lands after site.css and would otherwise win on source order. */
.embed__panel > * { position: absolute !important; inset: 0; }
.embed__panel .sp-layout {
  --sp-layout-height: 100%;
  border: 0;
  border-radius: 0;
}
.embed__panel--code { display: flex; }
.embed__panel--code.is-hidden { display: none; }

/* ── showcase: white preview + dark tabbed code panel ─────────────────────── */
/* A showcase sits in the content column, aligned with the prose, the tables and
   the standalone code panels around it.
   It used to be full-bleed — every showcase pulled out to the page padding so
   the widest component on the site had room. The cost was paid on every other
   page: a preview and the dark panel under it ran to the sidebar while a
   code-only section a paragraph later kept its gutter, so two things of the
   same kind were set to two different widths on one page. Alignment is the
   default; the components that genuinely need the extra 80px opt in below. */
.showcase {
  margin: 24px 0 32px;
  border: 1px solid var(--sr-color-border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--sr-color-surface-small-cards);
}

/* Opt-in full bleed, for a component that misrepresents itself at column width.
   The Patient Banner is the case this exists for: it is drawn at 1280px and its
   demographics grid drops to one column below roughly 1230px of banner width,
   which is narrower than the content column but wider than the bleed. */
.showcase--bleed {
  margin-left: calc(var(--content-gutter) * -1);
  margin-right: calc(var(--content-gutter) * -1);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.showcase__preview { padding: 32px; }
.showcase__preview > :first-child { margin-top: 0; }
.showcase__preview > :last-child { margin-bottom: 0; }
/* Type specimens are divs so the sr-type-* class controls the size, not .content p. */
.showcase__preview > [class*="sr-type-"] { margin: 0 0 16px; }
.showcase__preview > [class*="sr-type-"]:last-child { margin-bottom: 0; }
.showcase__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sr-color-border-default);
  background: var(--sr-color-surface-subtle);
}

/* dark code panel: rounded when standalone, square where it attaches under a preview */
.codepanel { background: var(--color-navy-900); border-radius: 8px; overflow: hidden; margin: 16px 0 32px; }
.showcase .codepanel { border-radius: 0; margin: 0; }
.codepanel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.codepanel__tabs { display: flex; }
.codepanel__tab {
  font: inherit;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 14px;
  cursor: pointer;
}
.codepanel__tab:hover { color: var(--sr-color-text-inverse); }
.codepanel__tab.is-active { color: var(--sr-color-text-inverse); border-bottom-color: var(--sr-color-brand-accent); font-weight: 500; }
.codepanel__copy {
  font: inherit;
  font-size: 14px;
  color: var(--sr-color-text-inverse);
  background: none;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.codepanel__copy:hover { background: rgba(255, 255, 255, .12); }
.codepanel pre { margin: 0; padding: 16px; overflow-x: auto; }
.codepanel code {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 22px;
  color: #e6edf3;
  background: none;
  padding: 0;
  white-space: pre;
}

/* ── switches (variant / size pickers) ────────────────────────────────────── */
.switch { display: inline-flex; border: 1px solid var(--sr-color-border-default); border-radius: 8px; overflow: hidden; background: var(--sr-color-surface-small-cards); }
.switch__btn {
  font: inherit;
  font-size: 14px;
  border: 0;
  background: none;
  color: var(--sr-color-text-secondary);
  padding: 8px 14px;
  cursor: pointer;
  border-right: 1px solid var(--sr-color-border-default);
}
.switch__btn:last-child { border-right: 0; }
.switch__btn.is-active { background: var(--sr-color-interactive-primary); color: var(--sr-color-text-inverse); }

/* A switch group is one choice from several. A toggle group is several
   independent yes/no options, so its buttons carry aria-pressed and each one
   lights up on its own. Same furniture, different semantics. */
.switch--toggles .switch__btn[aria-pressed="true"] {
  background: var(--sr-color-surface-accent);
  color: var(--sr-color-interactive-primary);
  font-weight: 500;
}
.switch__label {
  font-size: 13px;
  color: var(--sr-color-text-secondary);
  margin-right: -8px;
}

/* ── token specimens ──────────────────────────────────────────────────────── */
.type-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sr-color-border-subtle); }
.type-row__meta { flex: none; width: 180px; font-size: 13px; color: var(--sr-color-text-secondary); }

/* Primitive ramps: one row per family, step number shown on the chip. */
.ramp { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin: 0 0 28px; }
.ramp__step { margin: 0; }
.ramp__chip {
  height: 64px;
  border-radius: 6px;
  border: 1px solid var(--sr-color-border-default);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
}
.ramp figcaption { padding-top: 6px; font-size: 11px; display: flex; flex-direction: column; gap: 1px; }
.ramp figcaption code { background: none; padding: 0; font-size: 11px; word-break: break-all; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.swatch { margin: 0; border: 1px solid var(--sr-color-border-default); border-radius: 8px; overflow: hidden; background: var(--sr-color-surface-small-cards); }
.swatch__chip { height: 64px; }
.swatch figcaption { padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.hex { color: var(--sr-color-text-secondary); font-family: "Roboto Mono", monospace; }

/* ── icons ────────────────────────────────────────────────────────────────── */
.icon-specs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px; margin: 0 0 24px; }
.icon-spec { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.icon-spec figcaption { font-size: 12px; color: var(--sr-color-text-secondary); }
.icon-spec figcaption code { background: none; padding: 0; font-size: 12px; }
.icon-status-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.icon-status-row:last-child { margin-bottom: 0; }

.icon-browser { margin: 0 0 24px; }
.icon-filter {
  width: 100%;
  max-width: 360px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--sr-color-text-primary);
  background: var(--sr-color-surface-small-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: 6px;
}
.icon-filter:focus-visible { outline: 3px solid var(--sr-color-border-focus); outline-offset: 1px; }
.icon-browser__status { margin: 8px 0 0; font-size: 14px; color: var(--sr-color-text-secondary); }

.icon-group h3 { margin: 32px 0 12px; }
.icon-group__count { font-weight: 400; font-size: 13px; color: var(--sr-color-text-secondary); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  font: inherit;
  text-align: center;
  cursor: pointer;
  background: var(--sr-color-surface-small-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: 8px;
}
.icon-tile:hover { border-color: var(--sr-color-interactive-link); }
.icon-tile:focus-visible { outline: 3px solid var(--sr-color-border-focus); outline-offset: 1px; }
.icon-tile__name {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 16px;
  color: var(--sr-color-text-secondary);
  word-break: break-all;
}
.icon-tile.is-copied { border-color: var(--sr-color-status-success); }
.icon-tile.is-copied .icon-tile__name { color: var(--sr-color-status-success); }
.icon-tile.is-copied .icon-tile__name::after { content: " copied"; }

.space-row { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
.space-row__meta { flex: none; width: 180px; font-size: 13px; color: var(--sr-color-text-secondary); }
.space-bar { display: inline-block; height: 16px; background: var(--sr-color-interactive-primary); border-radius: 2px; }

.radii { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.radius { margin: 0; }
.radius__box { height: 72px; background: var(--sr-color-surface-accent); border: 2px solid var(--sr-color-interactive-primary); }
.radius figcaption { padding-top: 6px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }

/* ── token translator ─────────────────────────────────────────────────────── */
#src {
  width: 100%;
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  padding: 12px;
  border: 1px solid var(--sr-color-border-default);
  border-radius: 8px;
  background: var(--sr-color-surface-small-cards);
  color: var(--sr-color-text-primary);
}
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--sr-color-border-default); }
.bucket { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 15px; }
.bucket--exact { background: var(--sr-color-status-success-surface); color: var(--sr-color-status-success); }
.bucket--close { background: var(--sr-color-status-warning-surface); color: var(--sr-color-text-primary); }
.bucket--none { background: var(--sr-color-status-critical-surface); color: var(--sr-color-status-critical); }

/* ── footer ───────────────────────────────────────────────────────────────── */
/* No top margin. The sidebar column runs the full height of `.layout`, so 48px
   of margin here showed as a band of page background between the bottom of the
   sidebar and the footer — which read as a layout fault rather than as spacing.
   The border-top and the footer's own surface already separate it from the
   content above. */
.site-footer { border-top: 1px solid var(--sr-color-border-default); background: var(--sr-color-surface-small-cards); }
.site-footer p { max-width: 1440px; margin: 0 auto; padding: 24px 40px; font-size: 14px; color: var(--sr-color-text-secondary); }
.site-footer a { color: var(--sr-color-interactive-link); }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .masthead__main { height: auto; flex-wrap: wrap; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
  .primary-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .search { width: 100%; max-width: 320px; }
  .search__panel { width: 100%; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { border-radius: 0; border-bottom: 1px solid var(--sr-color-border-default); }
  .sidebar__inner { position: static; max-height: none; overflow: visible; padding: 16px 0; }
  .content { --content-gutter: 20px; padding: 24px var(--content-gutter); }
}

/* ── elevation specimens ──────────────────────────────────────────────────── */
.elevations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 24px 0 32px;
}
.elevation { margin: 0; }
.elevation__chip {
  height: 96px;
  border-radius: 8px;
  background: var(--sr-color-surface-section-cards);
}
.elevation figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  font-size: 14px;
}
.elevation__value {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--sr-color-text-secondary);
}
.elevation__use { color: var(--sr-color-text-secondary); }

/* ---------- Grids page ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.grid-cards--two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.grid-card {
  padding: var(--space-4);
  border: 1px solid var(--sr-color-border-default);
  border-top: 4px solid var(--sr-color-interactive-primary);
  border-radius: var(--radius-md);
  background: var(--sr-color-surface-section-cards);
}
.grid-card h3 { margin: 0 0 var(--space-1); }
.grid-card p { margin: 0; }
.grid-card ul { margin: var(--space-3) 0 0; padding-left: var(--space-4); }
.grid-card li + li { margin-top: var(--space-1); }

/* Column ribbon: `--cols` equal tracks, so the demo is the real column count
   rather than a picture of one. */
.grid-demo {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.grid-demo span {
  display: block;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--sr-color-surface-accent);
}

.grid-card__meta {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--sr-color-border-subtle);
}
.grid-card__meta div { margin: 0; }
.grid-card__meta dt {
  margin: 0;
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}
.grid-card__meta dd {
  margin: 0;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
}
.grid-card__range {
  margin: var(--space-3) 0 0;
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* ── navigation previews ──────────────────────────────────────────────────────
   The Navigation component is `height: 100vh; position: sticky` by design —
   Figma draws the sidebar at full frame height in every variant. Neither
   behaviour survives a documentation page, so its previews are boxed here.
   This is the only override the site applies to a component, and the
   Navigation page says so in a callout rather than leaving it implicit. */
.nav-frame {
  display: flex;
}
/* Height comes from the menu, not from the frame. A fixed frame height put a
   scrollbar inside a documentation example, so the reader had to scroll a
   sidebar to see the destinations the page is describing. */
.nav-frame .sr-nav {
  position: static;
  height: auto;
}
.nav-frame .sr-nav__body { overflow: visible; }

/* ── Tags page demos ──────────────────────────────────────────────────────── */
/* A tag is inline, so a row of them needs an explicit wrap and gap rather than
   relying on whitespace between the spans. */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-row + .tag-row { margin-top: 12px; }
.tag-inuse p { margin: 0 0 8px; }
.tag-inuse p:last-child { margin-bottom: 0; }