/* ═══════════════════════════════════════════════════════════════
   AdiaUI Docs — Site-specific styles
   ═══════════════════════════════════════════════════════════════ */

html, body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Site-level tokens ──
   Subnav rail shares the leading-sidebar's width computation so both
   rails feel consistent (same clamp 48px → 200px → 240px). */
:root {
  --subnav-width: var(--page-sidebar-width-leading);
}

/* ── Changelog rail (trailing sidebar) ──
   Toggled via #changelog-toggle in the topbar; persisted via
   localStorage('adia-changelog-open'). Wider clamp than the leading
   sidebar so changelog prose has room to breathe.

   Padding contract: a single `--rail-inset-x` drives header, body, and
   any nested block (pre, hr) so the heading text, the body H1, and the
   close button on the right all sit on the same inline edges. */
admin-shell {
  --page-sidebar-width-trailing: clamp(280px, 22vw, 360px);
}

#changelog-rail {
  --rail-inset-x: var(--a-space-4);
  --rail-inset-y: var(--a-space-3);
}

#changelog-rail[hidden] { display: none; }

/* Header: align "Changelog" heading text + close button to the rail's
   shared inline insets. Override the smaller default `--page-sidebar-px`
   that the leading sidebar's icon-only nav relies on. Selector matches
   both raw <header> and slot-vocab <header-ui> per ADR-0011. */
#changelog-rail > admin-topbar {
  padding-inline: var(--rail-inset-x);
}

#changelog-rail > admin-topbar > [slot="heading"] {
  font-weight: var(--a-weight-medium);
  color: var(--a-fg);
}

/* Section: drop the default sidebar padding so the body owns its own
   inset (avoids double-padding nesting). */
#changelog-rail > :is(section, section-ui) {
  padding: 0;
}

#changelog-body {
  padding: var(--rail-inset-y) var(--rail-inset-x) var(--rail-inset-x);
  font-size: var(--a-ui-size);
  line-height: var(--a-body-leading);
  color: var(--a-fg-muted);
  overflow-wrap: anywhere;
}

#changelog-body h1,
#changelog-body h2,
#changelog-body h3,
#changelog-body h4 {
  color: var(--a-fg);
  margin: 0;
}
#changelog-body h1 {
  font-size: var(--a-ui-lg);
  font-weight: var(--a-weight-medium);
  margin-block-end: var(--a-space-2);
}
#changelog-body h2 {
  font-size: var(--a-kicker-sm);
  font-weight: var(--a-weight-medium);
  color: var(--a-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-block: var(--a-space-4) var(--a-space-2);
  padding-block-end: var(--a-space-1);
  border-block-end: 1px solid var(--a-border-subtle);
}
#changelog-body h3 {
  font-size: var(--a-ui-size);
  font-weight: var(--a-weight-medium);
  margin-block: var(--a-space-3) var(--a-space-1);
}
#changelog-body h4 {
  font-size: var(--a-ui-sm);
  font-weight: var(--a-weight-medium);
  color: var(--a-fg-subtle);
  margin-block: var(--a-space-2) var(--a-space-1);
}

#changelog-body p,
#changelog-body ul,
#changelog-body ol {
  margin: 0 0 var(--a-space-2);
}
#changelog-body ul,
#changelog-body ol { padding-inline-start: var(--a-space-4); }
#changelog-body li { margin-block: var(--a-space-0-5); }

#changelog-body a {
  color: var(--a-accent-strong);
  text-decoration: none;
}
#changelog-body a:hover { text-decoration: underline; }

#changelog-body code {
  font-family: var(--a-font-family-code);
  font-size: 0.875em;
  background: var(--a-canvas-well);
  color: var(--a-fg);
  padding: 0.125em 0.375em;
  border-radius: var(--a-radius-sm);
}

#changelog-body pre {
  background: var(--a-canvas-well);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-md);
  padding: var(--a-space-2) var(--a-space-3);
  overflow-x: auto;
  font-size: var(--a-ui-sm);
  margin: 0 0 var(--a-space-2);
}
#changelog-body pre code { padding: 0; background: none; border-radius: 0; }

#changelog-body hr {
  border: none;
  border-block-start: 1px solid var(--a-border-subtle);
  margin-block: var(--a-space-4);
}

/* First/last children: drop the leading top margin and trailing bottom
   margin so the rail-inset-y is the sole owner of edge whitespace. */
#changelog-body > :first-child { margin-block-start: 0; }
#changelog-body > :last-child  { margin-block-end:   0; }

/* Active state on the topbar toggle when rail is open */
#changelog-toggle[aria-pressed="true"] {
  --button-bg: var(--a-bg-hover);
}

/* ── Trait CSS hooks (form validation/dirty demos) ── */
[data-dirty-state-dirty] {
  --input-border: var(--a-warning);
  --input-border-hover: var(--a-warning);
  --input-border-focus: var(--a-warning);
}
[data-validation-invalid] {
  --input-border: var(--a-danger);
  --input-border-hover: var(--a-danger);
  --input-border-focus: var(--a-danger);
}
[data-validation-valid] {
  --input-border: var(--a-success);
  --input-border-hover: var(--a-success);
  --input-border-focus: var(--a-success);
}

/* ── Trait CSS hooks (typeahead match) ── */
[data-typeahead-match] {
  background: var(--a-bg-hover);
}

/* ── Trait CSS hooks (active-state cards) ── */
[data-active-card][data-active-state-active] {
  border-color: var(--a-color-primary) !important;
  box-shadow: 0 0 0 2px var(--a-color-primary);
}

/* ── Trait CSS hooks (snap-to-grid) ── */
[data-snap-grid-area] {
  position: relative;
  background-image:
    linear-gradient(to right, var(--a-border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--a-border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Trait CSS hooks (noise-texture demo) ── */
[data-noise-texture-active] {
  position: relative;
}

/* ── Section-leaf nav items ──
   site.js stamps single-item sections (Gen UI Canvas, A2UI Canvas,
   Chat, Editor, App Shell) AND subnav-flagged sections (Primitives,
   Examples) as bare `<nav-item-ui data-section-leaf="…">` rows.
   By default those inherit the item-level subtle-fg + regular weight,
   which makes them read lighter than neighboring `<nav-group-ui>`
   headers (Patterns, Traits, Tokens). Promote them to group-header
   weight + default-fg color so the nav's visual hierarchy stays even
   regardless of whether a section is a leaf or a group. */
nav-item-ui[data-section-leaf] {
  --nav-item-fg: var(--a-fg);
}
nav-item-ui[data-section-leaf] [slot="text"] {
  font-weight: var(--nav-group-text-weight);
}

/* ── Router ── */
router-ui {
  display: block;
  min-width: 0; /* let the router column shrink inside the grid */
  min-height: 0; /* let the router shrink below its content size */
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Sub-nav rail inside admin-scroll ──
   Activated when the current route's section has `subnav: true` in sitemap.
   site.js toggles the [hidden] attribute on #subnav-rail. When the rail
   is VISIBLE, admin-scroll becomes a 2-column grid (rail | content) with
   each cell scrolling independently. When the rail is hidden, admin-scroll
   keeps the package default (single-column flex column with overflow-y:
   auto from admin-shell.bespoke.css) so the page content scrolls normally.

   The :has(#subnav-rail:not([hidden])) guard is what differentiates the
   two modes — without it the grid+overflow:hidden combo blanket-applies
   to every admin-scroll and breaks scrolling on routes that don't use
   a rail (e.g. the standalone-template routes like /examples/admin-dashboard). */
admin-content > admin-scroll:has(#subnav-rail:not([hidden])) {
  display: grid;
  grid-template-columns: var(--subnav-width, 14rem) 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#subnav-rail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-inline-end: 1px solid var(--a-border-subtle);
  padding-block: var(--a-space-2);
  padding-inline: var(--a-space-2);
}

#subnav-rail > nav-ui[variant="section"] {
  display: flex;
}

/* Mobile: collapse to single column; subnav is rendered inline above content. */
@container (max-width: 40rem) {
  admin-content > admin-scroll:has(#subnav-rail:not([hidden])) {
    grid-template-columns: 1fr;
    gap: var(--a-space-2);
  }
  #subnav-rail {
    border-inline-end: none;
    border-block-end: 1px solid var(--a-border-subtle);
  }
}

/* ── Demo containers ── */
[data-demo] {
  padding: var(--a-space-6);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-lg);
  margin-bottom: var(--a-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-space-3);
  align-items: center;
}

[data-demo] + [data-demo] {
  margin-top: var(--a-space-4);
}

[data-demo][data-artifact-item] {
  flex-direction: column;
  align-items: stretch;
}

/* ── Inline code ── */
admin-page code:not(code-ui code) {
  background: var(--a-canvas-well);
  padding: 0.125em 0.375em;
  border-radius: var(--a-radius-sm);
  font-size: var(--a-code-size);
  color: var(--a-code-color);
}

/* ── Code blocks ──
   Scoped with :not(code-ui *) so the ambient site style does NOT bleed
   into the <pre>/<code> that are slotted children of <code-ui> (which
   provides its own chrome). */
admin-page pre:not(code-ui *) {
  background: var(--a-canvas-well);
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-lg);
  padding: var(--a-space-4);
  overflow-x: auto;
  font-size: var(--a-code-size);
  line-height: 1.6;
  margin: var(--a-space-3) 0 var(--a-space-4) 0;
}

admin-page pre:not(code-ui *) code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

/* ── API tables ── */
admin-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--a-space-4) 0 var(--a-space-6) 0;
  font-size: var(--a-ui-size);
}

admin-page table th,
admin-page table td {
  text-align: left;
  padding: var(--a-space-2) var(--a-space-3);
  border-bottom: 1px solid var(--a-border-subtle);
}

admin-page table th {
  font-weight: var(--a-weight-semibold);
  color: var(--a-fg-subtle);
  font-size: var(--a-ui-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Feature list with checkmarks ── */
admin-page ul[data-features] {
  list-style: none;
  padding: 0;
  margin: var(--a-space-3) 0;
}

admin-page ul[data-features] li {
  padding: var(--a-space-1) 0;
  padding-left: var(--a-space-6);
  position: relative;
  font-size: var(--a-ui-size);
}

admin-page ul[data-features] li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--a-success-strong);
  font-weight: var(--a-weight-semibold);
}

/* ── Color swatches ──
   Horizontal strip layout. Each swatch is a flat color block with the
   step number rendered BELOW it (not inside), so the label is always
   readable regardless of the swatch's brightness. Consumers set the
   color via a --c custom prop and the step count via --count on the
   wrapper. */
[data-swatches] {
  display: grid;
  grid-template-columns: repeat(var(--count, 11), minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 var(--a-space-2);
}

/* Token-colors / spacing demo swatches now use <swatch-ui shape="block"
   size="lg" label="…">; the legacy `[data-swatch][data-step]` rule was
   retired 2026-05-01 alongside the swatch-ui extraction. Wrapper /
   label data-attrs ([data-swatches], [data-swatch-family],
   [data-swatch-label]) survive — they're page-layout helpers, not
   swatch styling. */

/* Adaptive strip label emphasis */
[data-swatch-label][data-adaptive] {
  color: var(--a-fg-subtle);
  font-weight: var(--a-weight-semibold);
}

/* Row label above each strip (tint / shade) */
[data-swatch-label] {
  display: block;
  font-family: var(--a-font-family-code);
  font-size: var(--a-label-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--a-fg-muted);
  margin: 0 0 var(--a-space-1);
}

/* Container for a color family (tint row + shade row stacked) */
[data-swatch-family] {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
  margin-block: var(--a-space-2) var(--a-space-5);
}

/* ── Paragraph spacing — uses "body" typography role ── */
admin-page p {
  font-size: var(--a-body-size);
  line-height: var(--a-body-leading);
  /*color: var(--a-body-color);*/
  margin: 0 0 var(--a-body-mbe) 0;
}

/* ═══════════════════════════════════════════════════════════════
   DOC CONTENT SCHEMA — component page data attributes
   ═══════════════════════════════════════════════════════════════ */

/* ── Doc tag (component name pill) ──
   Header pills now use individual <tag-ui size="sm"> elements.
   The legacy `<span data-tag>foo · bar</span>` shape was swept
   2026-05-01 — the per-instance chips read better and feed the
   gen-UI corpus as canonical tag-ui markup instead of a custom
   docs-only pill. */

/* ── Doc sections ──
   Two-tier vertical rhythm:
     • Between sibling [data-section]s — owned by `admin-page-body > section`
       in app-shell.templates.css (flex gap = --page-section-gap).
     • Within a [data-section] — flex gap = --page-block-gap on this scope.
       h2 + immediately-following [data-note] are auto-stamped into a <header>
       by site.js so the deck pair gets the tighter --page-deck-gap.
   Direct children carry zero wrapper margin; gap owns rhythm. */
[data-section] {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: var(--page-block-gap, var(--a-space-4));
}

[data-section] > * {
  margin: 0;
}

[data-section] > header {
  display: flex;
  flex-direction: column;
  gap: var(--page-deck-gap, var(--a-space-1));
}

/* Note/subtitle — uses "deck" typography role (subtitle below heading) */
[data-note] {
  font-size: var(--a-body-size);
  line-height: var(--a-body-leading);
  color: var(--a-fg-subtle);
}

/* ── Doc artifact wrappers ──
   Each demo section renders one [data-artifact-container] framing a
   subtle surface; each demo instance inside it is a [data-artifact-item]. */
[data-artifact-container] {
  display: block;
  border: 1px solid var(--a-border-subtle);
  border-radius: var(--a-radius-lg);
  background: var(--a-canvas-1);
}

[data-artifact-container] + [data-artifact-container] {
  margin-top: var(--a-space-3);
}

/* The auto-stamped HTML source panel is now a nested <preview-ui> (site.js
   converts every [data-artifact-container] to <preview-ui> rows/single-block),
   so the old [data-artifact-code] sibling-panel rules were removed — preview-ui
   owns the render+code framing. [data-artifact-container]/[data-artifact-item]
   styles below still apply to the deliberate opt-outs ([data-no-code] +
   oversized composites that skip the transform). */

[data-artifact-item] {
  display: block;
  margin: 1.5rem;
}

/* Attribute-driven caption — authored as data-artifact-label="…" on the
   item itself, rendered as a block-level pill above the artifact via ::before. */
[data-artifact-item][data-artifact-label]::before {
  display: block;
  width: fit-content;
  content: attr(data-artifact-label);
  font-family: var(--a-font-family-mono);
  font-size: var(--a-ui-sm);
  margin-block: 0.75rem;
  color: var(--a-fg-muted);
  background-color: var(--a-bg-muted);
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Auto-strip outer chrome when redundant ──
   When the container holds exactly one item whose direct child is a
   self-framing component (card-ui, drawer-ui, modal-ui, chat-ui,
   admin-shell, bare code-ui, or pane-ui), the artifact-container's
   own border + bg + radius doubles up with the inner component's
   chrome — visible as a card-in-card. Strip the outer chrome AND
   the item's intrinsic 1.5rem margin in that case. The label pill
   is also dropped since the section's H2 + <p data-note> already
   provide the framing copy.

   Multi-item containers (variant grids, before/after pairs) keep
   their chrome to give the variants a unified frame. The
   `:only-child` selector is the discriminator. */
[data-artifact-container]:has(> [data-artifact-item]:only-child > :is(
  card-ui,
  drawer-ui,
  modal-ui,
  chat-ui,
  admin-shell,
  pane-ui,
  code-ui[bare]
)) {
  border: none;
  background: transparent;
  border-radius: 0;
}

[data-artifact-container]:has(> [data-artifact-item]:only-child > :is(
  card-ui,
  drawer-ui,
  modal-ui,
  chat-ui,
  admin-shell,
  pane-ui,
  code-ui[bare]
)) > [data-artifact-item] {
  margin: 0;
}

[data-artifact-container]:has(> [data-artifact-item]:only-child > :is(
  card-ui,
  drawer-ui,
  modal-ui,
  chat-ui,
  admin-shell,
  pane-ui,
  code-ui[bare]
)) > [data-artifact-item][data-artifact-label]::before {
  display: none;
}

[data-label] {
  font-family: var(--a-font-family-code);
  font-size: var(--a-label-size);
  color: var(--a-fg-muted);
  white-space: nowrap;
}

[data-mt-sm] {
  margin-top: var(--a-space-3);
}

/* ═══════════════════════════════════════════════════════════════
   TEMPLATE STYLES — layout variants applied via data-template
   ═══════════════════════════════════════════════════════════════ */

/* ── Template: doc ── */
[data-template="doc"] {
}


/* ── Template: default ── */
[data-template="default"] {
  padding: var(--a-space-6) var(--a-space-8);
  max-width: 720px;
  margin-inline: auto;
}

/* ── Template: settings ──
   A classic two-column settings layout:
     aside (label + description)  |  data-col (form fields)
   Pairs stack vertically within a section; sections are separated by
   dividers. All settings-specific selectors are scoped under
   [data-template="settings"] to avoid colliding with docs primitives
   like [data-section] / [data-col] which have different semantics. */

[data-template="settings"] [data-tab-content] {
  margin-inline: auto;
  padding: var(--page-content-inset);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-5);
}

[data-template="settings"] [data-tab-content] > section {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-4);
}

/* Settings pair grid — aside | col. Override the generic docs
   [data-section] margin so it sits flush within the card. */
[data-template="settings"] [data-tab-content] [data-section] {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--a-space-5) var(--a-space-6);
  align-items: start;
}

/* Space consecutive settings rows within a section. The section flex-gap
   above targets `[data-tab-content] > section`, but each page's content
   sections sit inside an `<article data-chunk>` wrapper, so that direct-child
   rule never matches and the rows would touch (0px). This descendant rule
   restores the row rhythm through the wrapper — invisible with tall field-ui
   rows (the column fills the height), essential for short switch/check rows
   that would otherwise merge (e.g. a Notifications section's Channels +
   Activity groups). Higher specificity than the `margin: 0` reset above. */
[data-template="settings"] [data-tab-content] [data-section] + [data-section] {
  margin-top: var(--a-space-5);
}

/* Collapse to single column when the page-content container is narrow.
   `<admin-page>` carries `container-name: page-content`
   (admin-shell.templates.css), so the flip tracks available content
   width rather than viewport — sidebar-collapsed states behave the same
   as a genuinely narrow window. Threshold mirrors --page-content-bp-md. */
@container page-content (max-width: 720px) {
  [data-template="settings"] [data-tab-content] [data-section] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a-space-3);
  }
  [data-template="settings"] [data-tab-content] {
    padding: var(--a-space-4);
  }
}

/* Aside: label + description column */
[data-template="settings"] [data-tab-content] aside {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-1);
  padding-block-start: var(--a-space-1);
}

[data-template="settings"] [data-tab-content] aside h3 {
  margin: 0;
}

[data-template="settings"] [data-tab-content] aside p {
  color: var(--a-fg-muted);
  margin: 0;
  line-height: 1.5;
}

/* Form column — override the docs [data-col] centering so fields
   stretch to fill the column width. */
[data-template="settings"] [data-tab-content] [data-col] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--a-gap);
  min-width: 0;
}

/* Two-up field grid (used e.g. for max-tokens + temperature) */
[data-template="settings"] [data-tab-content] [data-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--a-gap);
  align-items: start;
}

/* Divider breathing room */
[data-template="settings"] [data-tab-content] divider-ui {
  margin-block: var(--a-space-2);
}

/* Danger zone — subtle red frame so it visually signals severity */
[data-template="settings"] [data-tab-content] > section:last-of-type > h2 {
  color: var(--a-danger-strong);
}

/* ── Template: dashboard ──
   Dashboard chunks are self-styling as of 2026-05-21: each `[data-tab-panel]`
   uses `<col-ui gap="4">` to stack its inner `<grid-ui>` rows, so consumers
   pulling the chunk into their own apps get correct vertical rhythm without
   needing docs-site-specific CSS. The previous rules — scoped to
   `[data-template="dashboard"]` — only fired on the routed dashboard
   template (not on standalone-page routes like /site/examples/admin-dashboard
   that wrap the same chunks), which produced 0px gaps between stacked rows
   for any non-routed embed. Empty block retained for future
   template-level overrides. */

/* ─── Component metadata strip (v0.4.9 §99k) ───
   Injected by site.js at the top of /site/components/<name> demo pages.
   Shows the primitive's `composes:` declaration so consumers reading the
   live demo see at a glance which other primitives are instantiated. */
aside[data-component-meta="composes"] {
  padding: var(--a-space-3) var(--a-space-4);
  border-radius: var(--a-radius-md);
  background: var(--a-bg-2);
  border: 1px solid var(--a-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--a-space-3);
  flex-wrap: wrap;
}
aside[data-component-meta="composes"] [data-meta-label] {
  font-size: var(--a-ui-sm);
  font-weight: 600;
  color: var(--a-fg-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
aside[data-component-meta="composes"] [data-meta-list] {
  display: flex;
  gap: var(--a-space-2);
  flex-wrap: wrap;
  align-items: center;
}
aside[data-component-meta="composes"] [data-meta-pill] {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--a-space-2);
  border-radius: var(--a-radius-sm);
  background: var(--a-bg-1);
  border: 1px solid var(--a-border-subtle);
  font-family: var(--a-font-family-code);
  font-size: var(--a-ui-xs);
  color: var(--a-fg);
  text-decoration: none;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
aside[data-component-meta="composes"] [data-meta-pill]:hover {
  border-color: var(--a-accent);
  background: var(--a-bg-2);
}
aside[data-component-meta="composes"] [data-meta-pill][data-meta-cross-pkg] {
  border-style: dashed;
}