/* Maagal personal study space */
.study-shell { padding-block: var(--space-xl) var(--space-3xl); }
.study-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.study-title { font:var(--text-display-md); margin:var(--space-xs) 0 0; color:var(--text-heading); }
.study-tabs { display:flex; gap:var(--space-xs); padding:5px; border:1px solid var(--border-subtle); border-radius:999px; background:var(--surface-card); }
.study-tab { appearance:none; border:1px solid var(--color-silver); border-radius:999px; padding:10px 18px; background:transparent; color:var(--text-muted); font:var(--text-body-sm-strong); cursor:pointer; white-space:nowrap; }
.study-tab.active { background:var(--surface-dark); color:var(--text-on-dark); }
.study-tab:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.study-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-md); margin-bottom:var(--space-md); }
/* The session bar carries its own labels so the track always reads as progress
   through this sitting, not decoration: an unlabelled 8px rule at 0% is
   invisible, which is how the old toolbar looked at the start of every queue. */
.study-session { flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
/* Count and laps sit together at the start: the left half of the bar answers
   "where am I", and both numbers are part of that answer. They used to be
   pushed to opposite ends, which put the lap count beside Pause — the far side
   of the bar from everything else about the sitting. */
.study-session-head { display:flex; align-items:baseline; justify-content:flex-start; flex-wrap:wrap; gap:2px var(--space-sm); }
.study-session-head .study-laps::before { content:"·"; margin-inline-end:var(--space-sm); color:var(--text-muted); }
/* Right half: how the card should look, then the way out. */
.study-display { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-sm); }
.study-switch {
  appearance:none; cursor:pointer; white-space:nowrap;
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  background:transparent; color:var(--text-muted);
  padding:7px 14px; font:var(--text-body-sm-strong);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.study-switch:hover:not(:disabled) { border-color:var(--color-gold); color:var(--text-heading); }
.study-switch.on { background:var(--color-gold-pale); border-color:var(--color-gold); color:var(--color-gold-deep); }
.study-switch:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
/* Greyed, not hidden: the control keeps its place so the bar does not reflow
   card to card, and its title says why this card cannot take it. */
.study-switch:disabled { cursor:not-allowed; border-style:dashed; color:var(--text-muted); background:var(--surface-sunken); }
.study-progress { min-width:180px; height:8px; overflow:hidden; border-radius:999px; background:var(--surface-sunken); }
.study-progress > span { display:block; height:100%; min-width:3px; border-radius:inherit; background:var(--color-gold); transition:width .25s ease; }
.study-count { font:var(--text-body-sm-strong); color:var(--text-muted); }
.study-laps { font:var(--text-body-sm-strong); color:var(--color-gold-deep); white-space:normal; overflow-wrap:anywhere; min-width:0; }
.study-total-laps { margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid var(--border-subtle); color:var(--text-muted); font:var(--text-body-sm); }
/* Stays plain --color-gold: this line renders inside .study-complete, which is
   a --surface-dark card, and gold is the accent that belongs on dark.
   --text-body-strong was never a token, so this declaration was dropped whole
   and the total rendered unemphasised. --text-body-sm-strong is the 14px
   partner of the --text-body-sm paragraph it sits inside. */
.study-total-laps strong { color:var(--color-gold); font:var(--text-body-sm-strong); }
.dash-volume-field { display:inline-flex; align-items:center; gap:8px; }
/* Done-screen actions: four equal buttons in a 2×2 grid. Each fills its cell
   and drops the vertical-list stack margin so the rows line up; collapses to a
   single column when there isn't room for two. */
.study-complete-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm); max-width:32rem; margin-inline:auto; }
.study-complete-actions .btn { width:100%; margin-top:0; }
@media (max-width:26rem) { .study-complete-actions { grid-template-columns:1fr; } }
.review-wrap { max-width:780px; margin-inline:auto; }
.review-card { position:relative; min-height:430px; padding:clamp(24px,5vw,52px); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); box-shadow:var(--elevation-overlay); display:flex; flex-direction:column; }
.review-source { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); color:var(--text-muted); font:var(--text-caption); text-transform:uppercase; letter-spacing:.08em; }
.review-hebrew { margin:auto 0 var(--space-lg); text-align:center; font:600 clamp(38px,8vw,68px)/1.35 var(--font-hebrew); color:var(--text-heading); }
.review-visual { margin:auto 0 var(--space-lg); display:grid; place-items:center; }
.review-cursive { width:min(320px,80%); max-height:230px; object-fit:contain; }
.review-prompt { text-align:center; color:var(--text-muted); margin-top:auto; }
.review-answer { border-top:1px solid var(--border-subtle); padding-top:var(--space-lg); animation:study-in .22s ease both; }
.review-answer-primary { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-sm); }
.answer-field,.answer-detail { min-width:0; padding:var(--space-md); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card-mist); }
.answer-label { display:block; margin-bottom:6px; color:var(--text-muted); font:var(--text-caption); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
/* Was --color-gold-active, which measured ~1.8:1 on the white review card.
   --color-gold-deep is the surface-aware gold: deep on light, pale on dark. */
.review-translit { color:var(--color-gold-deep); font:var(--text-body-lg); }
.review-english { color:var(--text-heading); font:var(--text-display-xs); }
.review-translit,.review-english,.answer-detail p { margin:0; overflow-wrap:anywhere; }
.review-note { margin:var(--space-md) auto 0; max-width:58ch; color:var(--text-muted); text-align:center; }
.review-details { display:grid; gap:var(--space-sm); margin-top:var(--space-sm); color:var(--text-body); }
.answer-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.answer-detail.wide { grid-column:1/-1; }
.answer-detail-hebrew { color:var(--text-heading); font:600 1.5rem/1.5 var(--font-hebrew); text-align:start; }
.answer-word-list { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
.answer-word-list span { padding:6px 9px; border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-body); font:var(--text-body-sm); }
.answer-meta { margin:0; color:var(--text-muted); font:var(--text-caption); text-align:center; }
.rating-question { margin:var(--space-lg) 0 0; color:var(--text-muted); font:var(--text-body-sm-strong); text-align:center; }
.reveal-btn { margin-top:0; }
.rating-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-sm); margin-top:var(--space-lg); }
.rating-btn { appearance:none; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); padding:14px 8px; cursor:pointer; color:var(--text-heading); transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.rating-btn:hover { transform:translateY(-2px); border-color:var(--color-gold); }
.rating-btn strong,.rating-btn span { display:block; }
.rating-btn span { margin-top:3px; color:var(--text-muted); font:var(--text-caption); }
.rating-btn.again { background:#fff4f2; }
.rating-btn.good { background:#f1f8f1; }
.rating-btn:disabled { opacity:.55; cursor:wait; transform:none; }
.record-panel { margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid var(--border-subtle); }
.record-main { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--space-sm); }
.record-spinner { width:20px; height:20px; margin:0; border-width:2px; }
.record-dot { width:9px; height:9px; border-radius:50%; background:#bd3f32; display:inline-block; animation:pulse-record 1.1s infinite; }
.record-preview { display:grid; grid-template-columns:1fr auto; gap:var(--space-sm); align-items:center; width:100%; }
.record-preview audio,.record-item audio { width:100%; height:36px; }
.record-history { margin-top:var(--space-md); display:grid; gap:var(--space-xs); }
.record-item { display:grid; grid-template-columns:1fr auto; gap:var(--space-sm); align-items:center; padding:8px 10px; border-radius:var(--radius-sm); background:var(--surface-card-mist); }
.record-meta { font:var(--text-caption); color:var(--text-muted); }
.best-take { color:var(--color-gold-deep); font-weight:700; }
.record-delete { color:var(--color-negative-deep); }

/* ---------- Focus reveal layout ----------
   Meaning is the hero; transliteration is a demoted aid; YouGlish a quiet
   link; the recorder invitation stays visible; everything else drops into
   the collapsed Details disclosure at the very bottom of the card. */
.focus-answer { border-top:1px solid var(--border-subtle); padding-top:var(--space-lg); text-align:center; animation:study-in .22s ease both; }
.focus-meaning { margin:0; color:var(--text-heading); font:var(--text-display-md); overflow-wrap:anywhere; }
/* Switched on from the head bar. Demoted under the meaning — it is the aid you
   asked for, not the answer. */
.focus-translit { margin:var(--space-xs) 0 0; color:var(--text-muted); font:var(--text-body-sm); overflow-wrap:anywhere; }
/* Tool toggles read like the Notes & details summary — quiet until wanted —
   not like gold calls to action. One look whether it's a link or a button. */
.focus-youglish { display:inline-block; margin:var(--space-sm) 0 0; color:var(--text-muted); font:var(--text-body-sm-strong); text-decoration:none; }
.focus-youglish:hover { color:var(--text-heading); text-decoration:underline; }
.focus-answer .rating-question { margin-top:var(--space-xl); }
/* Hear it and say it, side by side above the grading buttons: both are things
   you do WITH the card. Each is a column — closed tray on top, open tray
   directly beneath it — carrying the same box as the Notes & details summary
   below, so the three trays on a card read as one family.

   auto-fit, not a fixed pair: a card whose Hebrew is a single word has no word
   picker, and its lone recorder should take the full width rather than sit in
   half a row with a hole beside it. The same rule drops the pair to one column
   when the card itself is too narrow to hold both — container width, which is
   what actually matters here, not the viewport width a media query would ask
   about. align-items:start so an open tray lengthens its own column only. */
.focus-practice { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--space-sm); margin-top:var(--space-md); align-items:start; }
/* A grid, not a plain block: as direct grid items the toggles were stretched
   to their column, but a <button> inside an ordinary div shrink-wraps to its
   text. Grid stretches its items, so the closed tray fills its column again.
   min-width:0 keeps a wide audio player from pushing the column past
   its share. */
.focus-tool { display:grid; min-width:0; }
.focus-practice .focus-youglish {
  display:flex; align-items:center; justify-content:center; margin:0; text-align:center;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-card); padding:12px 16px;
}
/* Boxed now, so the invitation is the border warming up, not an underline. */
.focus-practice .focus-youglish:hover { border-color:var(--color-gold); color:var(--text-heading); text-decoration:none; }
.focus-practice .focus-mic { margin-top:0; }
.yg-panel[hidden] { display:none; }
/* The split control is alone here now that the mic has moved up. */

/* Break-it-up editor. The word row is RTL; the gaps between words are the
   controls, so they need a real hit area rather than a hairline. */
.split-panel { margin-top:var(--space-md); padding:var(--space-md); border:1px solid var(--border-subtle); border-radius:var(--radius-control-compact,10px); text-align:start; }
.split-help { margin:0 0 var(--space-sm); color:var(--text-muted); font:var(--text-body-sm); text-align:center; }
.split-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px; }
.split-word { border:1px solid var(--border-subtle); background:transparent; color:var(--text-heading); border-radius:8px; padding:6px 10px; font-size:1.25rem; line-height:1.4; cursor:pointer; }
.split-word:hover { border-color:var(--color-gold); }
.split-word.is-dropped { opacity:.4; text-decoration:line-through; }
/* Wider than it looks: the marker is absolutely positioned, so the button can
   carry a thumb-sized hit area while the visible line stays a hairline. */
.split-gap { position:relative; width:28px; align-self:stretch; min-height:40px; border:0; background:transparent; cursor:pointer; padding:0; border-radius:4px; }
.split-gap::after { content:""; position:absolute; inset:14% 50% 14% 50%; width:2px; transform:translateX(-50%); background:var(--border-subtle); border-radius:2px; }
.split-gap:hover::after { background:var(--color-gold); }
.split-gap.is-cut::after { background:var(--color-gold); inset:0 50% 0 50%; width:3px; }
.split-gap:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }
.split-preview { margin-top:var(--space-md); padding-top:var(--space-sm); border-top:1px solid var(--border-subtle); }
.split-piece { margin:6px 0 0; font-size:1.125rem; }
.split-keep { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:var(--space-md); color:var(--text-muted); font:var(--text-body-sm); cursor:pointer; }
.split-actions { display:flex; justify-content:center; gap:var(--space-sm); margin-top:var(--space-md); }

.focus-mic { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:var(--space-md); }
.focus-mic .btn-mic { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-subtle); background:transparent; color:var(--text-muted); border-radius:999px; padding:9px 18px; cursor:pointer; font:var(--text-body-sm-strong); transition:border-color .15s ease, color .15s ease; }
.focus-mic .btn-mic:hover { border-color:var(--color-gold); color:var(--text-heading); }
.focus-mic .btn-mic:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.mic-live { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
.mic-preview { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.mic-preview audio { width:100%; max-width:320px; height:36px; }

.review-disclosure { margin-top:var(--space-lg); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); overflow:hidden; text-align:start; }
.review-disclosure > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); padding:12px 16px; color:var(--text-muted); font:var(--text-body-sm-strong); text-transform:uppercase; letter-spacing:.06em; }
.review-disclosure > summary::-webkit-details-marker { display:none; }
.review-disclosure > summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.review-disclosure > summary .chev { font-size:1.25rem; line-height:1; transition:transform .2s ease; }
.review-disclosure[open] > summary .chev { transform:rotate(90deg); }
.review-disclosure[open] > summary { border-bottom:1px solid var(--border-subtle); }
.review-disclosure-body { padding:var(--space-md) var(--space-md) var(--space-lg); }
.review-disclosure-body .review-details { margin-top:0; }
.review-disclosure-body .kbd-help { text-align:start; margin-top:var(--space-md); }
.review-takes { margin-top:var(--space-md); }

/* ---------- YouGlish snippet tray ----------
   All phrase words remain visible after reveal. Words read RTL; the selected
   snippet stays in sentence order, with up to three words per search. */
.yg-toggle, .tk-toggle { appearance:none; background:none; border:none; cursor:pointer; padding:0; }
.yg-toggle:focus-visible, .tk-toggle:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:3px; }
.yg-pick { margin-top:var(--space-md); border-top:1px dashed var(--border-subtle); padding-top:var(--space-md); text-align:center; }
.yg-label { display:block; color:var(--text-muted); font:var(--text-body-sm); margin-bottom:var(--space-sm); }
.yg-words { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; direction:rtl; }
.yg-word { appearance:none; cursor:pointer; border:1px solid var(--border-subtle); background:var(--surface-card); border-radius:var(--radius-pill); padding:8px 13px; font:600 1.3125rem/1.1 var(--font-hebrew); color:var(--text-heading); transition:border-color .12s ease, background .12s ease, color .12s ease; }
.yg-word:hover { border-color:var(--color-gold); }
.yg-word.on { background:var(--color-gold-pale); border-color:var(--color-gold); color:var(--color-gold-deep); }
.yg-word:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.yg-tray { margin-top:var(--space-md); display:flex; flex-direction:column; align-items:center; gap:10px; }
.yg-staged { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; min-height:36px; align-items:center; direction:rtl; }
.yg-chip { display:inline-flex; align-items:center; gap:4px; background:var(--surface-card-mist); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:5px 6px 5px 13px; font:600 1.1875rem/1 var(--font-hebrew); color:var(--text-heading); }
.yg-chip button { border:none; background:transparent; cursor:pointer; color:var(--text-muted); font-size:.9375rem; line-height:1; padding:2px 5px; border-radius:50%; }
.yg-chip button:hover { color:var(--color-negative-deep); background:var(--surface-card); }
.yg-empty { color:var(--text-muted); font:var(--text-body-sm); }
.yg-go { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-gold); color:var(--color-gold-deep); background:transparent; border-radius:var(--radius-pill); padding:10px 18px; font:var(--text-body-sm-strong); text-decoration:none; cursor:pointer; transition:background .12s ease; }
.yg-go:hover { background:var(--color-gold-pale); }
.yg-go[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.yg-hint { color:var(--text-muted); font:var(--text-caption); margin:0; }
.yg-warn { display:none; color:var(--color-negative-deep); font:var(--text-body-sm-strong); margin:0; }
.yg-warn.show { display:block; }
@keyframes yg-shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }
.review-card.shake { animation:yg-shake .45s cubic-bezier(.36,.07,.19,.97) both; }
.study-shake { animation:yg-shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion: reduce) { .review-card.shake, .study-shake { animation:none; } }

.study-complete { text-align:center; max-width:620px; margin:var(--space-xl) auto; padding:var(--space-2xl); border-radius:var(--radius-xl); background:var(--surface-dark); color:var(--text-on-dark); }
.study-complete h2 { color:var(--color-gold); font:var(--text-display-sm); }
.study-complete .btn { margin-top:var(--space-md); }
.library-controls { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:var(--space-sm); margin-bottom:var(--space-lg); }
.library-controls input,.library-controls select,.library-edit input,.library-edit textarea { width:100%; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 14px; background:var(--surface-card); color:var(--text-heading); font:var(--text-body-md); }
.library-list { display:grid; gap:var(--space-sm); }
.library-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-md); padding:var(--space-md) var(--space-lg); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-card); }
.library-card h3 { margin:0; font:600 1.5625rem/1.45 var(--font-hebrew); color:var(--text-heading); }
.library-card p { margin:3px 0 0; color:var(--text-muted); }
.library-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:var(--space-xs); }
.status-pill { display:inline-flex; border-radius:999px; padding:5px 9px; background:var(--surface-card-mist); color:var(--text-muted); font:var(--text-caption); text-transform:capitalize; }
.status-pill.mastered { background:#e9f5e8; color:#37653a; }
.status-pill.new { background:#fff3cf; color:#755b10; }
/* Warm rather than red: a stuck card is an invitation to reshape it, not an
   error the learner committed. Deliberately quieter than .new, which is the
   only other pill competing for attention in a library list. */
.status-pill.stuck { background:#fbe9df; color:#8a4a24; }
.library-edit { grid-column:1/-1; display:grid; gap:var(--space-sm); }
.library-empty { text-align:center; padding:var(--space-2xl); border:1px dashed var(--border-subtle); border-radius:var(--radius-lg); color:var(--text-muted); }
.library-more { justify-self:center; margin:var(--space-md) auto; }
.catalog-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr); gap:var(--space-xl); align-items:end; margin-bottom:var(--space-lg); padding:clamp(24px,5vw,44px); border-radius:var(--radius-xl); background:var(--surface-dark); color:var(--text-on-dark); }
.catalog-hero h2 { margin-top:var(--space-xs); color:var(--color-gold); font:var(--text-display-sm); }
.catalog-hero p { margin-top:var(--space-sm); max-width:62ch; }
.catalog-controls { display:grid; grid-template-columns:minmax(210px,auto) minmax(210px,auto) 1fr; gap:var(--space-sm); align-items:center; margin-bottom:var(--space-lg); }
.catalog-controls select { width:100%; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 14px; background:var(--surface-card); color:var(--text-heading); font:var(--text-body-md); }
.catalog-controls .study-count { text-align:end; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); }
/* No box-shadow: --elevation-low was never a token, so the declaration was
   dropped anyway, and tokens.css states the brand's depth cue is surface
   contrast — shadows are reserved for detached overlays. Border + card
   surface is the intended treatment for a resting card like this. */
.catalog-pack { display:flex; flex-direction:column; gap:var(--space-sm); min-height:300px; padding:var(--space-lg); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.catalog-pack.active { border-color:var(--color-gold); box-shadow:0 0 0 2px var(--color-gold-pale); }
.catalog-pack-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); }
/* Status pills sit side by side at every width. They used to be a .row.wrap,
   which the phone rules stack into a column: one pill per line. */
.catalog-pills { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.catalog-pack h3 { color:var(--text-heading); font:var(--text-display-xs); }
.catalog-pack p { color:var(--text-muted); }
.catalog-pack .catalog-subtitle { color:var(--color-gold-deep); font:var(--text-body-sm-strong); }
.catalog-progress { display:grid; gap:var(--space-xs); margin-top:auto; }
.catalog-pack-action { display:flex; justify-content:flex-end; margin-top:auto; padding-top:var(--space-sm); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.study-error { max-width:620px; margin:var(--space-xl) auto; }
.kbd-help { text-align:center; margin-top:var(--space-md); color:var(--text-muted); font:var(--text-caption); }
.dash-study-page { padding-block:var(--space-2xl) var(--space-3xl); }
.dash-welcome { margin-bottom:var(--space-lg); }
.dash-welcome h1 { font:var(--text-display-md); margin-top:var(--space-xs); }
.dash-welcome p { margin-top:var(--space-xs); }
.dash-study-stack { display:grid; gap:var(--space-lg); }
.dash-study-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr); gap:var(--space-xl); padding:clamp(24px,5vw,48px); border-radius:var(--radius-xl); background:var(--surface-dark); color:var(--text-on-dark); }
.dash-study-hero h2 { color:var(--color-gold); font:var(--text-display-sm); margin-top:var(--space-xs); }
.dash-study-hero p { margin-top:var(--space-sm); max-width:56ch; }
.dash-volume-row { display:flex; align-items:center; gap:var(--space-sm); margin-top:var(--space-md); }
.dash-volume-label { font:var(--text-body-sm); opacity:.8; }
.dash-volume-select { appearance:none; background:rgba(255,255,255,.1); color:inherit; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-md); padding:6px 12px; font:var(--text-body-sm); cursor:pointer; }
.dash-volume-select:focus { outline:2px solid var(--color-gold); outline-offset:2px; }
/* Sits on the dark study hero, so it borrows the hero's translucent styling
   rather than the light-surface treatment used inside My cards. */
.dash-volume-input { width:5rem; background:rgba(255,255,255,.1); color:inherit; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-md); padding:6px 10px; font:var(--text-body-sm); }
.dash-volume-input:focus { outline:2px solid var(--color-gold); outline-offset:2px; }
.dash-volume-unit { font:var(--text-body-sm); opacity:.8; }
.dash-level { align-self:center; display:grid; gap:var(--space-sm); padding:var(--space-lg); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); background:rgba(255,255,255,.06); }
.dash-level > span { font:var(--text-body-sm-strong); text-transform:uppercase; letter-spacing:.08em; }
.dash-level strong { color:var(--color-gold); font:var(--text-display-xs); }
.dash-level small { opacity:.8; }
.dash-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-sm); }
.dash-metric { padding:var(--space-lg); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-card); }
.dash-metric span,.dash-metric small { display:block; color:var(--text-muted); }
.dash-metric span { font:var(--text-body-sm-strong); }
.dash-metric strong { display:block; margin-block:var(--space-xs); color:var(--text-heading); font:var(--text-display-sm); }
.dash-metric small { font:var(--text-caption); }
.dash-insights { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:var(--space-md); }
.dash-insights .card { width:100%; }
.activity-bars { display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:var(--space-sm); min-height:125px; margin-top:var(--space-lg); }
.activity-day { display:grid; justify-items:center; align-items:end; gap:5px; height:110px; color:var(--text-muted); font:var(--text-caption); }
.activity-num { align-self:end; }
/* These bars carry the seven-day review counts, so they are data, not
   decoration, and owe the 3:1 non-text floor. Plain --color-gold measured
   2.24:1 on the white insight card. */
.activity-bar { width:min(24px,70%); min-height:5px; border-radius:999px 999px 4px 4px; background:var(--color-gold-deep); }
.milestone-list { display:grid; gap:var(--space-sm); margin-top:var(--space-md); }
.milestone { display:flex; align-items:center; gap:var(--space-sm); padding:10px; border-radius:var(--radius-md); background:var(--surface-card-gold); }
.milestone span,.milestone b { display:block; }
.milestone span { color:var(--text-muted); font:var(--text-caption); }
.milestone b { color:var(--text-heading); font:var(--text-body-sm-strong); }
.milestone-empty { margin-top:var(--space-md); color:var(--text-muted); }
.latest-take { display:grid; gap:4px; margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid var(--border-subtle); }
.latest-take strong { font:600 1.375rem/1.5 var(--font-hebrew); color:var(--text-heading); }
.latest-take-playback { margin-top:8px; }
.latest-take-playback audio { display:block; width:100%; max-width:360px; }
.dash-section { margin-top:var(--space-2xl); }
.dash-section h2 { font:var(--text-display-sm); margin-top:var(--space-xs); }
.dash-live-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:var(--space-md); margin-top:var(--space-lg); align-items:start; }
@keyframes study-in { from { opacity:0; transform:translateY(5px); } }
@keyframes pulse-record { 50% { opacity:.3; transform:scale(.8); } }
@media (max-width:760px) {
  .study-head { align-items:flex-start; flex-direction:column; }
  .study-tabs { width:100%; overflow-x:auto; scrollbar-width:none; }
  .study-tabs::-webkit-scrollbar { display:none; }
  .study-tab { flex:1 0 auto; padding-inline:14px; }
  .review-card { min-height:390px; }
  .review-answer-primary,.answer-detail-grid { grid-template-columns:1fr; }
  .answer-detail.wide { grid-column:auto; }
  .rating-grid { grid-template-columns:repeat(2,1fr); }
  .library-controls { grid-template-columns:1fr 1fr; }
  .library-controls input { grid-column:1/-1; }
  .library-card { grid-template-columns:1fr; }
  .library-actions { justify-content:flex-start; }
  .dash-study-hero,.dash-insights,.dash-live-grid { grid-template-columns:1fr; }
  .catalog-hero,.catalog-grid { grid-template-columns:1fr; }
  .catalog-controls { grid-template-columns:1fr; }
  .catalog-controls .study-count { text-align:start; }
  .catalog-pack { min-height:0; padding:var(--space-md); }
  .catalog-pack-head { align-items:flex-start; }
  .catalog-pack-action .btn { width:100%; }
  .dash-metrics { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .review-answer,.record-dot { animation:none; }
}

/* ---------- Dark theme: the literal colours in this file ----------
   Everything else here is token-driven and inverts on its own. These are
   the hard-coded tints for the rating buttons and status pills. */
[data-theme="dark"] .rating-btn.again { background:#2e1a18; }
[data-theme="dark"] .rating-btn.good { background:#16281a; }
[data-theme="dark"] .status-pill.mastered { background:#16281a; color:#8fd39a; }
[data-theme="dark"] .status-pill.new { background:#33280e; color:#f0cb61; }
[data-theme="dark"] .status-pill.stuck { background:#33200f; color:#e8a97a; }
[data-theme="dark"] .record-delete { color:#ff9ba3; }

/* ---------- pack preview ---------- */
/* Browsing, not recall: everything visible, nothing behind a reveal. */
.preview-modal { width:min(880px,100%); max-width:880px; max-height:82dvh; display:flex; flex-direction:column; background:var(--surface-card); opacity:1; }
.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.preview-count { font: var(--text-body-sm); margin-top: 2px; }
.preview-close {
  display:grid; place-items:center; flex:0 0 40px; width:40px; min-height:40px!important; padding:0;
  color:var(--text-compact); font-family:Arial,sans-serif; font-size:1.625rem!important; font-weight:500; line-height:1!important;
}
.preview-body { overflow-y: auto; margin-top: var(--space-md); }
.preview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.preview-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-md); align-items: baseline; padding: var(--space-sm) var(--space-md); background: var(--surface-card); }
.preview-he { font: 600 1.5rem/1.5 var(--font-hebrew); color: var(--text-heading); text-align: start; }
.preview-translit { color: var(--color-gold-deep); font: var(--text-body-sm); }
.preview-hebrew-forms { display: grid; gap: var(--space-xs); min-width: 0; }
.preview-form-label { font: var(--text-body-sm); }
.preview-english { color: var(--text-body); font: var(--text-body-sm); }
.preview-actions { display: flex; justify-content: flex-end; margin-top: var(--space-lg); }
@media (max-width: 760px) {
  /* Three columns at 375px gives each about 100px; stack instead. */
  .preview-row { grid-template-columns: 1fr; gap: 2px; }
  .preview-he { font-size: 1.375rem; }
}

/* ---------- study tidy-up: bigger type, no filter row ---------- */
/* The catalogue headline is the page's title now that the kicker and the
   "Shalom, there." heading are gone, so it carries display weight.
   Scoped to .catalog-hero because the existing `.catalog-hero h2` rule is
   0,1,1 and would otherwise outrank a bare class and hold it at 32px. */
.catalog-hero .catalog-headline { font: var(--text-display-md); color: var(--color-gold); }
.catalog-hero { grid-template-columns: minmax(0, 1.6fr) minmax(240px, .4fr); }
/* Pack copy was set at body size inside a card doing a lot of talking. */
.catalog-pack h3 { font: var(--text-display-sm); letter-spacing: var(--tracking-display-sm); }
.catalog-pack .catalog-subtitle { font: var(--text-body-lg); font-weight: var(--weight-semibold); }
.catalog-pack p { font: var(--text-body-lg); line-height: 1.5; }
.catalog-pack-action { gap: var(--space-sm); }
.catalog-preview { min-height: 44px; }

/* Your own pack, marked so it reads as yours at a glance rather than as one
   more shelf item. Gold is the brand accent and already means "yours" on the
   suggested-next badge. */
.catalog-pack-mine {
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 0 4px var(--surface-card-gold);
}

.library-head { margin-bottom: var(--space-lg); }
.library-title { font: var(--text-display-xl); letter-spacing: var(--tracking-display-lg); color: var(--text-heading); }
.library-delete { color: var(--color-negative-deep); }
.library-delete:hover { border-color: var(--color-negative-deep); }

@media (max-width: 760px) {
  .catalog-hero { grid-template-columns: 1fr; }
  .library-title { font: var(--text-display-md); }
}

/* ---------- compact Study migration ----------
   Scoped to the authenticated Study root so the signed-out gate keeps the
   public-site treatment. Learning-scale Hebrew remains deliberately larger. */
.study-active body { min-height:100vh; background:var(--surface-compact-page); }
.study-active #study-root.ui-compact { min-height:calc(100vh - 1px); }
.study-active .study-shell { width:min(1120px,100%); padding-block:24px 40px; }
.study-active #study-view { min-width:0; }

.study-active .review-wrap { max-width:760px; }
.study-active .study-toolbar {
  gap:12px; margin-bottom:12px; padding:12px 14px; border:1px solid var(--ui-line);
  border-radius:var(--radius-card-compact); background:var(--ui-panel); box-shadow:var(--ui-shadow);
}
.study-active .study-session { gap:6px; }
.study-active .study-session-head { font:var(--text-ui-supporting); }
.study-active .study-count,.study-active .study-laps,.study-active .record-meta {
  color:var(--ui-text-soft); font:var(--text-ui-supporting);
}
.study-active .study-progress { height:4px; background:var(--ui-panel-soft); }
.study-active .study-display { gap:8px; }
.study-active .study-switch {
  min-height:var(--touch-target-compact); padding:6px 14px; border-color:var(--ui-line); border-radius:var(--radius-control-compact);
  background:var(--ui-panel); color:var(--ui-text-soft); font:var(--text-ui-body-strong);
}
.study-active .study-switch.on { border-color:var(--color-gold-deep); background:var(--accent); color:var(--ui-text); }
/* Disabled is a dashed edge and quiet colours that still read, not a 40% fade
   that took the label to about 1.9:1. */
.study-active .study-switch:disabled, .study-active .study-switch.is-off { color:var(--ui-text-soft); background:var(--ui-panel-soft); border-color:var(--ui-line-strong); border-style:dashed; cursor:default; }
.study-switch-note { flex-basis:100%; margin:0; color:var(--ui-text-soft); font:var(--text-ui-supporting); }
/* The key each grading button answers to, in the corner, always. */
.rating-btn { position:relative; }
.rating-key { position:absolute; top:4px; inset-inline-end:6px; padding:0 5px; border:1px solid var(--ui-line); border-radius:4px; background:var(--ui-panel); color:var(--ui-text-soft); font:500 .75rem/1.4 var(--font-interface); }
.catalog-legend { margin:0 0 12px; font:var(--text-ui-supporting); }
.study-active .review-card {
  min-height:470px; padding:clamp(24px,5vw,42px); border-color:var(--ui-line);
  border-radius:var(--radius-card-compact); background:var(--ui-panel); box-shadow:var(--ui-shadow);
}
.study-active .review-hebrew { font:var(--card-hebrew-weight) var(--card-hebrew-size)/var(--card-hebrew-leading) var(--card-hebrew-font); color:var(--ui-text); overflow-wrap:anywhere; }
.study-active .review-prompt { color:var(--ui-text-soft); font:var(--text-ui-body); }
/* The method in one line on the card front itself: try first, then look. */
.review-recall { margin:0 0 10px; }
.study-active .focus-answer { border-color:var(--ui-line); padding-top:20px; }
.study-active .focus-meaning { color:var(--ui-text); font:var(--card-english-weight) var(--card-english-size)/var(--card-english-leading) var(--card-english-font); }
.study-active .focus-translit { color:var(--ui-text); font:400 var(--card-pronunciation-size)/1.6 var(--font-interface); }
.study-active .focus-answer .rating-question { margin-top:20px; color:var(--ui-text-soft); font:var(--text-ui-body-strong); }
.study-active .rating-grid { gap:8px; margin-top:10px; }
.study-active .rating-btn,
.study-active .rating-btn.again,
.study-active .rating-btn.good {
  min-height:54px; padding:8px; border-color:var(--ui-line); border-radius:var(--radius-control-compact);
  background:var(--ui-panel-soft); color:var(--ui-text); box-shadow:none;
}
.study-active .rating-btn:hover { transform:none; border-color:var(--color-gold-deep); background:var(--accent); }
.study-active .rating-btn strong { font:var(--text-ui-body-strong); padding:12px 0 4px; overflow-wrap:anywhere; }
.study-active .rating-btn span { color:var(--ui-text-soft); font:var(--text-ui-supporting); }
/* No margin of its own: the mic sits in the practice row now, not under it. */
.study-active .focus-practice { margin-top:14px; gap:8px; }
/* Deliberately the same six declarations the compact Notes & details summary
   takes below — the closed trays are meant to be indistinguishable. */
.study-active .focus-practice .focus-youglish {
  min-height:var(--touch-target-compact); padding:9px 14px; border-color:var(--ui-line); border-radius:var(--radius-control-compact);
  background:var(--ui-panel); color:var(--ui-text-soft); font:var(--text-ui-supporting);
}
.study-active .focus-mic { gap:6px; }
/* The recorder before the first take: the button, and the line that says the
   permission question is coming. A block from the browser gets a standing
   panel with the way out, not a vanishing toast. */
.mic-start { display:grid; gap:6px; justify-items:center; }
.mic-notice { max-width:38ch; text-align:center; }
.mic-blocked { display:grid; gap:4px; max-width:44ch; padding:10px 12px; border:1px dashed var(--ui-line-strong); border-radius:var(--radius-control-compact); background:var(--ui-panel-soft); color:var(--ui-text); font:var(--text-ui-body); text-align:start; }
.review-card:focus { outline:none; }
.review-card:focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; }
.study-active .focus-mic .btn-mic {
  min-height:var(--touch-target-compact); padding:6px 14px; border-color:var(--ui-line); border-radius:var(--radius-control-compact);
  color:var(--ui-text-soft); font:var(--text-ui-body-strong);
}
.study-active .review-disclosure { margin-top:14px; border-color:var(--ui-line); border-radius:var(--radius-control-compact); background:var(--ui-panel); }
.study-active .review-disclosure > summary { min-height:var(--touch-target-compact); padding:9px 14px; color:var(--ui-text-soft); font:var(--text-ui-supporting); text-transform:none; letter-spacing:0; }
.study-active .review-disclosure-body { padding:12px; }

.study-active .yg-pick {
  margin-top:14px; padding:12px; border:1px solid var(--ui-line); border-radius:var(--radius-control-compact);
  background:var(--ui-panel-soft);
}
.study-active .yg-label { margin-bottom:8px; color:var(--ui-text-soft); font:var(--text-ui-supporting); }
.study-active .yg-word { padding:6px 10px; border-color:var(--ui-line); border-radius:var(--radius-control-compact); background:var(--ui-panel); font-size:1.25rem; }
.study-active .yg-word.on { border-color:var(--color-gold-deep); background:var(--accent); color:var(--ui-text); }
.study-active .yg-tray { gap:7px; margin-top:10px; }
.study-active .yg-staged { min-height:30px; }
.study-active .yg-chip { border-color:var(--ui-line); border-radius:var(--radius-control-compact); background:var(--ui-panel); font-size:1.1875rem; }
.study-active .yg-go { min-height:var(--touch-target-compact); padding:6px 12px; border-radius:var(--radius-control-compact); font:var(--text-ui-body-strong); }
.study-active .yg-hint { color:var(--ui-text-faint); font:var(--text-ui-caption); }

.study-active .study-complete {
  max-width:620px; margin:20px auto; padding:36px; border:1px solid var(--ui-line);
  border-radius:var(--radius-card-compact); background:var(--ui-panel); color:var(--ui-text); box-shadow:var(--ui-shadow);
}
.study-active .study-complete h2 { color:var(--ui-text); font:var(--text-ui-page-title); }
.study-active .study-total-laps { border-color:var(--ui-line); color:var(--ui-text-soft); font:var(--text-ui-supporting); }
.study-active .study-total-laps strong { color:var(--color-gold-deep); font:var(--text-ui-body-strong); }

.study-active .study-page-head {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end;
  margin-bottom:16px;
}
.study-active .study-page-head p { margin:3px 0 0; }
.study-active .catalog-grid { gap:12px; }
.study-active .catalog-pack {
  display:grid; grid-template-columns:62px minmax(0,1fr); gap:12px; min-height:188px; padding:14px;
  border-color:var(--ui-line); border-radius:var(--radius-card-compact); background:var(--ui-panel); box-shadow:var(--ui-shadow);
}
.study-active .catalog-pack.no-media { grid-template-columns:1fr; }
.study-active .catalog-pack.active { border-color:var(--color-gold-deep); box-shadow:0 0 0 1px var(--color-gold-deep); }
.study-active .catalog-pack-mine { border-width:1px; box-shadow:0 0 0 1px var(--color-gold-deep); }
.study-active .catalog-pack-media {
  display:grid; place-items:center; align-self:start; width:62px; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--ui-line); border-radius:var(--radius-control-compact); background:var(--accent); color:var(--accent-foreground);
}
.study-active .catalog-pack-media img { width:100%; height:100%; object-fit:cover; }
.study-active .catalog-pack-body { min-width:0; display:flex; flex-direction:column; gap:6px; }
.study-active .catalog-pack-head { gap:8px; }
.study-active .catalog-pack h3 { margin-top:2px; color:var(--ui-text); font:var(--text-ui-section-title); letter-spacing:0; }
.study-active .catalog-pack p { margin:0; color:var(--ui-text-soft); font:var(--text-ui-body); line-height:1.5; }
.study-active .catalog-pack .catalog-subtitle { color:var(--color-gold-deep); font:var(--text-ui-body-strong); }
.study-active .catalog-domain { margin-top:auto; }
.study-active .catalog-progress { gap:5px; margin-top:auto; }
.study-active .catalog-pack-action { gap:8px; margin-top:auto; padding-top:6px; }
.study-active .catalog-preview { min-height:var(--control-height-compact); }
.study-active .status-pill { padding:2px 7px; border:1px solid var(--ui-line); border-radius:999px; background:var(--ui-panel-soft); color:var(--ui-text-soft); font:var(--text-ui-caption); }
.study-active .status-pill.mastered,.study-active .status-pill.new { background:var(--accent); color:var(--accent-foreground); }

.study-active .library-head { margin-bottom:12px; }
.study-active .library-title { color:var(--ui-text); font:var(--text-ui-page-title); letter-spacing:-.025em; }
.study-active .library-controls { gap:8px; margin-bottom:8px; }
.study-active .library-controls input,
.study-active .library-controls select,
.study-active .library-edit input,
.study-active .library-edit textarea,
.study-active .confirm-modal .input {
  min-height:var(--control-height-compact); padding:6px 9px; border-color:var(--ui-line-strong);
  border-radius:var(--radius-control-compact); background:var(--ui-panel); color:var(--ui-text); font:var(--text-ui-body);
}
.study-active .library-list { gap:8px; }
.study-active .library-card {
  gap:12px; padding:12px 14px; border-color:var(--ui-line); border-radius:var(--radius-card-compact);
  background:var(--ui-panel); box-shadow:var(--ui-shadow);
}
.study-active .library-card h3 { color:var(--ui-text); font:var(--card-hebrew-weight) var(--card-hebrew-size)/var(--card-hebrew-leading) var(--card-hebrew-font); overflow-wrap:anywhere; }
.study-active .library-card p { color:var(--ui-text); font:var(--card-english-weight) max(1rem,calc(var(--card-english-size) * .7))/var(--card-english-leading) var(--card-english-font); }
.study-active .library-empty { padding:32px; border-color:var(--ui-line); border-radius:var(--radius-card-compact); color:var(--ui-text-soft); background:var(--ui-panel); }
.study-active .preview-modal { border-color:var(--ui-line); border-radius:var(--radius-card-compact); background:var(--surface-compact-card); color:var(--text-compact); opacity:1; }
.study-active .preview-list { border-radius:var(--radius-control-compact); background:var(--ui-line); }
.study-active .preview-row { gap:12px; padding:9px 12px; background:var(--ui-panel); }
.study-active .preview-he { font:var(--card-hebrew-weight) var(--card-hebrew-size)/var(--card-hebrew-leading) var(--card-hebrew-font); overflow-wrap:anywhere; }
.study-active .preview-english { font:var(--card-english-weight) max(1rem,calc(var(--card-english-size) * .7))/var(--card-english-leading) var(--card-english-font); }
.study-active .preview-translit { font:400 var(--card-pronunciation-size)/1.6 var(--font-interface); }

@media (max-width:760px) {
  .study-active .study-shell { padding-block:16px 28px; }
  .study-active .review-card { min-height:420px; padding:24px 18px; }
  .study-active .rating-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .study-active .study-page-head { grid-template-columns:1fr; align-items:start; }
  .study-active .catalog-grid { grid-template-columns:1fr; }
  .study-active .catalog-pack { min-height:0; padding:12px; }
  .study-active .catalog-pack-action .btn { width:auto; flex:1; }
}

@media (max-width:420px) {
  .study-active .study-toolbar { align-items:stretch; }
  /* Pause is no longer a direct child of the toolbar — it sits in the display
     group. On a phone that group takes the full width and shares it out, rather
     than Pause alone stretching across and the switches wrapping above it. */
  .study-active .study-display { width:100%; }
  .study-active .catalog-pack { grid-template-columns:50px minmax(0,1fr); gap:10px; }
  .study-active .catalog-pack-media { width:50px; }
  .study-active .library-controls { grid-template-columns:1fr; }
  .study-active .library-controls input { grid-column:auto; }
  .study-active .library-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .study-active .library-actions .btn { width:100%; }
}

/* Naming the narrowed sitting: a short queue must not read as "nearly done"
   when it is really "one pack". */
.study-scope { margin:6px 0 0; color:var(--text-muted); font:var(--text-body-sm); }

/* Sits between the answer and the rating buttons, so it is read before the card
   is graded rather than after. Quiet by construction — a left rule and muted
   text, no fill and no icon — because it appears on a card the learner is
   already frustrated by and should not also feel told off by. */
.stuck-notice { margin:var(--space-sm) 0 0; padding:0 0 0 var(--space-sm);
  border-left:2px solid var(--ui-line); display:grid; gap:2px; }
.stuck-line { margin:0; color:var(--text-muted); font:var(--text-body-sm); }
.stuck-hint { margin:0; color:var(--text-muted); font:var(--text-caption); }
.stuck-notice .linkbtn { justify-self:start; font:var(--text-body-sm); }
.study-complete .linkbtn { margin-top:var(--space-xs); }
.split-piece-row { margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px dashed var(--border-subtle); }
.split-piece-row:first-of-type { border-top:0; padding-top:0; }
.split-english { width:100%; margin-top:6px; padding:8px 10px; border:1px solid var(--border-subtle); border-radius:8px; background:transparent; color:var(--text-heading); font:var(--text-body-sm); }
.split-english:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }

/* ---------- the card toolkit trays ---------- */
/* One visual grammar for all three tool trays. The record tray takes its
   column's width — it no longer needs a max-width to stay narrow, because the
   column it opens in is already only half the card. */
.tk-panel:empty { display:none; }
.rec-panel { margin-top:var(--space-sm); border-top:1px dashed var(--border-subtle); padding-top:var(--space-sm); }
/* Half a card is too narrow for player-and-buttons abreast, so a take stacks:
   the player over its controls, each with the full column to itself. */
.focus-tool .record-item { grid-template-columns:1fr; }
.focus-tool .record-item .row { justify-content:center; }
.rec-panel .focus-mic { margin-top:var(--space-sm); }
.rec-panel .review-takes { margin-top:var(--space-sm); text-align:start; }
.rec-panel .record-history:empty::after { content:"No takes yet."; color:var(--text-muted); font:var(--text-body-sm); }

/* The split tool sits at the bottom of the drawer: occasional surgery, so it
   whispers from down here instead of shouting from the practice row. */
.review-split { margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px dashed var(--border-subtle); }
.review-split .focus-youglish { margin:0; }

/* ---------- the member's notes in the drawer ---------- */
.review-notes { margin-bottom:var(--space-md); }
.note-input { width:100%; margin-top:6px; padding:8px 10px; border:1px solid var(--border-subtle); border-radius:8px; background:transparent; color:var(--text-heading); font:var(--text-body-sm); resize:vertical; }
.note-input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }
.note-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-xs); }
.note-status { color:var(--text-muted); font:var(--text-body-sm); }
.note-explain-out { margin-top:var(--space-sm); padding:var(--space-sm) var(--space-md); border-inline-start:2px solid var(--color-gold); background:var(--surface-card); border-radius:8px; }
.note-explain-text { color:var(--text-body); font:var(--text-body-sm); white-space:pre-wrap; }

/* ---------- deck shelves and state pills ---------- */
/* The .catalog-section markup has shipped since the two-shelf split but was
   never styled; shelf rhythm follows .study-page-head's compact treatment.
   Everything here lives inside #study-root.ui-compact, so the --ui-* tokens
   always resolve. */
.catalog-section { margin-top:26px; }
.catalog-section:first-child { margin-top:0; }
.catalog-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.catalog-section-head h2 { margin:0; color:var(--ui-text); font:var(--text-ui-section-title); }
.catalog-section-head p { margin:3px 0 0; color:var(--ui-text-soft); font:var(--text-ui-supporting); }
.catalog-domain-head { margin:12px 0 8px; color:var(--ui-text-soft); font:var(--text-ui-body-strong); }
/* Completion and mastery remain separate deck states. */
.status-pill.complete { background:#e9f5e8; color:#37653a; }
.study-active .status-pill.complete { background:var(--ui-panel-soft); color:var(--ui-text-soft); border-color:var(--ui-line); }
.status-pill.mastery { background:#fff3cf; color:#755b10; }
.study-active .status-pill.mastery { background:var(--ui-panel-soft); color:var(--color-gold-deep); border-color:var(--color-gold-deep); }
/* Filter decks by subject or progress. */
.catalog-chips { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; }
.filter-chip { appearance:none; display:inline-flex; align-items:center; min-height:var(--touch-target-compact); margin:0; border:1px solid var(--ui-line); border-radius:999px; padding:6px 14px; background:var(--ui-panel); color:var(--ui-text-soft); font:var(--text-ui-supporting); cursor:pointer; }
.filter-chip:hover { border-color:var(--ui-text-faint); }
.filter-chip:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.filter-chip.on { border-color:var(--color-gold-deep); color:var(--ui-text); box-shadow:0 0 0 1px var(--color-gold-deep); }
.filter-chip.is-off { opacity:.55; cursor:default; }
.filter-chip.is-off:hover { border-color:var(--ui-line); }
.catalog-chips-note { flex:1 0 100%; margin:0; font:var(--text-ui-supporting); }
.catalog-filter-note { margin:0 0 10px; }
/* The admin catalog-details editor on the pack view. */
.pack-meta-editor { grid-column:auto; margin-bottom:12px; padding:12px 14px; border:1px solid var(--ui-line); border-radius:var(--radius-card-compact); background:var(--ui-panel); }
.pack-meta-editor label { display:grid; gap:4px; color:var(--ui-text-soft); font:var(--text-ui-caption); }
.pack-meta-editor select { min-height:var(--control-height-compact); padding:6px 9px; border:1px solid var(--ui-line-strong); border-radius:var(--radius-control-compact); background:var(--ui-panel); color:var(--ui-text); font:var(--text-ui-body); }
/* ---------- deck shelves: list | grid ---------- */
/* The switch sits beside the search. Quiet panel-on-panel active state, the
   same shape as the calendar's list|grid, not the gold segmented CTA. */
.study-active .catalog-view-toggle { align-self:center; margin-inline-end:4px; padding:2px; border:1px solid var(--ui-line); border-radius:var(--radius-control-compact); background:var(--ui-panel-soft); }
.study-active .catalog-view-toggle button { min-height:var(--touch-target-compact); padding:6px 14px; border-radius:calc(var(--radius-control-compact) - 2px); font:var(--text-ui-body); color:var(--ui-text-soft); }
.study-active .catalog-view-toggle button:hover { border-color:var(--ui-line-strong); }
.study-active .catalog-view-toggle button[aria-pressed="true"] { background:var(--ui-panel); border-color:var(--ui-line-strong); color:var(--ui-text); }
/* The table borrows .admin-table's skeleton and takes the compact tokens here,
   since the study page is .study-active rather than .ui-compact. */
.study-active .catalog-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--ui-line); border-radius:var(--radius-card-compact); background:var(--ui-panel); }
.study-active .catalog-table { min-width:640px; border:0; border-radius:0; background:transparent; }
.study-active .catalog-table th, .study-active .catalog-table td { padding:9px 10px; border-color:var(--ui-line); font:var(--text-ui-supporting); color:var(--ui-text-soft); vertical-align:middle; }
.study-active .catalog-table th { background:var(--ui-panel-soft); color:var(--ui-text); font:var(--text-ui-body-strong); white-space:nowrap; }
.study-active .catalog-table td:nth-child(3) { white-space:nowrap; }
.study-active .catalog-row-title { display:block; color:var(--ui-text); font:var(--text-ui-body-strong); }
.study-active .catalog-row-sub { display:block; margin-top:2px; color:var(--color-gold-deep); font:var(--text-ui-caption); }
.study-active .catalog-row-pills { gap:4px; }
.study-active .catalog-row-progress { min-width:160px; }
.study-active .catalog-row-progress .catalog-progress { display:grid; gap:4px; }
.study-active .catalog-row-progress .study-progress { min-width:0; }
.study-active .catalog-row-actions { display:flex; justify-content:flex-end; gap:6px; white-space:nowrap; }
.study-active .catalog-row.active td:first-child { box-shadow:inset 3px 0 0 var(--color-gold-deep); }
@media (max-width:768px) {
  /* app.css stacks .admin-table rows into cards below this width; the
     scroll wrapper and the min-width would fight that, so both step aside. */
  .study-active .catalog-table-wrap { overflow:visible; border:0; background:transparent; }
  .study-active .catalog-table { min-width:0; }
  .study-active .catalog-table tr { border:1px solid var(--ui-line); border-radius:var(--radius-card-compact); background:var(--ui-panel); }
  .study-active .catalog-table td::before { color:var(--ui-text-faint); font:var(--text-ui-caption); }
  .study-active .catalog-table td:last-child::before { display:none; }
  .study-active .catalog-row-pills { flex-direction:row; align-items:center; }
  .study-active .catalog-row-actions { justify-content:flex-start; flex-wrap:wrap; white-space:normal; }
  .study-active .catalog-row-actions .btn { flex:1; width:auto; }
  .study-active .catalog-row.active td:first-child { box-shadow:none; }
}

/* The Space notice on opening a sitting: the confirm dialog plus one checkbox. */
.keys-notice-remember { display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--ui-text-soft); font:var(--text-ui-supporting); cursor:pointer; }
.keys-notice-remember input { margin:0; accent-color:var(--color-gold-deep); }

@media (forced-colors:active){
  /* High Contrast removes box-shadows, which carried the pressed chip and
     switch. Outlines survive it. (The guide's spotlight is handled in shell.css.) */
  .filter-chip.on, .study-active .study-switch.on, .study-active .yg-word.on { outline:2px solid Highlight; outline-offset:-2px; }
}

.review-front-content { margin-block:auto 20px; min-width:0; }
.review-front-content .review-hebrew { margin:0; }
.review-direction { margin:0 0 var(--space-md); text-align:center; font:var(--text-ui-body); }
.review-front-content .focus-meaning { text-align:center; overflow-wrap:anywhere; }
.focus-answer-content .review-hebrew { margin:0; }
.study-active .study-toolbar { align-items:start; flex-wrap:wrap; }
.study-active .study-display { flex-wrap:wrap; }
.study-active .rating-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rating-help { min-height:1.5em; }
.practice-disclosure { margin-top:20px; text-align:start; }
.practice-disclosure > summary,.card-notes-section > summary,.answer-detail > summary { min-height:44px; padding:10px 4px; cursor:pointer; color:var(--text-heading); font:var(--text-ui-body-strong); text-transform:none; letter-spacing:normal; }
.practice-disclosure > summary:focus-visible,.card-notes-section > summary:focus-visible,.answer-detail > summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.study-active .answer-detail p,.study-active .note-explain-text { font:var(--card-english-weight) max(1rem,calc(var(--card-english-size) * .65))/var(--card-english-leading) var(--card-english-font); }
.study-active .answer-detail .answer-detail-hebrew { font-family:var(--card-hebrew-font); font-size:max(1.5rem,calc(var(--card-hebrew-size) * .75)); line-height:var(--card-hebrew-leading); }
.study-active .answer-word-list span { font-size:1rem; line-height:1.7; }
.study-active .note-input { font-size:1rem; line-height:1.6; }
.study-active .answer-label { margin:0; }
.study-active .review-disclosure > summary { font:var(--text-ui-body-strong); }
.card-script-choices:empty { display:none; }
.card-script-choices { margin-top:16px; }
.study-active .study-display { align-items:flex-end; gap:12px; }
/* Review settings: compact daily controls, readable type and support panels. */
.study-control-tray { flex:1 1 100%; min-width:0; container:review-tray / inline-size; }
.study-control-tray > summary { display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 4px; list-style:none; color:var(--text-heading); cursor:pointer; }
.study-control-tray > summary::-webkit-details-marker,.tray-fine-tune > summary::-webkit-details-marker { display:none; }
.tray-summary-icon { flex:none; }
.tray-summary-text { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; min-width:0; }
.tray-summary-title { font:var(--text-ui-body-strong); }
.tray-summary-state { color:var(--text-muted); font:var(--text-ui-caption); }
.tray-chevron { margin-inline-start:auto; flex:none; font:400 1.25rem/1 var(--font-interface); transition:transform .15s ease; }
.study-control-tray[open] > summary .tray-chevron,.tray-fine-tune[open] > summary .tray-chevron { transform:rotate(90deg); }
.study-control-tray[open] > summary { border-bottom:1px solid var(--border-subtle); }
.tray-body { padding:20px 4px 0; }
.practice-method-link{display:inline-flex;align-items:center;min-height:44px;margin-block:8px;color:var(--text-body);text-decoration:underline;text-underline-offset:4px}
.study-active .study-display.tray-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:16px; padding:0; }
.tray-quick-grid .study-control-group { min-width:0; gap:10px; }
.tray-quick-grid .study-control-group + .study-control-group { border-inline-start:1px solid var(--border-subtle); padding-inline-start:16px; }
.tray-quick-grid .study-control-label { display:flex; align-items:center; gap:6px; min-height:28px; color:var(--text-muted); font:500 .8125rem/1.4 var(--font-interface); }
.tray-quick-grid .study-round-controls { align-items:flex-start; gap:0; flex-wrap:wrap; }
.tray-compare-switch { width:fit-content; min-height:36px; padding:3px 0; border:0; background:none; color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; font:400 .8125rem/1.5 var(--font-interface); cursor:pointer; }
.tray-compare-switch::before { content:'○'; display:inline-block; margin-inline-end:6px; }
.tray-compare-switch[aria-pressed=true]::before { content:'✓'; }
.tray-compare-switch[aria-pressed=true] { color:var(--text-heading); font-weight:500; }
.tray-compare-hint { margin:0; color:var(--text-muted); font:400 .8125rem/1.5 var(--font-interface); }
.tray-mode-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:18px 0 6px; padding:12px 14px; border-radius:var(--radius-control-compact); background:var(--spicy-recording-overlay); }
.tray-mode-copy { display:flex; align-items:center; gap:8px; color:var(--text-body); font:var(--text-ui-supporting); }
.tray-mode-right,.tray-segmented { display:flex; align-items:center; gap:5px; }
.tray-segmented button { min-width:48px; min-height:44px; padding:6px 10px; border:1px solid transparent; border-radius:var(--radius-control-compact); background:transparent; color:var(--text-muted); font:var(--text-ui-supporting); cursor:pointer; }
.tray-segmented button[aria-pressed=true] { background:var(--surface-card); border-color:var(--focus-ring); color:var(--text-heading); font-weight:600; }
.study-control-tray .tray-info-control { display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border:1px solid var(--border-compact); border-radius:50%; background:transparent; color:var(--text-body); cursor:pointer; }
.tray-fine-tune { border-top:1px solid var(--border-subtle); margin-top:18px; }
.tray-fine-tune > summary { display:flex; align-items:center; gap:9px; list-style:none; min-height:56px; color:var(--text-body); font:var(--text-ui-body-strong); cursor:pointer; }
.tray-fine-subtitle { color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-fine-content { padding-bottom:22px; }
.tray-tabs { display:flex; gap:24px; border-bottom:1px solid var(--border-subtle); margin-bottom:6px; }
.tray-tabs button { min-height:48px; padding:10px 1px 12px; border:0; border-bottom:2px solid transparent; background:none; color:var(--text-muted); font:var(--text-ui-body); cursor:pointer; }
.tray-tabs button[aria-selected=true] { border-bottom-color:var(--focus-ring); color:var(--text-heading); font-weight:500; }
.tray-type-row { display:grid; grid-template-columns:minmax(0,1fr) 154px 118px 112px; align-items:center; gap:16px; padding:22px 0; border-bottom:1px solid var(--border-subtle); }
.tray-type-row:last-child,.tray-pronunciation-row { border-bottom:0; padding-bottom:4px; }
.tray-type-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.tray-type-glyph { width:36px; flex:none; font-size:32px; line-height:1.4; text-align:center; color:var(--text-heading); }
.tray-type-name { display:block; color:var(--text-heading); font:var(--text-ui-body-strong); }
.tray-type-font { display:block; margin-top:4px; color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-font-control { display:block; min-height:36px; padding:2px 0; border:0; background:none; text-align:start; color:var(--text-muted); font:var(--text-ui-supporting); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.tray-type-name strong { font:var(--text-ui-body-strong); }
button.tray-type-font { min-height:36px; padding:2px 0; border:0; background:none; text-align:start; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.tray-group-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:36px; }
.tray-group-heading .tray-info-control { width:30px; height:30px; border:0; }
.tray-cycle-value { min-width:0; overflow-wrap:anywhere; }
.tray-field-label { display:block; margin-bottom:7px; color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-type-control { min-width:0; }
.tray-stepper { display:flex; align-items:center; justify-content:space-between; gap:0; min-height:48px; border:1px solid var(--border-compact); border-radius:999px; padding:1px; }
.tray-stepper output { min-width:0; white-space:nowrap; text-align:center; color:var(--text-heading); font:var(--text-ui-body-strong); font-variant-numeric:tabular-nums; }
.study-control-tray .tray-stepper button { display:grid; place-items:center; flex:none; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:none; color:var(--text-body); font:400 1.375rem/1 var(--font-interface); cursor:pointer; }
.study-control-tray .tray-stepper button:hover { background:var(--surface-card-gold); }
.study-control-tray .tray-stepper button:disabled { color:var(--text-muted); cursor:default; background:none; }
.tray-cycle-control { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:48px; padding:8px 10px; border:1px solid var(--border-compact); border-radius:var(--radius-control-compact); background:var(--surface-card); color:var(--text-body); font:var(--text-ui-body); cursor:pointer; }
.tray-cycle-control > [aria-hidden] { color:var(--text-muted); }
.tray-cycle-control:disabled { color:var(--text-muted); cursor:default; border-style:dashed; }
.tray-type-hint { grid-column:span 2; margin:0; color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-support-panel { padding-top:18px; }
.tray-support-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tray-support-choice { min-width:0; min-height:100px; padding:16px; border:1px solid var(--border-compact); border-radius:var(--radius-control-compact); background:var(--surface-page); text-align:start; color:var(--text-body); cursor:pointer; }
.tray-support-choice strong { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text-heading); font:var(--text-ui-body-strong); }
.tray-support-choice small { display:block; margin-top:8px; color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-support-choice[aria-pressed=true] { border:2px solid var(--focus-ring); padding:15px; background:var(--surface-card-gold); }
.tray-support-choice[aria-pressed=true] strong::after { content:'✓'; }
.tray-details-label { margin:24px 0 12px; color:var(--text-muted); font:var(--text-ui-body); }
.tray-detail-switches { display:flex; flex-wrap:wrap; gap:12px; }
.tray-detail-switch { display:flex; align-items:center; gap:9px; min-height:46px; padding:9px 14px; border:1px solid var(--border-compact); border-radius:999px; background:var(--surface-card); color:var(--text-body); font:var(--text-ui-body); cursor:pointer; }
.tray-detail-switch::before { content:'○'; }
.tray-detail-switch[aria-pressed=true] { border-color:var(--focus-ring); background:var(--surface-card-gold); }
.tray-detail-switch[aria-pressed=true]::before { content:'✓'; }
.tray-panel-hint { margin:14px 0 0; color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-hint { margin:12px 0 0; color:var(--text-muted); font:var(--text-ui-supporting); }
.tray-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; margin-top:0; padding:8px 4px 0; border-top:1px solid var(--border-subtle); color:var(--text-muted); font:var(--text-ui-caption); }
.tray-save-copy { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.tray-save-copy:has([role=status]:not(:empty)) .tray-save-note { display:none; }
.tray-save-status { margin:0; }
.tray-reset { min-height:40px; padding:4px 0; border:0; background:none; color:var(--text-muted); font:var(--text-ui-caption); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.study-control-tray button:focus-visible,.study-control-tray a:focus-visible,.study-control-tray summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.study-control-tray [hidden] { display:none!important; }
@container review-tray (max-width:650px) {
  .study-active .study-display.tray-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
  .tray-quick-grid .study-control-group:nth-child(3) { border-inline-start:0; padding-inline-start:0; }
  .tray-quick-grid .study-control-group:nth-child(n+3) { padding-top:14px; border-top:1px solid var(--border-subtle); }
  .tray-type-row { grid-template-columns:minmax(0,1fr) 154px; gap:16px 22px; }
  .tray-type-hint { grid-column:1 / -1; }
}
@container review-tray (max-width:450px) {
  .tray-fine-subtitle { display:none; }
  .tray-summary-text { display:block; }
  .tray-summary-state { display:block; margin-top:4px; }
  .tray-quick-grid .study-control-group + .study-control-group { padding-inline-start:10px; }
  .tray-quick-grid .study-control-group:nth-child(3) { padding-inline-start:0; }
  .study-active .study-display.tray-quick-grid { gap:14px 10px; }
  .tray-tabs { gap:18px; }
  .tray-support-presets { grid-template-columns:1fr; }
  .tray-support-choice { min-height:84px; }
  .tray-type-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tray-type-identity { grid-column:1 / -1; }
  .tray-type-control:has(.tray-stepper) { grid-column:1 / -1; width:174px; max-width:100%; }
  .tray-mode-row { padding:12px; }
}
@container review-tray (max-width:305px) {
  .study-active .study-display.tray-quick-grid { grid-template-columns:1fr; }
  .tray-quick-grid .study-control-group + .study-control-group { padding:14px 0 0; border-inline-start:0; border-top:1px solid var(--border-subtle); }
}
@container review-tray (max-width:20rem) {
  .tray-type-row { grid-template-columns:minmax(0,1fr); }
  .tray-type-identity,.tray-type-control:has(.tray-stepper),.tray-type-hint { grid-column:1; }
  .tray-type-control { max-width:100%; }
  .tray-type-control:has(.tray-cycle-control) { width:12rem; }
  .tray-tabs { gap:12px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .tray-chevron { transition:none; } }
@media(forced-colors:active) {
  .tray-support-choice[aria-pressed=true],.tray-detail-switch[aria-pressed=true],.tray-segmented button[aria-pressed=true] { outline:2px solid Highlight; outline-offset:-2px; }
}
.rapid-review { padding:14px; margin:0 0 20px; border:1px solid var(--ui-line-strong); border-radius:var(--radius-control-compact); background:var(--ui-panel-soft); text-align:start; }
.rapid-review[hidden] { display:none; }
.rapid-review.is-live { border:2px solid var(--color-gold-deep); }
.review-card:has(.rapid-review:not([hidden])) { scroll-margin-top:76px; }
.rapid-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.rapid-heading strong { display:flex; align-items:center; gap:8px; font:var(--text-ui-body-strong); }
.rapid-countdown { font:600 2rem/1.2 var(--font-interface); font-variant-numeric:tabular-nums; }
.rapid-progress { width:100%; height:8px; accent-color:var(--color-gold-deep); margin-top:12px; }
.rapid-review p { font:var(--text-ui-body); margin:10px 0; }
.rapid-review audio { width:100%; margin-top:12px; }
.rapid-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.rapid-stop { margin-top:12px; min-height:32px; }
.spicy-dialog { box-sizing:border-box; width:min(580px, calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:clamp(20px, 5vw, 36px); border:1px solid var(--ui-line-strong); border-radius:var(--radius-control-compact); background:var(--surface-card); color:var(--text-body); font:var(--text-ui-body); }
.spicy-dialog::backdrop { background:rgb(0 0 0 / .55); }
.spicy-chili { display:block; font-size:3rem; line-height:1.2; }
.spicy-eyebrow { color:var(--text-muted); font:var(--text-body-sm); margin:12px 0 6px; }
.spicy-dialog h2 { margin:0 0 16px; color:var(--text-heading); }
.spicy-lead { font:var(--text-body-lg); color:var(--text-heading); }
.spicy-dialog li { margin-block:12px; }
.spicy-dialog ol { padding-inline-start:24px; }
.spicy-note { color:var(--text-muted); }
.spicy-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:24px; }
.spicy-dialog .spicy-actions .btn { width:auto; flex:0 0 auto; min-width:44px; }
.study-round-control:disabled { cursor:default; border-style:dashed; }
.study-control-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
.study-control-label { color:var(--text-muted); font:500 .75rem/1.4 var(--font-interface); }
.study-round-controls { display:flex; gap:6px; }
.study-active .study-display .study-round-control {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 2.25rem;
  width:2.25rem; height:2.25rem; min-height:2.25rem; padding:0; border:1px solid var(--ui-line);
  border-radius:50%; background:transparent; color:var(--text-muted); cursor:pointer;
  font:400 1.25rem/1.35 var(--font-hebrew-sans); text-decoration:none;
}
.study-round-control .study-pronunciation-symbol { font:600 .75rem/1 var(--font-interface); }
.study-active .study-display .study-round-control[aria-pressed=true] { border:2px solid var(--color-gold-deep); background:var(--ui-panel-soft); color:var(--text-heading); }
.study-active .study-display .study-round-control:hover { color:var(--text-heading); background:var(--ui-panel-soft); }
.study-active .study-display .study-round-control[aria-disabled=true] { border-style:dashed; }
.study-round-control:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
@media(forced-colors:active) { .study-round-control[aria-pressed=true] { outline:2px solid Highlight; outline-offset:-2px; } }

/* Captions are part of the same tap target as each compact circle. */
.study-active .study-display .study-round-control.tray-quick-choice { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; flex:0 1 50px; width:50px; min-width:44px; height:auto; min-height:68px; padding:3px 0 5px; border:0; border-radius:var(--radius-control-compact); background:none; font:400 .75rem/1.3 var(--font-interface); text-align:center; }
.tray-selection-mark,.tray-switch-indicator { display:none; }
.tray-control-face { position:relative; display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid var(--border-compact); border-radius:50%; background:var(--surface-page); color:var(--text-body); font:400 1.5rem/1 var(--font-hebrew-sans); }
.tray-control-caption { display:block; color:var(--text-muted); max-width:100%; overflow-wrap:anywhere; }
.study-active .study-display .tray-quick-choice[aria-pressed=true] .tray-control-face { border:2px solid var(--focus-ring); background:var(--surface-card-gold); color:var(--text-heading); }
.tray-quick-choice[aria-pressed=true] .tray-selection-mark { content:'✓'; position:absolute; inset-inline-end:-3px; bottom:-3px; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:var(--text-heading); color:var(--surface-card); font:600 10px/1 var(--font-interface); }
.tray-quick-choice[aria-pressed=true] .tray-control-caption { color:var(--text-heading); font-weight:500; }
.tray-quick-choice:hover .tray-control-face { border-color:var(--focus-ring); background:var(--surface-card-gold); }
.tray-quick-choice[aria-disabled=true] .tray-control-face { border-style:dashed; }
.tray-shuffle { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@container review-tray (min-width:306px) and (max-width:450px) { .study-active .study-display .study-round-control.tray-quick-choice { flex-basis:44px; width:44px; font-size:.6875rem; } }
@media(forced-colors:active) { .tray-quick-choice[aria-pressed=true] .tray-control-face { outline:2px solid Highlight; outline-offset:-2px; } }
@media(min-width:1100px) { .study-active .rating-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:420px) {
  .study-active .rating-btn { padding-inline:6px; }
  .study-active .rating-help { font-size:.875rem; }
}

/* Illustrated tray cues keep their text labels and disclosure indicators. */
.focus-practice .focus-youglish,.study-tray-label { gap:var(--space-sm); }
.study-tray-label { display:inline-flex; align-items:center; min-width:0; }
.focus-practice .focus-youglish .ic,.study-tray-label .ic { flex-shrink:0; }
.focus-practice .ic-ear { filter:sepia(.65) saturate(.8); }

/* Muted blue microphone with a permanent red light inside its capsule. */
.record-tray-icon { position:relative; display:inline-flex; flex-shrink:0; }
.record-tray-icon .ic { filter:sepia(1) saturate(1.4) hue-rotate(165deg) brightness(.8); }
.record-tray-indicator { position:absolute; top:33%; left:50%; transform:translate(-50%,-50%); width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--color-canvas) 0 12%,var(--recording-indicator) 40% 100%); box-shadow:0 0 3px 1px color-mix(in srgb,var(--recording-indicator) 40%,transparent); }

/* Separate, bookmarkable collection navigation on the Cards page. */
.catalog-collections { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-block:var(--space-md); }
.catalog-collections a { display:inline-flex; align-items:center; min-height:44px; padding:var(--space-sm) var(--space-md); color:var(--text-body); border-radius:var(--radius-sm); text-decoration:none; }
.catalog-collections a[aria-current="page"] { background:var(--surface-card-gold); font-weight:700; text-decoration:underline; text-underline-offset:0.3em; }
.catalog-collections a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.preview-note { grid-column:1 / -1; white-space:pre-line; overflow-wrap:anywhere; }

/* Compact Spicy control and reusable teaching recordings. */
.rapid-heading .rapid-stop { flex:0 0 auto; margin-inline-start:auto; width:36px; height:36px; min-width:36px; min-height:36px; }
.recording-badge { display:inline-flex; align-items:center; gap:6px; font-size:var(--font-size-sm, 14px); color:var(--text-body); }

/* Recording actions share a small circular face and a readable caption. */
button.recording-action { display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; flex:0 0 auto; width:76px; min-width:0; min-height:60px; height:auto; padding:4px; margin:0; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--text-body); font:inherit; cursor:pointer; }
button.recording-action:hover { background:transparent; color:var(--text-heading); }
.recording-action-circle { display:flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; box-sizing:border-box; border:1px solid var(--ui-line-strong); border-radius:50%; background:var(--ui-panel-soft); }
.recording-action-caption { font:500 12px/1.25 var(--font-interface); text-align:center; white-space:normal; }
.recording-action:hover .recording-action-circle { border-color:var(--focus-ring); }
.recording-action:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:8px; }
.recording-action:disabled { opacity:.55; cursor:default; }
.recording-action[hidden] { display:none !important; }
.recording-stop-symbol { width:10px; height:10px; border-radius:2px; background:currentColor; }
.recording-download-symbol { font-size:24px; line-height:1; }
.rapid-actions, .record-item > .row, .take-actions > .row { justify-content:center; align-items:flex-start; }
.rapid-heading { justify-content:center; }
.rapid-review .rapid-actions { margin-block:12px 0; }
.mic-preview > .row { justify-content:center; }
/* Static urgency overlay: never flashes or intercepts taps. */
.rapid-review.is-live::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:var(--spicy-recording-overlay); }
.rapid-review.is-live { position:relative; border-color:var(--color-negative); }
.rapid-review.is-live .rapid-progress { accent-color:var(--color-negative); }

body[data-recording-state="recording"] .study-display .tray-quick-choice[aria-label="Pause"] { display:none; }

/* Override the general primary/secondary button skins inside study layouts. */
button.recording-action { background:transparent !important; border:0 !important; box-shadow:none !important; width:76px !important; padding:4px !important; }
.reveal-btn.recording-action { align-self:center; }

.recording-action[aria-pressed="true"] .recording-action-circle { border:2px solid var(--focus-ring); background:var(--ui-panel-soft); box-shadow:0 0 0 2px var(--ui-line); }
.reference-audio { margin:12px auto 18px; width:min(100%,380px); }
.reference-audio[hidden] { display:none; }
.reference-clip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.reference-clip > .record-meta { flex-basis:100%; text-align:center; }
.reference-clip audio { width:100%; min-width:0; }

/* Keep enlarged recall captions inside narrow cards. */
.rating-btn { overflow-wrap:anywhere; }

/* Recording uses the blue microphone with its red indicator. */
.recording-meta-line { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-block:6px; }
.recording-meta-line .recording-badge { flex:none; }
.recording-meta-line .record-duration { margin-inline-start:auto; white-space:nowrap; }
.recording-action-circle { position:relative; }
.recording-action[aria-pressed="true"] .recording-action-circle::after { content:'✓'; position:absolute; inset-block-end:-3px; inset-inline-end:-3px; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:var(--text-body); color:var(--surface-card); font:700 10px/1 var(--font-interface); }

.review-takes[hidden] { display:none; }
.teaching-playback { width:100%; min-width:0; text-align:center; }
.teaching-playback-status { display:block; }
.reference-more { width:100%; margin-top:10px; border-top:1px solid var(--ui-line); }
.reference-more > summary { cursor:pointer; padding-block:10px; color:var(--text-muted); font:var(--text-ui-supporting); }
.reference-more-list { display:grid; gap:16px; padding-block:8px; }

.teaching-playback [hidden] { display:none; }

.record-item > .row, .take-actions > .row, .mic-preview > .row { flex-direction:row; justify-content:center; }

/* Four staff take actions fit the same small card footprint. */
.record-item > .row, .take-actions > .row { gap:4px; flex-wrap:wrap; }
.record-item > .row button.recording-action, .take-actions > .row button.recording-action { width:58px!important; padding:4px 2px!important; }
.record-takes-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.record-take-count { color:var(--text-muted); font:var(--text-ui-caption); }

/* Spicy recall removes competing chrome until the answer is available. */
body.spicy-front .review-direction, body.spicy-front .review-recall,
body.spicy-front .shell-sidebar, body.spicy-front .shell-header, body.spicy-front .site-header,
body.spicy-front .companion, body.spicy-front .study-heading, body.spicy-front .study-key-hint { display:none!important; }
body.spicy-front .review-card { margin-block:8px; }
.rapid-review .rapid-countdown { font-size:clamp(64px,11vw,100px);font-weight:750;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--review-red); }
.rapid-review.is-live { background:var(--review-red-surface);border-color:var(--review-red); }
.rapid-review.is-urgent .rapid-countdown { color:var(--review-red-strong); }
.rapid-review .rapid-progress { accent-color:var(--review-red); }
.refinement-timer { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:24px 0 12px;padding:20px;border:1px solid var(--review-red);border-radius:16px;background:var(--review-red-surface);color:var(--review-red); }
.refinement-clock { font-size:clamp(54px,9vw,80px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums; }
.refinement-timer.is-urgent { color:var(--review-red-strong);border-width:2px; }
.refinement-caption { font-size:16px;font-weight:650; }
.review-wrapup { position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;width:min(760px,calc(100% - 24px));padding:16px;border:2px solid var(--review-red);border-radius:14px;background:var(--review-red-surface);color:var(--review-red-strong);box-shadow:var(--shadow-md); }
.practice-disclosure > h3 { font-size:16px;margin:16px 0; }
.focus-practice { align-items:start; }
.focus-tool { min-width:0; }
.focus-tool h4 { margin:0 0 12px;font-size:15px; }
.record-item > div:first-child { min-width:0;flex:1; }

body.spicy-front #site-shell, body.spicy-front .mfoot { display:none!important; }
body.spicy-front { padding-inline-start:0!important;padding-left:0!important;padding-top:0!important; }

.refinement-start[hidden] { display:none; }

.review-ready-card { padding:30px 36px 24px; border:1px solid var(--border-subtle); border-radius:var(--radius-study-panel); background:var(--surface-card); box-shadow:var(--elevation-study); text-align:start; }
.review-ready-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.review-ready-intro > .ic { flex:none; }
.review-ready-card h2 { margin:0 0 10px; font:550 clamp(26px,4vw,32px)/1.25 var(--font-interface); letter-spacing:-.035em; color:var(--text-heading); }
.review-ready-eyebrow { margin:0 0 10px; font:600 11px/1.4 var(--font-interface); letter-spacing:.12em; text-transform:uppercase; color:var(--study-accent); }
.review-ready-summary { margin:0; font-size:14px; color:var(--text-muted); }
.review-ready-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding-top:22px; border-top:1px solid var(--border-subtle); }
.review-ready .review-begin { flex:none; width:auto; min-height:50px; padding:12px 24px; font-size:15px; gap:24px; margin-inline-start:auto; white-space:nowrap; }
.review-begin > span { font-size:21px; line-height:1; }
.review-ready-settings { display:grid; place-items:center; width:44px; height:44px; padding:8px; border:0; border-radius:var(--radius-pill); background:transparent; cursor:pointer; }
.review-ready-settings:hover { background:var(--study-soft); }
.practice-setup .tray-body { padding:0; }
.practice-setup .tray-footer { border:0; padding:0; }
.practice-setup .tray-save-note { display:none; }
.practice-setup .tray-fine-content > .tray-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding:12px 0 22px; }

/* The working area has one current take, one listening source, and fixed ratings. */
body.review-has-dock { padding-bottom:calc(var(--review-dock-height,110px) + 24px + env(safe-area-inset-bottom)); }
.focus-answer { scroll-margin-top:12px; }
/* Keep card padding unchanged when ratings mount; reveal must not move the prompt. */

.review-has-dock .focus-answer { margin-top:12px; padding-top:12px; }
.review-has-dock .focus-answer-content .review-hebrew { margin:4px 0; }
.review-has-dock .focus-answer-content .focus-meaning { margin:4px 0; }
.review-has-dock .focus-translit { margin:4px 0 10px; }
.model-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:12px; color:var(--text-muted); }
.model-flexible { font-size:11px; }
.practice-section-title { display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 8px!important; }
.review-has-dock .focus-practice { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:20px; margin:12px 0; }
.review-has-dock .focus-tool { min-width:0; }
.review-has-dock .rec-panel { border:0; padding:0; margin:0; }
.review-has-dock .rec-panel .rapid-review { border:0; padding:0; margin:0; background:transparent; }
.review-has-dock .rapid-heading { font-size:12px; margin-bottom:4px; }
.review-has-dock .rapid-actions { margin-top:4px; }
.take-temporary { font-size:11px!important; line-height:1.35; color:var(--text-muted); margin:4px 0!important; text-align:center; }
.review-has-dock .refinement-timer { gap:8px; margin:10px 0; padding:8px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--surface-card); color:var(--text-body); flex-wrap:wrap; }
.review-has-dock .refinement-clock { font-size:30px; margin-inline-start:auto; color:inherit; }
.review-has-dock .refinement-caption { font-size:13px; }
.review-has-dock .refinement-timer button { min-height:36px; padding:4px 8px; font-size:12px; }
.review-has-dock .refinement-timer.is-urgent { border-color:var(--review-red); background:var(--review-red-surface); color:var(--review-red-strong); }
.review-wrapup { top:8px; transform:none; box-sizing:border-box; padding:8px 12px; font-size:14px; justify-content:space-between; box-shadow:var(--elevation-overlay); }
.review-wrapup > span { flex:1 1 230px; }
.review-action-dock { position:fixed; z-index:35; bottom:calc(8px + env(safe-area-inset-bottom)); box-sizing:border-box; padding:10px 12px; border:2px solid var(--border-compact-strong); border-radius:12px; background:var(--surface-card); box-shadow:var(--elevation-overlay); }
/* Keep the floating feedback target above the measured rating dock, including
   when labels wrap on narrow screens or text is enlarged. */
body.review-has-dock .feedback-launch { bottom:calc(var(--review-dock-height,110px) + var(--space-lg) + env(safe-area-inset-bottom)); }
.review-action-dock[hidden] { display:none; }
.review-rating-dock.is-wrapup { border-color:var(--review-red); }
.review-rating-dock.is-wrapup .rating-question { color:var(--review-red-strong); }
.review-wrapup-nudge::after { content:''; position:absolute; inset:-4px; border:3px solid var(--review-red); border-radius:inherit; opacity:0; pointer-events:none; animation:review-wrapup-nudge 1.1s ease-in-out 2; }
@keyframes review-wrapup-nudge { 0%,100% { opacity:0; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .review-wrapup-nudge::after { animation:none; } }
.review-rating-dock .rating-question { font-size:12px; line-height:1.35; margin:0 0 6px; }
.review-rating-dock .rating-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; gap:6px; }
.review-rating-dock .rating-btn { padding:8px 4px; border-width:2px; min-height:54px; gap:3px; font-size:12px; }
.review-rating-dock .rating-btn strong { font-size:14px; }
.review-rating-dock .rating-help { display:none; }
.review-rating-dock .rating-key { display:none; }
.yg-go.btn { display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:8px; min-height:44px; text-decoration:none; }
.record-history-more > summary,.take-actions > summary { cursor:pointer; font-size:12px; padding:8px 2px; min-height:36px; }
.yg-hint { font-size:11px; margin:4px 0; text-align:center; }
.yg-label { font-size:12px; }
.yg-word-picker .yg-word { font-size:18px; max-width:100%; overflow-wrap:anywhere; }
.yg-pick .yg-go { margin-top:10px; }
.saved-comparison { margin-top:8px; }
.saved-take-label { font-size:11px; }
.review-has-dock .record-item { display:block; padding:8px; margin:4px 0; }
.review-has-dock .recording-meta-line { font-size:11px; margin:2px 0; }
.review-has-dock .recording-meta-line time { display:none; }
.review-has-dock .record-item .waveform-player { margin:0; }
.review-has-dock .record-item .wave-canvas { max-height:36px; }
.review-has-dock .record-item .wave-play { width:44px; height:44px; min-width:44px; }
.review-has-dock .record-item .wave-time { font-size:11px; }
.review-has-dock .record-takes-heading { gap:4px; }
.review-has-dock .record-takes-heading .answer-label { font-size:11px; }
.review-has-dock .record-take-count { font-size:11px; }
.review-has-dock .record-history:empty::after { content:none; }
.review-has-dock .reference-audio { width:100%; margin:0 0 10px; }
.review-has-dock .reference-clip > .record-meta { font-size:11px; }
.learn-first-card { max-width:720px; margin:24px auto; padding:28px; text-align:center; border:1px solid var(--border-subtle); border-radius:16px; background:var(--surface-card); }
.learn-first-card h2 { font-size:22px; }
.learn-first { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.review-ready-card .learn-first { display:flex; flex:none; width:auto; margin:0; padding-inline:0; font-size:14px; white-space:nowrap; background:transparent; border-color:transparent; box-shadow:none; }
@media(max-width:860px) {
 .focus-answer { scroll-margin-top:calc(var(--panel-bar-h,54px) + 12px); }
 .review-wrapup { top:calc(var(--panel-bar-h,54px) + 8px); }
}
@media(max-width:600px) {
 .review-has-dock .focus-practice { grid-template-columns:minmax(0,1fr); gap:12px; }
 .review-has-dock .focus-practice > .focus-tool:last-child { order:-1; }
 .model-heading { flex-wrap:wrap; }
 .review-rating-dock .rating-btn strong { font-size:12px; }
 .review-rating-dock .rating-btn { font-size:10px; }
 .review-rating-dock .rating-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); }
 .review-has-dock .recording-action { width:64px!important; }
 .review-has-dock .refinement-timer { padding:6px 8px; }
 .review-has-dock .refinement-caption { font-size:12px; }
 .review-has-dock .record-item .waveform-player { grid-template-columns:44px minmax(0,1fr) auto; }
}

.review-has-dock .study-toolbar { padding:8px 12px; gap:4px; margin-bottom:12px; }
.review-has-dock .study-session { gap:2px; }
.review-has-dock .study-session-head { font-size:12px; }
.review-has-dock .study-laps { display:none; }
.review-has-dock .study-progress { height:3px; }
.review-has-dock .review-front-content { margin-block:0 8px; }
.review-has-dock .focus-answer { margin-top:4px; padding-top:8px; }
.review-rating-dock .rating-btn strong { padding:0; line-height:1.2; overflow-wrap:anywhere; }
.review-rating-dock .rating-btn span { font:400 11px/1.2 var(--font-interface); }
.review-rating-dock .rating-question { font:500 12px/1.3 var(--font-interface); margin:0 0 6px; }

.answer-alternatives { text-align:start; font-size:13px; margin-block:8px; }
.answer-alternatives summary { cursor:pointer; padding:6px 0; }
.answer-alternatives p { margin:4px 0; }

/* Session orientation shares the collapsed controls row, including during a
   hot take and in Focus mode. Expanding settings remains a deliberate action. */
.study-active .review-wrap { --study-toolbar-top:8px; }
.study-active .study-toolbar {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  position:sticky; top:var(--study-toolbar-top); z-index:12;
  gap:4px 16px; padding:4px 12px; margin-bottom:8px;
}
.study-active .study-toolbar:has(.study-control-tray[open]) { position:relative; top:auto; }
.study-active .study-toolbar .study-session { display:flex; min-width:0; gap:4px; }
.study-active .study-toolbar .study-session-head { align-items:center; gap:4px 14px; }
.study-active .study-toolbar .study-count { font-size:13px; white-space:nowrap; }
.study-elapsed { display:inline-flex; align-items:center; gap:5px; color:var(--text-muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.study-active .study-toolbar .study-progress {
  min-width:0; height:8px; border:1px solid var(--border-subtle);
  background:var(--surface-sunken);
}
.study-toolbar .study-progress > span { min-width:0; background:var(--study-accent); }
.study-toolbar .study-scope { margin:0; font-size:12px; }
.study-toolbar > .study-control-tray:not([open]) { container:none; }
.study-toolbar > .study-control-tray[open], .study-toolbar > .study-switch-note { grid-column:1 / -1; }
.study-toolbar > .study-control-tray > summary { min-height:44px; padding:4px; gap:6px; }
.study-toolbar .tray-summary-title { font-size:13px; }
.study-toolbar .tray-summary-state { display:none; }
.study-toolbar .tray-summary-icon .icon { width:20px; height:20px; }
.study-toolbar + .review-card, .review-wrap .focus-answer { scroll-margin-top:calc(var(--study-toolbar-top) + 68px); }

.prompt-recall-setting { flex-basis:100%; min-width:0; margin:8px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--border-subtle); }
.prompt-recall-setting legend { font:var(--text-ui-body-strong); padding:0 6px 0 0; }
.prompt-recall-pace { display:flex; align-items:center; gap:10px; min-height:44px; font-size:14px; }
.recall-pace-stepper { display:flex; align-items:center; border:1px solid var(--border-compact-strong); border-radius:var(--radius-pill); background:var(--surface-card); }
.prompt-recall-pace input { width:48px; min-height:44px; padding:4px; border:0; border-radius:var(--radius-control-compact); background:transparent; color:var(--text-body); text-align:center; appearance:textfield; }
.prompt-recall-pace input::-webkit-inner-spin-button { appearance:none; }
.recall-pace-step { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-body); font:400 20px/1 var(--font-interface); cursor:pointer; }
.recall-pace-step:hover:not(:disabled) { background:var(--study-soft); }
.recall-pace-step:disabled { color:var(--text-muted); cursor:default; }
.prompt-recall-help { margin:6px 0 0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.recall-prompt { position:relative; }
.recall-prompt.has-recall { min-height:120px; display:grid; align-items:center; }
.recall-placeholder { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:4px; text-align:center; }
.recall-placeholder[hidden], .recall-reading[hidden], .recall-peek[hidden] { display:none; }
.recall-phase { margin:0; color:var(--text-heading); font:var(--text-ui-body-strong); }
.recall-reading { min-height:1.5em; margin:4px 0 8px; text-align:center; color:var(--text-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.recall-peek { min-height:44px; }
.practice-mode-setting { min-width:0; border:0; padding:0; margin:0 0 16px; }
.practice-mode-setting legend { margin-bottom:10px; padding:0; color:var(--text-heading); font:500 14px/1.5 var(--font-interface); }
.practice-mode-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.practice-mode-choice { position:relative; display:flex; flex-direction:column; align-items:center; gap:13px; min-width:0; width:100%; padding:12px 4px 8px; border:0; border-radius:var(--radius-study-inset); background:transparent; color:var(--text-body); text-align:center; cursor:pointer; }
.practice-mode-medallion { position:relative; display:grid; place-items:center; flex:none; width:78px; height:78px; border-radius:50%; border:1px solid color-mix(in srgb,var(--practice-choice-ink) 25%,transparent); background:var(--practice-choice-surface); color:var(--practice-choice-ink); transition:box-shadow var(--duration-fast); }
.practice-mode-medallion > .ic,.practice-mode-medallion > svg { width:42px; height:42px; }
.practice-mode-check { position:absolute; bottom:-4px; inset-inline-end:-3px; display:none; place-items:center; width:25px; height:25px; border:3px solid var(--surface-card); border-radius:50%; background:var(--practice-choice-ink); color:var(--surface-card); font:700 12px/1 var(--font-interface); }
.practice-mode-choice[aria-pressed=true] .practice-mode-medallion { box-shadow:0 0 0 4px var(--surface-card),0 0 0 6px var(--practice-choice-ink); }
.practice-mode-choice[aria-pressed=true] .practice-mode-check { display:grid; }
.practice-mode-choice:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.practice-mode-copy { display:grid; gap:4px; min-width:0; font-size:13px; line-height:1.45; color:var(--text-muted); }
.practice-mode-copy strong { font-size:16px; font-weight:600; color:var(--text-heading); }
.practice-mode-default { position:absolute; top:2px; inset-inline-start:calc(50% + 32px); font:400 10px/1.5 var(--font-interface); color:var(--text-muted); padding:1px 6px; border:1px solid var(--border-subtle); border-radius:var(--radius-pill); background:var(--surface-card); }
.practice-mode-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-radius:var(--radius-study-inset); background:var(--study-soft); }
.practice-mode-detail p { margin:0; font-size:14px; line-height:1.5; }
.practice-mode-detail p + p { margin-top:4px; font-size:13px; color:var(--text-muted); }
.practice-mode-badge { flex:none; border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:5px 9px; font-size:11px; color:var(--text-muted); }
.practice-session-options { display:flex; align-items:baseline; gap:12px 20px; flex-wrap:wrap; margin:16px 0 20px; }
.practice-direction-setting { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.practice-direction { max-width:100%; min-height:44px; padding:8px 14px; border:1px solid var(--border-compact-strong); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-body); font:var(--text-ui-supporting); }
.practice-session-options .tray-mode-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:0; padding:0; background:transparent; }
.practice-session-options .tray-mode-copy { gap:4px; font-size:13px; }
.practice-session-options .tray-mode-copy strong:empty { display:none; }
.practice-session-options .tray-segmented { padding:2px; border:1px solid var(--border-compact-strong); border-radius:var(--radius-pill); background:var(--study-soft); }
.practice-session-options .tray-segmented button { border-radius:var(--radius-pill); }
.practice-session-options .tray-segmented button[aria-pressed=true] { border-color:var(--border-subtle); box-shadow:0 1px 3px color-mix(in srgb,var(--text-body) 10%,transparent); }
.practice-session-options .prompt-recall-setting { margin-top:0; padding-top:12px; }
.practice-session-options .prompt-recall-setting legend { font:500 13px/1.5 var(--font-interface); }
.study-active .review-wrap { max-width:820px; }
.study-active .review-card { border-radius:var(--radius-study-panel); box-shadow:var(--elevation-study); }
.study-active .study-toolbar { border-radius:var(--radius-study-inset); margin-bottom:16px; }
.study-active .study-toolbar .study-session { display:grid; grid-template-columns:auto minmax(36px,1fr) auto; align-items:center; column-gap:16px; }
.study-toolbar .study-session-head { display:contents; }
.study-toolbar .study-count { grid-column:1; grid-row:1; }
.study-toolbar .study-elapsed { grid-column:3; grid-row:1; font-size:12px; }
.study-toolbar .study-progress { grid-column:2; grid-row:1; }
.study-toolbar .study-scope { grid-column:1 / -1; }
.study-active .btn { border-radius:var(--radius-pill); }
.study-active .btn-primary { background:var(--study-primary); color:var(--study-on-primary); border-color:transparent; box-shadow:var(--elevation-study-action); }
.study-active .btn-primary:hover:not(:disabled) { background:color-mix(in srgb,var(--study-primary) 90%,var(--study-card)); color:var(--study-on-primary); }
.study-active .btn-primary:disabled,.study-active .btn-primary[aria-disabled="true"] { background:var(--action-disabled); color:var(--action-disabled-text); border-color:var(--border-subtle); box-shadow:none; }
.study-active .reveal-btn { width:auto; min-width:180px; padding-inline:26px; align-self:center; }
.study-active .study-switch.on,.study-active .yg-word.on { border-color:var(--study-accent); background:var(--study-accent-soft); }
@container review-tray (max-width:540px) {
  .practice-mode-choices { gap:8px; }
  .practice-mode-medallion { width:64px; height:64px; }
  .practice-mode-medallion > .ic,.practice-mode-medallion > svg { width:36px!important; height:36px!important; }
  .practice-mode-copy { font-size:12px; }
  .practice-mode-copy strong { font-size:14px; }
  .practice-mode-default { inset-inline-start:calc(50% + 16px); font-size:9px; padding-inline:4px; }
  .practice-mode-detail { align-items:flex-start; flex-direction:column; gap:9px; padding:14px; }
  .practice-setup .tray-fine-content > .tray-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container review-tray (max-width:305px) {
  .practice-mode-copy { font-size:11px; }
  .practice-mode-copy strong { font-size:12px; }
  .practice-mode-choices { gap:5px; }
  .practice-mode-medallion { width:58px; height:58px; }
  .practice-setup .tray-fine-content > .tray-quick-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .study-active .review-wrap { --study-toolbar-top:calc(var(--panel-bar-h,54px) + 4px); }
  .study-active body.spicy-front .review-wrap { --study-toolbar-top:4px; }
}
@media (max-width:600px) {
  .review-ready-card { padding:24px 18px 20px; }
  .review-ready-intro { margin-bottom:24px; }
  .review-ready-intro > .ic { display:none; }
  .review-ready-actions { gap:10px; padding-top:18px; }
  .review-ready .review-begin { padding-inline:18px; gap:12px; font-size:14px; }
  .practice-setup .practice-session-options { column-gap:10px; }
  .practice-setup .practice-direction-setting,.practice-setup .tray-mode-copy { font-size:12px; }
  .practice-setup .practice-direction { padding-inline:8px; font-size:13px; }
  .study-active .study-toolbar .study-session { column-gap:10px; }
  .study-active .study-toolbar { column-gap:8px; padding-inline:8px; }
  .study-toolbar > .study-control-tray:not([open]) .tray-summary-text { display:none; }
}
@media (max-width:350px) {
  .review-ready .review-begin { padding-inline:14px; gap:8px; font-size:13px; }
  .review-ready-card .learn-first { font-size:12px; }
  .study-active .study-toolbar .study-session { grid-template-columns:auto minmax(30px,1fr); }
  .study-toolbar .study-elapsed { grid-column:1; grid-row:2; }
  .study-toolbar .study-progress { grid-row:1 / 3; }
}
@media (prefers-reduced-motion:reduce) {
  .study-toolbar .study-progress > span { transition:none; }
  .practice-mode-medallion { transition:none; transform:none!important; }
}
@media (forced-colors:active) {
  .practice-mode-choice[aria-pressed=true] .practice-mode-medallion { outline:2px solid Highlight; outline-offset:4px; }
  .practice-mode-check { forced-color-adjust:none; background:Highlight; color:HighlightText; border-color:Canvas; }
}

/* A session counts distinct cards. The small grid stays visible; optional
   detail expands in normal flow so it never covers the current card. */
.study-active .review-wrap > .study-toolbar {
  position:static; top:auto; z-index:auto; align-items:start;
  grid-template-columns:minmax(0,1fr) auto; gap:var(--space-sm) var(--space-md);
  padding:var(--space-md) var(--space-lg);
}
.study-active .study-toolbar .study-session.session-overview,
.study-session.session-overview {
  display:grid; grid-template-columns:minmax(0,1fr); align-items:start;
  min-width:0; gap:var(--space-sm); text-align:start;
}
.session-overview-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px var(--space-md); }
.session-overview-heading :is(h2,h3,p) { margin:0; color:var(--text-heading); font:var(--text-ui-body-strong); }
.session-overview .study-clock { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; color:var(--text-muted); font:var(--text-ui-caption); font-variant-numeric:tabular-nums; }
.session-count { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; margin:0; color:var(--text-muted); font:var(--text-ui-caption); }
.session-count strong { color:var(--text-heading); font:var(--text-ui-metric); font-variant-numeric:tabular-nums; }
.session-grid {
  display:grid; grid-template-columns:repeat(auto-fill,16px); grid-auto-rows:16px;
  align-content:start; gap:4px; box-sizing:border-box; min-width:0; min-height:22px;
  max-height:160px; padding:3px; overflow:auto; overscroll-behavior:contain;
}
.session-square {
  position:relative; display:grid; place-items:center; box-sizing:border-box;
  width:16px; height:16px; border:1px solid var(--border-compact-strong); border-radius:3px;
  background:var(--surface-card); color:var(--text-muted); font:600 12px/1 var(--font-interface);
}
.session-square[data-status="returning"] { border-color:var(--study-standard-ink); background:var(--study-standard-surface); color:var(--study-standard-ink); }
.session-square[data-status="finished"] { border-color:var(--study-accent); background:var(--study-accent-soft); color:var(--study-accent); }
.session-square[data-status="unavailable"] { border-style:dashed; background:var(--surface-sunken); }
.session-square.is-current { outline:2px solid var(--focus-ring); outline-offset:1px; }
.session-square.is-pending { border-color:var(--border-compact-strong); border-style:dotted; background:var(--surface-card); color:var(--text-muted); }
.session-legend { display:flex; align-items:center; flex-wrap:wrap; gap:4px var(--space-md); color:var(--text-muted); font:var(--text-ui-caption); }
.session-legend > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.session-legend-mark { display:inline-grid; place-items:center; box-sizing:border-box; flex:none; width:12px; height:12px; border:1px solid var(--border-compact-strong); border-radius:2px; background:var(--surface-card); font:600 10px/1 var(--font-interface); }
.session-legend > [data-status="waiting"] .session-legend-mark { font-size:0; }
.session-legend > [data-status="returning"] .session-legend-mark { border-color:var(--study-standard-ink); background:var(--study-standard-surface); color:var(--study-standard-ink); }
.session-legend > [data-status="finished"] .session-legend-mark { border-color:var(--study-accent); background:var(--study-accent-soft); color:var(--study-accent); }
.session-save-status { margin:0; padding:var(--space-sm); border:1px solid var(--border-subtle); border-radius:var(--radius-study-control); background:var(--surface-sunken); color:var(--text-body); font:var(--text-ui-caption); }
.session-insights { min-width:0; border-top:1px solid var(--border-subtle); }
.session-insights > summary,.completion-next > summary {
  box-sizing:border-box; min-height:var(--touch-target-compact); padding:var(--space-sm) 0;
  color:var(--text-heading); font:var(--text-ui-caption); cursor:pointer;
}
.session-insights > summary:focus-visible,.completion-next > summary:focus-visible,
.review-tool-disclosure > summary:focus-visible,.practice-settings > summary:focus-visible,
.deck-tools > summary:focus-visible,.session-grid:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
.session-insights > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); list-style:none; }
.session-insights > summary::-webkit-details-marker { display:none; }
.session-insights > summary .chev { flex:none; font:400 1.25rem/1 var(--font-interface); transition:transform .15s ease; }
.session-insights[open] > summary .chev { transform:rotate(90deg); }
.session-insights[open] > summary { margin-bottom:var(--space-xs); }
.session-insights p { margin:0 0 var(--space-sm); color:var(--text-muted); font:var(--text-ui-caption); }
.session-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm) var(--space-md); margin:0 0 var(--space-md); }
.session-metrics > div { min-width:0; margin:0; }
.session-metrics dt { color:var(--text-muted); font:var(--text-ui-caption); }
.session-metrics dd { margin:2px 0 0; color:var(--text-heading); font:var(--text-ui-body-strong); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.session-ratings { display:grid; gap:var(--space-sm); min-width:0; margin-block:var(--space-sm); }
.session-ratings > :is(div,li) { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); min-width:0; color:var(--text-muted); font:var(--text-ui-caption); }
.session-ratings > :is(div,li) > :last-child { min-width:1.5ch; text-align:end; font-variant-numeric:tabular-nums; }

/* Saved answers gather into irregular dot piles. All four piles share a scale;
   repeats contribute an answer, while pending or undone grades contribute none. */
.study-active .study-complete:has(.session-wrapup) { max-width:720px; padding:clamp(20px,4vw,36px); }
.session-wrapup { display:grid; gap:var(--space-md); min-width:0; margin-block:var(--space-lg); text-align:start; }
.session-dot-card { min-width:0; padding:24px; border:1px solid var(--border-subtle); border-radius:var(--radius-study-panel); background:var(--surface-sunken); color:var(--text-heading); }
.session-dot-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:var(--space-sm); color:var(--text-muted); font:var(--text-ui-supporting); }
.session-dot-heading strong { color:var(--text-heading); font:var(--text-ui-body-strong); font-variant-numeric:tabular-nums; }
.session-dot-piles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; min-width:0; padding-block:16px 4px; direction:ltr; }
.session-dot-pile { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; }
.session-dot-pile[data-rating="1"] { --session-dot-color:var(--session-rating-forgot); }
.session-dot-pile[data-rating="2"] { --session-dot-color:var(--session-rating-difficult); }
.session-dot-pile[data-rating="3"] { --session-dot-color:var(--session-rating-remembered); }
.session-dot-pile[data-rating="4"] { --session-dot-color:var(--session-rating-easy); }
.session-dot-field { display:block; width:100%; height:168px; margin-bottom:10px; overflow:visible; border-bottom:1px solid var(--border-subtle); color:var(--session-dot-color); fill:currentColor; }
.session-dot-label { color:var(--text-heading); font:var(--text-ui-caption); overflow-wrap:anywhere; }
.session-dot-count { margin-top:4px; color:var(--text-heading); font:var(--text-ui-metric); font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
@media (max-width:480px) {
  .session-dot-card { padding:20px 16px; }
  .session-dot-piles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
  .session-dot-field { height:142px; }
}
@media (forced-colors:active) {
  .session-dot-card { background:Canvas; color:CanvasText; border-color:CanvasText; }
  .session-dot-heading,.session-dot-heading strong,.session-dot-label,.session-dot-count { color:CanvasText; }
  .session-dot-field { color:CanvasText; border-color:CanvasText; }
  .session-dot-field path { filter:none; }
}

/* Listening and recording remain available without occupying the answer by
   default. Either open tool gets the full width, including its errors/takes. */
.focus-practice:has(> .review-tool-disclosure),
.review-has-dock .focus-practice:has(> .review-tool-disclosure) {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); margin-block:var(--space-md);
}
.focus-practice:has(> .review-tool-disclosure[open]),
.review-has-dock .focus-practice:has(> .review-tool-disclosure[open]) { grid-template-columns:minmax(0,1fr); }
.review-tool-disclosure { min-width:0; text-align:start; border:1px solid var(--border-subtle); border-radius:var(--radius-study-control); background:var(--surface-card); }
.review-tool-disclosure > summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm);
  box-sizing:border-box; min-height:var(--touch-target-compact); padding:var(--space-sm) var(--space-md);
  list-style:none; cursor:pointer; color:var(--text-heading); font:var(--text-ui-supporting);
}
.review-tool-disclosure > summary::-webkit-details-marker { display:none; }
.review-tool-disclosure > summary:hover { background:var(--surface-sunken); border-radius:inherit; }
.review-tool-disclosure .study-tray-label { gap:var(--space-sm); overflow-wrap:anywhere; }
.review-tool-disclosure > summary .chev { flex:none; font:400 1.25rem/1 var(--font-interface); transition:transform .15s ease; }
.review-tool-disclosure[open] > summary .chev { transform:rotate(90deg); }
.review-tool-disclosure[open] > summary { border-bottom:1px solid var(--border-subtle); }
.review-tool-body { min-width:0; padding:var(--space-md); }
.review-tool-body > :first-child { margin-top:0; }
.review-tool-body > :last-child { margin-bottom:0; }
.review-has-dock .review-tool-disclosure .recording-action { width:auto!important; min-width:var(--touch-target-min); }
.study-active .study-complete:has(.session-overview) { max-width:680px; padding:clamp(20px,4vw,36px); }
.study-complete .session-overview { margin-block:var(--space-lg); padding:var(--space-lg); border:1px solid var(--border-subtle); border-radius:var(--radius-study-inset); background:var(--surface-sunken); }
.study-complete .session-overview-heading :is(h2,h3,p) { font:var(--text-ui-body-strong); }
.study-complete > .study-control-tray { margin-top:var(--space-lg); text-align:start; border-top:1px solid var(--border-subtle); }
.study-complete .study-control-tray .linkbtn { margin-top:0; }
.completion-next { margin-top:var(--space-lg); text-align:start; border-top:1px solid var(--border-subtle); }
.completion-next > summary { font:var(--text-ui-supporting); }
.study-complete .completion-next .btn { margin-top:0; }
.study-toolbar + .review-card,.review-wrap .focus-answer { scroll-margin-top:var(--space-lg); }

/* Saved practice choices stay available while their microphone implications
   remain visible before starting. Native disclosures keep a full touch target. */
.practice-setup > .practice-mode-detail { margin-bottom:var(--space-md); }
.practice-setup > .practice-settings { margin:0; border-top:1px solid var(--border-subtle); border-radius:0; }
.practice-settings > summary { min-height:var(--touch-target-compact); padding:var(--space-md) 0; }
.practice-settings[open] > .tray-body { padding-block:var(--space-lg) var(--space-sm); }
.practice-settings > .tray-footer { padding-block:var(--space-sm) var(--space-md); }
.tray-summary-status { flex:0 1 auto; max-width:18ch; color:var(--text-muted); font:var(--text-ui-caption); overflow-wrap:anywhere; }
.deck-tools { margin-block:var(--space-md) var(--space-lg); border-block:1px solid var(--border-subtle); }
.deck-tools > summary { box-sizing:border-box; min-height:var(--touch-target-compact); padding:var(--space-md) 0; color:var(--text-heading); font:var(--text-ui-supporting); cursor:pointer; }
.deck-tools > .row { padding-bottom:var(--space-md); }

@media (min-width:1280px) {
  .study-active .review-wrap:not(.review-ready):has(> .study-toolbar > .session-overview) {
    display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start;
    gap:var(--space-xl); max-width:1120px;
  }
  .study-active .review-wrap:not(.review-ready) > .study-toolbar:has(> .session-overview) {
    grid-column:2; grid-row:1; position:sticky; top:var(--study-toolbar-top);
    grid-template-columns:minmax(0,1fr); gap:var(--space-sm); margin-bottom:0;
    max-height:calc(100dvh - var(--study-toolbar-top) - var(--review-dock-height,110px) - var(--space-3xl) - var(--space-xl));
    overflow:auto; overscroll-behavior:contain;
  }
  .study-active .review-wrap:not(.review-ready):has(> .study-toolbar > .session-overview) > .review-card { grid-column:1; grid-row:1; min-width:0; }
  .study-active .review-wrap:not(.review-ready) > .study-toolbar:has(> .session-overview) > .study-control-tray { border-top:1px solid var(--border-subtle); }
  .study-active .review-wrap:not(.review-ready) > .study-toolbar .session-overview-heading { align-items:baseline; }
  .study-active .review-wrap:not(.review-ready) > .study-toolbar .session-legend { column-gap:var(--space-sm); }
  .study-active .review-wrap:not(.review-ready) > .study-toolbar .tray-summary-text { display:flex; }
  /* The settings editor needs room for reading and form controls. Opening it
     deliberately makes a full-width row; closed controls stay in the sidebar. */
  .study-active .review-wrap:not(.review-ready) > .study-toolbar:has(> .study-control-tray[open]) {
    grid-column:1 / -1; grid-template-columns:260px minmax(0,1fr);
    gap:var(--space-xl); position:static; max-height:none; overflow:visible;
  }
  .study-active .review-wrap:not(.review-ready) > .study-toolbar > .study-control-tray[open] { grid-column:2; border-top:0; }
  .study-active .review-wrap:not(.review-ready):has(> .study-toolbar > .study-control-tray[open]) > .review-card { grid-row:2; }
  /* The dock occupies only the card column here, leaving the usual feedback
     corner free below the progress panel. */
  body.review-has-dock .feedback-launch { bottom:calc(var(--space-lg) + env(safe-area-inset-bottom)); }
}
@media (max-width:860px) {
  /* The overview scrolls with the page, but the shared mobile header remains
     fixed. Keep programmatic reveal and focus scrolling below that header. */
  .study-toolbar + .review-card,.review-wrap .focus-answer {
    scroll-margin-top:calc(var(--panel-bar-h,54px) + var(--space-lg));
  }
}
@media (max-width:600px) {
  .study-active .review-wrap > .study-toolbar { padding:var(--space-sm) var(--space-md); }
  .study-active .study-toolbar .study-session.session-overview { gap:6px; }
  .session-overview-heading :is(h2,h3,p) { font:var(--text-ui-supporting); }
  .session-count strong { font-size:1.125rem; }
  .session-legend { column-gap:var(--space-sm); font-size:.75rem; }
  .session-grid { max-height:104px; }
  .focus-practice:has(> .review-tool-disclosure),
  .review-has-dock .focus-practice:has(> .review-tool-disclosure) { grid-template-columns:minmax(0,1fr); }
  .review-has-dock .focus-practice > .review-tool-disclosure { order:initial; }
  .study-complete .session-overview { padding:var(--space-md); }
}
@media (prefers-reduced-motion:reduce) {
  .review-tool-disclosure > summary .chev,.session-insights > summary .chev { transition:none; }
}
@media (forced-colors:active) {
  .session-square,.session-legend-mark { border-color:CanvasText; background:Canvas; color:CanvasText; }
  .session-square[data-status="finished"],.session-legend > [data-status="finished"] .session-legend-mark { border-width:2px; }
  .session-square.is-current { outline-color:Highlight; }
  .review-tool-disclosure,.session-insights,.completion-next { border-color:CanvasText; }
}

/* Recall and compare share a notebook spread. The prompt keeps its place on
   reveal; English stays on the left and Hebrew on the right when there is room. */
.study-active .review-flow-card { padding:clamp(18px,3vw,32px); min-height:360px; }
.review-flow { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; list-style:none; padding:0; margin:0 0 12px; color:var(--text-muted); font:var(--text-ui-caption); }
.review-flow li { display:flex; align-items:center; gap:6px; }
.review-flow li > span { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--border-subtle); border-radius:50%; font-variant-numeric:tabular-nums; }
.review-flow [aria-current="step"] { color:var(--text-heading); font-weight:600; }
.review-flow [aria-current="step"] > span { background:var(--study-accent-soft); border-color:var(--study-accent); }
.review-flow-card .review-direction { margin:0; font:var(--text-ui-caption); }
.review-flow-card .speaking-context-slot { margin-block:4px 12px; }
.review-language-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; width:100%; min-width:0; direction:ltr; }
.review-language-panel { box-sizing:border-box; min-width:0; min-height:210px; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-study-inset); background:var(--surface-card-mist); text-align:center; overflow-wrap:anywhere; }
.review-language-panel.recall-prompt { grid-column:1; grid-row:1; }
.review-language-panel:is(.review-model,.review-answer-preview) { grid-column:2; grid-row:1; }
[data-prompt-language="hebrew"] .recall-prompt { grid-column:2; }
[data-prompt-language="hebrew"] :is(.review-model,.review-answer-preview) { grid-column:1; }
.review-language-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 16px; color:var(--text-muted); font:var(--text-ui-caption); }
.review-panel-purpose { font-size:11px; color:var(--text-heading); }
.review-flow-card .review-front-content { margin:0; }
.review-flow-card :is(.review-hebrew,.focus-meaning) { margin:12px 0; overflow-wrap:anywhere; }
.review-flow-card .review-model { background:var(--study-accent-soft); }
.review-flow-card .model-heading { margin-bottom:16px; flex-wrap:wrap; text-align:start; }
.review-model .review-language-label { margin:0; }
.review-answer-preview { border-style:dashed; background:transparent; }
.review-answer-invitation { margin:36px 0 12px; color:var(--text-heading); font:var(--text-ui-body-strong); }
.review-hidden-note { color:var(--text-muted); font:var(--text-ui-caption); }
.study-active .review-flow-card .focus-answer { margin:0; padding:0; border:0; animation:none; }
.review-flow-card .focus-translit { margin:12px 0 0; color:var(--text-body); unicode-bidi:plaintext; }
.review-flow-card .model-flexible { margin:12px 0 0; color:var(--text-muted); font:var(--text-ui-caption); }
.review-flow-card > .learn-first { align-self:center; margin-top:16px; }
.recall-prompt.has-recall .review-language-label { align-self:start; }
.recall-prompt.has-recall .recall-placeholder { inset:44px 12px 12px; }
.review-reveal-dock { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 16px; min-height:110px; margin:0; text-align:center; }
.review-reveal-dock .review-recall { flex-basis:100%; margin:0; color:var(--text-body); font:var(--text-ui-supporting); }
.study-active .review-reveal-dock .reveal-btn { min-height:44px; margin:0; }
.review-space-hint { display:flex; align-items:center; gap:5px; font:var(--text-ui-caption); color:var(--text-muted); }
.review-space-hint kbd,.review-rating-dock .rating-key { padding:2px 5px; border:1px solid var(--border-subtle); border-radius:4px; font:var(--text-ui-caption); }
.review-rating-dock .rating-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.review-rating-dock .rating-btn { min-height:64px; touch-action:manipulation; }
.review-rating-dock .rating-btn.good { border-color:var(--study-accent); background:var(--study-accent-soft); }
.review-rating-dock .rating-interval { font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine) {
  .review-rating-dock .rating-btn { min-height:86px; }
  .review-rating-dock .rating-key { display:inline-block; margin-top:6px; }
}
@media (max-width:680px) {
  .review-language-pair { grid-template-columns:minmax(0,1fr); gap:12px; }
  .review-language-pair > .review-language-panel { grid-column:1; grid-row:auto; min-height:0; padding:14px 16px; }
  .review-language-pair > .recall-prompt { order:0; }
  .review-language-pair > :is(.review-model,.review-answer-preview) { order:1; }
  .review-language-pair .review-answer-preview { display:none; }
  .review-flow-card .review-language-label,.review-flow-card .model-heading { margin-bottom:10px; }
  .review-flow-card .review-model .review-language-label { margin:0; }
  .review-flow { gap:8px 14px; }
  .review-reveal-dock { padding:10px; }
  .review-reveal-dock .review-recall { font:var(--text-ui-caption); }
  .review-space-hint { display:none; }
  .review-rating-dock .rating-key { display:none; }
  .review-rating-dock .rating-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.7fr) minmax(0,1fr); }
  .study-active .review-rating-dock .rating-btn { padding:8px 4px; }
  .review-rating-dock .rating-btn strong { font-size:12px; }
}
@media (forced-colors:active) {
  .review-flow [aria-current="step"] > span,.review-rating-dock .rating-btn.good { border:2px solid Highlight; }
  .review-language-panel { border-color:CanvasText; }
}