/*
 * CertaRounds — component styles. Built by src/ui/components.js; documented in docs/COMPONENTS.md.
 * Every component: default · hover · pressed · focus-visible · selected · disabled · loading · error.
 */

/* ============ Icons ============ */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.flame { flex-shrink: 0; }
.logo { display: block; flex-shrink: 0; }

/* ============ Specialty marks & tiles ============ */
.spec {
  --spec-fg: hsl(var(--spec-h) var(--spec-s) var(--spec-l));
  --spec-bg: hsl(var(--spec-h) var(--spec-tint-s) var(--spec-tint-l));
  --spec-ink: hsl(var(--spec-h) 64% 28%);
  --spec-line: hsl(var(--spec-h) 70% 88%);
  color: var(--spec-fg);
}
:root[data-theme="dark"] .spec {
  --spec-fg: hsl(var(--spec-h) calc(var(--spec-s) * .92) calc(var(--spec-l) + 10%));
  --spec-bg: color-mix(in srgb, hsl(var(--spec-h) 72% 62%) 15%, var(--surface));
  --spec-ink: hsl(var(--spec-h) 85% 82%);
  --spec-line: hsl(var(--spec-h) 40% 28%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .spec {
    --spec-fg: hsl(var(--spec-h) calc(var(--spec-s) * .92) calc(var(--spec-l) + 10%));
    --spec-bg: color-mix(in srgb, hsl(var(--spec-h) 72% 62%) 15%, var(--surface));
    --spec-ink: hsl(var(--spec-h) 85% 82%);
    --spec-line: hsl(var(--spec-h) 40% 28%);
  }
}
.spec-mark { display: block; flex-shrink: 0; }
.spec .spec-mark, .spec-mark.spec { color: var(--spec-fg); }  /* robust against descendant colour rules in screens */
.spec-tile {
  --tile: 44px;
  display: inline-grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  flex: 0 0 var(--tile);
  border-radius: calc(var(--tile) * .3);
  background: var(--spec-bg);
}

/* ============ Buttons ============ */
.btn {
  --btn-h: 48px;
  --btn-px: 20px;
  --btn-fs: var(--fs-15);
  --btn-r: var(--r-btn);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-r);
  font-size: var(--btn-fs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn .icon { margin: 0 -2px; }
.btn__label { display: inline-block; }
.btn--sm { --btn-h: 36px; --btn-px: 14px; --btn-fs: var(--fs-13); gap: 6px; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }  /* 44px hit area */
.btn--lg { --btn-h: 56px; --btn-px: 24px; --btn-fs: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn--wrap { white-space: normal; }

/* primary — the mockup's subtle violet gradient */
.btn--primary {
  color: var(--primary-fg);
  background: var(--primary-gradient);
  box-shadow: var(--primary-shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--primary:hover { background: var(--primary-gradient-hover); color: var(--primary-fg); }
.btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(79, 70, 229, .3); }
.btn--primary:focus-visible { box-shadow: var(--focus-ring), var(--primary-shadow); }

/* secondary — tinted lavender ("Teach Me") */
.btn--secondary { color: var(--accent-soft-fg); background: var(--accent-soft); }
.btn--secondary:hover { background: var(--accent-soft-hover); color: var(--accent-soft-fg); }
.btn--secondary:active { background: var(--accent-soft-pressed); transform: translateY(1px); }

/* soft — the icon sheet's lavender secondary pills (Customize · Review Mistakes · Bookmark · Add Note ·
   Make Flashcard · "…"): tinted fill + a hairline lavender edge, violet label */
.btn--soft { color: var(--link); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--soft-edge, #E2DCFF); }
.btn--soft .icon { color: var(--accent); }
.btn--soft:hover { background: var(--accent-soft-hover); color: var(--link-hover); }
.btn--soft:active { background: var(--accent-soft-pressed); transform: translateY(1px); }
.btn--soft:focus-visible { box-shadow: var(--focus-ring); }
:root[data-theme="dark"] .btn--soft { --soft-edge: #332E78; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--soft { --soft-edge: #332E78; } }
/* icon-only pill ("…") */
.btn--icon-only { padding: 0; width: var(--btn-h); flex: 0 0 var(--btn-h); }
.btn--icon-only .icon { margin: 0; }

/* outline ("Log In") */
.btn--outline { color: var(--link); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--outline:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--link); }
.btn--outline:active { background: var(--surface-pressed); transform: translateY(1px); }
.btn--outline:focus-visible { box-shadow: var(--focus-ring); }

/* ghost */
.btn--ghost { color: var(--link); background: transparent; }
.btn--ghost:hover { background: var(--surface-hover); color: var(--link-hover); }
.btn--ghost:active { background: var(--surface-pressed); }
.btn--ghost.btn--neutral { color: var(--text-2); }
.btn--ghost.btn--neutral:hover { color: var(--text); }

/* danger */
.btn--danger { color: #fff; background: var(--red-600); box-shadow: 0 1px 2px rgba(214, 56, 62, .25), 0 6px 14px -6px rgba(214, 56, 62, .5); }
.btn--danger:hover { background: var(--red-700); color: #fff; }
.btn--danger:active { transform: translateY(1px); }
.btn--danger-soft { color: var(--danger-strong); background: var(--danger-bg); }
.btn--danger-soft:hover { background: var(--danger-border); color: var(--danger-strong); }

/* disabled — flat, no shadow, honest */
.btn:disabled, .btn[aria-disabled="true"] {
  color: var(--text-disabled);
  background: var(--surface-sunken);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { background: transparent; }

/* loading */
.btn.is-loading { cursor: progress; }
.btn.is-loading .btn__label { opacity: .85; }
.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: .9;
  animation: cr-spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner--lg { width: 28px; height: 28px; border-width: 2.5px; color: var(--primary); }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ============ Icon button ============ */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  color: var(--text-strong);
  background: transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-hover); }
.icon-btn:active { background: var(--surface-pressed); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn:disabled { color: var(--text-disabled); background: transparent; }
.icon-btn[aria-pressed="true"] { color: var(--primary); }
.icon-btn--tinted { background: var(--accent-soft); color: var(--accent-soft-fg); }
.icon-btn--tinted:hover { background: var(--accent-soft-hover); }
.icon-btn--outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.icon-btn--outline:hover { box-shadow: inset 0 0 0 1px var(--border-hover); background: var(--surface-hover); }
.icon-btn--round { border-radius: 50%; }
.icon-btn--sm { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
.icon-btn--sm::after { content: ""; position: absolute; inset: -4px; }
.icon-btn__dot {
  position: absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ============ Card ============ */
.card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--card-p, var(--sp-4));
  color: var(--text);
  min-width: 0;
}
@media (min-width: 768px) { .card { --card-p: var(--sp-5); } }
.card--flat { box-shadow: none; }
.card--tight { --card-p: var(--sp-3); }
.card--roomy { --card-p: var(--sp-5); }
@media (min-width: 768px) { .card--roomy { --card-p: var(--sp-6); } }
.card--flush { padding: 0; overflow: hidden; }
.card--highlight {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--violet-200);
}
:root[data-theme="dark"] .card--highlight { border-color: #332E78; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card--highlight { border-color: #332E78; } }
.card--tinted { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.card--interactive {
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.card--interactive:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); }
.card--interactive:active { transform: translateY(1px); box-shadow: var(--shadow-card); }
.card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-card); }
.card--interactive[aria-disabled="true"] { cursor: not-allowed; opacity: .6; box-shadow: none; }
.card--selected { border-color: var(--selected-border); box-shadow: inset 0 0 0 1px var(--selected-border), var(--shadow-card); background: var(--selected-bg); }
.card--error { border-color: var(--danger-border); }

.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); line-height: var(--lh-snug); }
.card__sub { font-size: var(--fs-13); color: var(--text-3); margin-top: 2px; }
.card__foot { margin-top: var(--sp-4); }
.card__chevron { color: var(--link); flex-shrink: 0; }

/* ============ Section header ============ */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 28px;
}
.section-header__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
@media (min-width: 1024px) { .section-header__title { font-size: var(--fs-20); } }
.section-header__meta { font-size: var(--fs-15); color: var(--text-2); font-weight: var(--fw-medium); }
.link-more {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--link);
  border-radius: 8px;
  padding: 2px 0;
  white-space: nowrap;
}
.link-more::after { content: ""; position: absolute; inset: -10px -8px; }
.link-more:hover { color: var(--link-hover); text-decoration: none; }
.link-more .icon { transition: transform var(--dur-1) var(--ease-out); }
.link-more:hover .icon { transform: translateX(2px); }

/* ============ Metric card ============ */
.metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metric__icon { color: var(--primary); margin-bottom: var(--sp-2); display: inline-flex; }
.metric__icon--tile {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-soft-fg);
}
.metric__label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; }
.metric__value {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.metric__value--accent { color: var(--text-accent); }
.metric__unit { font-size: .66em; font-weight: var(--fw-bold); margin-left: 1px; }
.metric__caption { font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; margin-top: 2px; }
.metric__empty { font-size: var(--fs-15); color: var(--text-3); font-weight: var(--fw-medium); margin-top: 4px; }
.metric--center { align-items: center; text-align: center; }
.metric--center .metric__label { color: var(--text-3); font-weight: var(--fw-medium); }
.metric--center .metric__value { font-size: var(--fs-20); }
.metric--row { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.metric--row .metric__icon { margin: 2px 0 0; }
.metric--row .metric__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
/* compact 2-up cards (countdown · streak): value never wraps */
.metric-card--compact { --card-p: 14px 12px 14px 14px; }
@media (min-width: 768px) { .metric-card--compact { --card-p: 18px 16px 18px 18px; } }
.metric-card--compact .metric--row { gap: 10px; }
.metric-card--compact .metric__icon { margin-top: 1px; }
.metric-card--compact .metric__value { font-size: 1.375rem; white-space: nowrap; }
@media (min-width: 768px) { .metric-card--compact .metric__value { font-size: var(--fs-24); } }
.metric-card--compact .metric__caption,
.metric-card--compact .metric__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card--compact .metric__label { font-size: var(--fs-12); letter-spacing: .005em; }
@media (min-width: 768px) { .metric-card--compact .metric__label { font-size: var(--fs-13); } }
/* R0 #9: each compact card is a size container. Under 168px (2-up on 360–375px phones) the label
   takes the full width on its own line, so "PSBIM countdown" never truncates; icon + value below. */
.metric-card--compact { container-type: inline-size; }
@container (max-width: 167px) {
  .metric-card--compact .metric--row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; }
  .metric-card--compact .metric__body { display: contents; }
  .metric-card--compact .metric__label { grid-column: 1 / -1; grid-row: 1; white-space: normal; line-height: 1.25; margin-bottom: 2px; }
  .metric-card--compact .metric__icon { grid-column: 1; grid-row: 2; margin: 0; }
  .metric-card--compact .metric__icon > svg { width: 24px; height: 24px; }
  .metric-card--compact .metric__value,
  .metric-card--compact .metric__empty { grid-column: 2; grid-row: 2; margin-top: 0; }
  .metric-card--compact .metric__caption { grid-column: 1 / -1; grid-row: 3; }
  .metric-card--compact .card__chevron { position: absolute; top: 12px; right: 10px; }
}
.delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.delta--up { color: var(--success); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--text-3); }

/* ============ Progress ============ */
.progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.progress__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-13); }
.progress__label { color: var(--text-2); font-weight: var(--fw-medium); min-width: 0; }
.progress__value { color: var(--text-strong); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.progress__track {
  position: relative;
  height: var(--bar-h, 8px);
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
}
.progress__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--bar-fill);
  transition: width var(--dur-3) var(--ease-out);
}
.progress--sm { --bar-h: 6px; }
.progress--lg { --bar-h: 12px; }
.progress--success .progress__fill { background: var(--success); }
.progress--warning .progress__fill { background: var(--warning-fill); }
.progress--muted .progress__fill { background: var(--border-control); }
.progress--indeterminate .progress__fill { width: 35% !important; animation: cr-indeterminate 1.2s var(--ease-in-out) infinite; }
@keyframes cr-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ============ Mastery row ============ */
.mastery-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 38%) minmax(96px, 1fr) 44px;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  width: 100%;
  text-align: left;
  color: var(--text);
  border-radius: 12px;
}
button.mastery-row, a.mastery-row { cursor: pointer; margin: 0 -8px; padding: 0 8px; width: calc(100% + 16px); transition: background var(--dur-1) var(--ease-out); }
button.mastery-row:hover, a.mastery-row:hover { background: var(--surface-hover); text-decoration: none; }
button.mastery-row:focus-visible, a.mastery-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mastery-row__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-15); color: var(--text); }
.mastery-row__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mastery-row--wrap { align-items: start; padding-top: 8px; padding-bottom: 8px; }
.mastery-row--wrap > * { align-self: center; }
.mastery-row--wrap .mastery-row__label { white-space: normal; overflow-wrap: break-word; line-height: 1.35; }
.mastery-row__weak {
  flex-shrink: 0; display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: var(--fw-semibold); line-height: 16px; vertical-align: 1px;
  color: var(--warning); background: var(--warning-bg);
}
.mastery-row__pct { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); text-align: right; font-variant-numeric: tabular-nums; }
.mastery-row__pct--na { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); line-height: 1.2; }
.mastery-row .progress__track { --bar-h: 10px; }
.mastery-row--weak .mastery-row__pct { color: var(--warning); }

/* ============ Streak week ============ */
.streak-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.streak-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.streak-day__dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-3);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  transition: background var(--dur-2) var(--ease-out);
}
.streak-day__label { font-size: var(--fs-12); color: var(--text-3); font-weight: var(--fw-medium); }
.streak-day--done .streak-day__dot { background: var(--primary-gradient); color: #fff; box-shadow: 0 2px 6px -2px rgba(79, 70, 229, .5); }
.streak-day--today .streak-day__dot { background: var(--selected-bg); box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); }
.streak-day--today .streak-day__label { color: var(--text-strong); font-weight: var(--fw-bold); }
.streak-day--today.streak-day--done .streak-day__dot { background: var(--primary-gradient); color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--violet-300); }
.streak-day--rest .streak-day__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-3); border: 1.5px dashed var(--border-control); box-shadow: none; }
.streak-day--missed .streak-day__dot { background: var(--surface-sunken); box-shadow: none; }
.streak-day--future .streak-day__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-control); }   /* F2: 3.38:1 light, 3.64:1 dark (was ~1.3:1) */
.streak-week-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-12); color: var(--text-3); }

/* Weekly activity bars (reference "This Week") */
.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); align-items: end; }
.week-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.week-bar__track { position: relative; width: min(28px, 100%); height: var(--week-h, 56px); display: flex; align-items: flex-end; }
.week-bar__fill { width: 100%; border-radius: 8px; background: var(--bar-fill-v); min-height: 6px; transition: height var(--dur-3) var(--ease-out); }
.week-bar--empty .week-bar__fill { background: var(--bar-empty); height: 70% !important; }
.week-bar--rest .week-bar__fill { background: transparent; border: 1.5px dashed var(--border-strong); height: 70% !important; }
.week-bar--today .week-bar__label { color: var(--link); font-weight: var(--fw-bold); }
.week-bar--today.week-bar--empty .week-bar__fill { background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); }
.week-bar__label { font-size: var(--fs-12); color: var(--text-3); font-weight: var(--fw-medium); }

/* ============ Specialty gem + horizontal scroller ============ */
/* R0 #8: item width comes from the SCROLLER's own width (100% of the grid), never the viewport:
   ~3.5 items visible, never narrower than 116px (names stay whole) or wider than 168px. */
.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(var(--hs-min, 116px), calc((100% - 3 * var(--hs-gap, 12px)) / var(--peek, 3.5)), 168px);   /* F4: --hs-min hook */
  gap: var(--hs-gap, 12px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-top: 4px;
  padding-bottom: 12px;
  margin-bottom: -8px;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; min-width: 0; }
.hscroll > * > .gem { height: 100%; }
@media (min-width: 1024px) {
  .hscroll--wrap-desktop {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    padding-bottom: 0; margin-bottom: 0;
  }
}

/* R0 #6: bare ~40px glyph on the white card, name 15/600, caption 13 --text-3. Every gem is its
   own size container, so narrow tiles (<130px) step the name down instead of truncating it. */
.gem {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 4px;
  padding: var(--sp-4) 8px 14px;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  min-width: 0;
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
button.gem, a.gem { cursor: pointer; }
button.gem:hover, a.gem:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); text-decoration: none; }
button.gem:active, a.gem:active { transform: translateY(1px); }
button.gem:focus-visible, a.gem:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-card); }
.gem__mark { display: grid; place-items: center; min-height: 44px; margin-bottom: 6px; }
.gem__name {
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong);
  line-height: 1.25; letter-spacing: -0.01em; width: 100%;
  overflow: hidden; overflow-wrap: normal; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  /* F2 (Widgets): every name owns a two-line box, text at its top, so the caption under it sits on the
     same line in every card whether the name wraps ("Infectious Disease") or not ("Cardiology"). */
  min-height: 2.5em;
}
.gem__meta { font-size: var(--fs-13); color: var(--text-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-top: 2px; }
.gem__due { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--link); line-height: 1.3; white-space: nowrap; }
@container (max-width: 129px) {
  .gem__name { font-size: 13.5px; letter-spacing: -0.015em; }
  .gem__meta, .gem__due { font-size: var(--fs-12); }
}
.gem__bar { width: 72%; max-width: 88px; }
.gem__bar .progress__track { --bar-h: 4px; }
.gem .spec-tile { --tile: 48px; }

/* ============ Chips ============ */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 18px;             /* = a pill at 32–36px; a soft capsule if the label wraps */
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 18px;
  color: var(--text-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  max-width: 100%;
}
/* R1 D6: chips never ellipsize — a label longer than the space wraps (the chip moves to the next line of
   its group first; only a chip wider than the whole line wraps its own text). */
.chip > span { min-width: 0; overflow-wrap: break-word; }
button.chip { cursor: pointer; transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
button.chip::after { content: ""; position: absolute; inset: -5px -2px; }   /* F4: 36px phone chip + 5 + 5 = 46 (a probe 4px outside always lands); ChipGroup rows are 10px apart on phones */
button.chip:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--text); }
button.chip:active { background: var(--surface-pressed); }
button.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button.chip[aria-pressed="true"], button.chip[aria-checked="true"], button.chip[aria-selected="true"] {
  color: var(--accent-soft-fg);
  background: var(--selected-bg);
  box-shadow: inset 0 0 0 1.5px var(--selected-border);
  font-weight: var(--fw-semibold);
}
button.chip:disabled { color: var(--text-disabled); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: not-allowed; }
.chip__count { color: inherit; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; opacity: 1; }  /* the chip's own text colour — ≥4.5:1 on every variant, tinted and specialty included */
.chip__remove { display: inline-grid; place-items: center; margin-right: -6px; width: 22px; height: 22px; border-radius: 50%; color: var(--text-3); }
.chip__remove:hover { background: var(--surface-pressed); color: var(--text); }
.chip--sm { min-height: 26px; padding: 4px 10px; font-size: var(--fs-12); line-height: 16px; gap: 5px; border-radius: 14px; }
/* metadata chips — specialty-tinted & topic ("Cardiology" · "Heart Failure") */
.chip--spec { color: var(--spec-ink); background: var(--spec-bg); box-shadow: none; font-weight: var(--fw-semibold); padding-left: 10px; }
.chip--topic { color: var(--accent-soft-fg); background: var(--accent-soft); box-shadow: none; font-weight: var(--fw-medium); padding-left: 10px; }
.chip--topic .icon { color: var(--accent); }
.chip--neutral { background: var(--surface-sunken); box-shadow: none; color: var(--text-2); }
/* plain: white pill with a hairline (difficulty chips on the icon sheet) */
.chip--plain { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); }
/* DS12: long labels (chapter titles) wrap instead of truncating */
.chip--wrap { height: auto; min-height: 32px; padding-top: 7px; padding-bottom: 7px; border-radius: 16px; align-items: flex-start; white-space: normal; line-height: 18px; }
.chip--wrap > .chip__label { overflow: visible; overflow-wrap: break-word; min-width: 0; }
.chip--wrap > .icon, .chip--wrap > .gem-icon, .chip--wrap > .spec-mark { margin-top: 1px; }
.chip--sm.chip--wrap { padding-top: 4px; padding-bottom: 4px; line-height: 16px; }
/* status / difficulty dot */
.chip__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--border-control); }
.chip__dot--success { background: var(--success-fill); }
.chip__dot--warning { background: var(--warning-fill); }
.chip__dot--danger { background: var(--danger); }
.chip__dot--primary { background: var(--primary); }
.chip__dot--neutral { background: var(--border-control); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* F4 (D7): the DS one-line chip scroller. overflow-x:auto clips BOTH axes, so the row carries 8px of
   vertical padding (a 30px sm chip needs 7px, a 36px chip 4px, for their 44px ::after hit areas) and the
   same negative margin keeps the page rhythm. Use .chip-scroll (or ChipGroup({scroll:true})) for any
   horizontally scrolling chip/pill row; .chip-scroll--bleed runs it to the screen edges with gutter padding. */
.chip-scroll {
  display: flex; flex-wrap: nowrap; gap: var(--sp-2);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain;
  padding-block: 8px; margin-block: -8px;
  scroll-padding-inline: var(--gutter);
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll > * { flex: 0 0 auto; }
.chip-scroll--bleed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.chip-group.chip-scroll:has(> .chip--sm) { row-gap: 0; }

/* ============ Status pills (icon sheet) ============ */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap;
}
.status-pill--sm { height: 26px; padding: 0 10px 0 8px; font-size: var(--fs-12); }
.status-pill--success { color: var(--success-strong); background: var(--success-bg); }
.status-pill--warning { color: var(--warning); background: var(--warning-bg); }
.status-pill--danger { color: var(--danger-strong); background: var(--danger-bg); }
.status-pill--neutral { color: var(--text-2); background: var(--surface-sunken); }
.status-pill--primary { color: var(--accent-soft-fg); background: var(--accent-soft); }
.status-pill > .gem-icon { flex-shrink: 0; }

/* ============ Segmented control ============ */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);   /* equal segments, never narrower than their label (min-width stays free for the 44px rule) */
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  max-width: 100%;
}
.segmented--block { display: grid; width: 100%; }
.segmented__btn {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.segmented__btn::after { content: ""; position: absolute; inset: -3px 0; }
.segmented__btn:hover { color: var(--text); }
.segmented__btn[aria-checked="true"] { background: var(--surface); color: var(--link); box-shadow: 0 1px 2px rgba(16, 27, 77, .08), 0 1px 6px rgba(16, 27, 77, .06); }
:root[data-theme="dark"] .segmented__btn[aria-checked="true"] { background: var(--surface-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented__btn[aria-checked="true"] { background: var(--surface-3); } }
.segmented__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.segmented__btn:disabled { color: var(--text-disabled); cursor: not-allowed; }

/* ============ Tabs ============ */
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  border-radius: 2px 2px 0 0; background: transparent;
  transition: background var(--dur-2) var(--ease-out);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--link); }
.tabs__tab[aria-selected="true"]::after { background: var(--primary); }
.tabs__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.tabs__tab:disabled { color: var(--text-disabled); }
.tabs__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center;
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  background: var(--surface-sunken); color: var(--text-2);
}
.tabs__tab[aria-selected="true"] .tabs__count { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* ============ Question option (A–D) ============ */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;                /* Q-F1: tighter on phones, still ≥44px; 58px from 768 */
  padding: 8px 16px 8px 9px;
  border-radius: var(--r-option);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text);
  text-align: left;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.option__letter {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--option-letter-bg);
  color: var(--text-strong);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.option__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.option__text { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }   /* F3: never auto-hyphenate; only real hyphens break */
.option__end { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 22px; width: 22px; min-height: 22px; margin-left: 4px; }  /* always reserved: no reflow on select */
.option__tag { font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: .01em; }
/* DS28: compactTags:'auto' — the text tag drops (icon mark + screen-reader text remain) while the option is narrow */
.option--auto-tags { container: cr-option / inline-size; }
@container cr-option (max-width: 479px) { .option__tag { display: none; } }
.option__mark { display: inline-flex; }
/* F4: 3+ line options: the disc and the mark sit on the first line, not in the middle of a tall row */
.option--tall { align-items: flex-start; }
.option--tall .option__letter { margin-top: -3px; }                        /* phones: 28px disc centred on a 21.6px first line */
.option--tall .option__end { align-self: flex-start; margin-top: 1px; }
@media (min-width: 768px) { .option--tall .option__letter { margin-top: -5px; } }   /* 34px disc on a 23.8px line */

.option:not(:disabled):not([aria-disabled="true"]):hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); }
.option:not(:disabled):not([aria-disabled="true"]):active { background: var(--surface-pressed); }
.option:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--border-hover), var(--focus-ring); }

.option--selected,
.option--selected:not(:disabled):hover { background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); }
.option--selected .option__letter { background: var(--surface); color: var(--link); }
.option--selected .option__mark { color: var(--accent); }
.option--selected:focus-visible { box-shadow: inset 0 0 0 1.5px var(--selected-border), var(--focus-ring); }

.option--correct { background: var(--success-bg); box-shadow: inset 0 0 0 1.5px var(--success); color: var(--text); }
.option--correct .option__letter { background: var(--success); color: var(--success-fg); }
.option--correct .option__mark, .option--correct .option__tag { color: var(--success-strong); }

.option--incorrect { background: var(--danger-bg); box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--text); }
.option--incorrect .option__letter { background: var(--danger); color: var(--danger-fg); }
.option--incorrect .option__mark, .option--incorrect .option__tag { color: var(--danger-strong); }

.option--correct-unchosen { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--success); }
.option--correct-unchosen .option__letter { background: var(--success); color: var(--success-fg); }   /* F4: filled disc in both correct states; "Your answer" carries the red */
.option--correct-unchosen .option__mark, .option--correct-unchosen .option__tag { color: var(--success-strong); }

.option:disabled, .option[aria-disabled="true"] { cursor: default; }
.option--dim { color: var(--text-2); }
.option--dim .option__letter { color: var(--text-2); }   /* F3: ≥4.5:1 on the letter disc (was 4.32) */
.option--dim:disabled { box-shadow: inset 0 0 0 1px var(--border); }

@media (min-width: 768px) { .option { min-height: 58px; gap: 14px; padding: 12px 20px 12px 12px; font-size: var(--fs-17); line-height: 1.4; } }
/* F2 (Mock/Session): phones give the answer text more of the line — the letter disc is 28px (14px
   semibold letter, still ≥4.5:1) nested 6px inside the pill, with an 8px gutter, so the text starts 42px
   from the option's edge (was 52; 58px from the screen edge at a 16px gutter, was 68). The row itself
   stays ≥52px tall, the 44px target is the whole row. */
@media (max-width: 767px) {
  .option { gap: 8px; padding-left: 6px; padding-right: 12px; }
  .option__letter { width: 28px; height: 28px; flex-basis: 28px; font-size: 14px; }
  /* F3 (Mock/Session): the always-reserved mark column is 20px with no extra margin on phones, so the
     text runs to 40px from the right edge (was 50): same stable column, 10px more line. */
  .option__end { flex-basis: 20px; width: 20px; margin-left: 0; }
  .option__mark .icon, .option__mark svg { width: 20px; height: 20px; }
}

/* ============ Confidence selector ============ */
.confidence { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.confidence__legend { font-size: var(--fs-15); color: var(--text-2); font-weight: var(--fw-medium); padding: 0; margin-bottom: 10px; }
.confidence__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.confidence__opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.confidence__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.confidence__pill {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: transparent;                 /* R0 P2 #16: light inline radios, not a second answer set */
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  text-align: center;
  line-height: 1.25;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.confidence__dot {
  position: relative;
  width: 20px; height: 20px; flex: 0 0 20px;          /* F3: 20px, 2px ring in --radio-ring (≥4:1 light and dark) */
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--radio-ring);
  display: grid; place-items: center;
  color: #fff;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.confidence__dot .icon { opacity: 0; transform: scale(.6); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.confidence__opt:hover .confidence__pill { background: var(--surface-hover); }
.confidence__input:checked + .confidence__pill { background: var(--selected-bg); color: var(--accent-soft-fg); font-weight: var(--fw-semibold); }
.confidence__input:checked + .confidence__pill .confidence__dot { background: var(--accent); box-shadow: none; }
.confidence__input:checked + .confidence__pill .confidence__dot .icon { opacity: 1; transform: none; }
.confidence__input:focus-visible + .confidence__pill { box-shadow: var(--focus-ring); }
.confidence__input:disabled + .confidence__pill { color: var(--text-disabled); background: transparent; cursor: not-allowed; }
.confidence--error .confidence__pill { box-shadow: inset 0 0 0 1px var(--danger-border); }
.confidence__error { font-size: var(--fs-13); color: var(--danger); display: flex; align-items: center; gap: 6px; }
@media (min-width: 768px) { .confidence__opts { display: flex; } .confidence__opt { flex: 0 1 auto; } .confidence__pill { padding: 0 16px; font-size: var(--fs-15); } }

/* ============ Explanation disclosure list ============ */
.explain { display: flex; flex-direction: column; }
.explain__item + .explain__item { border-top: 1px solid var(--divider); }
.explain__row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  text-align: left;
  color: var(--link);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  border-radius: 8px;
  transition: color var(--dur-1) var(--ease-out);
}
.explain__row:hover { color: var(--link-hover); }
.explain__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.explain__lead { display: inline-flex; color: var(--accent); }
.explain__label { flex: 1 1 auto; min-width: 0; }
.explain__hint { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-3); }
.explain__chev { color: var(--link); transition: transform var(--dur-2) var(--ease-out); }
.explain__row[aria-expanded="true"] .explain__chev { transform: rotate(90deg); }
.explain__panel { padding: 0 0 var(--sp-4); font-size: var(--fs-15); line-height: 1.6; color: var(--text-2); }
.explain__panel[hidden] { display: none; }
.explain__panel p + p { margin-top: var(--sp-3); }
.explain__row:disabled { color: var(--text-disabled); cursor: default; }
@media (min-width: 768px) { .explain__row { font-size: 1rem; } .explain__panel { font-size: 1rem; } }

/* Citation line — the product's strongest trust signal */
.citation {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-13); line-height: 1.5; color: var(--text-2);
}
.citation .icon { color: var(--accent); margin-top: 1px; }
.citation cite { font-style: normal; font-weight: var(--fw-semibold); color: var(--text); }

/* ============ Result banner ============ */
.result {
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.result__icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.result__title { font-size: 1rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); line-height: 1.35; }
.result__body { margin-top: 4px; font-size: var(--fs-15); line-height: 1.55; color: var(--text-2); }
.result--correct .result__icon { color: var(--success); }
.result--incorrect .result__icon { color: var(--danger); }
/* R5: verdict TEXT uses the text-safe shades (≥ 4.5:1 on white and on the lavender result box); icons keep the base hue */
.result--correct .result__title { color: var(--success-strong); }
.result--incorrect .result__title { color: var(--danger-strong); }
.result--filled { padding: var(--sp-4); border-radius: var(--r-md); }
.result--filled.result--correct { background: var(--success-bg); }
.result--filled.result--correct .result__title { color: var(--success-strong); }
.result--filled.result--incorrect { background: var(--danger-bg); }
.result--filled.result--incorrect .result__title { color: var(--danger-strong); }

/* ============ Overlays: backdrop, sheet, modal ============ */
.backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.backdrop.is-open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sheet);
  display: flex; flex-direction: column;
  max-height: min(88vh, 88dvh);
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-raised);
  padding-bottom: var(--safe-bottom);
  transform: translateY(104%);
  transition: transform var(--dur-3) var(--ease-out);
  outline: none;
}
.sheet.is-open { transform: none; }
.sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 0; flex-shrink: 0; }
.sheet__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-5); flex-shrink: 0; }
.sheet__title { flex: 1; font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.sheet__body { padding: var(--sp-2) var(--sp-5) var(--sp-5); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* F2 (HQ): a scrolling sheet never draws a heavy bar (or arrow buttons) down its edge. The thumb is thin and
   token-coloured and appears only while the pointer is over the sheet body; touch screens use overlay bars.
   The gutter is reserved on the right only, so the body keeps the title's left edge. */
.sheet__body { scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }   /* F3: right edge only, so the body shares the title's left edge */
.sheet__body:hover { scrollbar-color: var(--border-strong) transparent; }
.sheet__body::-webkit-scrollbar { width: 8px; }
.sheet__body::-webkit-scrollbar-thumb { background-color: transparent; }
.sheet__body:hover::-webkit-scrollbar-thumb { background-color: var(--border-strong); }
.sheet__foot { padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--divider); display: flex; gap: var(--sp-3); flex-shrink: 0; }
.sheet__foot > .btn { flex: 1; }
/* F3 (Specialties): ≥768 the side sheet sizes to its content, up to the viewport, as a floating panel
   16px in from the top-right, so the footer sits directly under the content (no empty band above it).
   Long content reaches the max height and the body scrolls. openSheet({fullHeight:true}) keeps the
   docked full-height drawer for screens that want it. */
@media (min-width: 768px) {
  .sheet {
    left: auto; top: var(--sp-4); bottom: auto; right: var(--sp-4);
    width: min(440px, calc(100vw - 2 * var(--sp-4)));
    max-height: calc(100vh - 2 * var(--sp-4));
    max-height: calc(100dvh - 2 * var(--sp-4));
    border-radius: var(--r-xl);
    padding-bottom: 0;
    transform: translateX(calc(100% + var(--sp-4) + 24px));
  }
  .sheet--full {
    top: 0; bottom: 0; right: 0;
    width: min(440px, 100vw);
    max-height: none;
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    transform: translateX(104%);
  }
  .sheet__handle { display: none; }
  .sheet__head { padding: var(--sp-5) var(--sp-4) var(--sp-3) var(--sp-6); }
  .sheet__body { padding: var(--sp-2) var(--sp-6) var(--sp-6); flex: 1 1 auto; min-height: 0; }
  .sheet__foot { padding: var(--sp-4) var(--sp-6); }
  .sheet--wide { width: min(560px, calc(100vw - 2 * var(--sp-4))); }
  .sheet--full.sheet--wide { width: min(560px, 100vw); }
  .sheet--center { width: min(560px, calc(100vw - 2 * var(--sp-4))); }
}
/* openSheet({ size: 'center' }): a centred panel with a soft fade and lift — 560px on tablets (F3 sweep:
   it used to sit in the top-right corner as a side panel at 768–1023), ~760px from 1024. Phones keep the
   bottom sheet. Reduced motion: fade only. */
@media (min-width: 768px) {
  .sheet.sheet--center {
    top: 50%; bottom: auto; left: 50%; right: auto;
    width: min(560px, calc(100vw - 2 * var(--sp-6)));
    max-height: min(880px, calc(100vh - 2 * var(--sp-6)), calc(100dvh - 2 * var(--sp-6)));
    border-radius: var(--r-xl);
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  }
  .sheet.sheet--center.is-open { opacity: 1; transform: translate(-50%, -50%); }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) { .sheet.sheet--center { transform: translate(-50%, -50%); } }
@media (min-width: 768px) { :root[data-motion="reduce"] .sheet.sheet--center { transform: translate(-50%, -50%); } }
@media (min-width: 1024px) {
  .sheet.sheet--center {
    top: 50%; bottom: auto; left: 50%; right: auto;
    width: min(760px, calc(100vw - 2 * var(--sp-8)));
    max-height: min(880px, calc(100vh - 2 * var(--sp-7)), calc(100dvh - 2 * var(--sp-7)));
    border-radius: var(--r-xl);
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  }
  .sheet.sheet--center.is-open { opacity: 1; transform: translate(-50%, -50%); }
  .sheet--center .sheet__head { padding: var(--sp-5) var(--sp-5) var(--sp-3) var(--sp-7); }
  .sheet--center .sheet__body { padding: var(--sp-2) var(--sp-7) var(--sp-6); }
  .sheet--center .sheet__foot { padding: var(--sp-4) var(--sp-7) var(--sp-5); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .sheet.sheet--center { transform: translate(-50%, -50%); } }
@media (min-width: 1024px) { :root[data-motion="reduce"] .sheet.sheet--center { transform: translate(-50%, -50%); } }

.modal-wrap {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--sp-4);
  pointer-events: none;
}
.modal {
  pointer-events: auto;
  width: min(480px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow-raised);
  padding: var(--sp-6);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  outline: none;
}
.modal.is-open { opacity: 1; transform: none; }
.modal__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-soft-fg); margin-bottom: var(--sp-4); }
.modal__icon--danger { background: var(--danger-bg); color: var(--danger); }
.modal__title { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: var(--lh-snug); }
.modal__body { margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-15); line-height: 1.55; }
.modal__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }   /* F3: visual order = DOM order (Tab never moves up) */
@media (min-width: 480px) { .modal__actions { flex-direction: row; justify-content: flex-end; } }
.modal__close { position: absolute; top: 12px; right: 12px; }
body.has-overlay { overflow: hidden; }

/* ============ Toast ============ */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}
.shell[data-mode="focus"] ~ .toast-region, .toast-region--low { bottom: calc(var(--safe-bottom) + 16px); }
@media (min-width: 768px) { .toast-region { left: auto; right: 24px; bottom: 24px; transform: none; align-items: flex-end; } }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: 10px 8px 10px 16px;
  border-radius: 16px;
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--shadow-raised);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.toast.is-open { opacity: 1; transform: none; }
.toast__icon { display: inline-flex; flex-shrink: 0; }
.toast--success .toast__icon { color: #54D69A; }
.toast--danger .toast__icon { color: #FF8A8F; }
.toast--info .toast__icon { color: #B6A8FF; }
:root[data-theme="dark"] .toast--success .toast__icon { color: var(--green-700); }
:root[data-theme="dark"] .toast--danger .toast__icon { color: var(--red-600); }
:root[data-theme="dark"] .toast--info .toast__icon { color: var(--violet-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast--success .toast__icon { color: var(--green-700); }
  :root:not([data-theme="light"]) .toast--danger .toast__icon { color: var(--red-600); }
  :root:not([data-theme="light"]) .toast--info .toast__icon { color: var(--violet-600); }
}
.toast__msg { flex: 1; min-width: 0; line-height: 1.4; }
.toast__action {
  flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: 10px;
  font-weight: var(--fw-semibold); font-size: var(--fs-15);
  color: #C4B8FF;
}
:root[data-theme="dark"] .toast__action { color: var(--violet-600); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast__action { color: var(--violet-600); } }
.toast__action:hover { background: rgba(255, 255, 255, .08); }
.toast__action:focus-visible, .toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.toast__close { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: inherit; opacity: .7; flex-shrink: 0; }
.toast__close:hover { opacity: 1; background: rgba(255, 255, 255, .08); }

/* ============ Tooltip ============ */
.tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(16, 27, 77, .18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.tooltip.is-open { opacity: 1; transform: none; }
.info-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-3); position: relative; vertical-align: middle; }
.info-dot::after { content: ""; position: absolute; inset: -10px; }
.info-dot:hover { color: var(--text); }
.info-dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============ Empty state ============ */
.empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  gap: var(--sp-2);
}
/* R0 #10: one quiet 64px circle in --accent-soft with a 28px outline icon — no halo rings, no
   floating tile, no drop shadow. The title sits 16px below it. */
.empty__art {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  margin-bottom: var(--sp-2);
}
.empty__glyph { display: grid; place-items: center; color: inherit; }
.empty__media { max-width: 160px; margin-bottom: var(--sp-3); }
.empty__title { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: var(--lh-snug); }
.empty__body { font-size: var(--fs-15); color: var(--text-2); max-width: 38ch; line-height: 1.55; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.empty--compact { padding: var(--sp-5) var(--sp-4); }
.empty--compact .empty__art { width: 52px; height: 52px; }
.empty--compact .empty__title { font-size: var(--fs-17); }

/* ============ Skeleton ============ */
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 40%, var(--skeleton-a) 80%);
  background-size: 250% 100%;
  animation: cr-shimmer 1.4s ease-in-out infinite;
}
.skeleton--text { height: 12px; border-radius: 6px; }
.skeleton--title { height: 20px; border-radius: 8px; width: 60%; }
.skeleton--circle { border-radius: 50%; }
.skeleton--block { border-radius: var(--r-lg); }
.skeleton-stack { display: flex; flex-direction: column; gap: 10px; }
@keyframes cr-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ============ Fields ============ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); }
.field__hint { font-size: var(--fs-13); color: var(--text-3); }
.field__error { font-size: var(--fs-13); color: var(--danger); display: flex; align-items: center; gap: 6px; }
.field__success { font-size: var(--fs-13); color: var(--success); display: flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); }
.field__optional { font-weight: var(--fw-regular); color: var(--text-3); }
.field__hint[hidden], .field__status[hidden], .field__error[hidden], .field__success[hidden] { display: none; }
.field--error .input { box-shadow: inset 0 0 0 1.5px var(--danger); }
.field--success .input { box-shadow: inset 0 0 0 1.5px var(--success); }
.field--error .input:focus { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 4px rgba(214, 56, 62, .14); }
/* leading icon / trailing slot inside the field (unit, show/hide, "Check availability"…) */
.field__control { position: relative; display: flex; align-items: center; min-width: 0; }
.field__control > .input { flex: 1 1 auto; }
.field__lead { position: absolute; left: 14px; display: inline-flex; color: var(--text-3); pointer-events: none; }
.field__control--lead > .input { padding-left: 44px; }
.field__trail { position: absolute; right: 6px; display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-15); }
.field__trail > .btn--sm, .field__trail > .icon-btn { margin: 0; }
.field__control--trail > .input { padding-right: var(--field-trail-w, 56px); }
.input--multiline { min-height: 112px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; }
/* Select: native element, custom chevron */
.select__control { position: relative; display: flex; align-items: center; }
.select__input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select__chev { position: absolute; right: 14px; color: var(--text-3); pointer-events: none; }
.select__input:disabled + .select__chev { opacity: .5; }
.input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-input);
  color: var(--text);
  font-size: 1rem;
  transition: box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.input::placeholder { color: var(--text-3); opacity: 1; }
.input:hover { box-shadow: inset 0 0 0 1px var(--border-input-hover); }
.input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 4px rgba(109, 74, 255, .16); }
.input:disabled { background: var(--surface-sunken); color: var(--text-disabled); cursor: not-allowed; }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }

.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search__icon { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.search__input { padding-left: 44px; padding-right: 44px; min-height: 44px; font-size: var(--fs-15); background: var(--surface); }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__end { position: absolute; right: 6px; display: flex; align-items: center; }
.search__clear { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.search__clear:hover { background: var(--surface-hover); color: var(--text); }
.search__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.search__kbd { margin-right: 6px; }
.search--filled .search__kbd { display: none; }
.search:not(.search--filled) .search__clear { display: none; }
.search--sunken .search__input { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-input); }

/* ============ List rows ============ */
.list { display: flex; flex-direction: column; }
.list--divided > * + * { border-top: 1px solid var(--divider); }
.list-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  min-height: 60px;
  padding: 10px var(--sp-4);
  text-align: left;
  color: var(--text);
  background: transparent;
  transition: background var(--dur-1) var(--ease-out);
}
.list--inset .list-row { padding-left: 0; padding-right: 0; }
button.list-row, a.list-row { cursor: pointer; }
button.list-row:hover, a.list-row:hover { background: var(--surface-hover); text-decoration: none; }
button.list-row:active, a.list-row:active { background: var(--surface-pressed); }
button.list-row:focus-visible, a.list-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); border-radius: 12px; }
.list-row[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.list-row__lead { flex: 0 0 40px; width: 40px; display: inline-flex; align-items: center; justify-content: center; }
.list-row__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-soft-fg); }
.list-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.list-row__sub { font-size: var(--fs-13); color: var(--text-3); line-height: 1.4; }
.list-row__meta { flex-shrink: 0; font-size: var(--fs-13); color: var(--text-2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: right; }
.list-row__chev { color: var(--text-3); flex-shrink: 0; }
button.list-row:hover .list-row__chev, a.list-row:hover .list-row__chev { color: var(--link); }
.list-row--dot .list-row__lead::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--accent)); margin: 0 4px; }

/* ============ Badge ============ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--surface-sunken);
}
.badge .icon { margin-left: -2px; }
.badge--primary { color: var(--accent-soft-fg); background: var(--accent-soft); }
.badge--success { color: var(--success-strong); background: var(--success-bg); }
.badge--warning { color: var(--warning); background: var(--warning-bg); }
.badge--danger { color: var(--danger-strong); background: var(--danger-bg); }
.badge--solid { color: var(--primary-fg); background: var(--primary); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge--demo {
  height: 26px; padding: 0 10px 0 8px;
  color: var(--warning);
  background: var(--warning-bg);
  box-shadow: inset 0 0 0 1px var(--warning-border);
  letter-spacing: .01em;
}
.badge--demo-fixed { position: fixed; z-index: var(--z-toast); top: calc(var(--safe-top) + 10px); left: 50%; transform: translateX(-50%); box-shadow: inset 0 0 0 1px var(--warning-border), var(--shadow-card); }
@media (min-width: 1024px) { .badge--demo-fixed { left: auto; right: 20px; transform: none; top: 16px; } }
.badge--count { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; color: var(--primary-fg); background: var(--primary); }   /* shell F1: calm violet count by default */
.badge--count.badge--count-danger { color: var(--danger-fg); background: var(--danger); }                           /* tone:"danger" / "urgent" only */

/* ============ Avatar ============ */
.avatar {
  display: inline-grid; place-items: center;
  width: var(--av, 40px); height: var(--av, 40px);
  flex: 0 0 var(--av, 40px);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  font-size: calc(var(--av, 40px) * .38);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  overflow: hidden;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --av: 32px; }
.avatar--lg { --av: 56px; }
.avatar--xl { --av: 72px; }
.avatar--ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--violet-300); }

/* ============ Switch ============ */
.switch {
  position: relative;
  display: inline-flex; align-items: center;
  width: 46px; height: 28px; flex: 0 0 46px;
  border-radius: var(--r-pill);
  background: var(--switch-off-fill);                /* lighter off track; the 1.5px ring carries the 3:1 boundary */
  box-shadow: inset 0 0 0 1.5px var(--switch-off);
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.switch::after { content: ""; position: absolute; inset: -8px -2px; }
.switch__knob {
  position: absolute; left: 3px; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 27, 77, .1), 0 1px 3px rgba(16, 27, 77, .25);
  transition: transform var(--dur-2) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--primary); box-shadow: none; }
.switch[aria-checked="true"] .switch__knob { transform: translateX(18px); }
.switch:hover { filter: brightness(1.04); }
.switch:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--switch-off), var(--focus-ring); }
.switch[aria-checked="true"]:focus-visible { box-shadow: var(--focus-ring); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.toggle-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; cursor: pointer; }
.toggle-row__body { flex: 1; min-width: 0; }
.toggle-row__label { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.toggle-row__hint { font-size: var(--fs-13); color: var(--text-3); margin-top: 2px; }

/* ============ Stepper dots ============ */
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--border-strong); transition: width var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out); }
.stepper__dot--done { background: var(--violet-300); }
.stepper__dot--current { width: 24px; background: var(--primary); }
:root[data-theme="dark"] .stepper__dot--done { background: #4B4592; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stepper__dot--done { background: #4B4592; } }

/* ============ Timer ============ */
.timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.timer .icon { color: var(--accent); }
.timer--warn, .timer--warn .icon { color: var(--warning); }
.timer--over, .timer--over .icon { color: var(--danger); }
.timer--paused { color: var(--text-3); }
.timer--paused .icon { color: var(--text-3); }

/* ============ Keyboard hint ============ */
.kbd-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-3); }
.kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--kbd-bg);
  box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 -1.5px 0 var(--border-strong);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.kbd-hint__sep { color: var(--text-disabled); }
@media (hover: none) { .kbd-hint, .search__kbd { display: none; } }

/* ============ Navigation: top bar, tab bar, rail, sidebar ============ */
.topbar {
  display: flex; align-items: center; gap: var(--sp-1);
  height: var(--topbar-h);
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
}
.topbar__side { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; min-width: 44px; }
.topbar__side--end { justify-content: flex-end; }
.topbar__center { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.topbar__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.topbar__brand { display: inline-flex; border-radius: 8px; }
.topbar__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.topbar-progress { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; margin: 0 var(--gutter); }
@media (min-width: 768px) { .topbar-progress { max-width: var(--content-max); margin: 0 auto; } }
.topbar-progress__fill { height: 100%; border-radius: inherit; background: var(--bar-fill); transition: width var(--dur-3) var(--ease-out); }

.tabbar { display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); height: var(--tabbar-h); max-width: 560px; margin: 0 auto; padding: 0; list-style: none; }
.tabbar__cell { display: flex; min-width: 0; }                 /* F2: <li> around each link (list semantics on the li, not the a) */
.tabbar__cell > .tabbar__item { flex: 1 1 auto; }
.tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0;
  color: var(--nav-fg);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  letter-spacing: .005em;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.tabbar__item:hover { color: var(--text); text-decoration: none; }
.tabbar__item[aria-current="page"] { color: var(--nav-active); font-weight: var(--fw-semibold); }
.tabbar__item:focus-visible { outline: none; }
.tabbar__item:focus-visible .tabbar__icon { box-shadow: var(--focus-ring); }
.tabbar__icon { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 15px; transition: background var(--dur-2) var(--ease-out); }
.tabbar__badge { position: absolute; top: 6px; left: calc(50% + 8px); }

.rail { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-4) 0 var(--sp-4); gap: var(--sp-1); }
.rail__brand { display: grid; place-items: center; height: 48px; margin-bottom: var(--sp-4); border-radius: 12px; }
.rail__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 64px; padding: 6px 0;
  color: var(--nav-fg);
  font-size: 11px; font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: 12px;
}
.rail__item:hover { color: var(--text); text-decoration: none; }
.rail__item:hover .rail__icon { background: var(--surface-hover); }
.rail__icon { position: relative; display: grid; place-items: center; width: 52px; height: 32px; border-radius: 16px; transition: background var(--dur-2) var(--ease-out); }
.rail__badge { position: absolute; top: -6px; right: 2px; pointer-events: none; }
.rail__badge .badge--count { height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
.rail__item[aria-current="page"] { color: var(--nav-active); font-weight: var(--fw-semibold); }
.rail__item[aria-current="page"] .rail__icon { background: var(--nav-indicator); }
.rail__item:focus-visible { outline: none; }
.rail__item:focus-visible .rail__icon { box-shadow: var(--focus-ring); }
.rail__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }

.sidebar { display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--sp-5) var(--sp-4) var(--sp-4); gap: var(--sp-5); overflow-y: auto; }
.sidebar__brand { display: inline-flex; padding: 4px 8px; border-radius: 10px; align-self: flex-start; }
.sidebar__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__section { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3); padding: 0 12px; margin: var(--sp-2) 0 var(--sp-1); }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--nav-fg);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--nav-indicator); color: var(--nav-active); font-weight: var(--fw-semibold); }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-item__label { flex: 1; min-width: 0; }
.nav-item__meta { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav-item[aria-current="page"] .nav-item__meta { color: var(--nav-active); }
.sidebar__search {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 10px 0 12px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-3);
  font-size: var(--fs-15);
  text-align: left;
}
.sidebar__search:hover { box-shadow: inset 0 0 0 1px var(--border-hover); color: var(--text-2); }
.sidebar__search:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sidebar__search span { flex: 1; }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.profile-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; text-align: left; width: 100%; color: var(--text); }
.profile-chip:hover { background: var(--surface-hover); }
.profile-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.profile-chip__body { flex: 1; min-width: 0; }
.profile-chip__name { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip__sub { display: block; font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Misc helpers used by composites ============ */
.divider { height: 1px; background: var(--divider); border: 0; margin: var(--sp-3) 0; }
.dot-sep::before { content: "•"; margin: 0 6px; color: var(--text-3); }
.icon-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-soft-fg); flex-shrink: 0; }
.icon-tile--lg { width: 48px; height: 48px; border-radius: 14px; }
.icon-tile--plain { background: transparent; color: var(--primary); }
.stat-inline { display: inline-flex; align-items: baseline; gap: 6px; }

/* Keyboard focus visible for generic interactive elements built by screens */
[role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ============ Mascot — Dr. Round (key moments only; BUILD_BRIEF §2.3) ============ */
.mascot { position: relative; display: inline-block; flex-shrink: 0; }
.mascot__img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.mascot--full .mascot__img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.mascot--full.mascot--failed { display: none; }
.mascot--avatar {
  width: var(--m, 48px); height: var(--m, 48px);
  flex: 0 0 var(--m, 48px);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 100%, var(--lav-200) 0%, var(--accent-soft) 70%);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .08);
}
:root[data-theme="dark"] .mascot--avatar { background: radial-gradient(120% 100% at 50% 100%, #2E2A70 0%, #1E2652 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mascot--avatar { background: radial-gradient(120% 100% at 50% 100%, #2E2A70 0%, #1E2652 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
}
.mascot--avatar .mascot__img { position: absolute; height: auto; }
.mascot__fallback { position: absolute; inset: 0; display: none; place-items: center; color: var(--primary); }
.mascot--avatar.mascot--failed .mascot__img { display: none; }
.mascot--avatar.mascot--failed .mascot__fallback { display: grid; }

/* Home encouragement card */
.coach { display: flex; align-items: center; gap: 14px; }
.coach-card { --card-p: 12px 16px 12px 12px; }
@media (min-width: 768px) { .coach-card { --card-p: 14px 20px 14px 14px; } }
.coach__body { flex: 1 1 auto; min-width: 0; }
.coach__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.coach__text { font-size: var(--fs-13); color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* "Need a hint?" / Teach Me row */
.hint-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  text-align: left;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.hint-row:hover { background: var(--accent-soft-hover); }
.hint-row:active { background: var(--accent-soft-pressed); }
.hint-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hint-row:disabled { opacity: .55; cursor: not-allowed; }
.hint-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hint-row__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.hint-row__text { font-size: var(--fs-13); color: var(--text-2); }
.hint-row__chev { color: var(--link); flex-shrink: 0; }

/* Welcome value card */
.value-card__top { display: flex; align-items: center; gap: var(--sp-4); }
.value-card__art { margin: -6px -4px -10px -6px; }
.value-card__copy { flex: 1 1 auto; min-width: 0; }
.value-card__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); line-height: 1.3; }
.value-card__text { font-size: var(--fs-13); color: var(--text-3); margin-top: 6px; line-height: 1.5; }
.value-card__points { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-4); }
.value-card__points li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--text-2); font-weight: var(--fw-medium); }
.value-card__points .icon { color: var(--accent); }
.value-card:has(.mascot--failed) .value-card__top { gap: 0; }

/* Milestone moment */
.milestone { display: flex; align-items: center; gap: var(--sp-4); }
.milestone__art { position: relative; flex-shrink: 0; display: grid; place-items: end center; min-width: 72px; }
.milestone__badge { position: absolute; right: -4px; bottom: 6px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.milestone__flame { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--warning-bg); }
.milestone__art:has(.milestone__flame) .milestone__badge { display: none; }
.milestone__copy { flex: 1; min-width: 0; }
.milestone__flame-inline { display: inline-flex; vertical-align: -3px; margin-right: 8px; }
.milestone__title { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: 1.25; }
.milestone__text { font-size: var(--fs-15); color: var(--text-2); margin-top: 6px; line-height: 1.5; }

/* Empty state illustration slot */
.empty__mascot { margin-bottom: var(--sp-2); display: grid; place-items: center; }

/* Focus screens (question, mock, onboarding) ≥768: the top bar spans the READING column, and the
   44px side buttons sit 10px outside it so their glyphs line up optically with the stem (R0 #5).
   TopBar({wide}) does the same for the ≥1280 split layout (--split-w, DS13). */
@media (min-width: 768px) {
  .shell[data-mode="focus"] .topbar, .topbar--reader { max-width: var(--reading-max); }
  .shell[data-mode="focus"] .topbar > .topbar__side:first-child, .topbar--reader > .topbar__side:first-child { margin-left: -10px; }
  .shell[data-mode="focus"] .topbar > .topbar__side--end, .topbar--reader > .topbar__side--end { margin-right: -10px; }
}
@media (min-width: 1280px) {
  .shell[data-mode="focus"] .topbar.topbar--wide, .topbar--wide { max-width: var(--split-w); }
  .topbar--wide > .topbar__side:first-child { margin-left: -10px; }
  .topbar--wide > .topbar__side--end { margin-right: -10px; }
  .topbar-progress--wide { max-width: var(--split-w); }
}
/* F3: from 1100 when the page opts into the early split (layout.css `.reader--split-1100`). */
@media (min-width: 1100px) and (max-width: 1279px) {
  :root:has(.reader--split-1100) .topbar.topbar--wide { max-width: var(--split-w); }
  :root:has(.reader--split-1100) .topbar--wide > .topbar__side:first-child { margin-left: -10px; }
  :root:has(.reader--split-1100) .topbar--wide > .topbar__side--end { margin-right: -10px; }
  :root:has(.reader--split-1100) .topbar-progress--wide { max-width: var(--split-w); }
}

/* ============ Choice cards (DS18) ============ */
.choice-group { display: grid; align-content: start; gap: var(--sp-3); grid-template-columns: repeat(var(--choice-cols, 1), minmax(0, 1fr)); }
@media (max-width: 479px) { .choice-group { grid-template-columns: minmax(0, 1fr); } }
.choice {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 60px;
  padding: 14px 52px 14px 16px;
  text-align: left;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text);
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.choice:hover:not(:disabled) { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); }
.choice:active:not(:disabled) { background: var(--surface-pressed); }
.choice:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--border-hover), var(--focus-ring); }
.choice--selected, .choice--selected:hover:not(:disabled) { background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); }
.choice--selected:focus-visible { box-shadow: inset 0 0 0 1.5px var(--selected-border), var(--focus-ring); }
.choice:disabled { opacity: .55; cursor: not-allowed; }
.choice__lead { flex-shrink: 0; display: inline-flex; }
.choice__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.choice__text { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.choice__meta { flex-shrink: 0; font-size: var(--fs-13); color: var(--text-2); font-weight: var(--fw-medium); }
.choice__check {
  position: absolute; right: 16px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--border-control);
}
.choice__check .icon { opacity: 0; transform: scale(.6); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.choice--selected .choice__check { background: var(--accent); box-shadow: none; }
.choice--selected .choice__check .icon { opacity: 1; transform: none; }
.choice[role="checkbox"] .choice__check { border-radius: 7px; }

/* ============ Mode card (DS27) ============ */
.mode-card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; min-height: 100%; }
.mode-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); min-height: 40px; }
.mode-card__lead { display: inline-flex; }
.mode-card__count { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-soft-fg); font-size: var(--fs-12); font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mode-card__num { font-size: var(--fs-13); font-weight: var(--fw-bold); }
.mode-card__countlabel { font-weight: var(--fw-medium); }
.mode-card__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); line-height: 1.3; }
.mode-card__text { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.mode-card__why { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-13); color: var(--text-2); font-weight: var(--fw-medium); }
.mode-card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mode-card--disabled { cursor: not-allowed; box-shadow: none; }
.mode-card--disabled .mode-card__lead { filter: grayscale(1); opacity: .55; }
.mode-card--disabled .mode-card__title { color: var(--text-2); }
.mode-card--disabled .mode-card__count { background: var(--surface-sunken); color: var(--text-2); }
.card--interactive.mode-card--disabled:hover { box-shadow: none; border-color: var(--border); }
.metric__icon--gem { color: inherit; }

/* DS5: the fixed demo badge never covers the phone logo — on phones it sits above the tab bar */
@media (max-width: 1023px) {
  .badge--demo-fixed { top: auto; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 10px); left: 50%; transform: translateX(-50%); }
}
@media (min-width: 768px) and (max-width: 1023px) { .badge--demo-fixed { bottom: 16px; } }

/* R0 P2 #21: block on phones only — auto width (min 280px) from 768px */
.btn--block-phone { display: flex; width: 100%; }
@media (min-width: 768px) { .btn--block-phone { display: inline-flex; width: auto; min-width: 280px; } }
/* R0 P2 #23: citation segments never break inside */
.citation__seg { white-space: nowrap; }
/* R0 P2 #22: the optional row icon follows the label */
.explain__label { display: inline-flex; align-items: center; gap: 8px; }
.explain__label > .explain__lead { color: var(--accent); }
/* R0 P2 #17: 2px breathing ring inside the avatar rim */
.mascot--avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mascot-ring, rgba(255, 255, 255, .85)); pointer-events: none; }
:root[data-theme="dark"] .mascot--avatar { --mascot-ring: rgba(18, 25, 54, .9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mascot--avatar { --mascot-ring: rgba(18, 25, 54, .9); } }

/* DS31 · BUILD_BRIEF §9: on touch screens every control keeps a ≥44px hit area without changing its
   visual size. The invisible ::after grows past the edges; vertical spacing between wrapped rows of
   small chips grows too, so neighbouring hit areas overlap by no more than a few pixels. */
@media (pointer: coarse), (max-width: 767px) {    /* R1 D7: phone widths too, not only touch pointers */
  button.chip.chip--sm::after, .chip--sm[role="button"]::after { inset: -7px -3px; }        /* 30 → 44 (7px beyond: a 4px probe lands); 14px row gap below */
  .chip-group { row-gap: 10px; }                                                       /* F4: md chips' 46px hit areas never overlap */
  .chip-group:has(> .chip--sm) { row-gap: 14px; column-gap: 8px; }
  .chip__remove { position: relative; }
  .chip__remove::after { content: ""; position: absolute; inset: -11px; }                 /* 22 → 44 */
  .btn--icon-only.btn--sm::after { inset: -4px; }                                           /* 36 → 44 both ways */
  .toast__close, .toast__action, .search__clear { position: relative; }
  .toast__close::after, .toast__action::after { content: ""; position: absolute; inset: -4px; }   /* 36 → 44 */
  .search__clear::after { content: ""; position: absolute; inset: -6px; }                  /* 32 → 44 */
  .badge--demo[role="button"] { position: relative; }
  .badge--demo[role="button"]::after { content: ""; position: absolute; inset: -9px -4px; } /* 26 → 44 */
  .sidebar__search { min-height: 44px; }
}

/* DS32: small gem before a section title · DS33: ModeCard big stat under the title */
.section-header--gem { align-items: center; }
.section-header__title--gem { display: inline-flex; align-items: center; gap: 10px; }
.section-header__gem { display: inline-flex; flex-shrink: 0; }
.mode-card__stat { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 2px; }
.mode-card__statnum { font-size: var(--fs-30); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--text-accent); font-variant-numeric: tabular-nums; }
.mode-card__statlabel { font-size: var(--fs-13); color: var(--text-2); font-weight: var(--fw-medium); }
.mode-card--disabled .mode-card__statnum { color: var(--text-2); }

/* R1 D6/D7 · SegmentedControl: size sm (dense desktop), wrap, 44px targets on phones.
   Fit-or-wrap (measured by components.js, any width):
   1. one row, equal segments, each at least as wide as its label (onboarding's "Dr." / "No title" stay
      69 / 69 at 360; short numeric options stay ≥44 wide);
   2. still one row when only a long label needs more room (Mock's "Untimed" at 360: 57 ×4 + 77);
   3. only a control that cannot fit on one row gets .segmented--fit-wrap: an even grid of equal cells
      sized to the longest label (--seg-cell), as many per row as fit; no segment is ever squeezed. */
.segmented--sm .segmented__btn { min-height: 32px; padding: 0 10px; font-size: var(--fs-12); }
.segmented--sm .segmented__btn::after { inset: -6px 0; }
.segmented--wrap { display: flex; flex-wrap: wrap; border-radius: 22px; }
.segmented--wrap .segmented__btn { flex: 1 0 auto; min-width: 56px; }
.segmented--fit-wrap {
  display: grid; width: 100%;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--seg-cell, 72px)), 1fr));
  border-radius: 22px;
}
@media (max-width: 767px) {
  .segmented__btn, .segmented--sm .segmented__btn { min-height: 40px; min-width: 44px; font-size: var(--fs-13); }   /* track 46px; "10" stays ≥44 wide */
}
@media (max-width: 379px) {
  .segmented__btn { padding: 0 12px; }
}

/* R1 D7 · small pills and buttons on phones: a little taller visually, plus the ::after hit area */
@media (max-width: 767px) {
  .btn--sm { --btn-h: 40px; }                                   /* hit area 48px */
  button.chip { min-height: 36px; }                             /* hit area 44px (::after −4px), no overlap at 8px row gaps */
  button.chip.chip--sm { min-height: 30px; }                    /* hit area 44px via the D7/DS31 block (−7px) */
  .select__input, .input { min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 768px) {                /* touch tablets: same 44px chip targets */
  button.chip { min-height: 36px; }
  button.chip.chip--sm { min-height: 30px; }
}
/* P2 (Settings reset sheet): a selected ChoiceCard / Card keeps its icon's lavender tile, one step stronger */
.choice--selected .icon-tile, .card--selected .icon-tile { background: var(--accent-soft-pressed); color: var(--accent-soft-fg); }

/* F4 (Results+Teach): in dark mode a sheet / modal sits one surface step above the page, with a faint violet
   edge, so it never reads as the same tone as the dimmed navy page behind it. */
:root[data-theme="dark"] .sheet, :root[data-theme="dark"] .modal { background: var(--surface-2); box-shadow: 0 0 0 1px rgba(157, 143, 255, .16), var(--shadow-raised); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet, :root:not([data-theme="light"]) .modal { background: var(--surface-2); box-shadow: 0 0 0 1px rgba(157, 143, 255, .16), var(--shadow-raised); }
}