/* Documentation site styles. Documentation only: nothing here ships with the design system.
 * Everything uses design tokens; the docs are built from Afara components (shell, sidebar, tabs, code blocks, tables) so that the site itself
 * demonstrates the system. Classes are prefixed doc-. */

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

.doc-section { scroll-margin-block-start: calc(var(--layout-header-height) + var(--space-4)); display: grid; grid-template-columns: minmax(0, 72rem); justify-content: center; row-gap: var(--space-5); padding: var(--space-12) var(--app-gutter); border-block-end: 1px solid var(--color-border); }
.doc-section > * { inline-size: 100%; max-inline-size: 64rem; margin: 0; justify-self: start; min-inline-size: 0; }
.doc-section > .doc-wide { max-inline-size: 72rem; }
.doc-section > .doc-eyebrow + h2, .doc-section > h2 + .doc-lede { margin-block-start: calc(-1 * var(--space-3)); }
.doc-section > h3 { margin-block-start: var(--space-5); margin-block-end: calc(-1 * var(--space-3)); }
.doc-section > h3 + .doc-demo, .doc-section > h3 + .doc-wide, .doc-section > h3 + .doc-ramp { margin-block-start: 0; }
.doc-section h3, .doc-h4 { scroll-margin-block-start: calc(var(--layout-header-height) + var(--space-4)); }
.doc-h4 { margin: var(--space-6) 0 var(--space-2); font: var(--type-component-title-weight) var(--type-component-title-size)/1.3 var(--type-component-title-family); }
.doc-eyebrow { margin: 0; font: var(--type-eyebrow-weight) var(--type-eyebrow-size)/var(--type-eyebrow-line-height) var(--type-eyebrow-family); letter-spacing: var(--type-eyebrow-letter-spacing); text-transform: uppercase; color: var(--color-accent-text); }
.doc-lede { font: var(--type-body-lg-weight) var(--type-body-lg-size)/var(--type-body-lg-line-height) var(--type-body-lg-family); color: var(--color-muted-text); max-inline-size: 62ch; }
.doc-prose { max-inline-size: 68ch; }
.doc-prose p, .doc-section p { max-inline-size: 70ch; }
.doc-section ul.doc-list, .doc-section ol.doc-list { padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1-5); max-inline-size: 70ch; }
.doc-muted { color: var(--color-muted-text); font-size: var(--type-body-sm-size); }
.doc-footer { padding: var(--space-8) var(--app-gutter) var(--space-12); display: grid; gap: var(--space-2); color: var(--color-muted-text); font-size: var(--type-body-sm-size); max-inline-size: 64rem; margin-inline: auto; }
.doc-footer p { margin: 0; }
.doc-search-button { gap: var(--space-2); }
.doc-search-button kbd { margin-inline-start: var(--space-2); }
@media (max-width: 767.98px) { .doc-search-button__text, .doc-search-button kbd { display: none; } .doc-search-button { padding-inline: var(--space-3); } }
@media (max-width: 639.98px) { .af-brand__tag { display: none; } .af-segmented__label { padding-inline: var(--space-2); } }
@media (min-width: 1024px) { .doc-sidebar-close { display: none; } }
.af-sidebar__head .af-badge { margin-inline-start: auto; }
@media (max-width: 1023.98px) { .af-sidebar__head .af-badge { margin-inline-start: auto; } }
.af-sidebar .af-nav-item { text-decoration: none; }

/* ── Hero ── */
.doc-hero { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .doc-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.doc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.doc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-px); margin: 0; border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; background: var(--color-border); }
.doc-stats > div { padding: var(--space-4); background: var(--color-surface); }
.doc-stats dt { font: var(--type-label-weight) var(--type-caption-size)/1.3 var(--type-label-family); color: var(--color-muted-text); }
.doc-stats dd { margin: var(--space-1) 0 0; font: var(--type-metric-weight) var(--type-metric-size)/1 var(--type-metric-family); font-variant-numeric: tabular-nums; }

/* ── Demo ── */
.doc-demo { margin: 0; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); overflow: hidden; }
.doc-demo + .doc-demo { margin-block-start: var(--space-2); }
.doc-demo__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); font: var(--type-component-title-weight) var(--type-body-sm-size)/1.3 var(--type-component-title-family); }
.doc-demo__title:empty { display: none; }
.doc-demo__note { font-weight: var(--font-weight-regular); color: var(--color-muted-text); }
.doc-demo__stage { padding: var(--space-6); background: var(--color-canvas); display: block; min-inline-size: 0; }
.doc-demo__stage > * + * { margin-block-start: var(--space-4); }
.doc-demo__stage--cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.doc-demo__stage--cluster > * + * { margin-block-start: 0; }
.doc-demo__stage--stack { display: flex; flex-direction: column; gap: var(--space-4); }
.doc-demo__stage--stack > * + * { margin-block-start: 0; }
.doc-demo__stage--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); }
.doc-demo__stage--grid > * + * { margin-block-start: 0; }
.doc-demo__stage--flush { padding: 0; }
.doc-demo__stage--tall { min-block-size: 22rem; }
.doc-demo__stage--narrow > * { max-inline-size: 26rem; }
.doc-demo__stage--center { display: grid; place-items: center; }
.doc-demo__both { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899.98px) { .doc-demo__both { grid-template-columns: minmax(0, 1fr); } }
.doc-demo__pane { position: relative; background: var(--color-canvas); color: var(--color-text); min-inline-size: 0; }
.doc-demo__pane + .doc-demo__pane { border-inline-start: 1px solid var(--color-border); }
@media (max-width: 899.98px) { .doc-demo__pane + .doc-demo__pane { border-inline-start: 0; border-block-start: 1px solid var(--color-border); } }
.doc-demo__pane::before { content: attr(data-pane); position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-3); font: var(--type-metadata-weight) var(--type-metadata-size)/1 var(--type-metadata-family); color: var(--color-muted-text); z-index: 1; }
.doc-demo__code { border-block-start: 1px solid var(--color-border); }
.doc-demo__code > summary { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--space-10); padding: var(--space-1) var(--space-4); cursor: pointer; font: var(--font-weight-medium) var(--type-body-sm-size)/1.3 var(--font-body); color: var(--color-muted-text); list-style: none; }
.doc-demo__code > summary::-webkit-details-marker { display: none; }
.doc-demo__code > summary::before { content: ""; inline-size: var(--space-2); block-size: var(--space-2); border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-fast) var(--ease-standard); }
.doc-demo__code[open] > summary::before { transform: rotate(45deg); }
@media (hover: hover) { .doc-demo__code > summary:hover { color: var(--color-text); } }
.doc-demo__code > .af-tabs { padding: 0 var(--space-4) var(--space-4); }
.doc-demo__code .af-code { margin-block-start: var(--space-3); }
.doc-tokenlist ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-3) 0 0; list-style: none; }

/* ── Accessibility notes, do / don't ── */
.doc-a11y { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--status-info-border); border-inline-start-width: var(--space-1); border-radius: var(--card-radius); background: var(--status-info-bg); font-size: var(--type-body-sm-size); }
.doc-a11y > .af-icon { color: var(--status-info-solid); margin-block-start: 2px; }
.doc-a11y h4 { margin: 0 0 var(--space-1); font: var(--font-weight-semibold) var(--type-body-sm-size)/1.4 var(--font-body); }
.doc-a11y ul { margin: 0; padding-inline-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.doc-a11y code { background: transparent; }
.doc-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-4); }
.doc-rule { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); }
.doc-rule__label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--font-weight-semibold) var(--type-body-sm-size)/1.3 var(--font-body); }
.doc-rule--do .doc-rule__label { color: var(--status-success-text); }
.doc-rule--dont .doc-rule__label { color: var(--status-danger-text); }
.doc-rule--do { border-block-start: var(--space-1) solid var(--status-success-solid); }
.doc-rule--dont { border-block-start: var(--space-1) solid var(--status-danger-solid); }
.doc-rule p { margin: 0; font-size: var(--type-body-sm-size); }

/* ── Generated token blocks ── */
.doc-ramp { margin-block-start: var(--space-5); }
.doc-ramp__title { margin: 0 0 var(--space-2); font: var(--type-component-title-weight) var(--type-body-sm-size)/1.3 var(--type-component-title-family); }
.doc-ramp__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.doc-chip { display: grid; gap: var(--space-0-5); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--type-caption-size); min-inline-size: 0; }
.doc-chip__swatch { display: block; block-size: var(--space-8); border-radius: var(--radius-xs); background: var(--swatch); border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); }
.doc-chip__swatch--lg { inline-size: var(--space-10); block-size: var(--space-6); }
.doc-chip__name { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.doc-chip__hex { background: none; border: 0; padding: 0; color: var(--color-muted-text); }
.doc-table th[scope="row"] code { white-space: nowrap; }
.doc-table { --table-min: 34rem; }
.doc-space { display: block; inline-size: var(--w); block-size: var(--space-3); background: var(--color-accent-solid); border-radius: var(--radius-xs); max-inline-size: 100%; }
.doc-radii { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.doc-radii li { display: grid; gap: var(--space-1); justify-items: start; font-size: var(--type-caption-size); }
.doc-radii__box { inline-size: var(--space-16); block-size: var(--space-16); border: 2px solid var(--color-accent-solid); border-radius: var(--r); background: var(--color-accent-bg); }
.doc-shadows { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-6); margin: 0; padding: var(--space-6); list-style: none; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.doc-shadows li { display: grid; gap: var(--space-2); font-size: var(--type-caption-size); align-content: start; }
.doc-shadows__box { display: block; block-size: var(--space-16); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--sh); }
.doc-type-spec { display: block; max-inline-size: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tokengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); align-items: start; }
.doc-tokengroup { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.doc-tokengroup summary { padding: var(--space-2) var(--space-3); cursor: pointer; font-weight: var(--font-weight-medium); font-size: var(--type-body-sm-size); }
.doc-tokengroup ul { margin: 0; padding: 0 var(--space-3) var(--space-3); list-style: none; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--type-caption-size); }
.doc-tokengroup code { overflow-wrap: anywhere; }
.doc-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.doc-icon { display: grid; justify-items: center; gap: var(--space-2); inline-size: 100%; padding: var(--space-3) var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; font: var(--type-caption-weight) var(--type-caption-size)/1.2 var(--type-caption-family); }
.doc-icon .af-icon { inline-size: var(--icon-size-lg); block-size: var(--icon-size-lg); }
.doc-icon__name { overflow-wrap: anywhere; text-align: center; color: var(--color-muted-text); }
@media (hover: hover) { .doc-icon:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); } }
.doc-icon[data-copied="true"] { border-color: var(--color-accent-solid); }

/* ── Playground ── */
.doc-playground { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); overflow: hidden; }
@media (min-width: 900px) { .doc-playground { grid-template-columns: 16rem minmax(0, 1fr); } }
.doc-playground__controls { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-block-end: 1px solid var(--color-border); background: var(--color-surface-inset); }
@media (min-width: 900px) { .doc-playground__controls { border-block-end: 0; border-inline-end: 1px solid var(--color-border); } }
.doc-playground__controls .af-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.doc-playground__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-inline-size: 0; }
.doc-playground__code, .doc-playground__bar { min-inline-size: 0; }
.doc-playground__code pre { overflow-x: auto; }
.doc-playground__stage { display: grid; place-items: center; min-block-size: 11rem; padding: var(--space-8) var(--space-6); background: var(--color-canvas); }
.doc-playground__stage[data-bg="surface"] { background: var(--color-surface); }
.doc-playground__stage > * { max-inline-size: 100%; }
.doc-playground__code { border-block-start: 1px solid var(--color-border); padding: var(--space-4); }
.doc-playground__bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--color-border); font-size: var(--type-caption-size); color: var(--color-muted-text); }

/* ── States grid ── */
.doc-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; background: var(--color-canvas); }
.doc-states > div { display: grid; gap: var(--space-2); justify-items: start; align-content: start; padding: var(--space-4); box-shadow: 1px 0 0 0 var(--color-border), 0 1px 0 0 var(--color-border); }
.doc-states__label { font: var(--type-metadata-weight) var(--type-metadata-size)/1 var(--type-metadata-family); color: var(--color-muted-text); }

/* ── Responsive preview ── */
.doc-viewport { border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); overflow: hidden; }
.doc-viewport__bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); }
.doc-viewport__stage { padding: var(--space-4); background: var(--color-surface-inset); overflow-x: auto; }
.doc-viewport__frame { display: block; margin-inline: auto; inline-size: var(--vw, 100%); max-inline-size: none; block-size: 36rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-canvas); }

/* ── Layout specimens ── */
.doc-grid-spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 768px) { .doc-grid-spec { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.doc-grid-spec > span { display: block; block-size: var(--space-12); background: var(--color-accent-bg); border: 1px solid var(--color-accent-bg-strong); border-radius: var(--radius-xs); }
.doc-motion-demo { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.doc-motion-demo__track { position: relative; inline-size: 14rem; block-size: var(--space-8); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-inset); overflow: hidden; }
.doc-motion-demo__dot { position: absolute; inset-block: var(--space-1); inset-inline-start: var(--space-1); inline-size: var(--space-6); border-radius: var(--radius-xs); background: var(--color-accent-solid); transition: transform var(--_d, var(--motion-standard)) var(--_e, var(--ease-standard)); }
.doc-motion-demo__track[data-run="true"] .doc-motion-demo__dot { transform: translateX(calc(14rem - var(--space-6) - var(--space-2) - 2px)); }
.doc-kbd-table kbd { margin-inline-end: var(--space-1); }
.doc-swatch-pair { display: flex; gap: var(--space-2); align-items: center; }
.doc-diagram { max-inline-size: 100%; }
.doc-checklist { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.doc-checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.doc-checklist .af-icon { color: var(--status-success-solid); margin-block-start: 2px; }
.doc-changelog h3 { display: flex; align-items: baseline; gap: var(--space-3); }

/* Navigation demo: the sidebar is normally off-canvas below 1024px; the demo shows it in flow. */
.doc-sidebar-demo { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-6); background: var(--color-canvas); }
.doc-demo__stage .af-sidebar { position: static; visibility: visible; transform: none; box-shadow: none; inline-size: 15.5rem; max-inline-size: 100%; border: 1px solid var(--color-border); border-radius: var(--card-radius); min-block-size: 22rem; }
.doc-demo__stage .af-sidebar[data-collapsed="true"] { inline-size: var(--layout-sidebar-width-collapsed); }
.doc-demo__stage .af-topnav { position: static; }