/* api.css — the docs family's API reference page (queue row 374, 2026-10-15y).
 * Hearth tokens only; light pinned. No entrance animation anywhere, so nothing can freeze blank. */
*{ box-sizing:border-box; }
body{ margin:0; background:var(--hearth-canvas); color:var(--hearth-text); font-family:var(--font-sans);
  font-size:var(--text-base); line-height:var(--leading-normal); }
a{ color:var(--signal-emphasis); }
a:focus-visible, input:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
code, .ds-mono{ font-family:var(--font-mono); font-size:.86em; }

.ds-strip{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--hearth-border); background:var(--hearth-surface); font-size:var(--text-sm); }
.ds-strip-cur{ font-weight:var(--weight-semibold); }

.ds-page{ max-width:880px; margin:0 auto; padding:var(--space-12) var(--space-4) var(--space-24); }
.ds-cover h1{ font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:var(--text-4xl);
  line-height:var(--leading-tight); margin:var(--space-1) 0 var(--space-3); }
.ds-eyebrow{ margin:0; font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--hearth-text-muted); }
.ds-lede{ margin:0; font-size:var(--text-md); color:var(--hearth-text-secondary); }
.ds-meta{ margin:var(--space-3) 0 0; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--hearth-text-muted); }

.ds-intro p{ color:var(--hearth-text-secondary); }
/* A full 1px hairline frame with a leading status dot — not a left-border accent bar, which the house
   grammar retired (ui_kits/REDESIGN.md). The ◐ glyph in the sentence stays the non-colour signal. */
.ds-absence{ margin:var(--space-6) 0; padding:var(--space-4); border:1px solid var(--hearth-border-strong);
  border-radius:var(--radius-md); background:var(--hearth-sunken); }
.ds-absence strong{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-1); }
.ds-absence strong::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--hearth-text-muted); }
.ds-absence p{ margin:var(--space-2) 0 0; color:var(--hearth-text-secondary); }

.ds-filter{ margin:var(--space-6) 0; }
.ds-filter label{ display:block; font-weight:var(--weight-semibold); font-size:var(--text-sm); margin-bottom:var(--space-1); }
.ds-filter input{ width:100%; padding:var(--space-2) var(--space-3); font:inherit; border:1px solid var(--hearth-border-input);
  border-radius:var(--radius-sm); background:var(--hearth-surface); color:var(--hearth-text); }
.ds-hint{ margin:var(--space-1) 0 0; font-size:var(--text-xs); color:var(--hearth-text-muted); }

.ds-state{ padding:var(--space-4); border:1px dashed var(--hearth-border-strong); border-radius:var(--radius-md);
  color:var(--hearth-text-secondary); }
.ds-state.is-error{ border-style:solid; border-color:var(--status-down-fg); color:var(--hearth-text); }

.ds-toc{ columns:2 220px; margin:var(--space-4) 0 var(--space-8); padding:0; list-style:none; font-size:var(--text-sm); }
.ds-toc li{ break-inside:avoid; padding:2px 0; }
.ds-toc .ds-n{ color:var(--hearth-text-muted); }

.ds-group{ margin:var(--space-8) 0 0; }
.ds-group h2{ font-family:var(--font-mono); font-size:var(--text-md); font-weight:var(--weight-semibold); margin:0;
  padding-bottom:var(--space-2); border-bottom:1px solid var(--hearth-border); overflow-wrap:anywhere; }
.ds-group h2 .ds-surface{ font-family:var(--font-sans); font-weight:var(--weight-regular); color:var(--hearth-text-secondary); }
.ds-group h2 .ds-n{ font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-regular); color:var(--hearth-text-muted); margin-inline-start:var(--space-2); }
.ds-group .ds-gdesc{ margin:var(--space-1) 0 0; font-size:var(--text-xs); color:var(--hearth-text-muted); }

.ds-op{ padding:var(--space-3) 0; border-bottom:1px solid var(--hearth-border-subtle); }
.ds-op-line{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:baseline; }
.ds-verb{ display:inline-block; min-width:4.5em; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-bold); }
.ds-path{ font-family:var(--font-mono); font-size:var(--text-sm); overflow-wrap:anywhere; }
.ds-sum{ margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--hearth-text-secondary); }
.ds-reason{ margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--hearth-text-secondary); }
.ds-reason b{ font-weight:var(--weight-semibold); color:var(--hearth-text); }

/* The three chips, and only three. Each carries a glyph or a name, never colour alone. */
.ds-chip{ display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:var(--radius-full);
  font-size:var(--text-xs); line-height:1.6; border:1px solid var(--hearth-border-strong); background:var(--hearth-surface); }
.ds-chip-perm{ font-family:var(--font-mono); }
.ds-chip-step{ border-color:var(--signal-emphasis); color:var(--signal-emphasis); background:var(--sev-info-bg); }
.ds-chip-open{ border-style:dashed; color:var(--hearth-text); background:var(--hearth-sunken); }

.ds-empty{ margin:var(--space-6) 0; color:var(--hearth-text-secondary); }

@media (max-width:600px){
  .ds-cover h1{ font-size:var(--text-3xl); }
  .ds-page{ padding-top:var(--space-8); }
}
@media print{
  .ds-filter, .ds-strip{ display:none; }
}