/* ═══════════ Buttons ═══════════ */
.btn {
  --_bg: var(--surface); --_fg: var(--text); --_bd: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-4); min-height: 42px;
  border-radius: var(--r-md); border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font-size: var(--fs-sm); font-weight: 580; letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); }
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { --_bg: var(--primary); --_fg: var(--on-primary); --_bd: transparent; box-shadow: var(--shadow-sm); }
.btn--primary:hover:not(:disabled) { --_bg: var(--primary-hover); }

.btn--ok   { --_bg: var(--ok);  --_fg: #fff; --_bd: transparent; }
.btn--err  { --_bg: var(--err); --_fg: #fff; --_bd: transparent; }
.btn--warn { --_bg: var(--warn-soft); --_fg: var(--warn-text); --_bd: transparent; }
.btn--ghost { --_bg: transparent; --_bd: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.btn--outline { --_bg: transparent; }
.btn--soft { --_bg: var(--primary-soft); --_fg: var(--primary-text); --_bd: transparent; }

.btn--sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn--lg { min-height: 50px; padding: 0 var(--s-5); font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn--block { width: 100%; }

.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-md); color: var(--text-muted); font-size: 18px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ═══════════ Cards ═══════════ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--pad-sm { padding: var(--s-4); }

.card-link {
  display: block; text-align: left; width: 100%; color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-link:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card-link:active { transform: translateY(0) scale(.995); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }

/* ═══════════ Section headers ═══════════ */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
.section-head h2, .section-head h3 { margin: 0; }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 640; letter-spacing: .09em; text-transform: uppercase;
  color: var(--primary-text); margin-bottom: var(--s-2);
}
/* A full step above body, not a nudge — otherwise the lede reads as grey body copy. */
.lede { color: var(--text-muted); font-size: var(--fs-lg); line-height: var(--lh-snug); max-width: var(--measure); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* ═══════════ Chips / badges ═══════════ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--s-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  background: var(--bg-inset); color: var(--text-muted); border: 1px solid var(--border);
  white-space: nowrap;
}
.chip--ok   { background: var(--ok-soft);   color: var(--ok-text);   border-color: transparent; }
.chip--warn { background: var(--warn-soft); color: var(--warn-text); border-color: transparent; }
.chip--err  { background: var(--err-soft);  color: var(--err-text);  border-color: transparent; }
.chip--info { background: var(--info-soft); color: var(--info-text); border-color: transparent; }

.level-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: #fff;
  /* The raw level hues are mid-luminance; white on A1/A2/B1 would fail AA.
     Darkening the fill keeps the hue identity and clears the threshold. */
  background: color-mix(in srgb, var(--_lvl, var(--primary)) 68%, #0b0b12);
}
/* The raw hue on a 15% tint sits near 2.2:1 in light mode. Mixing the ink toward
   --text fixes it and stays theme-aware: it darkens in light, lightens in dark. */
.level-chip--soft {
  background: color-mix(in srgb, var(--_lvl) 15%, transparent);
  color: color-mix(in srgb, var(--_lvl) 58%, var(--text));
}
[data-level="A1"] { --_lvl: var(--lvl-a1); }
[data-level="A2"] { --_lvl: var(--lvl-a2); }
[data-level="B1"] { --_lvl: var(--lvl-b1); }
[data-level="B2"] { --_lvl: var(--lvl-b2); }
[data-level="C1"] { --_lvl: var(--lvl-c1); }

/* ═══════════ Progress ═══════════ */
.bar { height: 7px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--_lvl, var(--primary));
  transition: width var(--dur-slow) var(--ease-out);
}
.bar--thin { height: 4px; }

.ring { --_p: 0; --_sz: 116px; --_tk: 9px;
  width: var(--_sz); height: var(--_sz); flex: none; display: grid; place-items: center; position: relative;
  border-radius: 50%;
  background: conic-gradient(var(--_lvl, var(--primary)) calc(var(--_p) * 1%), var(--bg-sunken) 0);
  transition: background var(--dur-slow) var(--ease-out);
}
.ring::before { content: ""; position: absolute; inset: var(--_tk); border-radius: 50%; background: var(--surface); }
.ring__label { position: relative; text-align: center; line-height: 1.15; }
.ring__label b { display: block; font-size: var(--fs-lg); font-weight: 680; font-variant-numeric: tabular-nums; }
.ring__label small { font-size: var(--fs-xs); color: var(--text-faint); }

/* ═══════════ Prose / lesson content ═══════════ */
.prose { max-width: var(--measure); font-size: var(--fs-base); line-height: var(--lh-body); }
.prose > * + * { margin-top: var(--s-4); }
/* Headings must group with what follows them, not float equidistant. */
.prose > * + :is(h2, h3, h4) { margin-top: var(--s-6); }
.prose strong { font-weight: 660; color: var(--text); }
.prose em { font-style: italic; }
.prose code {
  font-family: var(--font-mono); font-size: .89em;
  background: var(--bg-inset); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: var(--r-sm);
}

/* German inline text */
.de {
  font-family: var(--font-serif); font-style: italic;
  color: var(--primary-text); font-weight: 500;
}
mark.hl {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: inherit; padding: 0 3px; border-radius: 3px; font-weight: 640;
}

/* ═══════════ Callouts ═══════════ */
.callout {
  --_c: var(--info); --_bgc: var(--info-soft); --_fg: var(--info-text);
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--_bgc); border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent);
  border-left: 3px solid var(--_c);
  max-width: var(--measure);
}
.callout__ico { font-size: 16px; line-height: 1.5; }
.callout__body > * + * { margin-top: var(--s-2); }
.callout__title { font-weight: 660; color: var(--_fg); font-size: var(--fs-sm); letter-spacing: .01em; }
.callout--rule    { --_c: var(--primary); --_bgc: var(--primary-soft); --_fg: var(--primary-text); }
.callout--tip     { --_c: var(--ok);   --_bgc: var(--ok-soft);   --_fg: var(--ok-text); }
.callout--pitfall { --_c: var(--err);  --_bgc: var(--err-soft);  --_fg: var(--err-text); }

/* ═══════════ Tables ═══════════ */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); -webkit-overflow-scrolling: touch;
}
.table-wrap > table { border-collapse: collapse; width: 100%; min-width: max-content; font-size: var(--fs-sm); }
.table-wrap th, .table-wrap td {
  padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border);
  /* Long English glosses should wrap rather than force a scrollbar; only the
     header and the label column need to stay on one line to keep rows aligned. */
  white-space: normal;
}
.table-wrap thead th, .table-wrap td:first-child { white-space: nowrap; }
.table-wrap thead th {
  position: sticky; top: 0; background: var(--bg-sunken); z-index: 1;
  font-weight: 640; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--text);
  border-bottom: 2px solid var(--border-strong);
}
.table-wrap tbody tr:last-child td { border-bottom: none; }
/* Zebra + a ruled label column: a 4-case × 3-gender paradigm is unreadable without them. */
.table-wrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.table-wrap tbody tr:hover td { background: var(--surface-hover); }
.table-wrap td:first-child, .table-wrap th:first-child { border-right: 1px solid var(--border); }
.table-wrap tbody td:first-child { font-weight: 600; color: var(--text-muted); }
.table-wrap td strong { color: var(--primary-text); font-weight: 680; }
.table-cap { font-size: var(--fs-sm); font-weight: 620; margin-bottom: var(--s-2); }
.table-note { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--s-2); }

/* ═══════════ Examples ═══════════ */
.examples { display: flex; flex-direction: column; gap: var(--s-2); max-width: var(--measure); }
.ex {
  display: grid; gap: 2px;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--bg-inset); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}
.ex__de { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--text); }
.ex__en { font-size: var(--fs-sm); color: var(--text-muted); }
.ex__note { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--s-1); font-style: italic; }

/* ═══════════ Contrast ═══════════ */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); max-width: var(--measure); }
@media (max-width: 640px) { .contrast { grid-template-columns: 1fr; } }
.contrast__side { padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
/* Deliberately NOT a CEFR hue: those colours must only ever mean "level". */
.contrast__side:first-child { border-top: 3px solid var(--primary); }
.contrast__side:last-child  { border-top: 3px solid var(--accent); }
.contrast__label { font-weight: 660; font-size: var(--fs-sm); margin-bottom: var(--s-2); }

/* ═══════════ Steps ═══════════ */
.steps { counter-reset: st; display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--measure); list-style: none; padding: 0; }
.steps li { counter-increment: st; display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.steps li::before {
  content: counter(st);
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-text);
  font-size: var(--fs-xs); font-weight: 700;
}

/* ═══════════ Exercise widgets ═══════════ */
.ex-card { display: flex; flex-direction: column; gap: var(--s-4); }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ex-kind { font-size: var(--fs-xs); font-weight: 640; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.diff-dots { display: inline-flex; gap: 3px; }
.diff-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.diff-dots i.on { background: var(--accent); }

.ex-instr { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 560; }
.ex-prompt { font-size: var(--fs-md); line-height: var(--lh-snug); font-family: var(--font-serif); }
.ex-prompt--en { font-family: var(--font-sans); }

.blank-input {
  /* max-width matters: body has overflow-x:hidden, so an over-wide input would
     be clipped rather than scrollable and the learner loses sight of their text. */
  display: inline-block; min-width: 7ch; width: auto; max-width: 100%; field-sizing: content;
  padding: 2px var(--s-2); margin: 0 3px;
  border: none; border-bottom: 2px solid var(--primary);
  background: var(--primary-soft); border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-family: var(--font-serif); font-size: inherit; color: var(--text);
  text-align: center;
}
.blank-input:focus { outline: none; box-shadow: var(--ring); }
.blank-input.ok  { border-color: var(--ok);  background: var(--ok-soft); }
.blank-input.bad { border-color: var(--err); background: var(--err-soft); text-decoration: line-through; text-decoration-color: var(--err); }

.field {
  width: 100%; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-inset); color: var(--text);
  font-family: var(--font-serif); font-size: var(--fs-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--text-faint); font-family: var(--font-sans); font-size: var(--fs-sm); font-style: normal; }
.field:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
/* Never below 16px: iOS auto-zooms the viewport on focus of a smaller input. */
.field--sans { font-family: var(--font-sans); font-size: max(16px, var(--fs-base)); }
textarea.field { resize: vertical; min-height: 90px; line-height: var(--lh-snug); }

/* Multiple choice */
.opts { display: flex; flex-direction: column; gap: var(--s-2); }
.opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); text-align: left; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-family: var(--font-serif); font-size: var(--fs-base); line-height: var(--lh-snug);
  transition: all var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.opt:hover:not(:disabled) { border-color: var(--primary); background: var(--surface-hover); }
.opt:active:not(:disabled) { scale: .99; }
.opt__key {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: var(--r-sm); background: var(--bg-inset); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-faint);
}
.opt__mark { font-size: 15px; opacity: 0; }
.opt.is-sel { border-color: var(--primary); background: var(--primary-soft); }
.opt.is-ok  { border-color: var(--ok);  background: var(--ok-soft); }
.opt.is-bad { border-color: var(--err); background: var(--err-soft); }
.opt.is-ok .opt__mark, .opt.is-bad .opt__mark { opacity: 1; }
.opt.is-ok .opt__key  { background: var(--ok);  color: #fff; border-color: transparent; }
.opt.is-bad .opt__key { background: var(--err); color: #fff; border-color: transparent; }
.opt:disabled { cursor: default; }

/* Reorder / token bank */
.tokens { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.token {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-serif); font-size: var(--fs-base);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.token:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); }
.token:active:not(:disabled) { transform: scale(.95); }
.token.is-used { opacity: 0; pointer-events: none; }
.token.ok  { border-color: var(--ok);  background: var(--ok-soft); }
.token.bad { border-color: var(--err); background: var(--err-soft); }

.drop-zone {
  min-height: 62px; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  padding: var(--s-3); border-radius: var(--r-md);
  border: 1.5px dashed var(--border-strong); background: var(--bg-inset);
}
.drop-zone:empty::before { content: "Tap the words below to build the sentence"; color: var(--text-faint); font-size: var(--fs-sm); }

.token-verdict { font-size: 17px; font-weight: 700; margin-left: var(--s-1); align-self: center; }
.token.ok ~ .token-verdict, .drop-zone:has(.token.ok) .token-verdict { color: var(--ok); }
.drop-zone:has(.token.bad) .token-verdict { color: var(--err); }

/* Match */
/* Matching inherently needs two columns, so tighten rather than stack at narrow widths. */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 400px) {
  .match { gap: var(--s-2); }
  .match__item { padding: var(--s-2); font-size: var(--fs-sm); }
}
.match__col { display: flex; flex-direction: column; gap: var(--s-2); }
.match__item {
  padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); font-family: var(--font-serif); text-align: center;
  transition: all var(--dur-fast) var(--ease);
}
.match__item:hover:not(:disabled):not(.is-done) { border-color: var(--primary); }
.match__item.is-sel { border-color: var(--primary); background: var(--primary-soft); }
.match__item.is-done { opacity: .42; pointer-events: none; border-style: dashed; }
.match__item.is-bad { animation: shake 320ms var(--ease); border-color: var(--err); background: var(--err-soft); }
@keyframes shake { 0%,100%{translate:0} 20%{translate:-6px} 40%{translate:5px} 60%{translate:-3px} 80%{translate:2px} }

/* Feedback */
.feedback {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  animation: popIn var(--dur) var(--ease-out);
}
@keyframes popIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.feedback--ok   { background: var(--ok-soft);   border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent); }
.feedback--bad  { background: var(--err-soft);  border: 1px solid color-mix(in srgb, var(--err) 26%, transparent); }
.feedback--near { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.feedback__ico { font-size: 20px; line-height: 1.2; }
.feedback__title { font-weight: 680; font-size: var(--fs-sm); }
.feedback--ok   .feedback__title { color: var(--ok-text); }
.feedback--bad  .feedback__title { color: var(--err-text); }
.feedback--near .feedback__title { color: var(--warn-text); }
.feedback__body { font-size: var(--fs-sm); color: var(--text); margin-top: var(--s-1); line-height: var(--lh-snug); }
.feedback__body > * + * { margin-top: var(--s-2); }
.feedback__answer { font-family: var(--font-serif); font-weight: 600; }

/* ═══════════ Toast ═══════════ */
.toast-stack {
  position: fixed; z-index: 120; left: 50%; translate: -50% 0;
  bottom: calc(var(--tabbar-h) + var(--s-4));
  display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none;
  width: min(94vw, 420px);
}
@media (min-width: 901px) { .toast-stack { bottom: var(--s-5); left: auto; right: var(--s-5); translate: none; } }
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); font-weight: 540;
  animation: toastIn var(--dur) var(--ease-out);
  pointer-events: auto;
}
.toast.is-out { animation: toastOut var(--dur) var(--ease) forwards; }
.toast--ok  { border-left: 3px solid var(--ok); }
.toast--err { border-left: 3px solid var(--err); }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97) } }

/* ═══════════ Modal ═══════════ */
.modal-root:empty { display: none; }
.modal-back {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--s-4);
  background: hsl(250 30% 6% / .55); backdrop-filter: blur(3px);
  animation: fadeIn var(--dur-fast) var(--ease);
}
.modal {
  width: min(100%, 560px); max-height: 86dvh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-5);
  animation: modalIn var(--dur) var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }
.modal__head { display: flex; align-items: start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.modal__foot { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); flex-wrap: wrap; }

/* ═══════════ Misc ═══════════ */
.empty {
  display: grid; place-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-8) var(--s-4); color: var(--text-muted);
}
.empty__ico { font-size: 40px; opacity: .5; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--primary);
  animation: spin .7s linear infinite; flex: none;
}
@keyframes spin { to { rotate: 360deg } }

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--surface-hover) 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0 } }

.divider { height: 1px; background: var(--border); border: none; margin: var(--s-5) 0; }

.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }

.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 42px; height: 24px; border-radius: var(--r-full); background: var(--border-strong);
  position: relative; transition: background var(--dur) var(--ease); flex: none;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: translate var(--dur) var(--ease);
}
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { translate: 18px 0; }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-md); }
.seg button {
  padding: 7px var(--s-4); min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted); transition: all var(--dur-fast) var(--ease); white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }