/*
 * Component primitives (js/components/ui.js). Token-driven; glass only where it adds hierarchy.
 */

/* ---------- tone helpers (icon tiles, bars) ---------- */
.tone-primary { --tone: var(--color-primary); --tone-soft: var(--color-primary-soft); --tone-text: var(--color-primary-text); }
.tone-success { --tone: var(--color-success); --tone-soft: var(--color-success-soft); --tone-text: var(--color-success-text); }
.tone-warning { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); --tone-text: var(--color-warning-text); }
.tone-danger  { --tone: var(--color-danger);  --tone-soft: var(--color-danger-soft);  --tone-text: var(--color-danger-text); }
.tone-teal    { --tone: var(--color-teal);    --tone-soft: rgba(20, 184, 166, 0.12); --tone-text: var(--color-teal-text); }
.tone-purple  { --tone: var(--color-purple);  --tone-soft: rgba(139, 92, 246, 0.12); --tone-text: var(--color-purple-text); }
.tone-blue    { --tone: var(--color-blue);    --tone-soft: rgba(59, 130, 246, 0.12); --tone-text: var(--color-blue-text); }
.tone-fire    { --tone: var(--color-fire);    --tone-soft: rgba(249, 115, 22, 0.12); --tone-text: var(--color-fire-text); }
.tone-gas     { --tone: var(--color-gas);     --tone-soft: rgba(20, 184, 166, 0.12); --tone-text: var(--color-teal-text); }
.tone-neutral { --tone: var(--color-text-muted); --tone-soft: var(--color-surface-sunken); --tone-text: var(--color-text-secondary); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-lg); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-btn); border: 1px solid transparent;
  font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: 1.25; text-align: center;
  cursor: pointer; touch-action: manipulation; user-select: none;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur-fast);
}
.btn:active:not([disabled]) { transform: scale(.97); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--primary {
  color: var(--color-text-on-primary);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover:not([disabled]) { box-shadow: 0 10px 28px rgba(79, 70, 229, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn--secondary { color: var(--color-text); background: var(--color-surface-solid); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.btn--secondary:hover:not([disabled]) { background: var(--color-surface-hover); }
html[data-theme="dark"] .btn--secondary { background: var(--color-surface); }
.btn--ghost { color: var(--color-primary-text); background: transparent; }
.btn--ghost:hover:not([disabled]) { background: var(--color-primary-soft); }
.btn--glass {
  color: var(--color-text); background: var(--color-surface-glass); border-color: var(--color-glass-border);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-md);
}
.btn--danger { color: #fff; background: var(--gradient-danger); box-shadow: var(--shadow-danger), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn--soft { color: var(--color-primary-text); background: var(--color-primary-soft); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.btn-row .btn { padding: var(--space-3); font-size: var(--text-sm); }

.icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid transparent;
  color: var(--color-text); background: transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--color-surface-hover); }
.icon-btn:active { transform: scale(.92); }
.icon-btn--glass { background: var(--color-surface-glass); border-color: var(--color-border); }
.icon-btn--ghost { color: var(--color-text-secondary); }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }

.link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; color: var(--color-primary-text); font-weight: var(--weight-semibold); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap;
  color: var(--color-text-secondary); background: var(--color-surface-sunken); border: 1px solid var(--color-border);
}
.chip--glass { background: var(--color-surface-glass); }
.chip--primary { color: var(--color-primary-text); background: var(--color-primary-soft); border-color: transparent; }
.chip--success { color: var(--color-success-text); background: var(--color-success-soft); border-color: transparent; }
.chip--warning { color: var(--color-warning-text); background: var(--color-warning-soft); border-color: transparent; }
.chip--danger { color: var(--color-danger-text); background: var(--color-danger-soft); border-color: transparent; }

/* ---------- cards ---------- */
.gcard {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  text-align: left;
}
.gcard--glass {
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border-color: var(--color-glass-border);
  box-shadow: var(--shadow-lg), var(--glass-highlight);
}
html[data-effects="reduced"] .gcard--glass { border-color: var(--color-border); }
.gcard--interactive { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) { .gcard--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.gcard--interactive:active { transform: scale(.985); }
button.gcard { width: 100%; font: inherit; }
.gcard--sm { padding: var(--space-4); border-radius: var(--radius-md); gap: var(--space-2); }

/* ---------- list rows ---------- */
.list { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; }
.list > .row + .row { border-top: 1px solid var(--color-border); }
.row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: var(--space-3) var(--space-4);
  color: var(--color-text); text-align: left; background: transparent; border: 0; width: 100%;
}
.row--interactive { cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.row--interactive:hover { background: var(--color-surface-hover); }
.row--interactive:active { background: var(--color-surface-sunken); }
.row__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  color: var(--tone-text); background: var(--tone-soft);
}
.row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row__title { font-weight: var(--weight-semibold); }
.row__sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
.row__chev { color: var(--color-text-muted); }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text-secondary); background: var(--color-surface-sunken);
}
.badge__icon { display: inline-flex; }
.badge--success { color: var(--color-success-text); background: var(--color-success-soft); }
.badge--warning { color: var(--color-warning-text); background: var(--color-warning-soft); }
.badge--danger { color: var(--color-danger-text); background: var(--color-danger-soft); }
.badge--primary { color: var(--color-primary-text); background: var(--color-primary-soft); }
.badge--neutral, .badge--none { color: var(--color-text-secondary); background: var(--color-surface-sunken); }
.badge--solid.badge--success { color: #fff; background: var(--color-success-solid); }

/* ---------- notices ---------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-primary-soft); border: 1px solid transparent;
}
.notice__icon { flex: none; margin-top: 1px; color: var(--color-primary-text); }
.notice--error { background: var(--color-danger-soft); }
.notice--error .notice__icon { color: var(--color-danger-text); }
.notice--warning { background: var(--color-warning-soft); }
.notice--warning .notice__icon { color: var(--color-warning-text); }
.notice--success { background: var(--color-success-soft); }
.notice--success .notice__icon { color: var(--color-success-text); }
.demo-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---------- avatar ---------- */
.avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); font-weight: var(--weight-bold); color: #fff; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.avatar--sm { width: 36px; height: 36px; font-size: var(--text-xs); }
.avatar--md { width: 44px; height: 44px; font-size: var(--text-sm); }
.avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar--t0 { background: var(--gradient-avatar-0); }
.avatar--t1 { background: var(--gradient-avatar-1); }
.avatar--t2 { background: var(--gradient-avatar-2); }
.avatar--t3 { background: var(--gradient-avatar-3); }
.avatar--t4 { background: var(--gradient-avatar-4); }

/* ---------- progress ring ---------- */
.ring { position: relative; display: inline-grid; place-items: center; width: var(--ring-size, 120px); height: var(--ring-size, 120px); flex: none; }
.ring__svg { width: 100%; height: 100%; }
.ring__track { stroke: var(--color-surface-sunken); }
html[data-theme="light"] .ring__track { stroke: rgba(16, 24, 40, 0.07); }
.ring__arc { stroke: var(--ring-tone, var(--color-primary)); animation: ring-in var(--dur-slow) var(--ease) both; animation-duration: 900ms; }
.ring--success { --ring-tone: var(--color-success); }
.ring--warning { --ring-tone: var(--color-warning); }
.ring--danger { --ring-tone: var(--color-danger); }
.ring--teal { --ring-tone: var(--color-teal); }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@keyframes ring-in { from { stroke-dashoffset: var(--ring-c); } }

/* ---------- metric cards ---------- */
.metric {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  min-width: 0;
}
.metric__value { font-size: 1.75rem; font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.metric__unit { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin-left: 2px; }
.metric__label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); padding-right: 36px; }
.metric__sub { font-size: var(--text-xs); color: var(--color-text-secondary); }
.metric__icon {
  position: absolute; top: var(--space-3); right: var(--space-3);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 10px; color: var(--tone-text); background: var(--tone-soft);
}
.metric--success .metric__value { color: var(--color-success-text); }
.metric--warning .metric__value { color: var(--color-warning-text); }
.metric--danger .metric__value { color: var(--color-danger-text); }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* ---------- horizontal bars ---------- */
.hbars { display: flex; flex-direction: column; gap: var(--space-3); }
.hbar { display: grid; grid-template-columns: minmax(96px, 32%) 1fr auto; align-items: center; gap: var(--space-3); }
.hbar__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.hbar__track { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
html[data-theme="light"] .hbar__track { background: rgba(16, 24, 40, 0.06); }
.hbar__fill { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--tone, var(--color-primary)); transform-origin: left; animation: bar-in 600ms var(--ease) both; }
.hbar__value { font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes bar-in { from { transform: scaleX(0); } }

/* ---------- stepper (LEARN → FIND → PROVE) ---------- */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); position: relative; }
.stepper__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.stepper__item:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: calc(50% + 22px); right: calc(-50% + 22px);
  height: 2px; border-radius: 2px; background: var(--color-border-strong);
}
.stepper__item.is-done:not(:last-child)::after { background: var(--color-primary); }
.stepper__dot {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--color-text-secondary); background: var(--color-surface-solid); border: 2px solid var(--color-border-strong);
}
.stepper__item.is-current .stepper__dot { color: #fff; background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 0 5px var(--color-primary-soft); }
.stepper__item.is-done .stepper__dot { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.stepper__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.stepper__item.is-current .stepper__label { color: var(--color-primary-text); }
.stepper__sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; top: calc(var(--space-3) + var(--safe-top)); z-index: 40;
  display: flex; align-items: center; gap: var(--space-3);
  width: calc(100% - 2 * var(--space-4)); max-width: 480px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  color: var(--color-text); font-weight: var(--weight-medium); font-size: var(--text-sm);
  background: var(--color-surface-glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--color-glass-border); box-shadow: var(--shadow-lg);
  transform: translate(-50%, calc(-100% - 40px)); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease);
  pointer-events: none;
}
.toast:empty { display: none; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast__icon { display: inline-flex; color: var(--color-primary-text); }
.toast--error .toast__icon { color: var(--color-danger-text); }
.toast--success .toast__icon { color: var(--color-success-text); }

/* ---------- bottom sheet / modal ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--color-overlay);
  animation: fade-in var(--dur) var(--ease) both;
}
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) calc(var(--space-6) + var(--safe-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-lg);
  animation: sheet-in var(--dur-slow) var(--ease-spring) both;
}
.sheet__grabber { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--color-border-strong); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sheet__title { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.sheet__sub { margin: calc(-1 * var(--space-3)) 0 0; color: var(--color-text-secondary); }
.sheet__body { display: flex; flex-direction: column; gap: var(--space-3); }
.sheet__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.sheet--danger .sheet__title { color: var(--color-danger-text); }
.sheet-overlay.is-closing { animation: fade-out var(--dur) var(--ease) both; }
.sheet-overlay.is-closing .sheet { animation: sheet-out var(--dur) var(--ease) both; }
@media (min-width: 768px) {
  .sheet-overlay { align-items: center; }
  .sheet { border-radius: var(--radius-xl); padding-bottom: var(--space-6); }
  .sheet__grabber { display: none; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(40px); opacity: 0; } }

/* ---------- skeleton ---------- */
.skeleton-group { display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.skeleton__line {
  display: block; height: 12px; width: 70%; border-radius: 6px;
  background: linear-gradient(90deg, var(--color-surface-sunken) 0%, var(--color-surface-hover) 40%, var(--color-surface-sunken) 80%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.skeleton__line--lg { height: 18px; width: 45%; }
.skeleton__line--sm { width: 35%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- empty / error states ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-5); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px dashed var(--color-border-strong);
}
.empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: var(--color-primary-text); background: var(--color-primary-soft); margin-bottom: var(--space-2); }
.empty--error .empty__icon { color: var(--color-danger-text); background: var(--color-danger-soft); }
.empty__title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-h3); }
.empty__text { margin: 0 0 var(--space-2); color: var(--color-text-secondary); max-width: 36ch; }

/* ---------- segmented control ---------- */
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.segmented__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 0;
  background: transparent; color: var(--color-text-secondary); font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.segmented__opt.is-on { color: var(--color-text); background: var(--color-surface-solid); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .segmented__opt.is-on { background: rgba(255, 255, 255, 0.12); }
.segmented--block { display: grid; width: 100%; }

/* ---------- offline pill ---------- */
.offline-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.offline-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.input, .field input, .mselect, .payload {
  width: 100%; min-height: var(--tap-lg); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
  font: inherit; font-size: var(--text-body-lg); color: var(--color-text); background: var(--color-surface-solid);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
html[data-theme="dark"] .input, html[data-theme="dark"] .field input, html[data-theme="dark"] .mselect, html[data-theme="dark"] .payload { background: rgba(255, 255, 255, 0.04); }
.input:focus, .field input:focus, .mselect:focus, .payload:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.field input[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 4px var(--color-danger-soft); }
.field__hint { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.field__error { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--color-danger-text); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.field__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; color: #fff; background: var(--color-danger); }
textarea.input, .payload { min-height: 96px; resize: vertical; line-height: 1.45; }
.payload { font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; }
select.mselect { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.check {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-lg); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer;
}
.check input { width: 22px; height: 22px; accent-color: var(--color-primary); }
.gcard > .chip { align-self: flex-start; }
.demo-note .icon { display: inline-block; vertical-align: -2px; }
.stack > .badge, .gcard > .badge { align-self: flex-start; }

/* ---------- a11y: 44×44 minimum touch targets (audit) ---------- */
.segmented__opt { min-height: 44px; }
.chip-btn { min-height: 44px; }
.chip.appbar__lang { min-height: 44px; }

/* ---------------- Santali: Hindi reference line and voice control (docs/SANTALI_LOCALIZATION.md) ---------------- */
/* The Hindi original under provisional Santali safety text: secondary, but never hidden. */
.sat-ref { display: block; margin-top: var(--space-1); font-size: 0.82em; font-weight: var(--weight-regular); line-height: 1.45; color: var(--color-text-secondary); }
.sat-ref__label { margin-right: var(--space-2); font-weight: var(--weight-semibold); }
.sat-ref__label::after { content: " ·"; }
.option__text .sat-ref { font-size: var(--text-sm); }
.voice { display: inline-flex; align-items: center; gap: var(--space-2); }
.voice--pending { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.voice--ready { margin-top: var(--space-2); min-height: 44px; }
.voice__icon { display: inline-flex; }