/* ── Pare docs ───────────────────────────────────────────────
   Loaded only by the Pare documentation pages (src/layouts/DocsPage.astro),
   after style.css, so no other page can change. Everything here reads
   Pare tokens: no raw colours; margins, paddings and gaps read the
   semantic space roles, and only the specimen sizes (the token
   previews, swatches and bars) read the --space-* scale directly. The pages use
   the case study template as it is (.case-hero, .case-body, .case-toc,
   .case-flow, .case-section, .spec, .comp-list, .code-block); these rules
   add the cover-place preview, the token and props tables, do / don't,
   the index cards and their previews. */

/* ── Component blocks: a live preview, then two panels side by side ── */
.docs-block-preview { margin-top: var(--gap-group); }
.docs-block-preview .docs-hero-preview { min-height: 240px; }
/* A component's blocks: one column, 24px apart, whatever the block. */
.docs-block-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); margin-top: var(--gap-group); }
html body .case-section .docs-block-stack > * { margin: 0; }
.docs-token-set + .docs-token-set .spec, .docs-token-filter + .docs-token-set .spec { margin-top: var(--gap-group); }
.docs-token-set .spec + .spec { margin-top: var(--gap-group); }

.docs-hero-preview {
  display: flex; align-items: center; justify-content: center; min-height: 320px; padding: var(--gap-intro);
  overflow: hidden; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); pointer-events: none;
}
.docs-hero-preview > * { max-width: 100%; }
.docs-hero-preview .stats, .docs-hero-preview .overview-list, .docs-hero-preview .compare, .docs-hero-preview figure,
.docs-hero-preview .control-demo, .docs-hero-preview .docs-mini-hero, .docs-hero-preview blockquote { width: 100%; margin: 0; }
.docs-hero-preview .point, .docs-hero-preview .option { background: var(--background); }
.docs-hero-preview .docs-mini-card { width: 60%; }
.docs-hero-preview .docs-mini-track { width: 100%; }
.docs-hero-card { width: 100%; padding: var(--gap-block); border-radius: var(--radius-md); background: var(--background); box-shadow: var(--shadow-sm); }
html body .docs-hero-card .docs-hero-card-title { margin: 0 0 var(--gap-inline); color: var(--foreground); font-size: var(--title-size); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
html body .docs-hero-card .docs-hero-card-text { margin: 0; color: var(--muted-foreground); font-size: var(--body3-size); }
.docs-hero-card .action-row { margin-top: var(--gap-group); }
.docs-hero-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--gap-inline) var(--gap-group); border-radius: 10px; background: var(--background); border-bottom: 1px solid var(--border); }  /* not a card: keeps the old 10px, outside --radius-card */
.docs-hero-chips { display: flex; flex-direction: column; gap: var(--gap-block); }
.docs-hero-chips .comp-chips { margin: 0; }
.docs-hero-form { width: 100%; padding: var(--gap-block); border-radius: var(--radius-md); background: var(--foreground); }
.docs-hero-form .cp-field + .cp-field { margin-top: var(--gap-group); }
html body .docs-alternatives { max-width: 68ch; margin: var(--gap-group) 0 0; color: var(--muted-foreground); }
@media (max-width: 1000px) {
  .docs-hero-preview { min-height: 240px; padding: var(--gap-group); }
}

/* Copy as Markdown, in the page header */
.docs-copy-md { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-row); margin: var(--gap-group) 0 0; }
.docs-copy-status { font-size: var(--body3-size); color: var(--muted-foreground); }

/* ── Usage: do and don't, compared in one card ────────────── */
.docs-dodont {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--gap-intro);
}
.docs-dodont-col.is-do { padding-right: var(--gap-block); }
.docs-dodont-col.is-dont { padding-left: var(--gap-block); border-left: 1px solid var(--border); }
.docs-dodont .spec-title { display: flex; align-items: center; gap: var(--gap-inline); }
.docs-dodont .spec-title::before { content: ""; width: var(--space-4); height: 2px; background: currentColor; }
.docs-dodont .is-do .spec-title { color: var(--foreground); }
.docs-dodont .is-dont .spec-title { color: var(--primary); }
.docs-rules { margin: 0; padding: 0; list-style: none; }
.docs-rules li {
  padding: var(--gap-inline) 0;
  border-top: 1px solid var(--border);
  font-size: var(--body3-size);
  line-height: 1.45;
  color: var(--muted-foreground);
}
.docs-rules li:first-child { border-top: 0; padding-top: 0; }

/* ── API reference: one props table per component ──────────── */
.docs-props { width: 100%; margin-top: var(--gap-group); border-collapse: collapse; }
.docs-props th,
.docs-props td {
  padding: var(--gap-inline) var(--gap-row) var(--gap-inline) 0;
  border-top: 1px solid var(--border);
  font-size: var(--body3-size);
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}
.docs-props th {
  border-top: 0;
  padding-top: 0;
  color: var(--faint-foreground);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
.docs-props td { color: var(--faint-foreground); }
.docs-props td:first-child { color: var(--foreground-soft); font-weight: 500; white-space: nowrap; }
.docs-props td:last-child { padding-right: 0; }
.docs-props code,
.docs-code-inline {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  color: var(--foreground-soft);
  overflow-wrap: anywhere;
}
.docs-source { margin: 0; font-size: var(--body3-size); color: var(--faint-foreground); }
@media (max-width: 760px) {
  .docs-props thead { display: none; }
  .docs-props tr { display: block; padding: var(--gap-inline) 0; border-top: 1px solid var(--border); }
  .docs-props tbody tr:first-child { border-top: 0; padding-top: 0; }
  .docs-props td { display: block; padding: 0; border-top: 0; }
  .docs-props td:first-child { white-space: normal; }
  .docs-props td[data-label]:not(:first-child)::before {
    content: attr(data-label) " · ";
    color: var(--faint-foreground);
  }
}

/* ── Overview: the family of systems ───────────────────────── */
.docs-family {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-5) minmax(0, 1fr);
  align-items: stretch;
}
.docs-tier {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--gap-group);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.docs-tier-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--label-foreground);
}
html body .docs-tier h3 { margin: 0; font-size: var(--title-size); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--foreground); }
.docs-family + .comp-list { margin-top: var(--gap-block); }
.docs-tier p { margin: 0; font-size: var(--body3-size); color: var(--muted-foreground); }
.docs-tier .comp-chips { margin-top: auto; padding-top: var(--gap-inline); }
.docs-tier-arrow { display: flex; align-items: center; justify-content: center; color: var(--faint-foreground); }
.docs-tier-arrow svg { width: 16px; height: 16px; }
@media (max-width: 1024px) {
  .docs-family { grid-template-columns: minmax(0, 1fr); }
  .docs-tier-arrow { height: var(--space-6); }
  .docs-tier-arrow svg { transform: rotate(90deg); }
}/* ── Overview: the page map, as cards that link ───────────── */
/* ── Components index: a live preview on top of each card ──
   The preview is inert and hidden from assistive tech; the title's link
   stretches over the whole card, so the card is one target. */

.docs-card-preview {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-inline);
  height: 168px; margin-bottom: var(--gap-inline); padding: var(--gap-group);
  overflow: hidden; border-radius: var(--radius-sm); background: var(--background);
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.docs-card-preview > * { margin: 0; max-width: 100%; }
.docs-card-preview figure { width: 72%; margin: 0; }
.docs-card-preview figure img { border-radius: var(--radius-sm); }
.docs-card-preview .stats, .docs-card-preview .overview-list, .docs-card-preview .control-demo { width: 100%; }
.docs-card-preview .compare { width: 100%; gap: var(--gap-inline); grid-template-columns: 1fr 1fr; }
.docs-card-preview .option, .docs-card-preview .point { padding: var(--gap-row); transform-origin: top center; }
.docs-card-preview.is-option .option { width: 70%; }
.docs-card-preview blockquote { max-width: 100%; }

/* ── Examples: explanation, live example, code ───────────── */
.docs-example-text { margin: 0 0 var(--gap-group); max-width: 68ch; font-size: var(--body3-size); color: var(--muted-foreground); }
.docs-example-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-row);
  padding: var(--gap-block);
  border-radius: var(--radius-md);
  background: var(--background);
  box-shadow: var(--shadow-sm);
}
.docs-example-live > * { min-width: 0; max-width: 100%; }
.docs-example-live > .is-block,
.docs-example-live > .stats,
.docs-example-live > .overview-list,
.docs-example-live > .entry-list,
.docs-example-live > .compare,
.docs-example-live > figure,
.docs-example-live > blockquote,
.docs-example-live > .grid-3,
.docs-example-live > .comp-points,
.docs-example-live > .state-grid,
.docs-example-live > .control-demo,
.docs-example-live > .cp-field { flex: 1 1 100%; margin: 0; }
.docs-example-live.is-white { background: var(--foreground); color: var(--background); }
html body .docs-code-label { line-height: 1.3; margin: var(--gap-group) 0 0; font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint-foreground); }

/* ── Token tables ──────────────────────────────────────────── */
.docs-token-filter { max-width: 420px; margin-top: var(--gap-subhead); margin-bottom: var(--gap-block); }
.docs-token-filter .docs-source { margin-top: var(--gap-inline); }
.docs-tokens .docs-token-preview { width: calc(var(--space-8) + var(--gap-row)); padding-right: var(--gap-row); vertical-align: middle; }
.docs-tokens td:first-child { color: inherit; font-weight: 400; }
.docs-tokens td:nth-child(2) code { color: var(--foreground); white-space: nowrap; overflow-wrap: normal; }
.docs-swatch { display: block; width: var(--space-6); height: var(--space-5); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-strong); }
.docs-font-sample { display: block; color: var(--foreground); line-height: 1; white-space: nowrap; }
.docs-space-bar { display: block; height: var(--space-3); background: var(--muted-foreground); border-radius: 2px; }
.docs-radius-box { display: block; width: var(--space-6); height: var(--space-6); border: 1px solid var(--input); border-bottom: 0; border-right: 0; }
.docs-shadow-box { display: block; width: var(--space-6); height: var(--space-5); border-radius: var(--radius-md); background: var(--card); }
.docs-ease { display: block; position: relative; width: var(--space-6); height: var(--space-2); }
.docs-ease span { position: absolute; left: 0; top: 0; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--foreground); transition: transform var(--docs-duration, 0.9s) var(--docs-ease, var(--ease)); }
.docs-tokens tr:hover .docs-ease span { transform: translateX(var(--space-5)); }
.docs-on-white { color: var(--faint-foreground); }
[data-token-group][hidden] { display: none; }
/* The primitive set: one panel, a small table per kind */
.docs-token-sub:not([hidden]) ~ .docs-token-sub { margin-top: var(--gap-block); }  /* only below a table still shown */
html body .spec .docs-token-subtitle { margin: 0; color: var(--foreground); font-size: var(--body3-size); font-weight: 500; line-height: 1.5; letter-spacing: normal; }
.docs-token-sub .docs-props { margin-top: var(--gap-inline); }
/* Every table has the same fixed columns, so the tiers line up; the
   preview column holds the widest preview, the 96px space bar. */
@media (min-width: 761px) {
  .docs-tokens { table-layout: fixed; }
  .docs-tokens th:nth-child(1) { width: calc(var(--space-8) + var(--gap-row)); }
  .docs-tokens th:nth-child(2) { width: 30%; }
  .docs-tokens th:nth-child(3) { width: 28%; }
  .docs-tokens td:nth-child(3) > code { white-space: nowrap; overflow-wrap: normal; }
  .docs-tokens td:nth-child(3) > code.docs-token-long { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .docs-tokens tr { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--gap-row); }
  .docs-tokens td:nth-child(2) code { white-space: normal; }
  .docs-tokens td.docs-token-preview { grid-row: span 3; width: auto; }
  html body .docs-tokens td[data-label="Token"]::before { content: none; }
}

/* samples of the case hero's parts, outside a hero */
.docs-eyebrow-sample {
  display: flex; align-items: center; gap: var(--gap-row); width: fit-content; margin: 0 0 var(--gap-row);
  font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted-foreground);
}
.docs-eyebrow-sample::after { content: ""; width: var(--space-6); height: 1px; background: var(--border); }
html body .docs-hero-sample { margin: 0 0 var(--gap-group); font-size: var(--h3-size); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--foreground); }

/* ── Anatomy: numbered parts ─────────────────────────────── */
.docs-parts { margin: 0; padding: 0; list-style: none; counter-reset: part; }
.docs-parts li {
  counter-increment: part; display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--gap-inline);
  padding: var(--gap-inline) 0; border-top: 1px solid var(--border);
  font-size: var(--body3-size); line-height: 1.45; color: var(--faint-foreground);
}
.docs-parts li:first-child { border-top: 0; padding-top: 0; }
.docs-parts li::before {
  content: counter(part, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--label-size);
  letter-spacing: var(--label-track); line-height: 1.8; color: var(--label-foreground); font-variant-numeric: tabular-nums;
}
.docs-parts b { display: block; font-weight: 500; color: var(--foreground-soft); }

/* ── Specs: tokens by part and state ──────────────────────── */
.docs-token-rows td:first-child { white-space: normal; }
.docs-token-rows td:first-child code { color: var(--foreground-soft); }/* ── Index previews for pages that aren't components ─────── */

.docs-mini-nav { display: flex; align-items: center; gap: var(--gap-row); font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-foreground); }
.docs-mini-toc { display: flex; flex-direction: column; gap: var(--gap-tight); width: 60%; }
.docs-mini-hero { width: 100%; }
.docs-mini-hero .docs-hero-sample { margin: 0; }
.docs-mini-card { width: 40%; }
.docs-mini-track { display: flex; gap: var(--gap-inline); width: 80%; }
.docs-mini-track > * { flex: 1; }
html body .docs-card-preview .docs-mini-footer { margin: 0; font-size: var(--body3-size); color: var(--muted-foreground); }
.docs-card-preview .project-card { pointer-events: none; }

/* a subhead sits 24px above the block it introduces, intro or not */
.case-section .case-subhead + .spec,
.case-section .case-subhead + .docs-dodont { margin-top: var(--gap-group); }

/* ── Specs: the token table scrolls inside itself on narrow screens ── */
.docs-table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.docs-token-rows { min-width: 720px; table-layout: fixed; }
.docs-token-rows th:nth-child(1) { width: 30%; }
.docs-token-rows th:nth-child(2) { width: 16%; }
.docs-token-rows th:nth-child(3) { width: 26%; }
.docs-token-rows th:nth-child(4) { width: 28%; }
html body .docs-token-rows td:first-child { white-space: normal; overflow-wrap: anywhere; }
.docs-token-rows td:nth-child(3) { white-space: nowrap; }
.docs-token-rows td:nth-child(3) code { overflow-wrap: normal; }
@media (max-width: 760px) {
  /* keep it a table (the props table stacks; this one scrolls) */
  .docs-token-rows thead { display: table-header-group; }
  .docs-token-rows tr { display: table-row; padding: 0; border-top: 0; }
  .docs-token-rows td { display: table-cell; padding: var(--gap-inline) var(--gap-row) var(--gap-inline) 0; border-top: 1px solid var(--border); }
}

@media (max-width: 860px) {
  .docs-dodont { grid-template-columns: minmax(0, 1fr); }
  .docs-dodont-col.is-do { padding-right: 0; }
  .docs-dodont-col.is-dont { padding-left: 0; border-left: 0; margin-top: var(--gap-group); padding-top: var(--gap-group); border-top: 1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce) {
  .docs-ease span { transition: none; }
}

/* A link from a style to its token table, under the style's last block. */
.docs-more { margin-top: var(--gap-row); font-size: var(--body3-size); color: var(--muted-foreground); }

/* A card that belongs to the component block above it, such as the contact panel under Input field. */
html body .case-section .docs-after-block { margin-top: var(--gap-group); }