/* ════════════════════════════════════════════════════════════════════════
   Anthroponova — primitives.css
   Core presentational primitives: type ramp, buttons, form controls, cards,
   chips / tags / badges, brand + nav. Token-driven (references tokens.css).
   Every interactive element defines its real pseudo-states AND a forced
   `.is-{hover|active|focus|disabled}` twin, so the specimen can display all
   states side-by-side. Class convention: `an-block`, `an-block--modifier`.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── type ramp ───────────────────────── */
.an-display { margin:0; font-weight:700; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); color:var(--heading); }
.an-h1 { margin:0; font-weight:700; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.018em; color:var(--heading); }
.an-h2 { margin:0; font-weight:700; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.014em; color:var(--heading); }
.an-h3 { margin:0; font-weight:700; font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em; color:var(--heading); }
.an-h4 { margin:0; font-weight:700; font-size:var(--fs-h4); line-height:1.25; color:var(--heading); }
.an-eyebrow { margin:0; font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--gold-text); }
.an-body-lg { margin:0; font-weight:400; font-size:var(--fs-body-lg); line-height:var(--lh-body); color:var(--body); }
.an-body { margin:0; font-weight:400; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--body); }
.an-small { margin:0; font-weight:400; font-size:var(--fs-small); line-height:1.5; color:var(--body); }
.an-caption { margin:0; font-weight:400; font-size:var(--fs-caption); line-height:1.45; color:var(--tertiary); }
.an-light { font-weight:300; }
.an-muted { color:var(--tertiary); }

/* ───────────────────────── buttons ───────────────────────── */
.an-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font); font-weight:700; font-size:15px; letter-spacing:.006em;
  line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  padding:14px 22px; border-radius:var(--r-md); border:1px solid transparent;
  background:transparent; color:var(--heading);
  transition:transform var(--dur) var(--ease), background var(--dur) ease,
             box-shadow .28s ease, border-color var(--dur) ease, color var(--dur) ease;
}
.an-btn:focus-visible, .an-btn.is-focus { outline:none; box-shadow:var(--ring); }
.an-btn svg { display:block; flex:0 0 auto; }
.an-btn .an-arrow { transition:transform .26s var(--ease); }
.an-btn:hover .an-arrow, .an-btn.is-hover .an-arrow { transform:translateX(3px); }

/* sizes */
.an-btn--sm { padding:9px 14px; font-size:13.5px; border-radius:var(--r-sm); gap:7px; }
.an-btn--lg { padding:16px 28px; font-size:16px; border-radius:12px; }

/* primary — gold fill + ink */
.an-btn--primary { background:var(--gold); color:var(--ink); box-shadow:var(--shadow-gold); }
.an-btn--primary:hover, .an-btn--primary.is-hover { background:var(--gold-100); transform:translateY(-2px); box-shadow:var(--shadow-gold-lg); }
.an-btn--primary:active, .an-btn--primary.is-active { transform:translateY(0); box-shadow:var(--shadow-gold); }
.an-btn--primary:focus-visible, .an-btn--primary.is-focus { box-shadow:var(--shadow-gold), var(--ring); }

/* secondary — gold outline */
.an-btn--secondary { background:transparent; border-color:var(--gold); color:var(--gold-text); }
.an-btn--secondary:hover, .an-btn--secondary.is-hover { background:rgba(221,172,58,.10); border-color:var(--gold-100); transform:translateY(-2px); }
.an-btn--secondary:active, .an-btn--secondary.is-active { transform:translateY(0); background:rgba(221,172,58,.16); }

/* tertiary / ghost — text only (gold) */
.an-btn--tertiary { background:transparent; color:var(--gold-text); padding-inline:14px; }
.an-btn--tertiary:hover, .an-btn--tertiary.is-hover { background:rgba(221,172,58,.10); }
.an-btn--tertiary:active, .an-btn--tertiary.is-active { background:rgba(221,172,58,.16); }

/* neutral ghost — body-colored (for toolbars / menus) */
.an-btn--ghost { background:transparent; color:var(--body); padding-inline:14px; }
.an-btn--ghost:hover, .an-btn--ghost.is-hover { background:var(--surface-1); color:var(--heading); }

/* icon-only (square) */
.an-btn--icon { padding:0; width:42px; height:42px; }
.an-btn--icon.an-btn--sm { width:34px; height:34px; }
.an-btn--icon.an-btn--lg { width:50px; height:50px; }

/* disabled (real + forced) */
.an-btn:disabled, .an-btn.is-disabled, .an-btn[aria-disabled="true"] {
  cursor:not-allowed; opacity:.45; transform:none !important; box-shadow:none;
  pointer-events:none;
}

/* ───────────────────────── forms ───────────────────────── */
.an-field { display:flex; flex-direction:column; gap:7px; }
.an-label { font-weight:700; font-size:13.5px; letter-spacing:.01em; color:var(--heading); }
.an-label .an-req { color:var(--gold-text); margin-left:2px; }
.an-help { font-size:13px; line-height:1.45; color:var(--tertiary); }
.an-error-msg { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--danger); }
.an-error-msg svg { flex:0 0 auto; }

.an-input, .an-textarea, .an-select {
  width:100%; font-family:var(--font); font-weight:400; font-size:15px; line-height:1.4;
  color:var(--heading); background:var(--field-bg);
  border:1px solid var(--field-border); border-radius:var(--r-md);
  padding:11px 14px; transition:border-color var(--dur) ease, box-shadow .26s ease, background var(--dur) ease;
  -webkit-appearance:none; appearance:none;
}
.an-input::placeholder, .an-textarea::placeholder { color:var(--placeholder); }
.an-input:hover, .an-textarea:hover, .an-select:hover,
.an-input.is-hover, .an-textarea.is-hover, .an-select.is-hover { border-color:var(--field-border-hover); }
.an-input:focus-visible, .an-textarea:focus-visible, .an-select:focus-visible,
.an-input.is-focus, .an-textarea.is-focus, .an-select.is-focus {
  outline:none; border-color:var(--gold); box-shadow:var(--ring);
}
.an-textarea { min-height:108px; resize:vertical; line-height:1.55; }

/* input with leading/trailing adornment */
.an-input-wrap { position:relative; display:flex; align-items:center; }
.an-input-wrap .an-input { width:100%; }
.an-input-wrap--icon-left .an-input { padding-left:40px; }
.an-input-wrap--icon-right .an-input { padding-right:40px; }
.an-input-icon { position:absolute; display:grid; place-items:center; color:var(--tertiary); pointer-events:none; width:18px; height:18px; }
.an-input-wrap--icon-left .an-input-icon { left:13px; }
.an-input-wrap--icon-right .an-input-icon { right:13px; }

/* select chevron */
.an-select-wrap { position:relative; display:block; }
.an-select { padding-right:38px; cursor:pointer; }
.an-select-wrap .an-select-chevron { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--tertiary); pointer-events:none; }

/* error state */
.an-input--error, .an-textarea--error, .an-select--error,
.is-error .an-input, .is-error .an-textarea, .is-error .an-select { border-color:var(--danger); }
.an-input--error:focus-visible, .an-textarea--error:focus-visible,
.an-input--error.is-focus { box-shadow:var(--ring-danger); border-color:var(--danger); }

/* disabled */
.an-input:disabled, .an-textarea:disabled, .an-select:disabled,
.an-input.is-disabled, .an-textarea.is-disabled, .an-select.is-disabled {
  opacity:.5; cursor:not-allowed; background:var(--surface-1);
}

/* checkbox & radio (native input + drawn control) */
.an-choice { display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14.5px; color:var(--body); line-height:1.4; }
.an-choice input { position:absolute; opacity:0; width:0; height:0; }
.an-choice-box {
  flex:0 0 auto; width:19px; height:19px; margin-top:1px; display:grid; place-items:center;
  background:var(--field-bg); border:1px solid var(--field-border);
  transition:background var(--dur) ease, border-color var(--dur) ease, box-shadow .2s ease;
  color:var(--ink);
}
.an-choice--check .an-choice-box { border-radius:5px; }
.an-choice--radio .an-choice-box { border-radius:50%; }
.an-choice-box svg { opacity:0; transform:scale(.6); transition:opacity .16s ease, transform .16s var(--ease); }
.an-choice-box .an-radio-dot { width:9px; height:9px; border-radius:50%; background:var(--ink); opacity:0; transform:scale(.4); transition:opacity .16s ease, transform .16s var(--ease); }
.an-choice:hover .an-choice-box, .an-choice.is-hover .an-choice-box { border-color:var(--field-border-hover); }
.an-choice input:checked + .an-choice-box,
.an-choice.is-checked .an-choice-box { background:var(--gold); border-color:var(--gold); }
.an-choice input:checked + .an-choice-box svg,
.an-choice input:checked + .an-choice-box .an-radio-dot,
.an-choice.is-checked .an-choice-box svg,
.an-choice.is-checked .an-choice-box .an-radio-dot { opacity:1; transform:scale(1); }
.an-choice input:focus-visible + .an-choice-box,
.an-choice.is-focus .an-choice-box { box-shadow:var(--ring); border-color:var(--gold); }
.an-choice.is-disabled, .an-choice:has(input:disabled) { opacity:.5; cursor:not-allowed; }

/* switch / toggle */
.an-switch { display:inline-flex; align-items:center; gap:11px; cursor:pointer; font-size:14.5px; color:var(--body); }
.an-switch input { position:absolute; opacity:0; width:0; height:0; }
.an-switch-track {
  position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:var(--r-pill);
  background:var(--control-off); border:1px solid var(--hairline-strong);
  transition:background var(--dur) ease, border-color var(--dur) ease, box-shadow .2s ease;
}
.an-switch-knob {
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--heading); box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform var(--dur) var(--ease), background var(--dur) ease;
}
.an-switch input:checked + .an-switch-track,
.an-switch.is-checked .an-switch-track { background:var(--gold); border-color:var(--gold); }
.an-switch input:checked + .an-switch-track .an-switch-knob,
.an-switch.is-checked .an-switch-track .an-switch-knob { transform:translateX(18px); background:var(--ink); }
.an-switch input:focus-visible + .an-switch-track,
.an-switch.is-focus .an-switch-track { box-shadow:var(--ring); }
.an-switch.is-disabled, .an-switch:has(input:disabled) { opacity:.5; cursor:not-allowed; }

/* ───────────────────────── cards ───────────────────────── */
.an-card {
  position:relative; display:block; padding:22px 24px;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-lg);
  transition:transform .26s var(--ease), border-color .26s ease, background .26s ease, box-shadow .26s ease;
}
.an-card--accent { border-left:3px solid var(--gold); padding-left:22px; }
a.an-card, .an-card--interactive { cursor:pointer; text-decoration:none; }
a.an-card:hover, .an-card--interactive:hover, .an-card.is-hover {
  transform:translateY(-2px); background:var(--surface-hover);
}
a.an-card--accent:hover, .an-card--accent.is-hover { border-left-color:var(--gold-100); }
.an-card--interactive:focus-visible, .an-card.is-focus { outline:none; box-shadow:var(--ring); }
.an-card-row { display:flex; gap:16px; align-items:flex-start; }
.an-card-icon {
  flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center;
  color:var(--gold); background:rgba(221,172,58,.10); border:1px solid rgba(221,172,58,.18);
}
.an-card-title { margin:1px 0 6px; font-weight:700; font-size:15.5px; letter-spacing:.006em; color:var(--heading); }
.an-card-body { margin:0; font-weight:400; font-size:14.5px; line-height:1.5; color:var(--body); }

/* ───────────────────────── chips / tags / badges ───────────────────────── */
.an-chip {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:13px; letter-spacing:.012em; color:var(--body);
  background:var(--surface-1); border:1px solid var(--hairline-strong);
  padding:9px 15px; border-radius:var(--r-pill); white-space:nowrap;
  transition:border-color var(--dur) ease, background var(--dur) ease, color var(--dur) ease;
}
.an-chip-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
/* slim status pill (e.g. "Live now") — slimmer, uppercase, tracked */
.an-chip--sm { font-weight:700; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; gap:7px; padding:5px 11px 5px 9px; }
.an-chip--sm .an-chip-dot { width:7px; height:7px; }
/* pulsing dot — ring color follows --pulse-rgb (gold by default; teal on .an-chip--teal) */
.an-chip-dot--pulse { animation:an-dot-pulse 2.6s ease-out infinite; }
@keyframes an-dot-pulse {
  0%   { box-shadow:0 0 0 0 rgba(var(--pulse-rgb, 221,172,58), .5); }
  70%  { box-shadow:0 0 0 7px rgba(var(--pulse-rgb, 221,172,58), 0); }
  100% { box-shadow:0 0 0 0 rgba(var(--pulse-rgb, 221,172,58), 0); }
}
@media (prefers-reduced-motion: reduce) { .an-chip-dot--pulse { animation:none; } }
button.an-chip, .an-chip--interactive { cursor:pointer; }
button.an-chip:hover, .an-chip--interactive:hover, .an-chip.is-hover { border-color:var(--field-border-hover); color:var(--heading); }
.an-chip:focus-visible, .an-chip.is-focus { outline:none; box-shadow:var(--ring); }
.an-chip--teal { color:var(--teal); background:var(--teal-bg); border-color:var(--teal-border); --pulse-rgb:93,202,165; }
.an-chip--teal .an-chip-dot { background:var(--teal); }
.an-chip-x { display:grid; place-items:center; width:16px; height:16px; margin:-2px -4px -2px 0; border:0; background:transparent; color:inherit; opacity:.7; cursor:pointer; border-radius:50%; }
.an-chip-x:hover { opacity:1; background:rgba(245,243,238,.12); }

/* tag = quieter chip (no dot) */
.an-tag {
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px;
  color:var(--body); background:var(--surface-1); border:1px solid var(--hairline);
  padding:5px 11px; border-radius:var(--r-sm);
}

/* badge — status, functional colors */
.an-badge {
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:11.5px;
  letter-spacing:.04em; line-height:1; padding:5px 10px; border-radius:var(--r-pill);
  border:1px solid var(--hairline-strong); background:var(--surface-1); color:var(--body);
}
.an-badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.an-badge--success { color:var(--success); background:var(--success-bg); border-color:var(--success-border); }
.an-badge--danger  { color:var(--danger);  background:var(--danger-bg);  border-color:var(--danger-border); }
.an-badge--warning { color:var(--warning-text); background:var(--warning-bg); border-color:var(--warning-border); } /* text-on-chip → --warning-text (approved 2026-08-03; light aliases --warning) */
.an-badge--info    { color:var(--info);    background:var(--info-bg);    border-color:var(--info-border); }
.an-badge--gold    { color:var(--gold-text); background:rgba(221,172,58,.12); border-color:rgba(221,172,58,.34); }
/* count badge (numeric) */
.an-badge--count { min-width:20px; height:20px; padding:0 6px; justify-content:center; font-size:11.5px; color:var(--ink); background:var(--gold); border:0; }

/* ───────────────────────── brand + nav ───────────────────────── */
.an-mark { color:var(--gold-text); }   /* gold on dark, gold-800 on light */
.an-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.an-brand .an-mark { display:block; transition:transform .5s var(--ease); }
.an-brand:hover .an-mark { transform:translateY(-1px); }
.an-wordmark { font-weight:700; font-size:18px; letter-spacing:.006em; color:var(--heading); }

.an-nav { position:relative; border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
.an-nav.is-scrolled { background:var(--nav-scrim); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--hairline); }
.an-nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 22px; }
.an-nav-links { display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.an-nav-link { position:relative; font-size:14.5px; font-weight:400; letter-spacing:.006em; color:var(--body); text-decoration:none; padding-block:5px; transition:color .2s ease; white-space:nowrap; }
.an-nav-link::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .26s var(--ease); }
.an-nav-link:hover, .an-nav-link.is-hover { color:var(--heading); }
.an-nav-link:hover::after, .an-nav-link.is-hover::after, .an-nav-link.is-active::after { width:100%; }
.an-nav-link.is-active { color:var(--heading); }

/* Native select popups follow the theme (Day 58 — promoted from the Conductor app,
   a system-level fix): the root declares color-scheme per theme (tokens.css);
   inherit lets the UA paint a matching popup, and the explicit option colors cover
   engines that ignore color-scheme. Default = dark (the tokens.css convention). */
.an-select { color-scheme:inherit; }
.an-select option { background:#1f1f1d; color:#f5f3ee; }
:root[data-theme="light"] .an-select option { background:#fff; color:#26251f; }