/* =====================================================================
   Lario UI - documentation chrome
   Sits on top of lario.css and never restyles an .lr- class.
   Everything here is prefixed doc-. Tokens come from lario.css.
   ===================================================================== */

:root {
  --doc-rail: 100px;        /* sized for the longest rail label in either
                              language: კომპონენტები is 76px at 10px Google Sans,
                              where English "Components" is 63px */
  --doc-side: 272px;
  --doc-toc: 232px;
  --doc-top: 0px;
  --doc-measure: 720px;
  --lr-font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* The demo stage's dot grid. Denser than the brand texture because a
     demo stage is small; the dark step is the same ratio against the dark
     canvas that .55 on #E4E4E7 is against white. */
  --doc-texture: light-dark(rgba(228, 228, 231, .55), rgba(235, 235, 239, .08));
}

/* Skip link: 17 focusable stops sit before the content on every page */
.doc-skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 40;
  padding: 10px 18px;
  background: var(--lr-ink);
  color: var(--lr-mist);
  border-radius: calc(18px * var(--lr-k));
  corner-shape: superellipse(1.5);
  font: 400 14px/1.5 var(--lr-font-text);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .4s var(--lr-spring);
}
.doc-skip:focus { transform: translateY(0); }   /* any focus, not just keyboard heuristics */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lr { min-height: 100vh; }
.lr :is(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
/* Prose links only - never style every <a>, or .lr a would out-specify .lr-btn */
:is(.doc-content, .doc-home) :is(p, li, td, .doc-note) a {
  color: var(--lr-ink);
  text-decoration-color: var(--lr-gray);
  text-underline-offset: 3px;
}
:is(.doc-content, .doc-home) :is(p, li, td, .doc-note) a:hover { text-decoration-color: var(--lr-ink); }
.lr :focus-visible { outline: 2px solid var(--lr-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- shell */
.doc-shell {
  display: grid;
  grid-template-columns: var(--doc-rail) var(--doc-side) minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
}

.doc-shell--wide { grid-template-columns: var(--doc-rail) minmax(0, 1fr); }

/* ----------------------------------------------------------------- rail */
.doc-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100vh;
  padding: 20px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lr-mist);
  border-right: 1px solid var(--lr-line-soft);
  scrollbar-width: none;
}
.doc-rail::-webkit-scrollbar { display: none; }
.doc-rail__mark { display: block; margin-bottom: 16px; }
.doc-rail__mark svg { display: block; width: 40px; height: 40px; }
.doc-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  padding: 10px 2px 8px;
  border: 1px solid transparent;
  border-radius: calc(20px * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink-2);
  text-align: center;
  text-decoration: none;
  transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-rail__item span {
  font: 500 10px/1.3 var(--lr-font-text);
  letter-spacing: .01em;
}
.doc-rail__item svg { width: 22px; height: 22px; fill: currentColor; }
.doc-rail__item:hover { background: var(--lr-paper); color: var(--lr-ink); }
.doc-rail__item[aria-current="page"] {
  background: var(--lr-paper);
  border-color: var(--lr-line);
  color: var(--lr-ink);
}

/* -------------------------------------------------------------- sidebar */
.doc-side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 16px 48px;
  background: var(--lr-paper);
  border-right: 1px solid var(--lr-line-soft);
}
.doc-side__head { position: sticky; top: -24px; z-index: 2; margin: -24px -16px 8px; padding: 24px 16px 12px; background: var(--lr-paper); }
.doc-search { position: relative; display: block; }
.doc-search svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; transform: translateY(-50%); fill: var(--lr-ink-2); pointer-events: none; }
.doc-search input {
  width: 100%;
  padding: 9px 14px 9px 40px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(18px * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink);
  font: 400 14px/1.5 var(--lr-font-text);
  letter-spacing: .01em;
}
.doc-search input::placeholder { color: var(--lr-gray); }
.doc-search input:focus { border-color: var(--lr-ink); background: var(--lr-paper); }
.doc-search input:focus:not(:focus-visible) { outline: none; }
.doc-side__group { padding-top: 20px; }
.doc-side__group:first-of-type { padding-top: 4px; }
.doc-side__title {
  padding: 0 12px 8px;
  font: 500 12px/1.5 var(--lr-font-text);
  letter-spacing: .01em;
  color: var(--lr-ink-2);
}
.doc-side__link {
  display: block;
  padding: 8px 12px;
  border-radius: calc(15px * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink-2);
  font: 400 14px/1.5 var(--lr-font-text);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring);
}
.doc-side__link:hover { background: var(--lr-mist); color: var(--lr-ink); }
.doc-side__link[aria-current="page"] { background: var(--lr-mist); color: var(--lr-ink); font-weight: 500; }
.doc-side__empty { padding: 12px; color: var(--lr-ink-2); font-size: 14px; }

/* ----------------------------------------------------------------- main */
.doc-main { min-width: 0; }
.doc-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--doc-toc);
  gap: 48px;
  max-width: 1120px;
  padding: 56px 48px 96px;
}
.doc-content { min-width: 0; max-width: var(--doc-measure); }

/* page header */
.doc-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* The docs page title. A brand h1 is 58px because it is a three-beat hero
   line; a documentation title is not. This class owns its own size rather
   than restyling .lr-h1 - see "Documented extensions" in DESIGN.md. */
.doc-title {
  font: 500 48px/1.2 var(--lr-font-display);
  letter-spacing: 0;
  color: var(--lr-ink);
}
.doc-hero__lead { max-width: 560px; }
.doc-crumb { font: 400 14px/1.5 var(--lr-font-text); color: var(--lr-ink-2); letter-spacing: .01em; }

/* ----------------------------------------------------------------- tabs */
.doc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-bottom: 4px;
}
.doc-tab {
  --r: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--lr-paper);
  border: 1px solid var(--lr-line);
  border-radius: calc(var(--r) * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink-2);
  font: 400 14px/1.5 var(--lr-font-text);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-tab svg { width: 18px; height: 18px; fill: currentColor; }
.doc-tab:hover { color: var(--lr-ink); border-color: var(--lr-ink); }
.doc-tab[aria-selected="true"] { background: var(--lr-ink); border-color: var(--lr-ink); color: var(--lr-mist); }
.doc-panel { padding-top: 40px; }
.doc-panel[hidden] { display: none; }

/* ------------------------------------------------------------- sections */
.doc-section { padding-top: 56px; }
.doc-panel > .doc-section:first-child { padding-top: 0; }
.doc-section > * + * { margin-top: 20px; }
.doc-section > h2 + p, .doc-section > h3 + p { margin-top: 12px; }
.doc-content p { max-width: 68ch; }
.doc-content p + p { margin-top: 12px; }

.doc-list { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.doc-list li { position: relative; padding-left: 20px; color: var(--lr-ink-2); }
.doc-list li::before { content: ""; position: absolute; top: .62em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--lr-gray); }
.doc-list strong { color: var(--lr-ink); font-weight: 500; }

/* inline code */
.doc-code-i {
  padding: 2px 6px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line-soft);
  border-radius: 6px;
  font: 400 .875em/1 var(--lr-font-code);
  color: var(--lr-ink);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- demo */
.doc-demo {
  --r: 28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 220px;
  padding: 40px 32px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(var(--r) * var(--lr-k));
  corner-shape: superellipse(1.5);
}
/* A demo, a code block or a table that follows running text needs air above
   it. The card's padding sits inside its border, so without this the
   paragraph's last line rests on the border. Section-to-section rhythm is
   separate - the h2 carries its own 56px. */
:is(p, ul, ol, dl, .doc-list, .doc-note) + :is(.doc-demo, .doc-codewrap, .doc-tablewrap, .doc-dos, pre) {
  margin-top: 24px;
}

.doc-demo--tall { min-height: 340px; }
.doc-demo--pad { padding: 32px; }
.doc-demo--stack { flex-direction: column; align-items: center; }
.doc-demo--start { justify-content: flex-start; }
.doc-demo--plain { background: var(--lr-paper); }
.doc-demo__dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--doc-texture) 1px, transparent 1.5px) center / 12px 12px;
}

/* a labelled specimen inside a demo */
.doc-spec { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.doc-spec__label { font: 500 12px/1.5 var(--lr-font-text); letter-spacing: .01em; color: var(--lr-ink-2); text-align: center; }

/* ----------------------------------------------------------------- code */
.doc-codewrap { position: relative; margin-top: 12px; }
.doc-code {
  overflow-x: auto;
  margin: 0;
  padding: 20px 56px 20px 20px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(20px * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink);
  font: 400 13px/1.7 var(--lr-font-code);
  letter-spacing: 0;
  tab-size: 2;
}
.doc-code code { font: inherit; }
.doc-code .t { color: var(--lr-ink-2); }
.doc-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--lr-paper);
  border: 1px solid var(--lr-line);
  border-radius: calc(15px * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink-2);
  font: 400 12px/1.5 var(--lr-font-text);
  cursor: pointer;
  transition: color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-copy:hover { color: var(--lr-ink); border-color: var(--lr-ink); }
.doc-copy svg { width: 14px; height: 14px; fill: currentColor; }

/* a small toggle row above a code block */
.doc-demo__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.doc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: transparent; border: 1px solid var(--lr-line);
  border-radius: calc(15px * var(--lr-k)); corner-shape: superellipse(1.5);
  color: var(--lr-ink-2); font: 400 13px/1.5 var(--lr-font-text); cursor: pointer;
  transition: color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-toggle:hover { color: var(--lr-ink); border-color: var(--lr-ink); }
.doc-toggle svg { width: 14px; height: 14px; fill: currentColor; transition: transform .4s var(--lr-spring); }
.doc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- table */
.doc-tablewrap { overflow-x: auto; }
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/1.5 var(--lr-font-text);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.doc-table th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--lr-line);
  color: var(--lr-ink-2);
  font: 500 12px/1.5 var(--lr-font-text);
  letter-spacing: .01em;
  text-align: left;
  white-space: nowrap;
}
.doc-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--lr-line-soft); color: var(--lr-ink-2); vertical-align: top; }
.doc-table td:first-child { color: var(--lr-ink); white-space: nowrap; }
.doc-table td:has(.doc-sw) { white-space: nowrap; }
.doc-table code, .doc-table .mono { font: 400 13px/1.5 var(--lr-font-code); letter-spacing: 0; }
.doc-table tr:last-child td { border-bottom: 0; }

/* colour swatch inside a table or grid */
.doc-sw { display: inline-block; width: 28px; height: 28px; margin-right: 6px; border-radius: calc(15px * var(--lr-k)); corner-shape: superellipse(1.5); border: 1px solid var(--lr-line); vertical-align: middle; }
.doc-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px; }
.doc-swatch { display: flex; flex-direction: column; gap: 10px; }
.doc-swatch__chip { height: 104px; border-radius: calc(22px * var(--lr-k)); corner-shape: superellipse(1.5); border: 1px solid var(--lr-line); }
.doc-swatch__name { color: var(--lr-ink); font: 400 16px/1.4 var(--lr-font-text); }
.doc-swatch__meta { font: 400 13px/1.5 var(--lr-font-code); color: var(--lr-ink-2); letter-spacing: 0; }
.doc-swatch__role { font: 400 13px/1.45 var(--lr-font-text); color: var(--lr-ink-2); }

/* -------------------------------------------------------- do and do not */
.doc-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.doc-do { display: flex; flex-direction: column; gap: 16px; }
.doc-do__stage {
  display: grid; place-items: center;
  min-height: 180px; padding: 28px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(28px * var(--lr-k)); corner-shape: superellipse(1.5);
}
.doc-do__note { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--lr-font-text); color: var(--lr-ink-2); letter-spacing: .01em; }
.doc-do__note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.doc-do--yes .doc-do__note svg { fill: var(--lr-ink); }
.doc-do--no .doc-do__note svg { fill: var(--lr-ink-2); }
.doc-do__word { color: var(--lr-ink); font-weight: 500; }

/* ----------------------------------------------------------------- note */
.doc-note {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 24px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line-soft);
  border-radius: calc(22px * var(--lr-k)); corner-shape: superellipse(1.5);
  font: 400 16px/1.55 var(--lr-font-text); color: var(--lr-ink-2); letter-spacing: .01em;
}
.doc-note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: var(--lr-ink); }
.doc-note strong { color: var(--lr-ink); font-weight: 500; }
.doc-note p { max-width: none; }

/* ------------------------------------------------------------------ toc */
.doc-toc { position: sticky; top: 56px; align-self: start; }
.doc-toc__title { padding-bottom: 14px; font: 500 12px/1.5 var(--lr-font-text); letter-spacing: .01em; color: var(--lr-ink-2); }
.doc-toc__list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--lr-line-soft); }
.doc-toc a {
  padding: 6px 0 6px 16px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--lr-ink-2);
  font: 400 13px/1.45 var(--lr-font-text);
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-toc a:hover { color: var(--lr-ink); }
.doc-toc a[aria-current="true"] { color: var(--lr-ink); border-left-color: var(--lr-ink); }

/* ------------------------------------------------------------ prev/next */
.doc-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--lr-line-soft); }
.doc-next__link {
  --r: 28px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 24px;
  background: var(--lr-paper);
  border: 1px solid var(--lr-line-soft);
  border-radius: calc(var(--r) * var(--lr-k)); corner-shape: superellipse(1.5);
  text-decoration: none;
  transition: border-color .4s var(--lr-spring);
}
.doc-next__link:hover { border-color: var(--lr-ink); }
.doc-next__kicker { display: flex; align-items: center; gap: 6px; font: 400 12px/1.5 var(--lr-font-text); color: var(--lr-ink-2); letter-spacing: .01em; }
.doc-next__kicker svg { width: 14px; height: 14px; fill: currentColor; }
.doc-next__name { font: 400 20px/1.2 var(--lr-font-display); color: var(--lr-ink); }
.doc-next--end { grid-column: 2; text-align: right; }
.doc-next--end .doc-next__kicker { justify-content: flex-end; }

/* ------------------------------------------------------------- top bar  */
.doc-topbar {
  position: sticky; top: 0; z-index: 30;
  display: none; align-items: center; gap: 12px;
  height: 64px; padding: 0 16px;
  background: var(--lr-paper);
  border-bottom: 1px solid var(--lr-line-soft);
}
.doc-topbar .lr-logo svg { height: 32px; }
.doc-burger {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--lr-paper); border: 1px solid var(--lr-line);
  border-radius: calc(15px * var(--lr-k)); corner-shape: superellipse(1.5);
  color: var(--lr-ink); cursor: pointer;
}
.doc-burger svg { width: 22px; height: 22px; fill: currentColor; }
.doc-scrim { position: fixed; inset: 0; z-index: 25; background: var(--lr-scrim); opacity: 0; pointer-events: none; transition: opacity .4s var(--lr-spring); }
body.doc-open .doc-scrim { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- home   */
.doc-home { max-width: 1120px; padding: 0 48px 96px; }
.doc-home__hero { position: relative; isolation: isolate; padding: 72px 0 56px; }
.doc-home__hero > .lr-dots { z-index: -1; }
.doc-home__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 640px; }
.doc-home__lead { max-width: 480px; margin-top: 24px; }
.doc-home__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* The stage photo. A url() inside a custom property resolves against the
   stylesheet that USES it, so --lr-stage-img cannot carry a relative path
   from a page. These rules sit in docs.css, so ../img resolves correctly
   over http and file:// alike. */
.doc-stage-photo { background-image: url("../img/stage.jpg"); }
.doc-stage-scrim { background-image: url("../img/stage-scrim.jpg"); }

.doc-stage-card {
  --r: 50px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  min-height: 400px; padding: 40px;
  /* Anchored to the bottom of the photo so the horizon and the meadow sit in
     the upper half, and the ink fade below carries the white copy. A scrim
     alone cannot hold white text over sunlit grass at any card height. */
  background: url("../img/stage.jpg") center 100% / cover no-repeat;
  border-radius: calc(var(--r) * var(--lr-k)); corner-shape: superellipse(1.5);
}
/* Not --lr-photo-fade. The brand's fade starts at 33%, which assumes a photo
   card carrying one short title. This card carries a headline plus four lines
   of body, so the worst pixel behind the heading - a sunlit cloud - measured
   2.47:1 with the brand value. Starting at 0% and reaching ink by 68% puts it
   at 6.9:1. Measured, not guessed. */
.doc-stage-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(39, 39, 42, 0) 0%, #27272A 68%);
}
.doc-stage-card :is(h2, .lr-h2) { color: var(--lr-on-photo); }
.doc-stage-card p { color: var(--lr-on-photo); max-width: 440px; }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 24px; }
.doc-tile-link {
  --r: 45px;
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px;
  background: var(--lr-paper); border: 1px solid var(--lr-line-soft);
  border-radius: calc(var(--r) * var(--lr-k)); corner-shape: superellipse(1.5);
  text-decoration: none;
  transition: border-color .4s var(--lr-spring), transform .4s var(--lr-spring);
}
.doc-tile-link:hover { border-color: var(--lr-ink); transform: translateY(-2px); }
.doc-tile-link__copy { display: flex; flex-direction: column; gap: 8px; }
.doc-tile-link__copy p { font-size: 14px; }

/* ------------------------------------------------------------ specimens */
.doc-type-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; padding: 22px 0; border-bottom: 1px solid var(--lr-line-soft); }
.doc-type-row:last-child { border-bottom: 0; }
.doc-type-row__meta { flex: none; width: 190px; font: 400 13px/1.5 var(--lr-font-code); color: var(--lr-ink-2); letter-spacing: 0; }
.doc-type-row__sample { min-width: 0; flex: 1 1 320px; }
.doc-radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 20px; }
.doc-radius { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.doc-radius__box { width: 100%; aspect-ratio: 1; background: var(--lr-paper); border: 1px solid var(--lr-line); corner-shape: superellipse(1.5); }
.doc-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.doc-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px; border-radius: calc(20px * var(--lr-k)); corner-shape: superellipse(1.5); color: var(--lr-ink-2); transition: background-color .4s var(--lr-spring); }
.doc-icon:hover { background: var(--lr-mist); color: var(--lr-ink); }
.doc-icon svg { width: 24px; height: 24px; fill: currentColor; }
.doc-icon span { font: 400 11px/1.3 var(--lr-font-code); letter-spacing: 0; text-align: center; word-break: break-word; }

/* ------------------------------------------------------- responsiveness */
@media (max-width: 1399.98px) {
  .doc-page { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
}
@media (max-width: 1099.98px) {
  :root { --doc-side: 240px; }
  .doc-page { padding: 48px 32px 80px; }
  .doc-home { padding: 0 32px 80px; }
}
@media (max-width: 999.98px) {
  :root { --doc-top: 64px; }
  .doc-topbar { display: flex; }
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .doc-rail, .doc-side {
    position: fixed;
    top: var(--doc-top);               /* clear the sticky top bar */
    z-index: 26;
    height: calc(100vh - var(--doc-top));
    transform: translateX(-100%);
    transition: transform .4s var(--lr-spring);
  }
  .doc-rail { left: 0; width: var(--doc-rail); }
  /* The sidebar sits one rail-width in, so it has to travel that much further
     to clear the screen - translateX(-100%) alone would leave 88px on top of
     the content. */
  .doc-side {
    left: var(--doc-rail);
    width: min(272px, calc(100vw - var(--doc-rail)));
    transform: translateX(calc(-100% - var(--doc-rail)));
  }
  body.doc-open :is(.doc-rail, .doc-side) { transform: translateX(0); }
  .doc-page { padding: 32px 24px 72px; }
  .doc-home { padding: 0 24px 72px; }
  .doc-title { font-size: 34px; }
  .doc-next--end { grid-column: auto; }
}
@media (max-width: 809.98px) {
  .doc-page { padding: 24px 20px 64px; }
  .doc-home { padding: 0 20px 64px; }
  .doc-section { padding-top: 44px; }
  .doc-demo { min-height: 180px; padding: 28px 20px; }
  .doc-home__hero { padding: 40px 0 32px; }
  .doc-stage-card {
    padding: 28px;
    /* Taller than the copy needs, so the three wrapped heading lines sit in
       the lower half where the fade is already near-solid. Measured: a bright
       cloud behind this heading is the worst case, and it needs ~80% ink. */
    min-height: 440px;
    background-position: center 100%;
  }

  .doc-type-row__meta { width: 100%; }
  .doc-tabs { margin-top: 28px; }
  .doc-panel { padding-top: 28px; }
}
/* Touch targets: 44px minimum on anything tappable */
@media (max-width: 999.98px) {
  .doc-tab { padding: 11px 18px; }
  .doc-toggle { padding: 12px 16px; }
  .doc-side__link { padding: 12px; }
  .doc-burger { width: 44px; height: 44px; }
  .doc-search input { padding-top: 11px; padding-bottom: 11px; }
  .doc-copy { padding: 9px 14px; }
}

@media (max-width: 389.98px) {
  .doc-title { font-size: 28px; }
  .doc-demo { padding: 24px 16px; gap: 16px; }
  .doc-code { font-size: 12px; padding: 16px 48px 16px 16px; }
}

/* ------------------------------------------------------------- printing */
@media print {
  .doc-rail, .doc-side, .doc-toc, .doc-topbar, .doc-copy, .doc-tabs { display: none; }
  .doc-shell { display: block; }
  .doc-panel[hidden] { display: block; }
  .doc-page { max-width: none; padding: 0; }
}

/* status swatch row on the Status foundation page */
/* Both themes on one page. color-scheme is a property, not a root-level
   switch, so a subtree can force the theme it wants and the light-dark()
   tokens inside it resolve to that theme - including tokens declared up on
   :root, because an unregistered custom property resolves where it is used.
   Checked in the browser before this page was built on top of it. */
.doc-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doc-themes__pane {
  color-scheme: light;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(32px * var(--lr-k));
  corner-shape: superellipse(1.5);
}
.doc-themes__pane--dark { color-scheme: dark; }
.doc-themes__label {
  font: 500 10px/1.3 var(--lr-font-text);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lr-ink-2);
}
@media (max-width: 639.98px) { .doc-themes { grid-template-columns: 1fr; } }

/* The spacing scale as bars. Heights are the values themselves, so the strip
   is the scale rather than a picture of it. */
.doc-steps {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 8px; padding: 20px;
  overflow-x: auto;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(28px * var(--lr-k));
  corner-shape: superellipse(1.5);
}
.doc-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.doc-step__bar { width: 28px; background: var(--lr-ink); border-radius: 3px; }
.doc-step__n { font: 400 12px/1 var(--lr-font-code); color: var(--lr-ink-2); }

.doc-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.doc-status__item { display: flex; flex-direction: column; gap: 12px; }
.doc-status__bar { height: 72px; border-radius: calc(22px * var(--lr-k)); corner-shape: superellipse(1.5); }
.doc-status__meta { font: 400 13px/1.5 var(--lr-font-code); color: var(--lr-ink-2); letter-spacing: 0; }

/* Search results, which span every section rather than the current one */
.doc-search__key {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  padding: 1px 7px;
  background: var(--lr-paper);
  border: 1px solid var(--lr-line);
  border-radius: 6px;
  font: 400 12px/1.6 var(--lr-font-code);
  color: var(--lr-ink-2);
  pointer-events: none;
}
.doc-search input:focus ~ .doc-search__key { display: none; }
.doc-side__results { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.doc-side__hit {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-radius: calc(15px * var(--lr-k));
  corner-shape: superellipse(1.5);
  text-decoration: none;
  transition: background-color .4s var(--lr-spring);
}
.doc-side__hit:hover { background: var(--lr-mist); }
.doc-side__hit-where { font: 500 11px/1.4 var(--lr-font-text); letter-spacing: .01em; color: var(--lr-ink-2); }
.doc-side__hit-title { font: 400 14px/1.4 var(--lr-font-text); color: var(--lr-ink); }
.doc-side__hit-sum { font: 400 12px/1.45 var(--lr-font-text); color: var(--lr-ink-2); }

/* Language switch, at the foot of the rail */
/* The settings block sits at the foot of the rail. Either control can be
   the first of the pair - the language switch is absent when no translation
   is loaded - so both claim the slack and the later one gives it back. */
.doc-lang {
  display: flex; gap: 2px;
  margin-top: auto; padding-top: 16px;
}
.doc-lang__btn {
  padding: 6px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(15px * var(--lr-k));
  corner-shape: superellipse(1.5);
  color: var(--lr-ink-2);
  font: 500 11px/1.3 var(--lr-font-text);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-lang__btn:hover { color: var(--lr-ink); }
.doc-lang__btn[aria-pressed="true"] {
  background: var(--lr-paper);
  border-color: var(--lr-line);
  color: var(--lr-ink);
}

/* Theme switch. Same group as the language switch one row up, so the two
   read as one settings block at the foot of the rail. */
.doc-theme {
  display: flex; gap: 2px;
  margin-top: auto; padding-top: 8px; padding-bottom: 4px;
}
.doc-lang ~ .doc-theme { margin-top: 0; }

.doc-theme__btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(15px * var(--lr-k));
  corner-shape: superellipse(1.5);
  /* Charcoal, not gray: --lr-gray is 1.48:1 against the rail in both themes,
     which turns the unselected ring into a smudge. This matches the language
     buttons beside it. */
  color: var(--lr-ink-2);
  cursor: pointer;
  transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring), border-color .4s var(--lr-spring);
}
.doc-theme__btn svg { width: 15px; height: 15px; }
.doc-theme__btn:hover { color: var(--lr-ink); }
.doc-theme__btn[aria-pressed="true"] {
  background: var(--lr-paper);
  border-color: var(--lr-line);
  color: var(--lr-ink);
}
/* Touch. Three 44px squares do not fit across a 100px rail, so on a coarse
   pointer the theme group stacks instead - the drawer has the height. The
   language buttons only need to grow downwards. */
@media (pointer: coarse) {
  .doc-lang__btn { min-width: 40px; min-height: 44px; }
  .doc-theme { flex-direction: column; gap: 0; }
  .doc-theme__btn { width: 44px; height: 44px; }
}

/* ------------------------------------------------- the component library
   A grid of components as pictures. The frame holds a live miniature built
   from the same classes the component page documents, so it cannot drift
   into a drawing of a component that no longer looks like that.

   The frame is inert: a sample is something to look at, not to operate, and
   a tab stop inside every tile would put 22 of them between the reader and
   the page. The whole tile is still clickable - the name's ::after covers
   it - so there is one link per component and it is the name. */
.doc-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px 20px; }
.doc-lib__item { position: relative; display: flex; flex-direction: column; gap: 10px; }
.doc-lib__frame {
  --r: 28px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  height: 164px; padding: 20px;
  background: var(--lr-mist);
  border: 1px solid var(--lr-line);
  border-radius: calc(var(--r) * var(--lr-k)); corner-shape: superellipse(1.5);
  pointer-events: none;
  transition: border-color .4s var(--lr-spring), transform .4s var(--lr-spring);
}
/* The miniature is the real component at its real size, scaled down as a
   picture. Scaling instead of restyling keeps proportion, radius and weight
   exactly as the component page shows them. */
/* Out of flow on purpose. transform: scale does not change layout size, so a
   sample taller than the frame would still take its full height in the box
   and get cut off by the frame's overflow: hidden - which is exactly what
   the photo card and the empty state did. Centred absolutely, the layout
   height stops mattering and only the scaled size has to fit. */
.doc-lib__stage {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  width: 300px; transform: translate(-50%, -50%) scale(.62);
}
.doc-lib__item:hover .doc-lib__frame { border-color: var(--lr-ink); transform: translateY(-2px); }
.doc-lib__item:focus-within .doc-lib__frame { border-color: var(--lr-ink); }
.doc-lib__name {
  font: 500 15px/1.4 var(--lr-font-text); color: var(--lr-ink); text-decoration: none;
}
.doc-lib__name::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.doc-lib__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc-lib__sum { font: 400 13px/1.5 var(--lr-font-text); color: var(--lr-ink-2); margin-top: -4px; }
.doc-lib__count { font: 400 14px/1.5 var(--lr-font-text); color: var(--lr-ink-2);
  margin-top: 24px; max-width: 62ch; }
@media (max-width: 479.98px) {
  .doc-lib { grid-template-columns: minmax(0, 1fr); }
}