/* ----------------------------------------------------------------
   docs-utilities.css
   Hand-written classes used by documentation pages only.

   These utilities only affect elements that explicitly opt in by
   using the class name, so they cannot leak into component styles.

   What lives here, and what doesn't:
   - Geometry (display, flex/grid axes, gap/margin/padding scale,
     widths) is NOT duplicated here - every doc page loads the
     shipped theme/utils/sizing.css + theme/utils/layout.css modules, whose
     utilities are dogfooded directly (scripts/lib/audit.ts counts
     them as defined). Typography can't move there: the sizing
     contract test pins those modules to density/scale only.
   - Semantic doc patterns (headings, code cards, swatches, source
     listings) stay: they carry token colors, fonts and
     page-chrome geometry no consumer needs.
   - This sheet is UNLAYERED, so a here-defined class beats the
     layered modules (and all.css) on shared properties; keep
     declarations minimal and prefer the module class first.
---------------------------------------------------------------- */

/* -- Doc-site typography ------------------------------------
   Fixed px values (not density-scaled); the shipped product
   teaches semantic typography (.h1–.h4, .lead, .muted, .small). */
.text-sm               { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs               { font-size: 0.75rem;  line-height: 1rem; }
.text-lg               { font-size: 1.125rem; line-height: 1.75rem; }
.text-muted-foreground { color: var(--muted-foreground); }
.text-destructive      { color: var(--destructive); }
.font-medium           { font-weight: 500; }
.text-center           { text-align: center; }
.leading-relaxed       { line-height: 1.625; }

/* -- Repeated doc patterns (pattern classes, not utilities) ------
   Every rule here replaces an inline style that was copy-pasted across
   many pages. Keep declarations byte-identical to the styles they
   replaced so refactored pages render exactly as before. */

/* Display section heading - the <H2> component renders this class. */
.h2-display {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 0.875rem;
}
/* After prose the paragraph's own margin spaces the heading; after a boxed
   block (a figure, a code window, a table card) nothing does - give it room. */
:is(figure, [data-code-static], .code-card) + .h2-display {
  margin-top: 2rem;
}

/* Sub-heading inside demo panels (toc demo). */
.h3-demo { font-size: 0.9375rem; margin: 0.75rem 0 0.25rem; }

/* Hand-rolled compact table inside a CodeCard/TableCard (state-api page). */
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.mini-table th { padding: 0.375rem 0; text-align: left; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.mini-table td { padding: 0.375rem 0; border-bottom: 1px solid var(--border); }

/* Mono metadata line (file/dir listings, token hints). */
.mono-meta { font-size: 0.75rem; font-family: var(--font-mono); color: var(--muted-foreground); }

/* compound `.demo-label.*` selectors: this sheet loads BEFORE layout.css, so
   a single class would lose the cascade to `.demo-label`'s margin there. */
.demo-label.demo-label-w5 { width: 5rem; margin: 0; }
.demo-label.demo-label-w75 { width: 7.5rem; margin: 0; }
.demo-label.demo-label-inline { margin: 0; }
.demo-label.demo-label-end { margin: 0; width: 2.5rem; text-align: end; flex-shrink: 0; }

/* Static slide inside a carousel demo (sized via inline flex-basis). */
.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  font-size: 0.875rem;
  color: var(--foreground);
}

/* Compact-card demo internals (spacing page): title row + body. */
.row-title { margin: 0; font-size: 0.875rem; font-weight: 500; }
.meta-xs { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }

/* Card-title/description overrides - compound selectors: all.css (the
   component bundle, incl. .card-title/.card-description) loads AFTER this
   sheet, so a single class would lose. */
.card-title.card-title-xs { font-size: 0.875rem; }
.card-title.card-title-sm { font-size: 0.9375rem; }
.card-description.card-desc-sm { font-size: 0.8125rem; }

/* Left-aligned Example preview (typography specimens). */
.preview.preview-left { text-align: left; padding: 2.5rem; }

/* Group caption above a small stack (demo columns, code cards). */
.group-label { font-weight: 600; margin-bottom: 0.25rem; }

/* Emphasized line inside demo content (list rows, form labels). */
.item-title { font-size: 0.875rem; font-weight: 500; }

/* Right-aligned token-value meta on swatch rows (replaces
   `text-sm text-muted-foreground ml-auto`). */
.swatch-meta { margin-left: auto; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* Muted header strip of a code/table card (doc-blocks.tsx + hand-rolled). */
.code-card-head { padding: 0.625rem 1rem; background: var(--muted); border-bottom: 1px solid var(--border); }
.code-card-title { font-size: 0.75rem; font-family: var(--font-mono); color: var(--muted-foreground); }
/* Card box (header strip + body): margin-bottom stays per-instance inline. */
.code-card { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
/* The card owns the frame: its code block (Shiki-highlighted or not) is flush
   inside it - no own radius/border/background that would draw rounded inner
   corners under the square header strip. */
.code-card > pre, .code-card-col > pre { border: 0; border-radius: 0; background: transparent; }

/* Bordered muted content box in composition demos (layout page). */
.demo-box { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); color: var(--muted-foreground); padding: 1rem; }

/* §States contract table (StatesTable): raw `.table` markup with five columns
   of very different content. Without column discipline the fixed metadata
   columns squeeze against the long Description and the <code> chips collide
   (reported "very ugly"). Fixed layout + per-column widths + top alignment
   give every column its own lane; the wrap scrolls on narrow screens. */
.states-table-wrap { overflow-x: auto; }
.states-table { table-layout: fixed; min-width: 36rem; }
.states-table th,
.states-table td { vertical-align: top; padding: 0.6rem 0.875rem; }
.states-table th { white-space: nowrap; font-weight: 600; }
/* metadata columns hold tiny chips → fixed narrow lanes; Description gets
   everything left over (fixed layout distributes the remainder to it) */
.states-table .st-state { width: 9rem; }
.states-table .st-type { width: 4.75rem; }
.states-table .st-values { width: 7rem; }
.states-table .st-default { width: 4.75rem; }
.states-table td code { white-space: nowrap; }
.states-table td { text-wrap: pretty; } /* prose columns break evenly, no orphans */

/* Visualization helpers for demo CONTENT - moved out of css/layout.css (site
   chrome) so the CodeExample sandbox sees them: the bridge mirrors this sheet
   into every iframe (STYLE_FRAGMENTS), not the chrome sheet. */
.demo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow: hidden;
}
.demo-tile[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.demo-tile[data-variant="accent"] { background: var(--accent); color: var(--accent-foreground); }
.demo-tile[data-variant="muted"] { background: var(--muted); color: var(--muted-foreground); }
.demo-tile[data-variant="outline"] {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted-foreground);
}
.demo-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.demo-outline { border: 1px dashed var(--border); border-radius: var(--radius-md); }
.demo-stripes { background: repeating-linear-gradient(90deg, transparent 0 11px, var(--border) 11px 12px); }

/* SkillField label (doc-blocks.tsx renders this class). */
.skill-field-label { margin: 0 0 0.5rem; font-weight: 600; font-size: 0.8125rem; font-family: var(--font-mono); }

/* Definition-grid (term/description pairs, accessibility + cascade pages).
   auto-1fr tracks have no shipped equivalent (grid-cols-* is equal-fr only). */
.def-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin-bottom: 1.5rem; align-items: baseline; }
.def-term { font-weight: 600; font-size: 0.8125rem; }

/* Full-bleed column code card (data-attribute-api page). */
.code-card-col { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; }

/* Card-header group heading inside native API tables. */
.table-group-head { font-weight: 600; padding-top: 1rem; color: var(--foreground); }

/* Swatch rows on the theming page (static markup + runtime-generated). */
.swatch-sq { width: 1.875rem; height: 1.875rem; border-radius: var(--radius-sm); border: 1px solid var(--border); flex-shrink: 0; }
.swatch-chip { width: 3rem; height: 1.875rem; background: var(--muted); border: 1px solid var(--border); flex-shrink: 0; }
.swatch-name { margin: 0; font-size: 0.8125rem; font-family: var(--font-mono); }
.swatch-sub { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); font-family: var(--font-mono); }
.swatch-val { margin-left: auto; font-size: 0.75rem; color: var(--muted-foreground); font-family: var(--font-mono); }

/* Accessibility: `.sr-only` ships in theme/utils/accessibility.css (loaded on every
   doc page by DocPage) - dogfooded, not redefined here. */