/* Drafter Design System — reference-page chrome.
 * These classes style the DOCS themselves; everything the reference *documents*
 * comes straight from colors.css / components.css so it cannot drift.
 *
 * Layout follows the Geist model: a persistent grouped sidebar over one routed
 * page per topic, each page built from example boxes that pair a live demo with
 * a collapsible "Show code" block.
 */

/* The app shell is a fixed viewport — app.css:3 sets `body { overflow: hidden }`
   and `html, body { height: 100% }` — so the window itself never scrolls. The
   reference has to own its own scroll containers: the sidebar and the reading
   column each scroll independently, which is also how Geist behaves. */
.ds-root { height: 100vh; display: flex; flex-direction: column; background: var(--white); overflow: hidden; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.ds-topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  position: sticky; top: 0;
  z-index: var(--z-topbar);
}
.ds-topbar-home {
  display: inline-flex; align-items: center; gap: var(--s-3);
  border: none; background: transparent; padding: 0; cursor: pointer;
}
.ds-topbar-logo { height: var(--logo-h); display: block; }
.ds-topbar-name {
  font-family: var(--font-sans); font-size: var(--fs-dense); font-weight: 500;
  color: var(--gray-700);
  padding-left: var(--s-3);
  border-left: 1px solid var(--gray-200);
}
.ds-topbar-search { margin-left: var(--s-6); }
.ds-nav-toggle { display: none; }

.ds-body { display: flex; flex: 1; min-height: 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.ds-side {
  width: 272px; flex: none;
  box-sizing: border-box;
  padding: var(--s-5) var(--s-3) var(--s-12);
  border-right: 1px solid var(--gray-200);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* ── Topbar search → command palette ──────────────────────────────────────────
   The topbar field is a BUTTON that looks like an input, not an input. Typing
   in a topbar field that only filters the sidebar is a worse interaction than
   it looks: it hides what you were reading behind a filtered rail, it cannot
   be reached from the keyboard, and it can only find things the rail already
   shows. This opens the palette, which is where the typing happens. */
.ds-search { position: relative; width: 280px; }
.ds-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-subtle); pointer-events: none; z-index: 1; }
.ds-searchbtn {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; box-sizing: border-box;
  height: var(--ctl-h-md);
  padding: 0 6px 0 34px;
  border: 1px solid var(--gray-200); border-radius: var(--r-md);
  background: var(--bg-1);
  cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-dense); color: var(--fg-subtle);
  text-align: left;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.ds-searchbtn:hover { background: var(--white); border-color: var(--gray-300); }
.ds-searchbtn:focus-visible { outline: none; border-color: var(--orange-500); box-shadow: var(--focus-ring); background: var(--white); }
.ds-searchbtn-label, .ds-searchbtn-label-short { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two labels, one shown at a time. The full phrase truncates to nonsense in a
   180px rail, and hiding it outright leaves a box that reads as an empty field
   rather than as a search affordance. */
.ds-searchbtn-label-short { display: none; }

/* Keycap. Mono, and a doubled bottom border so it reads as a physical key
   rather than as an inline code span. */
.ds-kbd {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 5px;
  border: 1px solid var(--gray-200); border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--gray-500);
}

/* ── Command palette ──────────────────────────────────────────────────────── */
.ds-palette-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh var(--s-5) var(--s-5);
}
.ds-palette {
  width: 100%; max-width: 560px;
  max-height: 62vh;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.ds-palette-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--gray-200);
  flex: none;
}
.ds-palette-input {
  flex: 1; min-width: 0;
  height: 52px;
  border: none; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: var(--fs-md); color: var(--fg);
}
.ds-palette-input::placeholder { color: var(--fg-subtle); }
.ds-palette-list { overflow-y: auto; padding: var(--s-2); overscroll-behavior: contain; }
.ds-palette-group {
  padding: var(--s-3) var(--s-3) var(--s-1);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-subtle);
}
.ds-palette-item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: 9px var(--s-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--gray-800);
  text-align: left;
}
/* Selection follows ONE cursor, driven by the keyboard and moved by the mouse
   (onMouseMove sets the index). A :hover rule alongside it would light two rows
   at once the moment you arrow down without moving the mouse. */
.ds-palette-item.active { background: var(--gray-100); color: var(--gray-900); }
.ds-palette-arrow { color: var(--fg-subtle); flex: none; }
.ds-palette-item.active .ds-palette-arrow { color: var(--gray-700); }
.ds-palette-empty { padding: var(--s-6) var(--s-3); font-size: var(--fs-dense); color: var(--fg-subtle); }
.ds-palette-foot {
  display: flex; align-items: center; gap: var(--s-5);
  flex: none;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--gray-200);
  background: var(--bg-1);
  font-size: var(--fs-sm); color: var(--fg-subtle);
}
.ds-palette-hint { display: inline-flex; align-items: center; gap: 6px; }

.ds-nav-group { margin-bottom: var(--s-6); }
/* Group headers are a real heading — dark, semibold, sentence case — not a tiny
   grey uppercase label. At three groups over 31 items, the header is the thing
   that has to survive a scan, and uppercase micro-type is the first thing to
   lose one. */
.ds-nav-group-title {
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600;
  color: var(--gray-900);
  padding: 0 var(--s-3) var(--s-2);
}
.ds-nav-item {
  display: block; width: 100%; text-align: left;
  padding: 7px var(--s-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--gray-600);
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.ds-nav-item:hover { background: var(--gray-50); color: var(--gray-900); }
.ds-nav-item.active { background: var(--gray-100); color: var(--gray-900); font-weight: 500; }

/* ── Reading column ───────────────────────────────────────────────────────── */
.ds-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
.ds-col { padding-bottom: var(--s-24); }

/* Sections run the full width of the reading pane so their dividers do too —
   an edge-to-edge hairline is what makes a long page read as separate sections
   instead of one column of stacked cards. The measure is held by an inner
   wrapper, centered in whatever space is left beside the rail, with fluid side
   padding so it tightens on small screens before the column gives up width. */
.ds-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(var(--s-5), 5vw, var(--s-10));
  box-sizing: border-box;
}

.ds-page-head { padding: var(--s-12) 0; border-bottom: 1px solid var(--gray-200); }
.ds-page-title { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.025em; margin: 0 0 var(--s-3); }
.ds-page-desc { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--fg-muted); margin: 0; max-width: 56ch; }

/* ── Example block ────────────────────────────────────────────────────────── */
.ds-ex { padding: var(--s-12) 0; }
.ds-ex + .ds-ex { border-top: 1px solid var(--gray-200); }
.ds-ex-title { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.02em; margin: 0 0 var(--s-3); }
.ds-ex-note { font-size: var(--fs-md); line-height: 1.65; color: var(--fg-muted); margin: 0 0 var(--s-6); max-width: 64ch; }

.ds-ex-box {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
/* The demo surface is tinted, not white. A .input, a .btn-default and a .menu
   are all white themselves — on a white card the control dissolves into it and
   only its border survives. The tint is what makes a specimen read as one. */
.ds-ex-demo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  padding: var(--s-8) var(--s-6);
  min-height: 96px;
  background: var(--bg-1);
  box-sizing: border-box;
}
/* `plain` demos are documentation content (tables, rules, specimens) rather than
   a specimen of a control — white, stacked, no min height. */
.ds-ex-demo.plain { display: block; padding: var(--s-6); min-height: 0; background: var(--white); }
.ds-ex-demo.plain > *:last-child { margin-bottom: 0; }

.ds-ex-bar { display: flex; align-items: stretch; border-top: 1px solid var(--gray-200); background: var(--white); }
.ds-ex-toggle {
  display: flex; align-items: center; gap: var(--s-2);
  flex: 1;
  height: 44px;
  padding: 0 var(--s-5);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-dense); color: var(--gray-600);
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.ds-ex-toggle:hover { background: var(--gray-50); color: var(--gray-900); }
.ds-ex-copy {
  display: flex; align-items: center; gap: 6px;
  flex: none;
  padding: 0 var(--s-5);
  border: none; border-left: 1px solid var(--gray-200);
  background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-dense); color: var(--gray-600);
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.ds-ex-copy:hover { background: var(--gray-50); color: var(--gray-900); }
.ds-ex-caret { flex: none; color: var(--fg-subtle); transition: transform var(--dur-micro) var(--ease); }
.ds-ex-caret.open { transform: rotate(90deg); }

.ds-ex-code {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-900);
  color: var(--cream);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.65;
  white-space: pre;
}
.ds-ex-code code { font-size: inherit; color: inherit; font-family: inherit; }
/* A code block used as the demo itself (for components whose real usage is a
   JSX call rather than markup — Modal, Sheet, SegmentedControl). */
.ds-ex-code.static { border-top: none; border-radius: var(--r-md); }

.ds-ex-error {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--danger-bg); color: var(--gray-800);
  font-size: var(--fs-dense);
}

/* ── Surface frame ────────────────────────────────────────────────────────────
   A bounded viewport for demos that are REGIONS rather than controls. Everything
   in Components is a specimen you can drop straight onto the demo surface; a
   Surfaces demo cannot be, because the surface's own size IS part of what is
   being documented. The rails are exactly 300px and the BOM is wider than this
   reading column — without a frame the rail stretches to the full measure (and
   stops being the thing it documents) and the table pushes the page sideways.
   The frame pins the real width, supplies the height the surface's inner
   scroller needs, and captions what you are looking at. */
.ds-frame {
  flex: none;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.ds-frame-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: 26px; padding: 0 10px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  font-family: var(--font-mono); font-size: 10px; color: var(--gray-500);
}
/* Grid, not flex: a lone grid child stretches on BOTH axes. .asm-tree and
   .asm-props are column flexboxes with `min-height: 0`, so under flex they'd
   size to content and their inner scrollers would never get a height to scroll
   within — the exact bug that made the reference page itself unscrollable. */
.ds-frame.fill { width: 100%; }
.ds-frame-body { display: grid; min-height: 0; max-width: 100%; overflow: auto; }
/* The rails carry their own edge border in the product (.asm-tree has
   border-right, .asm-props border-left) because they butt against the canvas.
   Framed on their own that hairline doubles up with the frame's, so drop it —
   the frame edge is standing in for the neighbour it would have separated. */
.ds-frame-body > .asm-tree { border-right: 0; }
.ds-frame-body > .asm-props { border-left: 0; }

/* ── Introduction splash ──────────────────────────────────────────────────────
   A grid of tiles, each a real specimen above its label, so the first screen of
   the reference SHOWS the system instead of describing it. The dividers are 1px
   grid gaps over a gray background rather than per-tile borders — that way the
   block reads as one object with hairlines through it, and no seam ever doubles
   up where two tiles meet. */
.ds-splash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ds-splash-tile {
  display: flex; flex-direction: column;
  background: var(--white);
  border: none; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-micro) var(--ease);
}
.ds-splash-tile:hover { background: var(--bg-1); }
.ds-splash-tile:focus-visible { outline: 2px solid var(--orange-500); outline-offset: -2px; }
/* The tile is a <button>, so every part of it is a <span> — which means each
   one needs its display stated. A span that inherits inline from its button
   puts the title and the description on the same line. */
.ds-splash-stage {
  flex: 1;
  min-height: 186px;
  display: grid; place-items: center;
  padding: var(--s-8) var(--s-6);
  overflow: hidden;
}
.ds-splash-foot { display: block; padding: 0 var(--s-6) var(--s-8); }
.ds-splash-title { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--gray-900); margin: 0 0 4px; }
.ds-splash-desc { display: block; font-size: var(--fs-dense); line-height: 1.55; color: var(--fg-muted); margin: 0; max-width: 46ch; }

/* Tile stages */
.ds-splash-logo-stage {
  width: 100%; height: 100%; box-sizing: border-box;
  display: grid; place-items: center;
  background-image: var(--grid-dot);
  background-size: var(--grid-size) var(--grid-size);
  border-radius: var(--r-md);
}
.ds-splash-logo { height: 40px; display: block; }
.ds-splash-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-5) var(--s-4); color: var(--gray-700); justify-items: center; }
.ds-splash-icons .material-symbols-outlined { font-size: 22px; line-height: 1; }
.ds-splash-bars { display: flex; gap: 10px; }
.ds-splash-bar { width: 26px; height: 84px; border-radius: var(--r-pill); border: 1px solid var(--gray-200); display: grid; place-items: center; }
.ds-splash-bar > span { width: 8px; height: 62px; border-radius: var(--r-pill); display: block; }
.ds-splash-type { display: flex; gap: var(--s-4); width: 100%; }
.ds-splash-type > * {
  flex: 1; min-width: 0;
  display: grid; place-items: center;
  padding: var(--s-6) var(--s-3);
  border: 1px dashed var(--gray-300); border-radius: var(--r-md);
  color: var(--gray-500); font-size: 19px; white-space: nowrap; overflow: hidden;
}
.ds-splash-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; }
.ds-splash-panes { display: grid; grid-template-columns: 34px 1fr 2fr 1fr; gap: 1px; width: 100%; height: 104px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: var(--r-md); overflow: hidden; }
.ds-splash-panes > div { background: var(--white); }
.ds-splash-panes > .is-canvas { background-color: var(--bg-1); background-image: var(--grid-dot); background-size: var(--grid-size) var(--grid-size); }

/* ── Icon specimens ───────────────────────────────────────────────────────── */
.ds-icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); width: 100%; }
.ds-iconcell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--s-4) var(--s-2);
  border: 1px solid var(--gray-200); border-radius: var(--r-md);
  background: var(--white);
  color: var(--gray-700);
  min-width: 0;
}
.ds-iconcell .material-symbols-outlined { font-size: 22px; line-height: 1; }
.ds-iconcell .icon { width: 22px; height: 22px; }
.ds-iconcell-name {
  font-family: var(--font-mono); font-size: 10px; color: var(--gray-500);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Shared content bits ──────────────────────────────────────────────────── */
.ds-rules { margin: 0; padding-left: 20px; font-size: var(--fs-md); line-height: 1.7; color: var(--gray-800); }
.ds-rules li { margin-bottom: var(--s-2); }
.ds-rules li:last-child { margin-bottom: 0; }
.ds-rules b { font-weight: 600; }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ds-bar-note { font-size: var(--fs-sm); color: var(--gray-500); }
.ds-stage-caption { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--gray-500); margin-top: var(--s-3); }

.ds-table-wrap { overflow-x: auto; }
.ds-table-wrap .table { min-width: 520px; }

/* State strips */
.ds-states { display: flex; flex-wrap: wrap; gap: var(--s-5); width: 100%; }
.ds-states + .ds-states { margin-top: var(--s-5); }
.ds-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ds-state-node { display: flex; align-items: center; min-height: var(--ctl-h-md); }
.ds-state-label { font-family: var(--font-mono); font-size: 10px; color: var(--gray-500); }

/* Color chips */
.ds-ramp { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-3); }
.ds-chip { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-chip-fill { height: 44px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.ds-chip-name { font-family: var(--font-mono); font-size: 10px; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-chip-val { font-family: var(--font-mono); font-size: 10px; color: var(--gray-500); text-transform: uppercase; }

/* Type specimens */
.ds-type-row { display: flex; align-items: baseline; gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--gray-100); }
.ds-type-row:last-child { border-bottom: none; }
.ds-type-meta { width: 190px; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--gray-500); line-height: 1.5; }
.ds-type-meta b { color: var(--gray-700); font-weight: 500; display: block; }
.ds-type-sample { color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Spacing / metric bars */
.ds-bar-row { display: flex; align-items: center; gap: var(--s-4); padding: 3px 0; }
.ds-bar-label { width: 118px; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); }
.ds-bar { height: 14px; background: var(--orange-200); border-radius: var(--r-xs); min-width: 0; }
.ds-bar.tall { background: var(--orange-100); border: 1px solid var(--orange-300); box-sizing: border-box; width: 160px; border-radius: var(--r-sm); }

/* Radius / shadow / motion samples */
.ds-sample-grid { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; }
.ds-sample {
  width: 132px; height: 84px;
  background: var(--white); border: 1px solid var(--gray-300);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); text-align: center; line-height: 1.5;
}
.ds-sample.shadow { border-color: var(--gray-200); }
.ds-scrim-sample { background: var(--scrim); color: var(--white); border: none; }
.ds-motion-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--orange-500); margin: 0 auto var(--s-2); }
.ds-sample:hover .ds-motion-dot { transform: translateX(72px); }

/* ── Brand assets ─────────────────────────────────────────────────────────────
   Each asset is a card: a stage showing the artwork on the background it is FOR,
   then a footer with its name and one download link per format. Light and dark
   variants sit side by side because that pairing is the rule the page teaches —
   seeing the cream mark only on white would be showing it in the one place it
   must never go. */
.ds-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); width: 100%; }
.ds-asset {
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.ds-asset-stage {
  display: grid; place-items: center;
  min-height: 150px;
  padding: var(--s-8) var(--s-6);
}
.ds-asset-stage.on-light { background: var(--white); }
/* --ink-dark, not black. A cream mark on pure #000 is a harsher contrast than
   any surface in the product, so it would flatter artwork that has to survive
   on the real dark surface instead. */
.ds-asset-stage.on-dark { background: var(--ink-dark); }
.ds-asset-stage img { display: block; max-width: 100%; }
.ds-asset-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px var(--s-4);
  border-top: 1px solid var(--gray-200);
  background: var(--bg-1);
}
.ds-asset-name { font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-asset-dl { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ds-dl {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--ctl-h-sm); padding: 0 10px;
  border: 1px solid var(--gray-300); border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--gray-700);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.ds-dl:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--gray-900); }
.ds-dl:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }
.ds-dl .icon { color: var(--gray-500); }
.ds-dl:hover .icon { color: var(--gray-700); }

/* Brand + field grids */
.ds-logo-stage {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: var(--s-8);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  box-sizing: border-box;
}
.ds-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-5); width: 100%; align-items: start; }

/* Do / Don't */
.ds-dodont { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.ds-dodont-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.ds-dont, .ds-do {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: 10px var(--s-3);
  font-size: var(--fs-dense); line-height: var(--lh-body);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
}
.ds-dont { background: var(--danger-bg); border-color: #F2C8BE; color: var(--gray-800); }
.ds-do { background: var(--success-bg); border-color: #C7E4D4; color: var(--gray-800); }
.ds-dodont-tag {
  flex: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-loose); text-transform: uppercase;
  padding-top: 3px;
}
.ds-dont .ds-dodont-tag { color: var(--danger); }
.ds-do .ds-dodont-tag { color: var(--success); }

/* Inline code inside docs prose should never break mid-token. */
.ds-rules code, .ds-ex-note code, .ds-page-desc code, .ds-dont code, .ds-do code, .ds-ex-demo.plain td code { white-space: nowrap; }

/* ── Pager ────────────────────────────────────────────────────────────────── */
.ds-pager { padding: var(--s-10) 0; border-top: 1px solid var(--gray-200); }
.ds-pager-row { display: flex; justify-content: space-between; gap: var(--s-4); }
.ds-pager-next { text-align: right; }
.ds-pager-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--gray-200); border-radius: var(--r-md);
  background: var(--white); cursor: pointer;
  text-align: inherit;
  min-width: 180px;
}
.ds-pager-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.ds-pager-dir { font-size: var(--fs-sm); color: var(--fg-subtle); }
.ds-pager-name { font-size: var(--fs-dense); font-weight: 500; color: var(--gray-900); }
.ds-pager-next .ds-pager-btn { align-items: flex-end; }

/* ── Narrow viewports ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ds-page-head { padding: var(--s-10) 0; }
  .ds-ex { padding: var(--s-10) 0; }
}

@media (max-width: 860px) {
  .ds-nav-toggle { display: inline-flex; }
  .ds-side {
    display: none;
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
    width: 100%; max-width: 320px;
    height: auto;
    background: var(--white);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-2);
  }
  .ds-topbar-search { margin-left: auto; width: 180px; }
  .ds-search { width: 100%; }
  .ds-searchbtn-label { display: none; }
  .ds-searchbtn-label-short { display: block; }
  .ds-splash { grid-template-columns: minmax(0, 1fr); }
  .ds-assets { grid-template-columns: minmax(0, 1fr); }
  .ds-asset-foot { flex-direction: column; align-items: flex-start; }
  .ds-palette-scrim { padding: 8vh var(--s-4) var(--s-4); }
  .ds-palette-foot { display: none; }
  .ds-body.nav-open .ds-side { display: block; }
  .ds-type-row { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .ds-type-meta { width: auto; }
  .ds-dodont-row { grid-template-columns: 1fr; }
  .ds-pager-btn { min-width: 0; }
}