/* Style-page-only chrome. Not part of the shipped package — the package is
   everything under dist/; this file only lays out the doc page around it. */

.site-section {
  padding-block: var(--aain-space-6);
  border-block-end: 1px solid var(--aain-border);
}
.site-section:last-of-type { border-block-end: none; }

.site-hero__actions { margin-top: var(--aain-space-4); display: flex; flex-wrap: wrap; gap: var(--aain-space-2); }

.site-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--aain-space-2);
}
.site-swatch {
  border-radius: var(--aain-radius-md);
  padding: var(--aain-space-2);
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--aain-font-caption);
  border: 1px solid var(--aain-border);
}
.site-swatch strong { font-weight: var(--aain-weight-bold); display: block; }
.site-swatch span { opacity: 0.85; display: block; }

.site-theme-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--aain-space-4);
}
.site-theme-pane {
  border-radius: var(--aain-radius-lg);
  padding: var(--aain-space-3);
  border: 1px solid var(--aain-border);
  background: var(--aain-bg);
}
.site-theme-pane h3 { font-size: var(--aain-font-h4); margin-bottom: var(--aain-space-2); }

.site-type-rows { display: flex; flex-direction: column; gap: var(--aain-space-4); }
.site-type-row { border-block-end: 1px solid var(--aain-border); padding-block-end: var(--aain-space-3); }
.site-type-row:last-child { border-block-end: none; }
.site-type-row .site-sample { font-family: var(--aain-font-family-display); color: var(--aain-ink); }
.site-type-row .site-sample.site-sample--body { font-family: var(--aain-font-family-body); max-width: var(--aain-measure); }
.site-type-row .site-meta { margin-top: var(--aain-space-1); color: var(--aain-ink-muted); font-size: var(--aain-font-small); }

.site-space-demo { display: flex; flex-direction: column; gap: var(--aain-space-2); }
.site-space-row { display: flex; align-items: center; gap: var(--aain-space-2); }
.site-space-row .site-bar { height: 20px; background: var(--aain-accent-gold); border-radius: 4px; }
.site-space-row .site-label { font-size: var(--aain-font-small); color: var(--aain-ink-muted); min-width: 120px; }

.site-swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--aain-space-2);
}
.site-token-chip {
  padding: var(--aain-space-3);
  border-radius: var(--aain-radius-md);
  font-size: var(--aain-font-small);
  color: var(--aain-ink-muted);
  background: var(--aain-surface);
}
.site-token-chip strong { display: block; color: var(--chip-ink, var(--aain-ink)); margin-bottom: var(--aain-space-1); font-size: var(--aain-font-body); }
.site-token-chip.site-token-chip--float { background: var(--aain-surface-2); box-shadow: var(--aain-shadow-float); }

.site-component-block { margin-block-end: var(--aain-space-6); }
.site-component-block h3 { font-size: var(--aain-font-h3); margin-bottom: var(--aain-space-1); }
.site-component-block > p.site-note { color: var(--aain-ink-muted); font-size: var(--aain-font-small); margin-bottom: var(--aain-space-3); max-width: var(--aain-measure); }
.site-demo { margin-bottom: var(--aain-space-2); }
.site-demo--column { display: flex; flex-direction: column; gap: var(--aain-space-2); align-items: flex-start; }
.site-demo--row { display: flex; flex-wrap: wrap; gap: var(--aain-space-2); align-items: center; }

.site-snippet {
  background: var(--aain-surface);
  border: 1px solid var(--aain-border);
  border-radius: var(--aain-radius-md);
  padding: var(--aain-space-2) var(--aain-space-3);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  direction: ltr;
  text-align: start;
}
.site-snippet code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: var(--aain-ink-muted); white-space: pre; }
.site-snippet code .tag { color: #164FA8; }
.site-snippet code .attr { color: var(--aain-accent-gold); }
html[data-theme="dark"] .site-snippet code .tag { color: #8FC0FF; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .site-snippet code .tag { color: #8FC0FF; }
}

.site-brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aain-space-5);
  row-gap: var(--aain-space-4);
  align-items: center;
}
.site-brand-item { display: flex; flex-direction: column; gap: var(--aain-space-1); }
.site-brand-item img { height: 56px; width: auto; }
.site-brand-item span { font-size: var(--aain-font-caption); color: var(--aain-ink-muted); }

/* Swap each lockup's light/dark variant to match the active theme, the same
   way dist/aain.css resolves data-theme vs. prefers-color-scheme. */
.site-logo-dark { display: none; }
html[data-theme="dark"] .site-logo-light { display: none; }
html[data-theme="dark"] .site-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .site-logo-light { display: none; }
  html:not([data-theme="light"]) .site-logo-dark { display: block; }
}

.site-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--aain-space-2);
}
.site-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aain-space-1);
  padding: var(--aain-space-2);
  border-radius: var(--aain-radius-md);
  background: var(--aain-surface);
  font-size: var(--aain-font-caption);
  color: var(--aain-ink-muted);
}
.site-icon-tile svg { width: 24px; height: 24px; color: var(--aain-accent-gold); }

.site-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--aain-border);
  border-radius: var(--aain-radius-pill);
  padding: 2px;
  gap: 2px;
}
.site-theme-toggle button {
  background: transparent;
  border: none;
  color: var(--aain-ink-muted);
  font-size: var(--aain-font-caption);
  padding: 6px var(--aain-space-2);
  border-radius: var(--aain-radius-pill);
  cursor: pointer;
}
.site-theme-toggle button[aria-pressed="true"] { background: var(--aain-surface-2); color: var(--aain-ink); }

@media (max-width: 480px) {
  .site-hero__deco { display: none; }
}

/* The top nav on this doc page carries more controls (theme toggle, language
   switch) than the base nav contract assumes — drop the least essential one
   (manual theme override; prefers-color-scheme still applies) before it
   crowds the 390px phone column. */
@media (max-width: 640px) {
  .aain-nav__actions .site-theme-toggle { display: none; }
}