/* Specimen page chrome (not part of the system). Unlayered on purpose,
   so the forced-state helpers below beat component :where() rules. */

body { padding: 0; }

.spec-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface-canvas);
  border-bottom: 1px solid var(--color-line-default);
}
.spec-header h1 { flex: 1; font-size: var(--text-xl); line-height: var(--leading-lg); }
.spec-header a { font-size: var(--text-sm); }
.spec-main { max-width: 72rem; margin: 0 auto; padding: var(--space-6); display: grid; gap: var(--space-10); }
.spec-intro { max-width: 70ch; color: var(--color-content-secondary); }
.spec-section { display: grid; gap: var(--space-4); }
.spec-section > h2 { font-size: var(--text-lg); line-height: var(--leading-lg); }
.spec-section > p { max-width: 70ch; color: var(--color-content-secondary); }
.spec-panel {
  padding: var(--space-6);
  border: 1px solid var(--color-line-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-default);
  overflow-x: auto;
}
.spec-panel[data-surface="canvas"] { background: var(--color-surface-canvas); }
.spec-panel[data-surface="chrome"] { background: var(--color-surface-chrome); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: var(--space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-line-subtle); }
.spec-table th { font-size: var(--text-xs); font-weight: 500; color: var(--color-content-secondary); white-space: nowrap; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-content-secondary); white-space: nowrap; }
.spec-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.spec-stack { display: grid; gap: var(--space-4); max-width: 28rem; }
.spec-code {
  display: block; margin: 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface-sunken);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  white-space: pre; overflow-x: auto; color: var(--color-content-primary);
}
.spec-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.spec-note { font-size: var(--text-xs); color: var(--color-content-secondary); }
.spec-dont { border-left: 3px solid var(--color-action-danger); padding-left: var(--space-3); }

/* ---------- forced states, for showing hover/active/focus without a mouse ---------- */
.button[data-state="hover"] { --_bg-state: var(--_bg-hover); --_fg-state: var(--_fg-hover); --_border-state: var(--_border-hover); }
.button[data-state="active"] { --_bg-state: var(--_bg-active); --_fg-state: var(--_fg-hover); --_border-state: var(--_border-hover); }
/* the CTAs' and secondary's body: hover lifts and brightens, a press sinks (button.css) */
.button:is(:not([data-variant]), [data-variant="primary"], [data-variant="brand"], [data-variant="danger"])[data-state="hover"] { --_sa: calc(var(--_sheen) + 0.06); --_lift: -1px; --_sk: 1.5; }
.button:is(:not([data-variant]), [data-variant="primary"], [data-variant="brand"], [data-variant="danger"])[data-state="active"] { --_sa: 0; --_da: 0.02; --_pa: 0.12; --_lift: 1px; --_sk: 0.3; }
.button[data-variant="secondary"][data-state="hover"] { --_sk: 1.4; --_lift: -1px; }
.button[data-variant="secondary"][data-state="active"] { --_sk: 0.3; --_pa: 0.08; --_lift: 1px; }
[data-state="focus"] { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
.input[data-state="hover"], .input-group[data-state="hover"] { --_border: var(--color-line-input-hover); }
.input[data-state="focus"], .input-group[data-state="focus"] { --_border: var(--color-line-focus); box-shadow: 0 0 0 1px var(--color-line-focus); outline: none; }
.filter-card[data-state="hover"] { background: var(--color-surface-hover); }
.tab[data-state="hover"] { color: var(--color-content-primary); background: var(--color-surface-tint); }
.tab[data-state="focus"] { outline-offset: -2px; }
.menu-item[data-state="hover"] { background: var(--color-surface-hover); }
.rail-item[data-state="hover"] { background: var(--color-surface-chrome-hover); color: var(--color-content-on-chrome); }
.sidebar-item[data-state="hover"] { background: var(--color-surface-sidebar-hover); }
.segmented-option[data-state="hover"] { color: var(--color-content-primary); }
tr[data-state="hover"] { background: var(--color-surface-hover); }
.checkbox[data-state="hover"], .radio[data-state="hover"] { border-color: var(--color-control-selected); }
.tooltip[data-state="open"] { opacity: 1; visibility: visible; }
.menu[data-state="open"] { position: static; display: block; opacity: 1; transform: none; inset: auto; }

/* ---------- global navigation (specimen.js draws it) ----------
   The shell's sidebar items in a fixed column on the left; the pages make room for it from 1024 up.
   Narrower, it's a drawer from the left (a popover), opened from the page header's menu button. */
:root { --spec-nav-w: 16rem; }
.spec-nav {
  position: fixed; inset: 0 auto 0 0; margin: 0; z-index: 60;
  inline-size: var(--spec-nav-w); block-size: 100dvh; max-block-size: none;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--space-2) var(--space-6); border: 0;
  border-inline-end: 1px solid var(--color-line-sidebar);
  background: var(--color-surface-sidebar); color: var(--color-content-primary);
}
.spec-nav .spec-nav-title { margin-block-end: 0; font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--color-content-primary); text-decoration: none; }
.spec-nav-note { padding: var(--space-3) var(--space-3) var(--space-1); }
.spec-nav .sidebar-group { padding-block-start: var(--space-4); }
.spec-nav .sidebar-item:focus-visible, .spec-nav-title:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: -2px; }
@media (min-width: 1024px) {
  body { padding-inline-start: var(--spec-nav-w); }
  .spec-nav:not(:popover-open) { display: block; }
  .spec-nav-toggle { display: none; }
  /* as in the app shell: the page header and the sidebar's title share one height, so their rules meet */
  .spec-header { min-block-size: var(--shell-sidebar-header-height); padding-block: 0; }
  /* the sidebar replaces each page's way back to the catalog */
  .spec-header > a[href="../index.html"]:first-of-type { display: none; }
}
@media (max-width: 1023px) {
  .spec-nav { box-shadow: var(--shadow-overlay); translate: -100% 0; transition: translate var(--duration-medium) var(--ease-out), overlay var(--duration-medium) allow-discrete, display var(--duration-medium) allow-discrete; }
  .spec-nav:popover-open { translate: 0 0; }
  @starting-style { .spec-nav:popover-open { translate: -100% 0; } }
  .spec-nav::backdrop { background: var(--color-surface-scrim); }
  .spec-header { padding-inline: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .spec-nav { transition: none; } }