/* ═══════════════════════════════════════════════════════════════════════════
   Malkai design system — documentation chrome.

   The scaffolding a component page is built out of. It defines NO component:
   every specimen on the page is the real .mk-* layer from components.app.css,
   which is the only way a reference page's claim to be the reference can be
   checked. Everything here is prefixed .doc-.

   Written for the per-component pages (Phase 1, 2026-08-05). index.html still
   carries its own inline .ds-* chrome; the two reconcile in Phase 2.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────────────
   The .mk-* layer is authored against border-box: .mk-nav-link states a 44px
   min-height and adds its own padding, so under the browser default it renders
   64px and the rail loses its rhythm. Every prototype carries this same four-line
   reset in its own <style> — thirty-odd copies of it. The docs pages take it from
   here; whether it belongs in styles.css for everyone is a separate call.
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-size: var(--mk-text-md); line-height: 1.5; }
button { font: inherit; color: inherit; }

/* ── Frame ─────────────────────────────────────────────────────────────────
   The page mounts in the real shell: .mk-shell + the .mk-nav rail + .mk-main,
   exactly as a workspace page does. The rail is the component, not a lookalike.

   Width: the sheet spans the WHOLE work area and the inner measure carries the
   cap, on separate elements — the builder's own rule, which exists because a
   capped surface leaves beige gutters at wide sizes.
   ───────────────────────────────────────────────────────────────────────── */

/* The reading sheet, and the one place these docs fork by theme on purpose.
   LIGHT keeps --mk-surface, unchanged since it was written: white paper, and the
   specimen frames read against it by their own hairline.
   DARK cannot use the same value — at #151515 the sheet read as a flat murky field,
   and taking it all the way to the page's true black made every sentence on it
   over-accented (Ihor, 08-18, both looked at on the Card page). --mk-surface-sunken
   is the step between: one tone under the old grey, one tone above black, and the
   specimen frames still lift off it because they are on --mk-surface.
   A documentation sheet is not a product surface, so a fork here costs the product
   nothing — no component reads this rule. */
.doc-sheet {
  background: var(--mk-surface);
  min-height: 100dvh;
}
[data-theme="dark"] .doc-sheet { background: var(--mk-surface-sunken); }

/* ── The theme switch stays reachable ─────────────────────────────────────────
   .mk-nav-inner is its own scroller (sticky, max-height 100dvh, overflow-y auto)
   and .mk-nav-tail holds its place with margin-top:auto. In the app that is
   enough — the rail carries seven entries and never overflows. These docs put 29
   component links in the same rail, so the tail scrolled out of reach and the
   switch had to be hunted for (Ihor, 08-18).
   Pinned to the bottom of the rail's own scroller. Scoped to the page's real rail
   via the direct-child chain, so the Navigation page's rail SPECIMENS — which are
   .doc-navigation-rail .mk-nav-inner and must keep showing the untouched
   component — are not affected. The product rule in components.app.css is left
   alone: the app does not have this problem, and it would be a change to a
   vendored file for no gain there. */
/* The scroller's own 18px bottom padding has to move onto the tail. A sticky box
   rests against its scroller's PADDING edge, so with the padding left in place the
   tail pinned 18px short of the bottom and a sliver of the list stayed visible
   below it — which read as broken, and it was (Ihor, 08-18). */
body.mk-sidebar-shell > .mk-shell > .mk-nav > .mk-nav-inner { padding-bottom: 0; }
body.mk-sidebar-shell > .mk-shell > .mk-nav > .mk-nav-inner > .mk-nav-tail {
  position: sticky;
  bottom: 0;
  /* the list must not show through as it scrolls under the pinned tail */
  background: var(--mk-surface);
  padding-bottom: 18px;   /* the padding the scroller gave up, so the switch keeps its air */
  /* the divider runs the RAIL's width, not the padded column's — it was 215px inside
     a 240px rail, which only became noticeable once the tail was pinned and the line
     stopped scrolling away (Ihor, 08-18) */
  margin-inline: -12px;
  padding-inline: 12px;
  /* and the last link must not butt against that line */
  margin-top: 10px;
}

/* ── Nothing in the DOCUMENTATION may put body text on the true black ──────────
   --mk-page is #000 in dark, and a handful of doc chrome rules reach for it as
   "a page ground". On the light theme that is #F7F5F0 and harmless; on dark it
   put reading text straight onto black, which over-accents every sentence on it
   (Ihor, 08-18 — the spec tables, the Do/Don't pair and the widget's cover).
   These lift onto the surfaces instead. The DEVICE MOCKUPS below are deliberately
   left alone: a navigation frame, a phone slice and a bottom sheet are simulating
   the real app, and the real app's page IS black now — that is the truth they are
   there to show. */
[data-theme="dark"] .doc-rules li:nth-child(odd) { background: var(--mk-surface); }
/* The Do/Don't card's note band is the case's own background showing through — the stage
   above it paints --mk-surface over it. In light that reads as a slightly grey shelf under
   a white stage, because --mk-page sits one step BELOW the sheet. Remapping it to
   --mk-surface on dark gave it the stage's exact value, so the shelf vanished and the pair
   read as one flat block with a hairline across it (Ihor, 08-19: «в светлой теме они были
   чуть-чуть темнее, в тёмной по логике должен быть чуть-чуть светлее»). It differentiates
   UP here, and that is the only direction with room: the step below the dark sheet is
   #080808, which is the reading-text-on-black this whole block exists to avoid. Stage
   #151515, shelf #1E1E1E — 1.07:1 apart, the same separation the rest of the dark ladder
   uses, and the note's own text clears the shelf at 15.8:1. */
[data-theme="dark"] .doc-case { background: var(--mk-surface-raised); }
[data-theme="dark"] #overview > .doc-specimen:first-of-type:not(.doc-specimen-overview-native),
[data-theme="dark"] .doc-specimen-overview-native,
[data-theme="dark"] .doc-specimen-page { background: var(--mk-surface-sunken); }

/* ── The cover UNDERLAY takes the deepest value ────────────────────────────────
   The panel behind a component on an overview cover is drawn by the specimen's
   ::before — a rounded plate carrying --mk-shadow-pop. In light it is white and
   the shadow lifts it off the beige. In dark it was --mk-surface, the same value
   as the component standing on it, so the plate and the component merged and only
   the shadow said anything. It now takes --mk-page: the true black we took OFF the
   page background belongs here instead, where nothing reads on it and the shadow
   is doing the work (Ihor, 08-18 — "in the white theme fully white with a shadow,
   in the black theme fully black with a shadow"). */
[data-theme="dark"] #overview > .doc-specimen:first-of-type:not(.doc-specimen-overview-native)::before {
  /* REVISED the same day: true black here read badly (Ihor). The plate now takes the
     documentation sheet's own value, so it is marked by its shadow rather than by a
     step in value — which is what the white theme does too, white on white. */
  background: var(--mk-surface-sunken);
}

.doc-inner {
  box-sizing: border-box;
  max-width: var(--mk-content-max);
  margin: 0 auto;
  padding: var(--mk-space-5) var(--mk-page-pad) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--mk-space-7);
  align-items: start;
}

@media (max-width: 1099px) {
  .doc-inner { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
}

/* ── On this page ───────────────────────────────────────────────────────── */

.doc-toc { position: sticky; top: var(--mk-space-5); }

/* Subtitle 2, like every caps heading in the system. */
.doc-toc-title {
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-sm);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mk-text-quiet);
  margin: 0 0 var(--mk-space-3);
  padding-left: 12px;
}

.doc-toc a {
  position: relative;
  display: flex;
  align-items: center;
  /* the rail's own row height — the two columns answer in the same rhythm */
  min-height: var(--mk-tap-min);
  padding: 6px 0 6px 12px;
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--mk-text-muted);
  text-decoration: none;
}

.doc-toc a:hover { color: var(--mk-text-muted); background: var(--mk-accent-wash);
                   border-radius: var(--mk-radius-sm); }
.doc-toc a:focus-visible { outline: 2px solid var(--mk-camel-mid); outline-offset: -2px; }

/* Where she is. Same vocabulary as the rail's current entry — one accent bar, one
   wash — so the two columns answer the question the same way. */
.doc-toc a[aria-current="true"] { font-weight: 500; background: var(--mk-accent-wash-strong);
                                   border-radius: var(--mk-radius-sm); }
.doc-toc a[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 999px; background: var(--mk-accent);
}

/* ── Page head ──────────────────────────────────────────────────────────── */

.doc-crumb {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  color: var(--mk-text-muted);
  margin: 0 0 var(--mk-space-3);
}

.doc-crumb a { color: inherit; }
/* The registered `chevron` is the disclosure triangle and points down. A crumb needs it
   pointing along the path, so it is turned rather than a second glyph being drawn. */
.doc-crumb svg { width: 14px; height: 14px; flex: none;
                 transform: rotate(-90deg); opacity: .55; }

.doc-head h1 {
  font-family: var(--mk-font-brand-serif);
  font-weight: 600;
  font-size: var(--mk-text-xl);
  line-height: 1.15;
  color: var(--mk-text);
  margin: 0 0 var(--mk-space-2);
}

.doc-head .doc-lede {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-md);
  line-height: 1.55;
  color: var(--mk-text);
  margin: 0 0 var(--mk-space-3);
}

.doc-classline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mk-space-2);
  margin: 0;
}

.doc-classline code {
  /* The page header uses the documented Badge component itself. Keep this selector
     only as a guard against generic code styling leaking into that component. */
  font-size: var(--mk-text-sm);
}

/* ── Section ────────────────────────────────────────────────────────────── */

/* The rule belongs to the SECTION, not to its title. On the title it collected the
   previous block's trailing margin above it and only the title's own padding below —
   48 against 16, and every divider on the page sat off-centre between the two things
   it separates. Owned by the section, one padding value serves both of its sides. */
.doc-section {
  border-top: 1px solid var(--mk-hairline-mid);
  padding: var(--mk-space-6) 0;
}

/* nothing may contribute trailing air of its own, or the symmetry is lost again */
.doc-section > :last-child { margin-bottom: 0; }

/* the head owes the first rule the same measure every other one gets */
.doc-head { padding-bottom: var(--mk-space-6); }

/* A section title is a title, not an eyebrow. Caps at 13px read as chrome and the
   page had no heading larger than its own subheads. The caps face stays where it
   belongs — the navigation rail. Sans, because the serif is the brand's voice for
   object names, not for the structure of a document. */
.doc-section > h2 {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--mk-text);
  margin: 0 0 var(--mk-space-4);
}

/* One step under the section title, and clearly under it. */
.doc-section > h3 {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-md);
  font-weight: 600;
  color: var(--mk-text);
  margin: var(--mk-space-6) 0 var(--mk-space-3);
}

.doc-section p {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  line-height: 1.6;
  color: var(--mk-text);
  margin: 0 0 var(--mk-space-3);
}

.doc-section p.doc-quiet { color: var(--mk-text-muted); }

/* ── Specimen ───────────────────────────────────────────────────────────── */

.doc-specimen {
  /* White is the documentation default: most workspace controls are read on a
     surface. Alternate grounds are contextual evidence and are called out below,
     rather than making every specimen inherit the page ground. */
  background: var(--mk-surface);
  border: 1px solid var(--mk-hairline-mid);
  border-radius: var(--mk-radius-md);
  box-shadow: var(--mk-shadow-card);
  padding: var(--mk-space-5);
  margin: 0 0 var(--mk-space-4);
}

.doc-specimen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mk-space-4);
  /* the row presents, it does not queue: specimens sit in the middle of the
     stage, not flushed into its corner (Ihor, 08-10) */
  justify-content: center;
}

/* Component covers show the component family, not a product scenario. Toggle's two
   variants stack compactly; the choice family gives both option lists the same width
   so neither side drifts away from the shared centre. */
.doc-toggle-cover {
  display: grid;
  gap: var(--mk-space-5);
  justify-items: center;
  align-items: center;
}

.doc-choice-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 176px));
  gap: var(--mk-space-6);
  justify-content: center;
  align-items: start;
}
.doc-choice-overview .mk-choice-group { width: 100%; margin: 0; }

/* A parenthetical taxonomy note remains body text; it never becomes punctuation in
   the title or inherits the heading's weight. */
.doc-component-subtitle {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  font-weight: 400;
  color: var(--mk-text-muted);
}

.doc-choice-comparison thead th { width: 50%; }
.doc-choice-comparison thead th span {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mk-text-muted);
}
.doc-choice-comparison tbody td,
.doc-choice-comparison tbody td:last-child {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  color: var(--mk-text);
}

.doc-choice-guidance { min-width: 180px; margin: 0; }
.doc-guidance-centered { justify-content: center; }
.doc-switch-labelled-state > span {
  font-size: var(--mk-text-sm);
  color: var(--mk-text-muted);
}

/* A specimen gets a stage, not a strip (Ihor, 08-10: the overview widget
   looked like a strip). Content centres vertically inside a stage tall enough
   for the component to present itself; children keep their full width, so
   compositions and margin-auto blocks are unaffected — a tall specimen simply
   ignores the minimum. Spec tables opt out: they are documentation furniture
   and hand the card their own edge-to-edge rules. */
.doc-specimen:not(:has(> .doc-matrix)):not(:has(> .doc-states)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 168px;
}

/* The first specimen is the component's cover image, not a narrow demo strip.
   It has two deliberate layers: a large page-ground stage, then a raised white
   surface underneath the component. The pseudo-element keeps that surface
   independent from the component's own markup and geometry. */
#overview > .doc-specimen:first-of-type:not(.doc-specimen-overview-native) {
  --doc-cover-width: min(520px, max(50%, 380px));
  --doc-cover-height: 36%;
  --doc-cover-content-width: min(460px, max(42%, 340px));
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 58vh, 620px);
  padding: clamp(48px, 7vw, 72px) !important;
  background: var(--mk-page);
}

#overview > .doc-specimen:first-of-type:not(.doc-specimen-overview-native)::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--doc-cover-width);
  height: var(--doc-cover-height);
  transform: translate(-50%, -50%);
  background: var(--mk-surface);
  border-radius: calc(var(--mk-radius-md) + 4px);
  box-shadow: var(--mk-shadow-pop);
}

#overview > .doc-specimen:first-of-type:not(.doc-specimen-overview-native) > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--doc-cover-content-width);
  margin-inline: auto;
}

/* Cover geometry follows the specimen instead of forcing one proportion on every
   component. Button rows need width but little height; tiny glyph/text specimens
   need a genuinely compact surface. Pagination and Row action keep the default. */
.doc-specimen-cover-button {
  --doc-cover-width: min(660px, max(78%, 500px)) !important;
  --doc-cover-height: 26% !important;
  --doc-cover-content-width: min(620px, max(74%, 480px)) !important;
}
#overview > .doc-specimen.doc-specimen-cover-button:first-of-type:not(.doc-specimen-overview-native) {
  padding-inline: var(--mk-space-5) !important;
}
.doc-specimen-cover-link {
  --doc-cover-width: min(38%, 380px) !important;
  --doc-cover-height: 20% !important;
  --doc-cover-content-width: min(30%, 300px) !important;
}
.doc-specimen-cover-icon {
  --doc-cover-width: min(40%, 400px) !important;
  --doc-cover-height: 26% !important;
  --doc-cover-content-width: min(32%, 320px) !important;
}
.doc-specimen-cover-choice {
  --doc-cover-width: min(420px, max(42%, 340px)) !important;
  --doc-cover-height: 34% !important;
  --doc-cover-content-width: min(300px, max(30%, 220px)) !important;
}
.doc-specimen-cover-card {
  --doc-cover-width: min(700px, max(76%, 600px)) !important;
  --doc-cover-height: 48% !important;
  --doc-cover-content-width: min(620px, max(68%, 540px)) !important;
}
.doc-specimen-cover-table {
  --doc-cover-width: min(820px, max(92%, 680px)) !important;
  --doc-cover-height: 66% !important;
  --doc-cover-content-width: min(760px, max(86%, 640px)) !important;
}
.doc-specimen-cover-expander {
  --doc-cover-width: min(640px, max(68%, 520px)) !important;
  --doc-cover-height: 48% !important;
  --doc-cover-content-width: min(560px, max(60%, 460px)) !important;
}
.doc-specimen-cover-navigation {
  --doc-cover-width: min(860px, max(94%, 760px)) !important;
  --doc-cover-height: 88% !important;
  --doc-cover-content-width: min(800px, max(88%, 700px)) !important;
}
.doc-specimen-cover-toast {
  --doc-cover-width: min(680px, max(72%, 560px)) !important;
  --doc-cover-height: 68% !important;
  --doc-cover-content-width: min(580px, max(64%, 500px)) !important;
}
.doc-specimen-cover-search {
  --doc-cover-width: min(560px, max(58%, 440px)) !important;
  --doc-cover-height: 62% !important;
  --doc-cover-content-width: min(420px, max(48%, 360px)) !important;
}
.doc-specimen-cover-menu {
  --doc-cover-width: min(320px, 72%) !important;
  --doc-cover-height: 120px !important;
  --doc-cover-content-width: min(240px, 84%) !important;
}
.doc-specimen-cover-widget {
  --doc-cover-width: min(560px, max(58%, 440px)) !important;
  --doc-cover-height: 68% !important;
  --doc-cover-content-width: min(460px, max(48%, 380px)) !important;
}
.doc-toast-cover { display: grid; gap: var(--mk-space-5); width: min(100%, 420px); justify-items: stretch; }
.doc-toast-stack { display: grid; gap: 8px; width: 100%; }
.doc-toast-actions { display: flex; align-items: center; justify-content: flex-end;
                     gap: var(--mk-space-5); margin-top: 12px; margin-bottom: -12px; }
.doc-toast-anatomy { width: 360px; max-width: 100%; }
.doc-toast-pins {
  --doc-pin-max-reach: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 0 14px;
}
.doc-toast-pins .doc-pin-lead { --doc-pin-reach: 14px; }
.doc-toast-pins .doc-pin-lead:last-child { justify-self: start; margin-left: 72px; }
.doc-toast-bottom-pins {
  --doc-pin-max-reach: 18px;
  grid-template-columns: 3px 42px minmax(0, 1fr);
  padding: 0;
}
.doc-toast-bottom-pins .doc-pin-lead:first-child { --doc-pin-reach: 12px; grid-column: 1; }
.doc-toast-bottom-pins .doc-pin-lead:last-child { --doc-pin-reach: 18px; grid-column: 3;
                                                  justify-self: start; margin-left: 72px; }
.doc-toast-states td:nth-child(2) { min-width: 340px; }
.doc-toast-states .mk-toast { width: 100%; }
.doc-navigation-desktop-overview { min-height: 760px; padding: var(--mk-space-6) !important; }
.doc-navigation-desktop-figure { width: min(860px, 100%); margin: 0 auto; }
.doc-navigation-desktop-figure figcaption {
  margin-bottom: var(--mk-space-3); font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mk-text-label);
}
.doc-navigation-desktop-frame {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  width: 100%; height: 640px; min-height: 640px;
  overflow: hidden; border: 1px solid var(--mk-hairline-mid);
  border-radius: var(--mk-radius-md); background: var(--mk-page);
  box-shadow: var(--mk-shadow-card);
}
.doc-navigation-rail { display: block; width: 240px; height: 100%; margin: 0;
                       overflow: hidden; border: 0; border-right: 1px solid var(--mk-hairline);
                       border-radius: 0; background: var(--mk-surface); }
.doc-navigation-rail .mk-nav-inner {
  position: static;
  height: 100%; min-height: 0 !important;
  max-height: none;
  padding: 18px 10px; box-sizing: border-box; overflow: hidden;
}
.doc-navigation-rail .mk-nav-brand { padding-bottom: 24px; }
.doc-navigation-rail .mk-nav-tail { margin-top: auto; }
.doc-navigation-canvas { min-width: 0; padding: 26px 28px; background: var(--mk-page); }
.doc-navigation-canvas-head { display: flex; justify-content: space-between; gap: 20px;
                              padding-bottom: 18px; border-bottom: 1px solid var(--mk-hairline); }
.doc-navigation-canvas-head span:first-child { width: 34%; height: 12px; background: var(--mk-hairline-strong); }
.doc-navigation-canvas-head span:last-child { width: 18%; height: 12px; background: var(--mk-hairline); }
.doc-navigation-canvas-title { width: 46%; height: 22px; margin: 28px 0 22px; background: var(--mk-hairline-strong); }
.doc-navigation-canvas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc-navigation-canvas-grid span { min-height: 112px; border: 1px solid var(--mk-hairline);
                                   border-radius: var(--mk-radius-sm); background: var(--mk-surface); }
.doc-navigation-mobile-overview { min-height: 720px; padding: var(--mk-space-6) !important; }
.doc-navigation-phone-slice { position: relative; width: 380px; max-width: 100%; height: 600px;
                              margin: 0 auto;
                              overflow: hidden; border: 1px solid var(--mk-hairline-mid);
                              border-radius: var(--mk-radius-md); background: var(--mk-page);
                              box-shadow: var(--mk-shadow-card); }
.doc-navigation-phone-content { display: grid; gap: 12px; padding: 28px 18px 92px; }
.doc-navigation-phone-content span { display: block; height: 12px; background: var(--mk-hairline); }
.doc-navigation-phone-content span:first-child { width: 54%; height: 20px; background: var(--mk-hairline-strong); }
.doc-navigation-phone-content span:last-child { width: 72%; }
.doc-navigation-tabbar { position: relative !important; left: auto; right: auto; bottom: auto; width: 100%; }
.doc-navigation-tabbar.doc-tabbar { height: 74px; }
.doc-navigation-tabbar .mk-tab { min-height: 68px; gap: 3px; padding: 9px 0 7px; }
.doc-navigation-tabbar .mk-tab[aria-disabled="true"] { color: var(--mk-text-quiet); cursor: not-allowed; }
.doc-navigation-tabbar .mk-tab[aria-expanded="true"] { color: var(--mk-accent); font-weight: 500; }
.doc-navigation-tabbar .mk-tab .ico-close { display: none; }
.doc-navigation-tabbar .mk-tab[aria-expanded="true"] .ico-menu { display: none; }
.doc-navigation-tabbar .mk-tab[aria-expanded="true"] .ico-close { display: block; }
.doc-navigation-phone-slice .doc-navigation-tabbar { position: absolute !important; left: 0; right: 0; bottom: 0; }
.doc-navigation-tabbar-compact { min-width: 280px; }
.doc-navigation-tabbar-guidance { width: min(360px, 100%); min-width: 0; }
.doc-navigation-tabbar-guidance .mk-tab span { max-width: 100%; padding-inline: 2px; text-align: center; }
.doc-navigation-single-tab { width: 84px; min-height: 68px; display: flex; flex-direction: column;
                             align-items: center; gap: 3px; padding: 9px 0 7px;
                             border: 0; background: transparent; color: var(--mk-text-muted);
                             font: 500 13px/1.2 var(--mk-font-app); text-decoration: none; }
.doc-navigation-single-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
                                 stroke-width: var(--mk-icon-stroke); }
.doc-navigation-single-tab[aria-current="page"] { color: var(--mk-accent); font-weight: 500; }
.doc-navigation-single-tab[aria-current="page"] svg { fill: currentColor; }
.doc-navigation-single-tab[aria-current="page"] svg [fill="none"] { fill: none; }
.doc-navigation-single-tab[aria-disabled="true"] { color: var(--mk-text-quiet); cursor: not-allowed; }
.doc-navigation-anatomy-layout { grid-template-columns: minmax(0, 410px) minmax(0, 1fr); }
.doc-navigation-side-anatomy { --doc-navigation-rail-w: 240px; position: relative;
                               width: var(--doc-navigation-rail-w); margin-right: 110px; }
.doc-navigation-rail-anatomy { height: 640px; }
.doc-navigation-side-pin { position: absolute; left: var(--doc-nav-target-x);
                           transform: translate(-4px, -50%);
                           display: flex; align-items: center; z-index: 2; }
.doc-navigation-side-pin::before { content: "";
  width: calc(var(--doc-navigation-rail-w) - var(--doc-nav-target-x) + 72px); height: 10px;
  background:
    radial-gradient(circle at 4px 50%, var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) 4px center / calc(100% - 4px) 1px no-repeat;
}
.doc-navigation-side-pin .doc-pin { flex: none; }
.doc-navigation-tabbar-anatomy { position: relative; width: 360px; max-width: 100%; }
.doc-pin-above.doc-navigation-tabbar-top-pins { --doc-pin-max-reach: 10px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; }
.doc-navigation-tabbar-top-pins .doc-pin-lead:nth-child(1) { --doc-pin-reach: 10px; grid-column: 1; }
.doc-navigation-tabbar-top-pins .doc-pin-lead:nth-child(2) { --doc-pin-reach: 0px; grid-column: 2; }
.doc-navigation-tabbar-top-pins .doc-pin-lead:nth-child(3) { --doc-pin-reach: 10px; grid-column: 5; }
.doc-navigation-states td:nth-child(2) { min-width: 390px; }
.doc-navigation-state-list { width: 240px; }
.doc-navigation-menu-open-state { position: relative; width: 360px; height: 540px;
                                  overflow: hidden; border: 1px solid var(--mk-hairline-mid);
                                  border-radius: var(--mk-radius-md); background: var(--mk-page); }
.doc-navigation-menu-open-panel.mk-mobile-nav { display: block; position: absolute; z-index: 1;
                                                inset: 12px 0 66px; overflow: hidden;
                                                background: var(--mk-surface);
                                                border-top: 1px solid var(--mk-hairline);
                                                box-shadow: 0 -4px 18px rgb(0 0 0 / .08); }
.doc-navigation-menu-open-panel .mk-mobile-nav-inner { display: flex; flex-direction: column; min-height: 100%; }
.doc-navigation-menu-open-panel .mk-mobile-nav-head { display: flex; align-items: center; justify-content: center; gap: 10px;
                                                       min-height: 64px; padding: 10px 18px;
                                                       border-bottom: 1px solid var(--mk-hairline); }
.doc-navigation-menu-open-panel .mk-mobile-nav-wordmark { width: 132px; height: auto; }
.doc-navigation-menu-open-panel .mk-mobile-nav-body { flex: 1 1 auto; padding: 20px 16px; }
.doc-navigation-menu-open-panel .mk-nav-list { display: grid; gap: 2px; }
.doc-navigation-menu-open-panel .mk-nav-link { min-height: 52px; padding: 10px 4px;
                                               border-radius: 0; border-bottom: 1px solid var(--mk-hairline);
                                               color: var(--mk-text-muted); cursor: default; }
.doc-navigation-menu-open-panel .mk-nav-list li:last-child .mk-nav-link { border-bottom: 0; }
.doc-navigation-menu-open-state .doc-navigation-tabbar { position: absolute !important;
                                                          z-index: 2; left: 0; right: 0; bottom: 0; }

.doc-expander-frame {
  width: 100%;
  overflow: hidden;
  background: var(--mk-surface);
  border: 1px solid var(--mk-hairline-mid);
  border-radius: var(--mk-radius-md);
}
.doc-expander-toggle { border-top: 0; padding-inline: 14px; }
.doc-expander-toggle:hover,
.doc-expander-toggle.is-hover { background: var(--mk-wash-faint); color: var(--mk-accent); }
.doc-expander-toggle.is-focus { outline: 2px solid var(--mk-camel-mid); outline-offset: -2px; }
.doc-expander-toggle .caret { width: 16px; height: 16px; }
.doc-expander-label { min-width: 0; font-weight: 600; }
.doc-expander-panel {
  display: grid;
  gap: 8px;
  padding: 12px 14px 16px 38px;
  border-top: 1px solid var(--mk-hairline);
}
.doc-expander-panel[hidden] { display: none; }
.doc-expander-compact { min-width: 300px; }
.doc-expander-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                             gap: var(--mk-space-5); margin: var(--mk-space-5) 0; }
.doc-expander-variant-grid figure { min-width: 0; margin: 0; }
.doc-expander-variant-grid figcaption { margin-bottom: var(--mk-space-2);
                                        font-family: var(--mk-font-app-caps);
                                        font-size: var(--mk-text-xs); letter-spacing: .08em;
                                        text-transform: uppercase; color: var(--mk-text-label); }
.doc-expander-plain-example { padding: 12px 0; border-block: 1px solid var(--mk-hairline-mid); }
.doc-expander-plain-example .doc-expander-panel { margin-top: 10px; padding: 12px 24px;
                                                  border-top: 1px solid var(--mk-hairline); }
.doc-expander-anatomy-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.doc-expander-anatomy { width: 420px; max-width: 100%; }
.doc-expander-top-pins {
  --doc-pin-max-reach: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px;
  padding: 0 14px;
}
.doc-expander-top-pins .doc-pin-lead { --doc-pin-reach: 14px; }
.doc-expander-top-pins .doc-pin-lead:nth-child(2) { justify-self: start; margin-left: 34px; }
.doc-expander-bottom-pins {
  --doc-pin-max-reach: 24px;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}
.doc-expander-bottom-pins .doc-pin-lead { --doc-pin-reach: 24px; }

/* Generic list documentation. The overview uses the component at desktop width;
   the responsive comparison narrows the same markup rather than inventing a
   separate mobile list. */
.doc-list-overview { width: min(460px, 100%); margin: 0 auto; }
#overview > .doc-specimen.doc-specimen-cover-empty:first-of-type:not(.doc-specimen-overview-native) {
  --doc-cover-width: min(640px, 82%);
  --doc-cover-height: 72%;
  --doc-cover-content-width: min(500px, 68%);
}
.doc-empty-overview { width: min(460px, 100%); margin: 0 auto; }
#overview > .doc-specimen.doc-specimen-cover-list:first-of-type:not(.doc-specimen-overview-native) {
  --doc-cover-width: min(560px, 74%);
  --doc-cover-height: 70%;
  --doc-cover-content-width: min(460px, 68%);
}
.doc-list-responsive { display: grid; grid-template-columns: minmax(0, 1fr) 280px;
                       gap: var(--mk-space-6); align-items: start; width: 100%; }
.doc-list-frame { padding: var(--mk-space-4); border: 1px solid var(--mk-hairline-mid);
                  border-radius: var(--mk-radius-md); background: var(--mk-surface); }
.doc-list-frame > b { display: block; margin-bottom: var(--mk-space-3);
                      font-family: var(--mk-font-app-caps); font-size: var(--mk-text-xs);
                      font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
                      color: var(--mk-text-muted); }
.doc-list-responsive .doc-list-frame:last-child .mk-list-structured > li {
  grid-template-columns: 24px minmax(0, 1fr);
}
.doc-list-responsive .doc-list-frame:last-child .mk-list-trailing {
  grid-column: 2; text-align: left; white-space: normal;
}
.doc-list-anatomy { width: 420px; max-width: 100%; }
.doc-pin-above.doc-list-top-pins { --doc-pin-max-reach: 28px; display: grid;
                     grid-template-columns: 42px minmax(0, 1fr) 84px;
                     padding: 0 12px; }
.doc-list-top-pins .doc-pin-lead:nth-child(1) { --doc-pin-reach: 26px; }
.doc-list-top-pins .doc-pin-lead:nth-child(2) { --doc-pin-reach: 12px; justify-self: start; margin-left: 20px; }
.doc-list-top-pins .doc-pin-lead:nth-child(3) { --doc-pin-reach: 26px; }
.doc-list-bottom-pins { --doc-pin-max-reach: 22px; display: grid;
                        grid-template-columns: 42px minmax(0, 1fr) 84px;
                        padding: 0 12px; }
.doc-list-bottom-pins .doc-pin-lead:first-child { grid-column: 2; justify-self: start; margin-left: 28px; }
.doc-list-bottom-pins .doc-pin-lead:first-child { --doc-pin-reach: 22px; }
.doc-list-bottom-pins .doc-pin-lead:last-child { --doc-pin-reach: 0px; grid-column: 3; }

/* Bottom-sheet specimens remain phone-shaped inside the one desktop review
   viewport. These rules only force the real tabbar/sheet classes to be visible
   in documentation; the component layer still owns their production geometry. */
#overview > .doc-specimen.doc-bottom-sheet-overview:first-of-type {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(600px, 72vh, 720px); padding: var(--mk-space-6) !important;
}
.doc-bottom-sheet-phone { position: relative; width: 340px; max-width: 100%; height: 580px;
                          overflow: hidden; border: 1px solid var(--mk-hairline-strong);
                          border-radius: 24px; background: var(--mk-page);
                          box-shadow: var(--mk-shadow-card); }
.doc-bottom-sheet-page { position: absolute; inset: 0; padding: 28px 20px 80px; }
.doc-bottom-sheet-page-title { width: 54%; height: 18px; margin-bottom: 18px;
                               background: var(--mk-hairline-strong); }
.doc-skeleton-line { height: 10px; border-radius: 2px; background: var(--mk-hairline); }
.doc-skeleton-line + .doc-skeleton-line { margin-top: 10px; }
.doc-skeleton-line.is-short { width: 62%; }
.doc-skeleton-line.is-mid { width: 78%; }
.doc-tabbar.mk-tabbar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
                        display: flex; height: 66px; padding: 0;
                        border-top: 1px solid var(--mk-hairline);
                        background: var(--mk-surface); }
.doc-tabbar .mk-tab { flex: 1 1 0; min-width: 0; min-height: 60px; padding: 8px 0 6px;
                      display: flex; flex-direction: column; align-items: center; gap: 2px;
                      border: 0; background: transparent; color: var(--mk-text-muted);
                      font: 500 13px/1.2 var(--mk-font-app); text-decoration: none; }
.doc-tabbar .mk-tab[aria-current="page"] { color: var(--mk-accent); }
.doc-tabbar .mk-tab > svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
                            stroke-width: var(--mk-icon-stroke); }
.doc-tabbar .mk-tab[aria-current="page"] > svg { fill: currentColor; }
.doc-tabbar .mk-tab[aria-current="page"] > svg [fill="none"] { fill: none; }
.doc-bottom-sheet-scrim { position: absolute; z-index: 2; inset: 0;
                          background: var(--mk-scrim); }
.doc-bottom-sheet-surface.mk-sheet { position: absolute; z-index: 3; display: flex;
                                     left: 0; right: 0; bottom: 0; top: 96px;
                                     transform: none; max-height: none; padding: 0;
                                     flex-direction: column; background: var(--mk-surface);
                                     border: 0; border-radius: var(--mk-radius-lg) var(--mk-radius-lg) 0 0;
                                     box-shadow: 0 -12px 40px rgb(0 0 0 / .25); }
.doc-bottom-sheet-handle { display: block; width: 40px; height: 4px; margin: 10px auto 2px;
                           border-radius: 999px; background: var(--mk-hairline-strong); }
.doc-bottom-sheet-surface .mk-sheet-head { display: flex; align-items: center; min-height: 56px;
                                           padding: 6px 10px 6px 16px;
                                           border-bottom: 1px solid var(--mk-hairline); }
.doc-bottom-sheet-surface .mk-sheet-title { font-size: var(--mk-text-md); font-weight: 600; }
.doc-bottom-sheet-surface .mk-sheet-head .mk-icon-btn { margin-left: auto; }
.doc-bottom-sheet-surface .mk-sheet-body { flex: 1; overflow: hidden; padding: 20px 16px; }
.doc-bottom-sheet-skeleton { display: grid; gap: 18px; }
.doc-bottom-sheet-skeleton-group { padding-bottom: 18px; border-bottom: 1px solid var(--mk-hairline); }
.doc-bottom-sheet-anatomy { width: 360px; max-width: 100%; }
.doc-bottom-sheet-anatomy .doc-bottom-sheet-surface { position: relative; z-index: 1;
                                                       top: auto; min-height: 280px; }
.doc-pin-above.doc-bottom-sheet-top-pins { --doc-pin-max-reach: 44px; display: grid;
                             grid-template-columns: 58px minmax(0, 1fr) 56px;
                             padding: 0 10px; }
.doc-bottom-sheet-top-pins .doc-pin-lead:nth-child(1) { --doc-pin-reach: 44px; }
.doc-bottom-sheet-top-pins .doc-pin-lead:nth-child(2) { --doc-pin-reach: 10px; }
.doc-bottom-sheet-top-pins .doc-pin-lead:nth-child(3) { --doc-pin-reach: 44px; }
.doc-bottom-sheet-bottom-pins { --doc-pin-max-reach: 48px; display: grid;
                                grid-template-columns: 70px minmax(0, 1fr) 70px;
                                padding: 0 12px; }
.doc-bottom-sheet-bottom-pins .doc-pin-lead:first-child { --doc-pin-reach: 48px; grid-column: 2; }
.doc-bottom-sheet-bottom-pins .doc-pin-lead:last-child { --doc-pin-reach: 0px; grid-column: 3; }
.doc-bottom-sheet-states td:nth-child(2) { min-width: 260px; }
.doc-bottom-sheet-mini { position: relative; width: 240px; height: 320px; overflow: hidden;
                         border: 1px solid var(--mk-hairline-mid);
                         border-radius: var(--mk-radius-md); background: var(--mk-page); }
.doc-bottom-sheet-mini .doc-bottom-sheet-page { padding: 20px 14px 70px; }
.doc-bottom-sheet-mini .doc-tabbar { height: 58px; }
.doc-bottom-sheet-mini .doc-tabbar .mk-tab { min-height: 58px; font-size: 11px; }
.doc-bottom-sheet-mini .doc-tabbar .mk-tab > svg { width: 20px; height: 20px; }
.doc-bottom-sheet-mini .doc-bottom-sheet-surface { top: 94px; }
.doc-bottom-sheet-mini .doc-bottom-sheet-surface .mk-sheet-body { padding: 14px; }

@media (max-width: 760px) {
  .doc-list-responsive { grid-template-columns: minmax(0, 1fr); }
}

.doc-choice-pins {
  --doc-pin-max-reach: 13px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
.doc-choice-pins .doc-pin-lead { --doc-pin-reach: 13px; }
.doc-choice-pins .doc-pin-lead:last-child { justify-self: start; margin-left: 24px; }

.doc-card-anatomy-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.doc-card-anatomy { width: 420px; max-width: 100%; }
.doc-card-top-pins {
  --doc-pin-max-reach: 17px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 102px 44px;
  padding: 0 16px;
}
.doc-card-top-pins .doc-pin-lead { --doc-pin-reach: 17px; }
.doc-card-top-pins .doc-pin-lead:first-child { justify-self: start; margin-left: 36px; }
.doc-card-bottom-pins {
  --doc-pin-max-reach: 42px;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 0;
  padding: 0 16px;
}
.doc-card-bottom-pins .doc-pin-lead:first-child {
  --doc-pin-reach: 42px;
  justify-self: start;
  margin-left: 54px;
}
.doc-card-bottom-pins .doc-pin-lead:last-child { --doc-pin-reach: 13px; }

/* Full pagination anatomy: the pin grid mirrors Previous, page faces, gaps and Next. */
.doc-pagination-anatomy { width: 100%; max-width: 440px; }
.doc-pagination-anatomy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mk-space-6);
}
.doc-pagination-anatomy-layout .doc-anatomy-stage { min-height: 180px; }
.doc-pagination-anatomy-grid {
  display: grid;
  grid-template-columns: 82px 32px 18px 32px 32px 32px 18px 32px 64px;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.doc-pin-above.doc-pagination-anatomy-grid,
.doc-pin-below.doc-pagination-anatomy-grid {
  display: grid;
  grid-template-columns: 82px 32px 18px 32px 32px 32px 18px 32px 64px;
  gap: 4px;
  padding: 0;
}
.doc-pagination-anatomy-grid > * { justify-self: center; }
.doc-pagination-anatomy-pins { padding: 0; }
.doc-pagination-anatomy-pins.is-below { margin-top: 0; }

/* Large diagrams already own their composition. They keep the original full-width
   page-ground specimen instead of being forced through the small-component cover. */
.doc-specimen-overview-native { background: var(--mk-page); }

/* A specimen that IS a spec table is documentation furniture, not a component on the
   page ground (Ihor, 08-10): it sits on white, and it hands the card its padding so
   every rule — horizontal and vertical — runs edge to edge instead of stopping short. */
.doc-specimen:has(> .doc-matrix),
.doc-specimen:has(> .doc-states) {
  background: var(--mk-surface);
  padding: 0;
  overflow: hidden; /* the card's radius clips the bled table's corners */
}
.doc-specimen > .doc-matrix thead th,
.doc-specimen > .doc-states thead th { padding-top: var(--mk-space-4); }
.doc-specimen > .doc-matrix :is(th, td):first-child,
.doc-specimen > .doc-states :is(th, td):first-child { padding-left: var(--mk-space-5); }
.doc-specimen > .doc-matrix :is(th, td):last-child,
.doc-specimen > .doc-states :is(th, td):last-child { padding-right: var(--mk-space-5); }

/* ── Grounds ────────────────────────────────────────────────────────────── */

/* The same specimen on both of its real grounds, side by side (Ihor, 08-11: the
   pagination hover had to be judged on grey AND white). Each half is a normal
   specimen stage; the caps mini-caption names the ground. */
.doc-grounds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-space-4);
               margin: 0 0 var(--mk-space-4); }
.doc-grounds > figure { margin: 0; min-width: 0; }
.doc-grounds figcaption {
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mk-text-label);
  margin: 0 0 var(--mk-space-2);
}
.doc-grounds .doc-specimen { margin: 0; height: auto; }
.doc-specimen-surface { background: var(--mk-surface); }
.doc-specimen-page { background: var(--mk-page); }

/* ── Anatomy ────────────────────────────────────────────────────────────── */

.doc-anatomy { display: grid; grid-template-columns: 240px minmax(0, 1fr);
               gap: var(--mk-space-6); align-items: center; }

.doc-anatomy-stage { display: flex; align-items: center; justify-content: center;
                     min-height: 120px; }

.doc-anatomy-keys { margin: 0; padding: 0; list-style: none; }

.doc-anatomy-keys li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--mk-space-3);
  align-items: baseline;
  padding: 8px 0;
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  color: var(--mk-text);
}

.doc-anatomy-keys li + li { border-top: 1px solid var(--mk-hairline); }

/* The badge is the callout number only — the direct child. A `b` inside the description
   is the part's name and must stay text. */
.doc-anatomy-keys > li > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mk-text);
  font-size: var(--mk-text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--mk-page);
}


.doc-anatomy-keys span { color: var(--mk-text-muted); }
.doc-anatomy-keys span b { font-weight: 600; color: var(--mk-text); }

/* ── Size × state matrix ────────────────────────────────────────────────── */

/* Fixed layout, explicit columns. Left to itself the browser sizes columns from the
   widest cell in each — one colspan in one row was enough to shove Primary and Secondary
   together and strand Quiet halfway across the table. Fixed, the distribution is stated
   once and every row obeys it. */
.doc-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* A catalogue may group related variants without turning their token names into
   navigation. The live specimen is the interactive thing; its adjacent token is
   reference text only. */
.doc-matrix .doc-matrix-group th {
  padding-top: var(--mk-space-4);
  padding-bottom: var(--mk-space-2);
  background: var(--mk-sunken);
  color: var(--mk-text-label);
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Tier / Face / The job. Under the grid view the vertical rule owns the separation, so
   the label column hugs its short labels instead of opening a one-sided void between
   itself and the specimen (Ihor, 08-10 — the ladder's buttons sat far from their
   sizes). The specimen column takes the surplus: its content is the widest. */
.doc-tiers thead th:nth-child(1) { width: 14%; }
.doc-tiers thead th:nth-child(2) { width: 34%; }

/* State / specimen columns / What changes. Fixed percentages were tuned to the
   button page's five columns and betrayed every other shape: three-column pages
   had their prose squeezed to a sliver, and at narrower viewports the specimens
   painted straight across the rules (Ihor, 08-10, the screenshot). Auto layout
   sizes each specimen column to the component it actually holds — a table never
   squeezes below min-content — and the prose column takes its share by hint. */
.doc-states { table-layout: auto; }
.doc-states tbody th { white-space: nowrap; }
.doc-states thead th:last-child { width: 42%; }

.doc-matrix thead th {
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mk-text-label);
  text-align: left;
  padding: 0 var(--mk-space-5) var(--mk-space-3) 0;
  border-bottom: 1px solid var(--mk-hairline-mid);
}

.doc-matrix tbody th {
  text-align: left;
  vertical-align: middle;
  padding: var(--mk-space-4) var(--mk-space-5) var(--mk-space-4) 0;
}

.doc-matrix tbody th strong {
  display: block;
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-text);
}

/* The sub-line under a row title (the class name, the pixel size) speaks in regular
   body — the UA's th bold was leaking into it and the cell read as two bold lines.
   Asked for repeatedly; fixed at the root on 08-11. The TITLE keeps its weight
   from <strong>; a bare state-name th keeps the UA bold, which is its title face. */
.doc-matrix tbody th span {
  display: block;
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-xs);
  font-weight: 400;
  color: var(--mk-text-muted);
}

.doc-matrix tbody td {
  padding: var(--mk-space-4) var(--mk-space-5) var(--mk-space-4) 0;
  vertical-align: middle;
}

/* The prose column answers in the same voice as the row titles: 14px, muted — a 16px
   description beside a 14px title read as two different tables (Ihor, 08-10). */
.doc-matrix tbody td:last-child {
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  color: var(--mk-text-muted);
}

.doc-matrix tbody tr + tr th,
.doc-matrix tbody tr + tr td { border-top: 1px solid var(--mk-hairline); }

/* Grid view: a matrix closes each column with a vertical rule the way each row is
   closed by a horizontal one, so it reads as a specification grid rather than a
   list with air (Ihor, 08-10; the KROGL component lab's spec grid is the
   reference). Outer edges stay open — the grid lives inside the table. */
.doc-matrix thead th + th,
.doc-matrix tbody th + td,
.doc-matrix tbody td + td {
  border-left: 1px solid var(--mk-hairline);
  padding-left: var(--mk-space-5);
}

/* ── Do / Don't ─────────────────────────────────────────────────────────── */

/* Two rows shared across the pair through subgrid, so the stages match heights and
   the verdict footers match heights — a Do beside a taller Don't no longer staggers. */
.doc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: auto auto;
            /* column gap only: the row tracks are INSIDE the cards, and a row gap there
               opens a tinted strip between the stage and the note's border-top — the
               footer read as leaking past its own separator (Ihor, 08-07). */
            column-gap: var(--mk-space-4); row-gap: 0;
            margin: 0 0 var(--mk-space-4); }

.doc-case {
  background: var(--mk-page);
  /* the stage below is surface — a specimen is never read through a tint */
  border: 1px solid var(--mk-hairline-mid);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.doc-case-stage {
  background: var(--mk-surface);
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  flex-wrap: wrap;
  padding: var(--mk-space-5);
  min-height: 96px;
}

.doc-case-note {
  border-top: 1px solid var(--mk-hairline);
  padding: var(--mk-space-3) var(--mk-space-5) var(--mk-space-4);
}

/* Subtitle caps give every verdict the same unmistakable reading edge. */
.doc-case-verdict {
  display: block;
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-md);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.doc-case-do .doc-case-verdict { color: var(--mk-success-text); }
.doc-case-dont .doc-case-verdict { color: var(--mk-error-text); }

.doc-case-note p { margin: 0; font-size: var(--mk-text-sm); color: var(--mk-text); }

/* ── Rule list ──────────────────────────────────────────────────────────── */

/* The list is ONE grid so every row shares the term column: sized to the longest term,
   identical for all of them. A per-row grid sizes each row to its own term and the
   descriptions come out ragged; a fixed measure opens a one-sided void. Neither is even.
   Rows are zebra bands, not hairlines (Ihor, 08-10): the familiar spec-table rhythm —
   odd rows on the page ground, even rows bare. The bands carry the row separation, so
   the horizontal hairlines are gone. The FRAME sits on the content column's own left
   edge — the framed table is the object being aligned, so its text indents inside it;
   the first cut bled the frame out to keep the text on the edge, and the table read as
   overhanging the grid (Ihor, 08-11). */
.doc-rules { margin: 0 0 var(--mk-space-4); padding: 0; list-style: none;
             /* One ink for the list's own lines (Ihor, 08-10): the frame around the
                bands and the rule on the term column share it, a step quieter than
                --mk-hairline — at .14 the inner rule out-shouted the bands. */
             --doc-rules-line: color-mix(in srgb, var(--mk-hairline) 70%, transparent);
             border: 1px solid var(--doc-rules-line);
             display: grid; grid-template-columns: max-content minmax(0, 1fr); }

.doc-rules li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--mk-space-5);
  align-items: stretch;
  padding: var(--mk-space-3) var(--mk-space-4);
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  line-height: 1.55;
  color: var(--mk-text);
}

.doc-rules li:nth-child(odd) { background: var(--mk-page); }

/* Air above the table when it follows content — a demo figure, a specimen, a
   paragraph — rather than its own heading (Ihor, 08-11: the grid demos sat
   almost touching the spec table). After a visual block the table needs the
   full section-scale breath; after prose, one step less. Sibling margins
   collapse, so these are floors, not sums. */
.doc-section :is(div, figure) + .doc-rules { margin-top: var(--mk-space-6); }
.doc-section p + .doc-rules { margin-top: var(--mk-space-5); }

.doc-rules b { font-weight: 600; color: var(--mk-text); }

/* The term stays a bolded run of body — Subtitle 2 caps was tried on 08-10 and read
   too big (Ihor, 08-11: «некрасивые, сильно большие»). Its ink steps below muted:
   .88 was still too black beside the descriptions (his second pass, same day), and
   the tokens offer nothing between muted and quiet — quiet is the absence register
   and its own comment bars it from de-emphasising real content — so the step is
   mixed locally from muted (~.70, the weight carries the label from there).
   Inline bolds inside descriptions keep the ink (the span rule below), so an
   emphasised word still lifts off its muted sentence. */
.doc-rules li > b { color: color-mix(in srgb, var(--mk-text-muted) 80%, transparent); }

/* The same grid view the matrices wear (Ihor, 08-10: one unified spec style
   everywhere the spec was prose split by horizontal rules). The vertical rule
   closes the term column, and the description answers in the muted voice so
   the bold term and its body stop reading as one undifferentiated run.
   The rule is ONE line for the whole list, not a segment per row (Ihor, 08-10):
   each span pulls through its row's vertical padding, so adjacent segments
   touch and read as a single full-height divider on the term column. */
.doc-rules li > span {
  border-left: 1px solid var(--doc-rules-line);
  padding-left: var(--mk-space-5);
  margin-block: calc(-1 * var(--mk-space-3));
  padding-block: var(--mk-space-3);
  color: var(--mk-text-muted);
}
.doc-rules li > span b,
.doc-rules li > span code { color: var(--mk-text); }

/* ── Schematic content ──────────────────────────────────────────────────── */

/* Grey bars standing for whatever a container's body holds (Ihor, 08-11: the
   widget page must show STRUCTURE, not content — the head and the frame are
   the subject, the body is somebody else's). */
.doc-schema { display: grid; gap: 8px; padding: 12px 14px; }
.doc-schema-bar { height: 12px; border-radius: 4px; background: var(--mk-wash); }
.doc-schema-block { height: 44px; border-radius: var(--mk-radius-sm); background: var(--mk-wash); }

/* ── Phone stage ────────────────────────────────────────────────────────── */

/* Responsive behaviour is shown, not narrated (Ihor, 08-11: «нет смысла писать
   его текстом — надо показывать поведение»). The stage is a real 360px browsing
   context: the component's own media queries fire inside it, so the same CSS
   that will serve the phone serves the demo — nothing is re-implemented for
   the picture. Text in the section keeps only what the picture cannot say:
   class contracts, opt-outs, boundaries. */
.doc-phone { display: inline-block; margin: 0 0 var(--mk-space-4);
             border: 1px solid var(--mk-hairline-mid); border-radius: var(--mk-radius-md);
             overflow: hidden; background: var(--mk-surface); }
.doc-phone > figcaption {
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mk-text-label);
  padding: var(--mk-space-2) var(--mk-space-4);
  border-bottom: 1px solid var(--mk-hairline);
}
.doc-phone > iframe { display: block; width: 360px; height: var(--doc-phone-h, 240px); border: 0; }

/* ── Markup ─────────────────────────────────────────────────────────────── */

.doc-code {
  background: var(--mk-surface-sunken);
  border: 1px solid var(--mk-hairline-mid);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-4) var(--mk-space-5);
  overflow-x: auto;
  margin: 0 0 var(--mk-space-4);
}

.doc-code pre {
  margin: 0;
  font-family: var(--mk-font-code);
  font-size: var(--mk-text-sm);
  line-height: 1.65;
  color: var(--mk-text);
  white-space: pre;
}

.doc-section code {
  font-family: var(--mk-font-code);
}

/* ── Anatomy pins ───────────────────────────────────────────────────────────
   The numbers sit ON the specimen, not only in the key beside it. The pin rows
   mirror the button's own box — the L size's 24px inline padding and 6px gap —
   so pin 2 lands over the icon and pin 3 over the label without any hand-placed
   offsets that would drift the moment the ladder changes.
   ───────────────────────────────────────────────────────────────────────── */

.doc-figure { display: inline-grid; justify-items: stretch; }

.doc-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--mk-text);
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-xs);
  font-weight: 500;
  /* the glyph is centred by the box, not by the font's own metrics */
  line-height: 1;
  color: var(--mk-page);
}


/* Anatomy connector invariant: the solid 8px marker is shared by every page, and
   its centre — not its outer edge — sits on the nearest boundary of the named part.
   Above leaders shift down by the marker radius; below leaders shift up by it. */
.doc-pin-lead { display: inline-flex; flex-direction: column; align-items: center; }
.doc-pin-lead::after {
  content: "";
  width: 10px;
  height: calc(16px + var(--doc-pin-reach, 0px));
  background:
    radial-gradient(circle at 50% calc(100% - 4px), var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) center top / 1px calc(100% - 4px) no-repeat;
  transform: translateY(4px);
}
.doc-pin-lead.is-up { flex-direction: column-reverse; }
.doc-pin-lead.is-up::after {
  height: calc(42px + var(--doc-pin-reach, 0px));
  background:
    radial-gradient(circle at 50% 4px, var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) center 4px / 1px calc(100% - 4px) no-repeat;
  transform: translateY(-4px);
}

/* The row can overlap a specimen when a leader names an internal part. The longest
   reach defines the overlap; each leader extends only as far as its own target. */
.doc-pin-above {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 12px;
  margin-bottom: calc(0px - var(--doc-pin-max-reach, 0px));
  position: relative;
  z-index: 2;
}

.doc-pin-below {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  padding: 0 24px;
  /* The marker centre sits on the component boundary. */
  margin-top: calc(0px - var(--doc-pin-max-reach, 0px));
  align-items: end;
  position: relative;
  z-index: 2;
}

.doc-pin-below > * { align-self: end; justify-self: center; }

.doc-anatomy-placeholder { color: var(--mk-text-quiet); }

/* Internal anatomy targets. Each reach is the distance from the component edge to
   the named part's nearest boundary; horizontal tracks mirror the live component. */
.doc-row-action-pins {
  --doc-pin-max-reach: 23.5px;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 0 12px;
}
.doc-row-action-pins .doc-pin-lead:first-child {
  --doc-pin-reach: 10px;
  justify-self: start;
  margin-left: -11px;
}
.doc-row-action-pins .doc-pin-lead:last-child { --doc-pin-reach: 23.5px; }

.doc-text-input-pins {
  --doc-pin-max-reach: 14px;
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 0 16px;
}
.doc-text-input-pins .doc-pin-lead:first-child { --doc-pin-reach: 14px; }

.doc-search-top-pins {
  --doc-pin-max-reach: 13px;
  display: grid;
  grid-template-columns: 46px 32px;
  padding: 0;
}
.doc-search-top-pins .doc-pin-lead { --doc-pin-reach: 13px; }
.doc-search-bottom-pins { grid-template-columns: minmax(0, 1fr); padding: 0; }
.doc-search-demo { width: min(440px, 100%); margin: 0 auto; }
.doc-search-results { border: 1px solid var(--mk-hairline-strong);
                      border-radius: var(--mk-radius-sm); background: var(--mk-surface); }
.doc-search-results .mk-opt { text-decoration: none; }
.doc-search-results.is-empty { min-height: 132px; justify-content: center; }
.doc-search-empty { min-height: 132px; margin: 0; padding: 24px;
                    display: flex; align-items: center; justify-content: center; text-align: center;
                    border: 1px solid var(--mk-hairline-strong);
                    border-radius: var(--mk-radius-sm);
                    background: var(--mk-surface); color: var(--mk-text-muted); }
.doc-search-no-match { list-style: none; margin: 0; padding: 24px 10px;
                       color: var(--mk-text-muted); text-align: center; }
.doc-search-complete-anatomy { width: 360px; max-width: 100%; }
.doc-search-complete-top-pins { --doc-pin-max-reach: 13px; display: grid;
                                grid-template-columns: 46px minmax(0, 1fr) 42px; padding: 0; }
.doc-search-complete-top-pins .doc-pin-lead { --doc-pin-reach: 13px; }
.doc-search-complete-bottom-pins { --doc-pin-max-reach: 14px; display: grid;
                                   grid-template-columns: 28px minmax(0, 1fr); padding: 0; }
.doc-search-complete-bottom-pins .doc-pin-lead { --doc-pin-reach: 14px; }
.doc-search-complete-bottom-pins .doc-pin-lead:last-child { justify-self: start; margin-left: 74px; }
.doc-search-states td:nth-child(2) { min-width: 300px; }
.doc-search-states .mk-search-results-wrap, .doc-search-states .mk-search,
.doc-search-states .mk-optlist { width: 100%; max-width: 320px; }
.doc-menu-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                         gap: var(--mk-space-5);
                         margin: var(--mk-space-5) 0; }
.doc-menu-variant-grid figure { margin: 0; min-width: 0; }
.doc-menu-variant-grid figcaption { display: grid; gap: 2px; min-height: 64px;
                                    margin: 0; padding: 0 0 var(--mk-space-3);
                                    border-bottom: 1px solid var(--mk-hairline-mid); }
.doc-menu-variant-grid figcaption strong { font-family: var(--mk-font-app); font-size: var(--mk-text-sm);
                                           font-weight: 600; color: var(--mk-text); }
.doc-menu-variant-grid figcaption span { font-family: var(--mk-font-app); font-size: var(--mk-text-xs);
                                         color: var(--mk-text-muted); }
.doc-menu-variant-grid .doc-specimen { min-height: 180px; height: 180px; margin: 0;
                                      padding: var(--mk-space-4) 0 0; border: 0;
                                      border-radius: 0; background: transparent; box-shadow: none; }
.doc-menu-variant-grid .mk-menu { position: static; width: 240px; max-width: 100%; min-width: 0;
                                  overflow: visible; }
.doc-menu-cover { display: inline-flex; align-items: center; justify-content: center;
                  width: 32px; min-height: var(--mk-tap-min); }
.doc-menu-cover .mk-menu { width: 240px; max-width: none; }
.doc-menu-anatomy { position: relative; width: 240px; max-width: 100%; margin-inline: 72px; }
.doc-menu-anatomy-top-pin { --doc-pin-max-reach: 10px; justify-content: flex-end; padding: 0 11px 0 0; }
.doc-menu-anatomy-top-pin .doc-pin-lead { --doc-pin-reach: 10px; }
.doc-menu-anatomy-component { display: flex; flex-direction: column; align-items: flex-end;
                               gap: 6px; width: 240px; }
.doc-menu-anatomy-component .mk-menu { position: static; z-index: 1; width: 240px;
                                       min-width: 0; overflow: visible; }
.doc-menu-anatomy-panel-pin { position: absolute; z-index: 3; top: 76px; left: calc(100% - 4px);
                              display: flex; align-items: center; }
.doc-menu-anatomy-panel-pin::before { content: ""; width: 48px; height: 10px;
  background:
    radial-gradient(circle at 4px 50%, var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) 4px center / 44px 1px no-repeat;
}
.doc-menu-anatomy-item-pin { position: absolute; z-index: 3; display: flex; align-items: center; }
.doc-menu-anatomy-item-pin.is-icon { top: 108px; right: calc(100% - 28px); }
.doc-menu-anatomy-item-pin.is-icon::after { content: ""; width: 54px; height: 10px;
  background:
    radial-gradient(circle at calc(100% - 4px) 50%, var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) left center / calc(100% - 4px) 1px no-repeat;
}
.doc-menu-anatomy-item-pin.is-copy { top: 108px; left: 196px; }
.doc-menu-anatomy-item-pin.is-copy::before { content: ""; width: 50px; height: 10px;
  background:
    radial-gradient(circle at 4px 50%, var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) 4px center / 46px 1px no-repeat;
}

/* Tooltip anatomy: pin 1 lands on the label surface, pin 2 on its pointer, and pin 3
   reaches the trigger boundary. The marker centres follow the shared connector rule. */
.doc-tooltip-anatomy { width: 132px; padding-top: 4px; }
.doc-tooltip-anatomy-top-pins {
  --doc-pin-max-reach: 18px;
  display: grid;
  grid-template-columns: 66px 66px;
  padding: 0;
}
.doc-tooltip-anatomy-top-pins .doc-pin-lead:first-child { --doc-pin-reach: 6px; }
.doc-tooltip-anatomy-top-pins .doc-pin-lead:last-child { --doc-pin-reach: 18px; }
.doc-tooltip-anatomy-component { justify-self: center; margin-top: 36px; }
.doc-tooltip-anatomy-bottom-pin {
  --doc-pin-max-reach: 0px;
  grid-template-columns: 1fr;
  padding: 0;
  margin-top: -4px;
}
.doc-tooltip-anatomy-bottom-pin .doc-pin-lead { --doc-pin-reach: 0px; }
.doc-tooltip-placement-row {
  display: flex; align-items: center; justify-content: center; gap: 56px;
  max-width: 720px; margin: 0 auto; padding: 48px 16px;
}
.doc-tooltip-placement-cell {
  flex: 0 0 auto; width: max-content;
}
/* In the placement specimen the complete visible footprint participates in layout.
   Runtime tooltips remain overlays; this documentation-only grid lets spacing follow
   each label's actual width rather than four arbitrary trigger boxes. */
.doc-tooltip-placement-cell .mk-tooltip-wrap {
  display: grid; align-items: center; justify-items: center; gap: 8px;
  grid-template-rows: 30px 32px 30px;
}
.doc-tooltip-placement-cell .mk-icon-btn { grid-area: trigger; }
.doc-tooltip-placement-cell .mk-tooltip {
  position: relative; inset: auto; transform: none; grid-area: tip;
}
.doc-tooltip-placement-cell.is-top .mk-tooltip-wrap {
  grid-template-areas: "tip" "trigger" ".";
}
.doc-tooltip-placement-cell.is-bottom .mk-tooltip-wrap {
  grid-template-areas: "." "trigger" "tip";
}
.doc-tooltip-placement-cell.is-left .mk-tooltip-wrap {
  grid-template-areas: ". ." "tip trigger" ". .";
}
.doc-tooltip-placement-cell.is-right .mk-tooltip-wrap {
  grid-template-areas: ". ." "trigger tip" ". .";
}
.doc-tooltip-info-demo {
  min-height: 160px; display: grid;
  grid-template-columns: 32px minmax(220px, 280px); align-items: center;
  justify-content: center; gap: 8px; padding: var(--mk-space-5);
}
.doc-tooltip-info-demo .mk-tooltip-wrap { display: contents; }
.doc-tooltip-info-demo .mk-icon-btn { grid-column: 1; }
.doc-tooltip-info-demo .mk-tooltip {
  grid-column: 2; position: relative; inset: auto; transform: none;
}
.doc-link-states thead th:first-child { width: 18%; }
.doc-link-states :is(th, td):not(:first-child) { text-align: center; }
.doc-link-states a { white-space: nowrap; }
#variants .mk-menu { overflow: visible; overscroll-behavior: auto; }
.doc-badge-overview { display: grid; gap: var(--mk-space-5); }
.doc-badge-overview-row { justify-content: center; }
.doc-badge-overview-row + .doc-badge-overview-row {
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-hairline);
}
.doc-badge-size-grid thead th:first-child { width: 14%; }
.doc-badge-size-grid td:not(:last-child) { text-align: center; }
.doc-badge-size-grid td { vertical-align: middle; }
.doc-badge-variants thead th:nth-child(1) { width: 22%; }
.doc-badge-variants thead th:nth-child(2) { width: 30%; }
.doc-badge-variants td:nth-child(2) { text-align: center; }
.doc-badge-fake-control { border: 1px solid currentColor; box-shadow: 0 0 0 2px var(--mk-warning-tint); cursor: pointer; }
.doc-threshold-states td:nth-child(2) { min-width: 360px; }
.doc-threshold-anatomy { width: 420px; max-width: 100%; }
.doc-threshold-component-wrap { padding-top: 28px; }
.doc-pin-above.doc-threshold-top-pins { --doc-pin-max-reach: 38px; display: block;
  position: relative; height: calc(38px + var(--doc-pin-max-reach)); padding: 0; }
.doc-threshold-top-pins .doc-pin-lead { position: absolute; top: 0; }
.doc-threshold-top-pins .doc-pin-lead:nth-child(1) { --doc-pin-reach: 8px; left: 193px; }
.doc-threshold-top-pins .doc-pin-lead:nth-child(2) { --doc-pin-reach: 38px; left: 74px; }
.doc-threshold-top-pins .doc-pin-lead:nth-child(3) { --doc-pin-reach: 28px; right: 34px; }
.doc-threshold-states .mk-threshold { width: 100%; max-width: 420px; }
.doc-threshold-states tbody tr:nth-child(-n + 2) { height: 148px; }
.doc-threshold-states tbody tr:nth-child(-n + 2) .mk-threshold { transform: translateY(10px); }
.doc-threshold-settled { display: flex; align-items: center; justify-content: space-between;
                         gap: var(--mk-space-4); width: 100%; max-width: 420px; }
.doc-threshold-settled .mk-price { margin: 0; }
.doc-threshold-guidance .doc-case-stage { min-height: 150px; }
.doc-threshold-guidance .mk-threshold { width: 100%; max-width: 390px;
                                        margin: 12px auto 0; }
.doc-threshold-misuse { display: grid; gap: 12px; width: 100%; max-width: 390px; }
.doc-threshold-misuse-head { display: flex; justify-content: space-between; gap: 16px;
                             font-size: var(--mk-text-sm); color: var(--mk-text-muted); }
.doc-threshold-misuse-track { height: 6px; border-radius: 999px; background: var(--mk-hairline); overflow: hidden; }
.doc-threshold-misuse-track span { display: block; width: 100%; height: 100%; background: var(--mk-success-text); }
.doc-widget-showcase { width: 100%; max-width: 460px; margin: 0 auto; }
.doc-widget-showcase-body { min-height: 150px; }
.doc-widget-anatomy-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.doc-widget-anatomy { width: 440px; max-width: 100%; }
.doc-widget-head-parts { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.doc-widget-hint { font-size: var(--mk-text-sm); white-space: nowrap; }
.doc-widget-anatomy-body { min-height: 150px; }
.doc-pin-above.doc-widget-top-pins { --doc-pin-max-reach: 32px; display: block;
  position: relative; height: calc(22px + var(--doc-pin-max-reach)); padding: 0; }
.doc-widget-top-pins .doc-pin-lead { position: absolute; top: 0; }
.doc-widget-top-pins .doc-pin-lead:nth-child(1) { --doc-pin-reach: 32px; left: 212px; }
.doc-widget-top-pins .doc-pin-lead:nth-child(2) { --doc-pin-reach: 3px; left: 58px; }
.doc-widget-top-pins .doc-pin-lead:nth-child(3) { --doc-pin-reach: 3px; left: 278px; }
.doc-widget-top-pins .doc-pin-lead:nth-child(4) { --doc-pin-reach: 3px; left: 356px; }
.doc-widget-top-pins .doc-pin-lead:nth-child(5) { --doc-pin-reach: 3px; right: 27px; }
.doc-pin-below.doc-widget-bottom-pins { --doc-pin-max-reach: 58px; display: grid;
  grid-template-columns: minmax(0, 1fr); padding: 0; }
.doc-widget-bottom-pins .doc-pin-lead { --doc-pin-reach: 58px; }
.doc-widget-states td:nth-child(2) { min-width: 390px; }
.doc-widget-state { width: 100%; max-width: 420px; }
.doc-widget-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                           gap: var(--mk-space-5); margin: 0 0 var(--mk-space-4); }
.doc-widget-variant-grid figure { min-width: 0; margin: 0; }
.doc-widget-variant-grid figcaption { display: grid; gap: 2px; min-height: 52px;
                                      margin: 0 0 var(--mk-space-2); }
.doc-widget-variant-grid figcaption strong { font-family: var(--mk-font-app); font-size: var(--mk-text-sm);
                                             font-weight: 600; color: var(--mk-text); }
.doc-widget-variant-grid figcaption span { font-family: var(--mk-font-app); font-size: var(--mk-text-xs);
                                           color: var(--mk-text-muted); }
.doc-widget-variant-grid .doc-specimen { min-height: 196px; height: 196px; margin: 0; padding: var(--mk-space-4); }
.doc-widget-disclosure-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 760px) {
  .doc-menu-variant-grid, .doc-expander-variant-grid, .doc-widget-variant-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doc-dropdown-pins {
  --doc-pin-max-reach: 12px;
  grid-template-columns: 144px 20px;
  gap: 8px;
  padding: 0 14px;
}
.doc-dropdown-pins .doc-pin-lead:first-child {
  --doc-pin-reach: 11.5px;
  justify-self: start;
  margin-left: 29px;
}
.doc-dropdown-live { width: 280px; max-width: 100%; }
.doc-dropdown-live > .mk-select-face, .doc-dropdown-live > .mk-menu { width: 100%; }
.doc-dropdown-stack { display: grid; gap: var(--mk-space-2); width: min(380px, 100%); margin: 0 auto; }
.doc-dropdown-stack-compact { width: min(320px, 100%); }
.doc-dropdown-stack > .mk-select-face,
.doc-dropdown-stack > .mk-menu { width: 100%; min-width: 0; max-width: none; }
.doc-dropdown-pins .doc-pin-lead:last-child { --doc-pin-reach: 12px; margin-left: -1px; }

.doc-daterange-pins {
  --doc-pin-max-reach: 14px;
  grid-template-columns: 44px 88px minmax(0, 1fr);
  padding: 0;
}
.doc-daterange-pins .doc-pin-lead:first-child { --doc-pin-reach: 14px; margin-left: 1px; }
.doc-daterange-pins .doc-pin-lead:last-child { --doc-pin-reach: 11.5px; margin-left: 1px; }

#overview > .doc-specimen:first-of-type > .doc-date-overview-field {
  width: min(220px, 100%);
  max-width: 220px;
  margin: 0 auto;
}
.doc-date-overview-field .mk-daterange { width: 100%; }
.doc-date-calendar { position: static; width: max-content; max-width: 100%; margin: 0;
                     box-shadow: var(--mk-shadow-card); }
.doc-date-calendar-anatomy-specimen { overflow: visible; }
.doc-date-anatomy-stacked { grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-5); }
.doc-date-anatomy-stacked .doc-anatomy-stage { min-height: 0; overflow: visible; }
.doc-date-calendar-anatomy { position: relative; width: 504px; max-width: 100%; margin: 0 auto; }
.doc-date-calendar-top-pins { --doc-pin-max-reach: 13px; display: block; position: relative;
                              height: calc(22px + var(--doc-pin-max-reach)); padding: 0; }
.doc-date-calendar-top-pins .doc-pin-lead { --doc-pin-reach: 13px; position: absolute; top: 0; }
.doc-date-calendar-top-pins .doc-pin-lead:nth-child(1) { left: 5px; }
.doc-date-calendar-top-pins .doc-pin-lead:nth-child(2) { left: 114px; }
.doc-date-calendar-top-pins .doc-pin-lead:nth-child(3) { right: 5px; }
.doc-date-calendar-side-pin { position: absolute; z-index: 3; left: calc(100% - 4px);
                              display: flex; align-items: center; }
.doc-date-calendar-side-pin::before { content: ""; width: 54px; height: 10px;
  background:
    radial-gradient(circle at 4px 50%, var(--mk-text-muted) 0 3.5px, transparent 4px),
    linear-gradient(var(--mk-hairline-strong), var(--mk-hairline-strong)) 4px center / calc(100% - 4px) 1px no-repeat;
}
.doc-date-calendar-side-pin.is-weekdays { top: 92px; }
.doc-date-calendar-side-pin.is-days { top: 154px; }
.doc-date-range-anatomy { width: 416px; max-width: 100%; margin: 0 auto; }
.doc-date-range-strip { display: grid; grid-template-columns: repeat(13, 32px); }
.doc-date-range-top-pins { --doc-pin-max-reach: 13px; display: grid;
                           grid-template-columns: 48px 32px minmax(0, 1fr) 32px;
                           padding: 0; }
.doc-date-range-top-pins .doc-pin-lead { --doc-pin-reach: 13px; }
.doc-date-range-top-pins .doc-pin-lead:nth-child(1) { grid-column: 2; }
.doc-date-range-top-pins .doc-pin-lead:nth-child(2) { grid-column: 3; justify-self: center; }
.doc-date-range-top-pins .doc-pin-lead:nth-child(3) { grid-column: 4; }
.doc-date-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                         gap: var(--mk-space-5); margin: var(--mk-space-5) 0; }
.doc-date-variant-grid figure { min-width: 0; margin: 0; }
.doc-date-variant-grid figcaption { display: grid; gap: 2px; min-height: 64px;
                                    margin: 0; padding: 0 0 var(--mk-space-3);
                                    border-bottom: 1px solid var(--mk-hairline-mid); }
.doc-date-variant-grid figcaption strong { font-family: var(--mk-font-app); font-size: var(--mk-text-sm);
                                           font-weight: 600; color: var(--mk-text); }
.doc-date-variant-grid figcaption span { font-family: var(--mk-font-app); font-size: var(--mk-text-xs);
                                         color: var(--mk-text-muted); }
.doc-date-variant-grid .doc-specimen { min-height: 350px; height: 350px; margin: 0;
                                      padding: var(--mk-space-4) 0 0; overflow: visible;
                                      border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.doc-date-variant-grid .doc-date-calendar { transform-origin: center; }
.doc-date-day-sample { display: inline-grid; grid-template-columns: 32px; }
.doc-date-span-sample { display: inline-grid; grid-template-columns: repeat(3, 32px); }
.doc-date-day-focus { outline: 2px solid var(--mk-camel-mid); outline-offset: -2px; }

@media (max-width: 980px) {
  .doc-date-variant-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-date-calendar-anatomy { margin-inline: auto; }
}

.doc-stepper-anatomy { width: max-content; }
.doc-stepper-anatomy .mk-stepper { width: max-content; justify-self: start; }
.doc-stepper-pins {
  --doc-pin-max-reach: 14.5px;
  grid-template-columns: 44px 26px 44px;
  gap: 0;
  padding: 0 1px;
}
.doc-stepper-pins .doc-pin-lead:nth-child(1),
.doc-stepper-pins .doc-pin-lead:nth-child(3) { --doc-pin-reach: 13.5px; }
.doc-stepper-pins .doc-pin-lead:nth-child(2) { --doc-pin-reach: 14.5px; }

.doc-toggle-segmented-pins {
  --doc-pin-max-reach: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 1px;
}
.doc-toggle-segmented-pins .doc-pin-lead { --doc-pin-reach: 1px; }

.doc-toggle-switch-pins {
  --doc-pin-max-reach: 3px;
  grid-template-columns: repeat(2, 24px);
  gap: 0;
  padding: 0;
}
.doc-toggle-switch-pins .doc-pin-lead {
  --doc-pin-reach: 3px;
  grid-column: 2;
  margin-left: -1px;
}

.doc-filter-chip-pins {
  --doc-pin-max-reach: 10.5px;
  grid-template-columns: minmax(0, 1fr) 12px;
  gap: 6px;
  padding: 0 10px;
}
.doc-filter-chip-pins .doc-pin-lead:first-child { --doc-pin-reach: 8px; }
.doc-filter-chip-pins .doc-pin-lead:last-child {
  --doc-pin-reach: 10.5px;
  margin-left: -1px;
}

/* The badge's own box: 12px inline padding, a 10px dot at L, an 8px gap. The two
   leader columns mirror that so pin 2 lands under the dot and pin 3 under the word. */
.doc-pin-below-badge { grid-template-columns: 10px minmax(0, 1fr); gap: 8px;
                       padding: 0 12px; margin-top: 0; }

/* A block specimen — a table — fills its stage instead of shrinking to content. */
.doc-figure-block { display: grid; width: 100%; }

/* Wider stage for a specimen that is itself a layout. */
.doc-anatomy-wide { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }

/* Table pins stand clear below the card; short leaders, no overlay. */
.doc-pin-below-table { grid-template-columns: max-content max-content; gap: 64px;
                       padding: 0 24px; margin-top: 0; }
.doc-pin-below-table .doc-pin-lead.is-up::after { height: 12px; }

/* Page-specific connector grids come after the shared pin rows. The cascade order is
   intentional: the shared flex/grid defaults above must not collapse a component's
   measured anatomy tracks back to the generic two-column row. */
.doc-pin-above.doc-choice-pins {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.doc-pin-above.doc-card-top-pins {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 102px 44px;
  gap: 0;
  padding: 0 16px;
}
.doc-card-top-pins .doc-pin-lead:nth-child(3) { transform: translateX(9px); }
.doc-pin-below.doc-card-bottom-pins {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 0;
  padding: 0 16px;
}

.doc-pin-above.doc-expander-top-pins {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px;
  gap: 0;
  padding: 0 14px;
}
.doc-pin-below.doc-expander-bottom-pins {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.doc-pin-above.doc-toast-pins {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0;
  padding: 0 14px;
}
.doc-pin-below.doc-toast-bottom-pins {
  display: grid;
  grid-template-columns: 3px 42px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

@media (max-width: 1200px) {
  .doc-row-action-anatomy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mk-space-6);
  }
  .doc-row-action-anatomy .doc-anatomy-stage { min-height: 180px; }
}

/* ── State matrix ───────────────────────────────────────────────────────────
   Rest, blocked and busy are real markup and render themselves. Hover and focus
   belong to the pointer and the keyboard, so their cells are live controls the
   reader operates — the page shows the real thing rather than a painted copy of
   it that could drift from the component.
   ───────────────────────────────────────────────────────────────────────── */

.doc-states { width: 100%; border-collapse: collapse; }

.doc-states thead th {
  font-family: var(--mk-font-app-caps);
  font-size: var(--mk-text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mk-text-label);
  text-align: left;
  padding: 0 var(--mk-space-5) var(--mk-space-3) 0;
  border-bottom: 1px solid var(--mk-hairline-mid);
}

.doc-states tbody th {
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: var(--mk-space-4) var(--mk-space-4) var(--mk-space-4) 0;
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-text);
}

.doc-states tbody td {
  padding: var(--mk-space-4) var(--mk-space-4) var(--mk-space-4) 0;
  vertical-align: middle;
  font-family: var(--mk-font-app);
  font-size: var(--mk-text-sm);
  color: var(--mk-text-muted);
}

.doc-states tbody tr + tr th,
.doc-states tbody tr + tr td { border-top: 1px solid var(--mk-hairline); }

/* Grid view, as on .doc-matrix: vertical rules close the columns, outer edges open. */
.doc-states thead th + th,
.doc-states tbody th + td,
.doc-states tbody td + td {
  border-left: 1px solid var(--mk-hairline);
  padding-left: var(--mk-space-4);
}

/* A cell that has nothing to show. It used to say so in words — "Not carried" — and in a
   states matrix that backfired: the phrase sat at the same quiet ink as the blocked QUIET
   button two cells away, so a reader scanning the row could not tell the live specimen
   from the documentation's note about a missing one (Ihor, 08-19, on the dark theme, where
   the two were indistinguishable). The absence is a MARK now, and the dash is the system's
   own sign for emptiness — nothing about it can be misread as a control. What the absence
   means is already said in the row's "what changes" sentence, so the words were redundant
   too. Dropping the ink further was the other way out and it is closed: the blocked label
   has to stay readable, because the whole point of blocking it with aria-disabled is that
   its reason can be read. */
.doc-na { font-family: var(--mk-font-app); font-size: var(--mk-text-sm);
          color: var(--mk-text-quiet); }

/* the quiet parenthetical beside a class name — "(default)" and its kind */
.doc-quiet-mark { font-style: normal; color: var(--mk-text-quiet); }

/* placeholder tiles for the layout primitives — structure made visible */
.doc-tile { background: var(--mk-wash); border: 1px solid var(--mk-hairline);
            border-radius: var(--mk-radius-compact); padding: 8px 14px;
            font-family: var(--mk-font-app); font-size: var(--mk-text-sm);
            color: var(--mk-text-muted); text-align: center; }