/* ============================================================================
   Baseline — Components
   Every interactive component ships all seven states:
   default · hover · focus · active · disabled · loading · error
   ========================================================================== */

/* ══ Buttons ═══════════════════════════════════════════════════════════════ */

.btn {
  --btn-bg: var(--surface-2);
  --btn-ink: var(--ink);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* touch target floor */
  padding: 0 var(--sp-5);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  /* Named properties only — never `all`. */
  transition: background-color var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out),
              opacity var(--dur-press) var(--ease-out);
}
/* Instant confirmation the interface heard the tap. */
.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--surface-3); }
}

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--brand);
  --btn-ink: var(--on-brand);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--brand) 88%, white); }
}

.btn--ghost { --btn-bg: transparent; --btn-ink: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { --btn-ink: var(--ink); background: var(--surface-2); }
}

.btn--outline { --btn-bg: transparent; --btn-bd: var(--border); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { background: var(--surface-2); --btn-bd: var(--ink-3); }
}

.btn--danger { --btn-bg: var(--st-crisis); --btn-ink: var(--on-status); }

.btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { min-height: 52px; padding: 0 var(--sp-7); font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.btn--icon {
  min-height: 44px; width: 44px; padding: 0;
  border-radius: var(--r-sm);
}
.btn--icon.btn--sm { min-height: 34px; width: 34px; }

/* Loading: label swaps for a spinner, width is preserved so nothing jumps. */
.btn[data-loading='true'] { color: transparent; pointer-events: none; }
.btn[data-loading='true']::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid color-mix(in oklab, var(--btn-ink) 30%, transparent);
  border-top-color: var(--btn-ink);
  border-radius: 50%;
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ Cards ═════════════════════════════════════════════════════════════════
   Used only where they're genuinely the best affordance. Never nested. */

.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--raised { background: var(--surface-2); box-shadow: var(--sh-2); }

.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink-2);
  letter-spacing: 0.005em;
}

a.card, button.card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-press) var(--ease-out),
              background-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
a.card:active, button.card:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover, button.card:hover {
    border-color: var(--border);
    background: var(--surface-2);
  }
}

/* ══ Status pill ═══════════════════════════════════════════════════════════
   Colour is never the only indicator: every pill carries a glyph and a word. */

.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.7em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill__glyph { font-size: 0.9em; line-height: 1; }

.pill--normal   { color: var(--st-normal);   background: var(--st-normal-bg);   border-color: color-mix(in oklab, var(--st-normal) 26%, transparent); }
.pill--elevated { color: var(--st-elevated); background: var(--st-elevated-bg); border-color: color-mix(in oklab, var(--st-elevated) 26%, transparent); }
.pill--stage1   { color: var(--st-stage1);   background: var(--st-stage1-bg);   border-color: color-mix(in oklab, var(--st-stage1) 26%, transparent); }
.pill--stage2   { color: var(--st-stage2);   background: var(--st-stage2-bg);   border-color: color-mix(in oklab, var(--st-stage2) 26%, transparent); }
.pill--crisis   { color: var(--st-crisis);   background: var(--st-crisis-bg);   border-color: color-mix(in oklab, var(--st-crisis) 40%, transparent); }
.pill--brand    { color: var(--brand);       background: color-mix(in oklab, var(--brand) 14%, transparent); border-color: color-mix(in oklab, var(--brand) 28%, transparent); }
.pill--neutral  { color: var(--ink-2);       background: var(--surface-2);      border-color: var(--hairline); }

.pill--solid.pill--crisis { background: var(--st-crisis); color: var(--on-status); border-color: transparent; }
.pill--solid.pill--brand  { background: var(--brand);     color: var(--on-brand);  border-color: transparent; }

/* ══ Badge / count ═════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--st-crisis); color: var(--on-status);
  font-size: 11px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.badge--brand { background: var(--brand); color: var(--on-brand); }
.badge--quiet { background: var(--surface-3); color: var(--ink-2); }

/* ══ Metric ════════════════════════════════════════════════════════════════ */
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric__label { font-size: var(--fs-xs); color: var(--ink-3); }
.metric__delta { font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: var(--fw-medium); }
.metric__delta--up   { color: var(--st-stage2); }
.metric__delta--down { color: var(--brand); }
.metric__delta--flat { color: var(--ink-3); }

/* ══ Form controls ═════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field__error {
  font-size: var(--fs-xs);
  color: var(--st-crisis);
  display: flex; align-items: center; gap: 0.35em;
}

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  transition: border-color var(--dur-press) var(--ease-out),
              background-color var(--dur-press) var(--ease-out);
}
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--st-crisis); }
.input[disabled], .select[disabled], .textarea[disabled] {
  opacity: 0.45; cursor: not-allowed;
}

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Choice chips — the questionnaire's main input. Big targets, no typing. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--ink-3); color: var(--ink); }
}
.chip[aria-pressed='true'], .chip.is-on {
  background: var(--brand); border-color: var(--brand);
  color: var(--on-brand); font-weight: var(--fw-semi);
}
.chip-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-set--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

/* Toggle */
.toggle {
  position: relative;
  width: 46px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out);
}
.toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-press) var(--ease-out);
}
.toggle[aria-checked='true'] { background: var(--brand); border-color: var(--brand); }
.toggle[aria-checked='true']::after { transform: translateX(18px); background: var(--on-brand); }
.toggle[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Range slider */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px;               /* touch target */
  background: transparent; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--surface-3);
}
.slider::-moz-range-track {
  height: 6px; border-radius: var(--r-pill); background: var(--surface-3);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--canvas);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-press) var(--ease-out);
}
.slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--canvas);
}
.slider:active::-webkit-slider-thumb { transform: scale(1.12); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; gap: var(--sp-2); }
.stepper__value {
  font-family: var(--font-mono); font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center;
}

/* ══ Segmented control ═════════════════════════════════════════════════════
   The active state is a duplicated copy of the list, clipped to the selected
   segment. Animating the clip gives a seamless colour transition that timing
   individual colour fades can never match. */

.seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  isolation: isolate;
}
.seg__list { display: flex; }
.seg__btn {
  appearance: none; border: 0; background: transparent;
  min-height: 34px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .seg__btn:hover { color: var(--ink-2); }
}
/* The clipped duplicate. aria-hidden — the real buttons carry semantics. */
.seg__active {
  position: absolute; inset: 3px;
  display: flex;
  border-radius: var(--r-pill);
  pointer-events: none;
  clip-path: inset(0 100% 0 0 round var(--r-pill));
  transition: clip-path var(--dur-screen) var(--ease-out);
  z-index: 1;
}
.seg__active .seg__btn {
  background: var(--brand);
  color: var(--on-brand);
}

/* ══ Tabs ══════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.tab {
  appearance: none; border: 0; background: transparent;
  padding: var(--sp-3) 0;
  color: var(--ink-3);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer; position: relative;
  transition: color var(--dur-press) var(--ease-out);
}
.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-screen) var(--ease-out);
}
.tab[aria-selected='true'] { color: var(--ink); }
.tab[aria-selected='true']::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink-2); } }

/* ══ Tables ════════════════════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-1); z-index: 1;
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .table tbody tr:hover td { background: var(--surface-2); }
}
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); }
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); }

/* ══ List rows ═════════════════════════════════════════════════════════════ */
.rows { display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--hairline); }
.rowitem {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 56px;
  width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit;
  text-decoration: none;
}
a.rowitem, button.rowitem { cursor: pointer; transition: background-color var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.rowitem:hover, button.rowitem:hover { background: var(--surface-2); }
}

/* ══ Skeleton ══════════════════════════════════════════════════════════════
   Loading is skeletons, never a spinner parked in the middle of content. */
.sk {
  background: linear-gradient(90deg,
    var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: sk 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
  height: 1em;
}
@keyframes sk { to { background-position: -200% 0; } }

/* ══ Empty state ═══════════════════════════════════════════════════════════
   Teaches the interface. Never "nothing here". */
.empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-5);
  color: var(--ink-3);
}
.empty__icon { color: var(--ink-3); opacity: 0.6; }
.empty__title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink-2); }
.empty p { font-size: var(--fs-sm); max-width: 38ch; }

/* ══ Callout ═══════════════════════════════════════════════════════════════
   Full border + tinted fill. Never a coloured left stripe. */
.callout {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.callout__body { flex: 1; min-width: 0; }
.callout__title { font-weight: var(--fw-semi); margin-bottom: 2px; }
.callout--brand  { border-color: color-mix(in oklab, var(--brand) 32%, transparent);     background: color-mix(in oklab, var(--brand) 10%, var(--surface-1)); }
.callout--info   { border-color: color-mix(in oklab, var(--st-normal) 32%, transparent); background: var(--st-normal-bg); }
.callout--warn   { border-color: color-mix(in oklab, var(--st-elevated) 32%, transparent); background: var(--st-elevated-bg); }
.callout--danger { border-color: color-mix(in oklab, var(--st-crisis) 45%, transparent); background: var(--st-crisis-bg); }

/* ══ Progress ══════════════════════════════════════════════════════════════ */
.bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.bar__fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--brand);
  transition: width var(--dur-sheet) var(--ease-out);
}
.steps { display: flex; gap: 4px; }
.steps__dot { height: 3px; flex: 1; border-radius: var(--r-pill); background: var(--surface-3); }
.steps__dot.is-done { background: var(--brand); }
.steps__dot.is-now  { background: var(--ink-2); }

/* ══ Avatar ════════════════════════════════════════════════════════════════ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
}
.avatar--lg { width: 52px; height: 52px; font-size: var(--fs-md); }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ══ Tooltip ═══════════════════════════════════════════════════════════════ */
.tip { position: relative; display: inline-flex; }
.tip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.96);
  transform-origin: bottom center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: var(--sh-2);
  z-index: var(--z-tooltip);
  transition: opacity var(--dur-tip) var(--ease-out),
              transform var(--dur-tip) var(--ease-out);
}
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble {
  opacity: 1; transform: translateX(-50%) scale(1);
}

/* ══ Sheet / dialog ════════════════════════════════════════════════════════ */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-sheet) var(--ease-out);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sheet);
  background: var(--surface-1);
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-5);
  transform: translateY(100%);       /* % of its own height — adapts */
  transition: transform var(--dur-sheet) var(--ease-out);
  max-height: 88%;
  overflow-y: auto;
}
.sheet.is-open { transform: translateY(0); }
.sheet__grip {
  width: 36px; height: 4px; border-radius: var(--r-pill);
  background: var(--surface-3); margin: 0 auto var(--sp-4);
}

/* ══ Divider with label ════════════════════════════════════════════════════ */
.rule {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--ink-3); font-size: var(--fs-xs);
}
.rule::before, .rule::after {
  content: ''; flex: 1; height: 1px; background: var(--hairline);
}

/* ══ Reveal (landing page only) ════════════════════════════════════════════
   Enhances already-visible content. Never gates visibility. */
.reveal { animation: reveal 620ms var(--ease-out) backwards; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}