/* ==========================================================================
   v224 · UI/UX polish pass (October 2026) — cross-cutting rules that have to
   sit after the skin (170) and the generated utilities (175) in the cascade.
   Component-level fixes live in their own files; this file holds:
     1. shared helper classes (.lf-ctl, .vc-banner-x, .st-envoice, .cloze-fill …)
     2. touch-target floors on phones and touch screens
     3. phone / tablet layout fixes (reading lines, card grids, match board)
     4. motion: sheets ease in, and everything honours prefers-reduced-motion
   Tokens (--cover, --ok-ink …) are in 020-main.css and 170-skin-jade.css.
   ========================================================================== */

/* ---- 1. shared helpers ---- */
/* session controls under the flashcard (Session size · New set · Browse by category): one size, next to the 44px filters */
.lf-ctl{ min-height:42px; font-size:14px; padding:8px 12px; border-radius:12px; }
button.lf-ctl{ margin:0; }
/* the small "Exit" pill on the gold Review / Viewing-list banners */
.vc-banner-x{ border:none; color:inherit; border-radius:999px; min-height:36px; padding:6px 14px; font:700 12.5px var(--font); cursor:pointer; white-space:nowrap; }
/* Settings › English voice: 2-up grid instead of four flex:1 buttons that overflowed the phone */
.st-envoice{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.st-envoice > button{ margin:0; min-height:44px; }
.st-envoice > #testEnVoiceBtn{ grid-column:1 / -1; }
/* Fill the Blank: the answered sentence shows the word in the gap */
.cloze-fill{ padding:0 6px; border-radius:8px; background:var(--ok-bg); color:var(--ok-ink, var(--ok)); font-weight:800; }
.cloze-fill.bad{ background:var(--bad-bg); color:var(--bad-ink, var(--bad)); text-decoration:underline dotted; }
/* Reading › Play all: the line being read */
.reading-line.playing{ background:var(--primary-tint); border-radius:12px; margin:0 -8px; padding-left:8px; padding-right:8px; }
/* Sentence builder: an empty answer zone says what to do */
.build-zone:empty::before{ content:attr(data-empty); color:var(--muted); font:600 13px var(--font); }
/* Match Pairs: the board is done */
#matchWin.vc-match-done{ text-align:center; padding:14px 14px 16px; margin:0 0 12px; border-radius:var(--radius); background:var(--ok-bg); color:var(--ok-ink, var(--ok)); font-family:var(--font); }
#matchWin.vc-match-done .check-btn{ margin:10px auto 0; display:inline-flex; }
/* teacher directory: the "set up your profile" link is a real target */
.teacher-apply-note a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--paper-dark); color:var(--cover-deep); font-size:13px; text-decoration:none; }
/* deck editor */
.de-remove{ min-width:36px; min-height:36px; }
/* idiom & survival region badges carry their region as a colour again (was an inline-style bug) */
.cat-tag.reg-north{ color:#1d4ed8; background:#dbeafe; } .cat-tag.reg-central{ color:#9a3412; background:#ffedd5; } .cat-tag.reg-south{ color:#6d28d9; background:#ede9fe; } .cat-tag.reg-nation{ color:var(--stamp-ink, var(--stamp)); background:var(--stamp-tint); }
body.dark-mode .cat-tag.reg-north{ color:#93c5fd; background:rgba(59,130,246,.18); } body.dark-mode .cat-tag.reg-central{ color:#fdba74; background:rgba(249,115,22,.18); } body.dark-mode .cat-tag.reg-south{ color:#c4b5fd; background:rgba(124,58,237,.18); }
/* card lists share one side column (badge over 🔊) so Idioms and Survival look the same */
.survival-card .sc-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; }
.survival-card .sc-text{ flex:1 1 auto; min-width:0; }
/* settings toggles: the filled look always means ON, and the state is spelled out */
.skip-btn .st-state{ margin-left:6px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; opacity:.75; }
/* "Sign in to …" cards on the Rooms / Lessons / Voices screens */
.vc-signin-card{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; border:1.5px solid var(--paper-dark); background:var(--paper); border-radius:var(--radius); padding:14px 16px; margin:10px 0 14px; font-family:var(--font); }
.vc-signin-card p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink); }
.vc-signin-card .check-btn{ margin:0; }
.vc-signin-card small{ font-size:12.5px; color:var(--muted); }
/* one empty-state pattern */
.vc-empty{ text-align:center; padding:18px 12px; font-family:var(--font); color:var(--muted); font-size:14px; line-height:1.5; }
.vc-empty .check-btn, .vc-empty .skip-btn{ margin:10px 4px 0; }

/* first-run sheet: the Start button stays in view while the questions scroll (it was below the fold on every size) */
#setupSheet .su-foot{ position:sticky; bottom:-18px; margin:14px -18px -18px; padding:10px 18px 18px; background:var(--card); box-shadow:0 -10px 18px -12px rgba(0,0,0,.28); }
/* desktop (designed screens): small utility-class controls get a real target without touching the generated CSS */
html.vc-vd .vd button.hover\:text-teal-700{ min-height:32px; padding:4px 6px; margin:-4px 0; border-radius:8px; }
html.vc-vd .vd #vdRdWords button{ min-height:32px; min-width:32px; padding:4px 8px; }
html.vc-vd .vd button.text-xs:not(.vd-legacy *), html.vc-vd .vd button.text-\[11px\]:not(.vd-legacy *){ min-height:32px; }
html.vc-vd #vdHomeTour #homeTourBtn{ min-height:40px !important; padding:8px 12px !important; }

/* ---- 2. touch targets ---- */
.vc-say-lang{ min-height:36px; color:var(--cover-deep); }
#navEditToggle{ min-height:40px; padding:8px 12px; font-size:12.5px; }
#moreSheetPanel .pr-back-btn{ width:40px; height:40px; }
.wb-pick-all{ min-height:36px; padding:8px 14px; font-size:12.5px; color:var(--cover-deep); }
.wb-say{ width:40px !important; height:40px !important; padding:0 !important; }
.wb-hide{ min-width:40px; min-height:40px; opacity:.8; }
.vc-tone-colbtn{ min-height:36px; }
.vc-tone-sel{ min-height:40px; }
.sit-playall{ min-height:36px; padding:6px 14px; }
.vc-seg button{ min-height:40px; }
#readingLines .speak-btn, #idiomGrid .speak-btn, #survivalGrid .speak-btn, .sit-btns .speak-btn, .grammar-examples .speak-btn, #buildSpeak{ width:40px; height:40px; }
.sit-btns .speak-btn{ padding:0; }
@media (hover:none), (max-width:1023px){
  .cat-chip{ min-height:40px; }
  .nav-row button{ min-height:44px; }
  #quizModeToggle button, .mode-toggle button{ min-height:44px; }
  .vc-say-lang{ min-height:40px; }
  .vc-fp-close{ width:44px; height:44px; }
  #readingLines .speak-btn, #idiomGrid .speak-btn, #survivalGrid .speak-btn, .sit-btns .speak-btn{ width:44px; height:44px; }
  .live-topbar button.live-count-chip, .live-topbar .live-x{ min-width:40px; min-height:40px; }
  #vcTourTip .tt-skip{ min-height:44px; }
}

/* ---- 3. phone / tablet layout ---- */
/* Reading: Vietnamese above its gloss, 🔊 at the right (two 119px columns made every line a 4-line block) */
@media (max-width:600px){
  .reading-line{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:10px; }
  .reading-line > div{ grid-column:1; }
  .reading-vn{ font-size:18px; }
  .reading-en{ margin-top:4px; }
  .reading-speak{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}
/* tablets: two card columns for Survival / Idioms (one 602px column was a 17,000px page) */
@media (min-width:640px) and (max-width:1023px){
  .survival-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* Match Pairs on phones: the 4×4 board stays on one screen, with readable tiles (11.5px text wrapped 4 lines) */
@media (max-width:480px){
  #matchGrid{ gap:6px !important; }
  .match-card{ min-height:78px; font-size:12.5px; padding:6px 3px; overflow-wrap:anywhere; }
  .match-card.vn-side{ font-size:14.5px; }
}
/* phone Sentence builder: the exercise comes first, the pattern card (same for all 20 sentences) follows.
   goToTab shows a panel with an inline display:block, so the flex container needs !important. */
@media (max-width:1023px){
  html:not(.vc-vd) #tab-build[style*="block"]{ display:flex !important; flex-direction:column; }
  html:not(.vc-vd) #tab-build > *{ order:3; }
  html:not(.vc-vd) #tab-build > .dh-back{ order:0; }
  html:not(.vc-vd) #tab-build > .section-title{ order:1; }
  html:not(.vc-vd) #tab-build > .section-note{ order:2; }
  html:not(.vc-vd) #tab-build > .grammar-card{ order:5; margin-top:16px; }
}
/* phones never had the desktop cap: survival list shows 24 then "Show all" (JS) — the chips row stays reachable */
#survivalCats{ scroll-margin-top:12px; }
/* Lessons: a 3-item menu, not an auto-fill grid */
.ml-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ml-grid .dh-chips{ grid-column:1 / -1; }
@media (max-width:599px){
  .ml-grid{ grid-template-columns:1fr; }
  .ml-grid .dh-card{ flex-direction:row; align-items:center; gap:12px; min-height:72px; }
  .ml-grid .dh-card .dh-ico{ margin:0; }
}
html.vc-vd #vdLsBody .ml-grid{ grid-template-columns:repeat(3, minmax(0, 300px)); }
/* desktop Progress: the designed cards already show the streak, points, tricky words and the activity grid — don't repeat them below */
html.vc-vd #tab-progress:has(#vd-progress) #progressBody > :is(.xp-bar-wrap, div:has(> .streak-flame), div:has(> #pAppLevel), details.progress-collapsible:has(#activityHeatmap)){ display:none !important; }
/* desktop Events: buttons inside the adopted list lose their fill under the .vd reset — give the empty-state CTA its pill back */
html.vc-vd .vd #vdEvList :is(.skip-btn, .empty-cta){ display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; border-radius:999px; border:1.5px solid #e7e5e4; background:#fff; color:#0b2621; font-weight:700; cursor:pointer; }
body.dark-mode .vd #vdEvList :is(.skip-btn, .empty-cta){ background:var(--card); border-color:rgba(255,255,255,.15); color:var(--ink); }
/* desktop More sheet: the bottom bar is hidden on wide screens, so its editing tools are too */
html.vc-vd #navEditToggle, html.vc-vd .more-pin, html.vc-vd .more-hint{ display:none !important; }

/* ---- 4. motion ---- */
@media (prefers-reduced-motion: no-preference){
  @keyframes vcSheetIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  @keyframes vcFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  #moreSheet.show #moreSheetPanel, .vc-you-ov.show .vc-you, #confirmOverlay.show #confirmSheet, #promptOverlay.show > div, #pickOverlay.show > div, .vc-modal-overlay.show .vc-modal{ animation:vcSheetIn .18s ease-out; }
  .teacher-modal-overlay[style*="flex"] .teacher-modal, #setupOverlay #setupSheet{ animation:vcFadeIn .16s ease-out; }
  #undoToast[style*="flex"]{ animation:vcSheetIn .18s ease-out; }
}
@media (prefers-reduced-motion: reduce){
  .skip-btn:active, .speak-btn:active, nav.tabs button:active, .rd-wrap-pass, .sh-mascot, .speak-btn.active{ animation:none !important; }
  .check-btn, .check-btn:active, .dh-feature:active, .dh-card:active, .mg-opt:active, .nav-row button:active, .srs-btn:active, .bn-btn.bn-fab:active .bn-fab-circle{ transform:none !important; transition:none !important; }
  .cat-chip, .bn-btn, .opt, .match-card, .dh-card{ transition:none !important; }
}

/* ==========================================================================
   v225 · follow-ups
   ========================================================================== */
/* ---- desktop Rooms (228-vd-rooms.js): the real controls live in the designed hero, no duplicates ---- */
html.vc-vd #vdRmActs{ width:340px; max-width:100%; display:flex; flex-direction:column; gap:10px; }
html.vc-vd #vdRmActs .pr-actions{ flex-direction:column; align-items:stretch; gap:10px; margin:0; }
html.vc-vd #vdRmActs .pr-actions .pr-hero-btn{ width:100%; min-height:56px; font-size:16px; border-radius:999px; justify-content:center; }
html.vc-vd #vdRmActs .pr-act-create{ width:100%; min-height:48px; border-radius:999px; }
html.vc-vd #vdRmActs .pr-act-long{ display:inline; }
html.vc-vd #vdRmActs .pr-act-code{ width:100%; border-radius:999px; padding-left:16px; }
html.vc-vd #vdRmActs .pr-act-code button{ border-radius:999px; }
html.vc-vd #vdRmActs .pr-act-msg{ margin:0; }
html.vc-vd #vdRmActs .pr-act-msg:empty{ display:none; }
html.vc-vd #vdRmLangs .pr-hero-mini{ margin:0; padding:0; }
html.vc-vd #vdRmLangs #prMatchPrefs{ display:none !important; }   /* the hero's own accent pills do this job */
/* v260: since v247 (Web Studio) #vdRmLive also holds #practiceOnlineList — only fold when neither is showing,
   otherwise "People online" vanished on computers whenever nobody was live */
html.vc-vd #vdRmLive:not(:has(#whosLiveSection:not([style*="none"]))):not(:has(#practiceOnlineList:not([style*="none"]))){ display:none; }
html.vc-vd #vdRmLive #whosLiveSection{ margin:0 !important; background:#fff; border:1px solid #e7e5e4; border-radius:24px; padding:16px 22px; }
html.vc-vd #vdRmLive #whosLiveSection .review-title{ margin-top:0; }
body.dark-mode #vdRmLive #whosLiveSection{ background:var(--card); border-color:rgba(255,255,255,.1); }
/* the cards replace the pill row while the designed screen shows; inside a panel (Friends, Homework…) the row comes back as its navigation */
html.vc-vd #tab-practice:has(#vd-practice):not(:has(:is(#prFriendsPanel, #homeworkPanel, #sessionsPanel, #bookingsPanel, #studentsPanel, #dmThreadView, #groupRoomView, #practiceQueueBox, #practiceRoomView):not([style*="none"]))) #prPillRow{ display:none !important; }
/* signed out: the pitch is the hero — title and list on the left, the one button on the right */
html.vc-vd #vdRmPitch .signin-pitch{ margin:0; text-align:left; display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas:"icon title btn" "icon sub btn" "icon list note"; column-gap:24px; row-gap:4px; align-items:start; padding:28px 32px;
  background:#fff; border:1px solid #e7e5e4; border-radius:24px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
html.vc-vd #vdRmPitch .sp-icon{ grid-area:icon; font-size:44px; line-height:1; }
html.vc-vd #vdRmPitch .sp-title{ grid-area:title; font-size:22px; margin:0; }
html.vc-vd #vdRmPitch .sp-sub{ grid-area:sub; margin:0; }
html.vc-vd #vdRmPitch ul{ grid-area:list; margin:10px 0 0; padding-left:18px; max-width:none; columns:2; column-gap:28px; }
html.vc-vd #vdRmPitch .sp-btn{ grid-area:btn; align-self:center; margin:0; min-height:52px; }
html.vc-vd #vdRmPitch .sp-note{ grid-area:note; margin:8px 0 0; font-size:12.5px; color:var(--muted); }
body.dark-mode #vdRmPitch .signin-pitch{ background:var(--card); border-color:rgba(255,255,255,.1); }

/* Decks (v225): My decks is only yours; signed out, its search and chips have nothing to act on — the sign-in card says why */
body:not(.signed-in) #myDecksPanel #deckSearch,
body:not(.signed-in) #myDecksPanel #deckOwnerFilter{ display:none; }
#deckGrid > .vc-signin-card{ grid-column:1 / -1; margin-top:0; }

/* v225 · Idioms on phones: Type and Region dropdowns share one row (234-chip-select.js builds .vc-chipsel-pair) */
.vc-chipsel-pair{ display:none; }
@media (max-width:1023px){
  .vc-chipsel-pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:8px 0 12px; }
  .vc-chipsel-pair .vc-chipsel{ flex-direction:column; align-items:stretch; gap:4px; margin:0; }
  .vc-chipsel-pair .vc-chipsel-l{ font-size:12px; }
  .vc-chipsel-pair .vc-chipsel select{ font-size:14.5px; padding:8px 30px 8px 10px; background-position:right 10px center; }
}

/* v227 · Admin › English voice: your recordings — listen, record again, delete (232-english-voice-studio.js) */
.er-clips{ margin-top:12px; border:1.5px solid var(--line,#e7e5e4); border-radius:14px; background:var(--card,#fff); }
.er-clips > summary{ cursor:pointer; padding:12px 14px; min-height:44px; box-sizing:border-box; font-family:var(--font); font-weight:800; font-size:15px; color:var(--ink,#1c1917); }
.er-clips-n{ color:var(--muted,#6b7280); font-weight:700; }
.er-clips-body{ padding:0 12px 12px; }
.er-clips-body .teacher-search{ margin:0 0 8px; }
.er-clips-list{ display:flex; flex-direction:column; gap:6px; max-height:min(60vh, 520px); overflow:auto; overscroll-behavior:contain; }
.er-clip{ display:flex; align-items:center; gap:6px; padding:6px 6px 6px 10px; border-radius:12px; background:var(--paper,#faf7f0); font-family:var(--font); }
/* v237: the word is the tick box's label — tap it (or the box) to tick it */
.er-clip-t{ flex:1; min-width:0; min-height:44px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.er-clip-t > span{ display:flex; flex-direction:column; min-width:0; }
.er-pick, .er-all input{ flex:none; width:22px; height:22px; margin:0; accent-color:var(--cover,#0f766e); cursor:pointer; }
.er-clip.sel{ background:color-mix(in srgb, var(--cover,#0f766e) 12%, var(--paper,#faf7f0)); box-shadow:inset 0 0 0 1.5px var(--cover,#0f766e); }
.er-bulk{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; }
.er-bulk[hidden]{ display:none; }
.er-all{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 0 0 10px; font:700 14px/1.2 var(--font); color:var(--ink,#1c1917); cursor:pointer; }
.er-bulk-del{ margin:0 !important; min-height:44px; white-space:nowrap; }
#vcEnBulk .er-bulk-del:not(:disabled){ background:#be123c; border-color:transparent; color:#fff; }   /* the id: the skin's .skip-btn rule is (0,4,2) */
.er-clip-t b{ font-size:15px; color:var(--ink,#1c1917); overflow-wrap:anywhere; }
.er-clip-t small{ font-size:12px; color:var(--muted,#6b7280); }
.er-clip.gone .er-clip-t small{ color:var(--bad-ink,#9f1239); }
.er-cbtn{ flex:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line,#e7e5e4); background:var(--card,#fff); color:var(--ink,#1c1917); font-size:17px; cursor:pointer; padding:0; }
.er-cbtn.on{ background:var(--cover,#0f766e); border-color:transparent; color:#fff; }
.er-cbtn:disabled{ opacity:.5; cursor:default; }
.er-cdel:hover{ border-color:#e11d48; }
.er-clips-more{ margin:6px 0 0; }
body.dark-mode .er-clip{ background:rgba(255,255,255,.05); }
body.dark-mode .er-clip.sel{ background:rgba(45,212,191,.14); box-shadow:inset 0 0 0 1.5px #2dd4bf; }

/* v227 · Admin › Users: 💬 Message / ✉️ Email per person, 💬 Message all (178-community-voices.js) */
.vc-ac-tools{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vc-ac-tools .vc-ac-msg, .vc-ac-tools .vc-ac-mail{ width:auto !important; margin:0 !important; padding:5px 12px !important; font-size:12.5px !important; min-height:36px; display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.vc-ac-compose{ border:1.5px solid var(--cover,#0f766e); border-radius:14px; padding:12px; margin:8px 0 12px; background:var(--card,#fff); font-family:var(--font); }
.vc-ac-compose[hidden]{ display:none; }
.vc-ac-c-h{ font-size:15px; font-weight:800; color:var(--ink,#1c1917); }
.vc-ac-c-lbl{ display:block; font-size:12.5px; font-weight:700; color:var(--muted,#6b7280); margin:0 0 4px; }
.vc-ac-c-text{ width:100%; box-sizing:border-box; min-height:96px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line,#d6d3d1); background:var(--card,#fff); color:var(--ink,#1c1917); font:inherit; font-size:15px; resize:vertical; }
.vc-ac-c-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.vc-ac-c-row > button{ margin:0 !important; width:auto !important; min-height:44px; }

/* v229 · Review suggestions: ✗ Not right → write what it should say (030-review-suggestions.js) */
.vc-rev-fix{ margin-top:8px; padding:10px 12px; border:1.5px solid #c0392b; border-radius:12px; background:color-mix(in srgb, #c0392b 5%, var(--card,#fff)); display:flex; flex-direction:column; gap:8px; }
.vc-rev-fix-h{ font-weight:800; font-size:14px; color:var(--bad-ink,#9f1239); }
.vc-rev-fix-l{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:700; color:var(--muted,#6b7280); }
.vc-rev-fix-l small{ font-weight:600; }
.vc-rev-fix-in{ width:100%; box-sizing:border-box; margin:0 !important; font:inherit; font-size:16px !important; font-weight:500; color:var(--ink,#1c1917); resize:vertical; }
.vc-rev-fix-actions button{ min-height:44px; padding:8px 14px !important; font-size:14px !important; }
body.dark-mode .vc-rev-fix{ background:rgba(192,57,43,.08); }

/* v230 · Swipe the flashcard (248-swipe-cards.js): right = ✓ Good, left = ✗ Again */
#flashcard{ touch-action:pan-y pinch-zoom; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#flashcard.vc-sw-drag{ transition:none !important; cursor:grabbing; z-index:5; box-shadow:0 22px 44px rgba(11,38,33,.16) !important; }
#flashcard.vc-sw-back{ transition:transform .28s cubic-bezier(.2,.9,.3,1.2) !important; }
#flashcard.vc-sw-out{ transition:transform .24s ease-in, opacity .24s ease-in !important; opacity:0; pointer-events:none; z-index:5; }
#flashcard.vc-sw-in{ animation:vcSwIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes vcSwIn{ from{ transform:translateY(16px) scale(.94); opacity:.35; } to{ transform:none; opacity:1; } }
.vc-sw-stamp{ position:absolute; top:14px; z-index:6; padding:5px 12px; border:3px solid currentColor; border-radius:12px; background:rgba(255,255,255,.9); font-weight:800; font-size:19px; letter-spacing:.06em; line-height:1.2; white-space:nowrap; opacity:0; pointer-events:none; }
.vc-sw-stamp.ok{ left:14px; color:#16A34A; transform:rotate(-12deg); }
.vc-sw-stamp.no{ right:14px; color:#E11D48; transform:rotate(12deg); }
body.dark-mode .vc-sw-stamp{ background:rgba(17,24,22,.88); }
body.dark-mode .vc-sw-stamp.ok{ color:#4ADE80; } body.dark-mode .vc-sw-stamp.no{ color:#FB7185; }
.vc-sw-glow{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:0; }
.vc-sw-glow.ok{ background:linear-gradient(to left, rgba(34,197,94,.26), rgba(34,197,94,0) 42%); }
.vc-sw-glow.no{ background:linear-gradient(to right, rgba(244,63,94,.24), rgba(244,63,94,0) 42%); }
.vc-sw-hint{ display:flex; align-items:center; justify-content:center; gap:8px; margin:2px auto 6px; padding:6px 6px 6px 14px; width:max-content; max-width:100%; box-sizing:border-box; border-radius:999px; background:var(--card,#fff); border:1px solid var(--line,#e7e2d8); font-size:12.5px; font-weight:600; color:var(--muted,#57534e); }
.vc-sw-hint b.ok{ color:#15803D; } .vc-sw-hint b.no{ color:#BE123C; }
.vc-sw-hint button{ width:30px; height:30px; flex:none; border:0; border-radius:50%; background:transparent; color:inherit; font-size:14px; cursor:pointer; }
@media (prefers-reduced-motion: reduce){ #flashcard.vc-sw-out, #flashcard.vc-sw-back{ transition:none !important; } #flashcard.vc-sw-in{ animation:none; } }
body.focus-mode .vc-sw-hint{ display:none; }   /* focus mode fits one screen — the tip waits for the normal view */

/* v233 · round 🔊 / 🐢 buttons say what they do: a caption under the icon (data-cap). A tester: "what's obvious to the
   dev can be mysterious to a new user". The caption is a pseudo-element, so speak()'s "…" while a clip loads never moves it. */
.speak-btn[data-cap]{ position:relative; overflow:visible; margin-bottom:22px; }
.speak-btn[data-cap]::after{ content:attr(data-cap); position:absolute; left:50%; top:calc(100% + 5px); transform:translateX(-50%); white-space:nowrap; font:700 12px/1.2 var(--font); letter-spacing:.01em; color:var(--muted); }

/* v234 · "Suggest a better sentence" starts with the shown sentence (edit, don't retype); "✕ Write a new one" clears it */
#corrModal .corr-lbl-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
#corrModal .corr-clear{ border:0; background:none; padding:6px 2px; min-height:32px; font:700 12.5px var(--font); color:var(--cover-deep, #0F766E); cursor:pointer; white-space:nowrap; }
#corrModal .corr-clear:hover{ text-decoration:underline; }
#corrModal .corr-edit-hint{ margin:-2px 0 6px; font-size:12px; line-height:1.4; }

/* ---------- v239 🌟 What you can do (252-can-do.js) ---------- */
.vc-cando{ background:var(--card,#fff); color:var(--ink,#062822); border:1px solid var(--line,#e6dfcf); border-radius:22px; padding:16px 16px 14px; margin:14px 0; font-family:var(--font); }
.vc-cando .cd-head{ display:flex; flex-direction:column; gap:10px; }
.vc-cando h3{ margin:0; font-size:18px; font-weight:800; }
.vc-cando h3 span{ font-size:13px; font-weight:700; color:var(--muted,#6b6b6b); }
.vc-cando .cd-head p{ margin:4px 0 0; font-size:13.5px; color:var(--muted,#6b6b6b); }
.vc-cando .cd-meter{ height:8px; border-radius:99px; background:var(--paper-dark,#efe7d6); overflow:hidden; }
.vc-cando .cd-meter i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--cover,#0F766E), #f59e0b); }
.vc-cando .cd-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.vc-cando .cd-list li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--paper,#fffaf0); border:1px solid var(--line,#e6dfcf); }
.vc-cando .cd-got{ background:color-mix(in srgb, var(--cover,#0F766E) 9%, var(--card,#fff)) !important; border-color:color-mix(in srgb, var(--cover,#0F766E) 28%, transparent) !important; }
.vc-cando .cd-ico{ font-size:24px; flex:none; width:32px; text-align:center; }
.vc-cando .cd-t{ flex:1; min-width:0; display:grid; gap:2px; }
.vc-cando .cd-t b{ font-size:15px; font-weight:700; line-height:1.3; }
.vc-cando .cd-t small{ font-size:12.5px; color:var(--muted,#6b6b6b); line-height:1.35; }
.vc-cando .cd-ok{ flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cover,#0F766E); color:#fff; font-weight:900; font-size:14px; }
.vc-cando .cd-sub{ margin:16px 0 0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#6b6b6b); }
.vc-cando .cd-next li{ border-style:dashed; }
.vc-cando .cd-go{ flex:none; min-height:40px; padding:0 16px; border-radius:999px; border:0; background:var(--cover,#0F766E); color:var(--on-cover,#fff); font:800 13.5px var(--font); cursor:pointer; }
@media (min-width:700px){ .vc-cando .cd-list{ grid-template-columns:1fr 1fr; } }
/* the designed Progress screen draws its own copy (#vdCanDo), so the one in the classic body hides there */
html.vc-vd #vcCanDoCard{ display:none; }
html.vc-vd #vdCanDo{ border-radius:24px; padding:22px 24px 20px; margin:0; box-shadow:0 1px 3px rgba(0,0,0,.06); border-color:#e7e5e4; }
html.vc-vd #vdCanDo h3{ font-size:1.25rem; } html.vc-vd #vdCanDo .cd-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } html.vc-vd #vdCanDo .cd-meter{ width:240px; flex:none; margin-bottom:6px; }
@media (min-width:1280px){ html.vc-vd #vdCanDo .cd-list{ grid-template-columns:repeat(3, 1fr); } }
/* pop-up when one is earned */
#vcCanDoPop{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:9700; display:flex; align-items:center; gap:12px; width:min(440px, calc(100vw - 32px));
  padding:12px 12px 12px 16px; border-radius:20px; background:#0B4F4A; color:#fff; box-shadow:0 18px 40px rgba(0,0,0,.28); font-family:var(--font);
  transform:translate(-50%, 140%); opacity:0; pointer-events:none; transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s; }
#vcCanDoPop.show{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
#vcCanDoPop .cd-ico{ font-size:30px; flex:none; }
#vcCanDoPop .cd-t{ flex:1; min-width:0; display:grid; } #vcCanDoPop .cd-t small{ font-size:12px; font-weight:800; color:#fcd34d; text-transform:uppercase; letter-spacing:.05em; } #vcCanDoPop .cd-t b{ font-size:15.5px; line-height:1.3; }
#vcCanDoPop button{ flex:none; border:0; cursor:pointer; font:800 13px var(--font); border-radius:999px; min-height:40px; }
#vcCanDoPop .cd-all{ background:#fff; color:#0B4F4A; padding:0 14px; } #vcCanDoPop .cd-x{ background:transparent; color:#fff; width:40px; font-size:15px; }
@media (min-width:1024px){ #vcCanDoPop{ bottom:28px; } }
@media (prefers-reduced-motion: reduce){ #vcCanDoPop{ transition:none; } }
.vc-cando .cd-more{ margin:10px 0 0; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line,#e6dfcf); background:transparent; color:var(--ink,#062822); font:700 13px var(--font); cursor:pointer; }

/* v261: on a card you've graded before, the picture clue waits until the card is turned over */
body:not(.fc-revealed) #flashIcon.fc-clue{ visibility:hidden; }