/* ============================================================================
   Speak-Arabi / Masri — shared brand stylesheet (premium realign)
   Matches speak-arabi.com: white, Merriweather serif headlines in navy,
   Inter body in grey, periwinkle (#5359B5) used sparingly, gold as thin accents.
   Strategy: define tokens, alias the older inline-CSS variable names to them so
   every existing rule re-skins, then layer premium component overrides.
   Presentation only — no logic, no data flow.
   ============================================================================ */

:root{
  /* Primary — periwinkle tonal scale (seed #5359B5) */
  --p50:#F0F1F9; --p100:#D6D8F0; --p200:#B2B5E1; --p300:#8E92D2; --p400:#6D73C5;
  --p500:#5359B5; --p600:#3F45A6; --p700:#343989; --p800:#292D65; --p900:#1C1E40;
  --primary:var(--p500); --primary-press:var(--p600); --primary-soft:var(--p50);
  /* Accent — gold (thin accents only, never slabs) */
  --gold:#E6B24A; --gold-deep:#C8922E;
  /* State — muted */
  --success:#389466; --success-press:#2E7D54; --danger:#CC6966; --danger-press:#A94E4B;
  /* Neutrals — cool, tinted by the primary */
  --ink:#0A0033; --muted:#686876; --line:#EAEAF0; --surface:#FFFFFF; --tint:#F0F1F9;

  /* Fonts */
  --font:'Inter',-apple-system,"Segoe UI",system-ui,sans-serif;
  --font-serif:'Merriweather',Georgia,'Times New Roman',serif;
  --font-display:var(--font-serif);
  --font-ar:'Cairo','Tajawal',var(--font);

  /* --- compat aliases: retheme the existing inline stylesheet + earlier classes --- */
  --indigo:var(--primary); --indigo-dark:var(--primary-press); --indigo-soft:var(--primary-soft);
  --gold-soft:#FBF1DD;
  --bg:var(--surface); --card:var(--surface); --hairline:var(--line);
  --ok:var(--success); --warn:var(--danger);
  --br:var(--primary); --brd:var(--primary-press); --brs:var(--line); --on-br:#fff;
  --grn:var(--success); --grnd:var(--success-press); --cor:var(--danger); --cord:var(--danger-press);
  --nav:var(--ink); --mut:var(--muted); --cv:var(--surface); --hair:var(--line);
  --shadow:0 1px 3px rgba(10,0,51,.05), 0 12px 32px rgba(10,0,51,.06);
  --shadow-sm:0 1px 3px rgba(10,0,51,.04);
}

body{ background:var(--surface); color:var(--ink); font-family:var(--font); }

/* Headlines → Merriweather serif (the premium signal). Functional UI stays Inter. */
.screen-title,.auth-title,.celebrate-title,.prog-section,.lessons-head,
.hud-rank,.pb-streak,.unit-name,.hc-rank-name,.sm-n{ font-family:var(--font-serif); font-weight:500; }

/* On a wide screen, sit the app column on a tinted backdrop so it isn't stranded on white. */
@media (min-width:600px){
  body{ background:var(--tint); }
  .app{ background:#fff; box-shadow:0 1px 60px rgba(10,0,51,.09); min-height:100vh; }
}

/* =========================== COMPONENTS =================================== */

/* Refined button — subtle 3D lip, not chunky. */
.btn3d{ border:none;border-radius:14px;font-family:var(--font);font-weight:700;font-size:16px;
  color:#fff;padding:14px 20px;cursor:pointer;width:100%;background:var(--primary);
  box-shadow:0 3px 0 var(--primary-press);transition:transform .05s,box-shadow .05s;text-align:center; }
.btn3d.is-brand{ background:var(--primary);box-shadow:0 3px 0 var(--primary-press); }
.btn3d.is-green{ background:var(--success);box-shadow:0 3px 0 var(--success-press); }
.btn3d.is-gold { background:transparent;color:var(--gold-deep);box-shadow:inset 0 0 0 1.5px var(--gold);font-weight:700; }
.btn3d:active{ transform:translateY(3px);box-shadow:0 0 0 var(--primary-press); }
.btn3d:disabled{ opacity:.45;cursor:default; }

.card{ background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm); }
.chip{ display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-weight:600;
  font-size:13px;padding:5px 11px;border-radius:999px; }

/* Listening waveform (Speak) */
.wv{ display:flex;align-items:center;gap:4px;height:30px; }
.wv span{ width:3px;border-radius:2px;background:var(--primary);animation:wv .8s ease-in-out infinite alternate; }
.wv span:nth-child(2){animation-delay:.1s}.wv span:nth-child(3){animation-delay:.2s}
.wv span:nth-child(4){animation-delay:.3s}.wv span:nth-child(5){animation-delay:.15s}
.wv span:nth-child(6){animation-delay:.25s}.wv span:nth-child(7){animation-delay:.05s}
@keyframes wv{ from{transform:scaleY(.35)} to{transform:scaleY(1)} }

/* ===================== SHELL — premium chrome ============================= */

/* Slim periwinkle header. Wordmark in serif; mascot avatar + its state ring kept. */
.topbar{ background:var(--primary); border-bottom:none; padding:11px 16px; box-shadow:none; }
.topbar .avatar{ width:38px;height:38px;font-size:20px;box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.topbar .brandtext .title{ color:#fff; font-family:var(--font-serif); font-weight:700; font-size:18px; letter-spacing:.1px; }
.topbar .brandtext .subtitle{ color:rgba(255,255,255,.78); font-size:11.5px; }
.exitbtn{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5); border-radius:10px; }
.logoutbtn{ color:rgba(255,255,255,.9); }

/* HUD stat strip — clean & white; hidden on Home (the home Rank/Goal card covers it). */
.gamehud{ background:#fff; border-bottom:1px solid var(--line); padding:8px 16px; }
.hud-rank{ font-size:13px; color:var(--ink); }
.hud-xp-num{ color:var(--gold-deep); font-weight:700; }
.hud-xp-bar{ background:var(--p50); }
.hud-xp-fill{ background:var(--gold); }
.hud-streak{ background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:700; }
.hud-streak.lit{ color:var(--gold-deep);border-color:var(--p100); }
body[data-screen="home"] .gamehud{ display:none; }

/* Bottom nav — white, Inter, periwinkle active. */
.bottomnav{ background:#fff; border-top:1px solid var(--line); box-shadow:none; }
.nav-item{ font-family:var(--font); font-weight:600; }
.nav-item .ni-ico{ font-size:21px; }
.nav-item.active{ color:var(--primary); }

/* Primary buttons everywhere → refined lip. */
.auth-go,.ob-start,.continuebtn,.startlesson,.send,.celebrate-go,.btn-primary{
  background:var(--primary); color:#fff; border-radius:14px; font-family:var(--font); font-weight:700;
  box-shadow:0 3px 0 var(--primary-press); transition:transform .05s,box-shadow .05s; }
.auth-go:hover,.continuebtn:hover{ background:var(--primary); }
.auth-go:active,.ob-start:active,.continuebtn:active,.startlesson:active,.send:active,.btn-primary:active{
  transform:translateY(3px); box-shadow:0 0 0 var(--primary-press); }
.ob-start:disabled,.auth-go:disabled{ box-shadow:none; }
.celebrate-go{ background:var(--success); box-shadow:0 3px 0 var(--success-press); border-radius:14px; }
.celebrate-go:active{ transform:translateY(3px); box-shadow:0 0 0 var(--success-press); }

/* "Hear it" / Listen → quiet gold OUTLINE text button, never a slab. */
.listenbtn{ background:transparent; color:var(--gold-deep); border:1.5px solid var(--gold);
  border-radius:12px; font-weight:700; box-shadow:none; }
.listenbtn:active{ transform:scale(.97); background:#FBF1DD; }

/* Generic cards in the inline CSS → white + hairline + soft shadow. */
.metric,.action-card,.prog-card,.cstat,.streak-card,.goal-card,.badge,.lessoncard,.her,.hero{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.metric-num,.prog-num{ font-family:var(--font); color:var(--primary); font-weight:700; }

/* ===================== HOME = lesson path ================================ */
.home-path{ padding:2px 2px 20px; position:relative; }
.path-loading{ padding:34px 16px;text-align:center;color:var(--muted);font-weight:600; }
.home-path .lessons-head{ font-family:var(--font-serif); font-weight:500; color:var(--ink);
  text-align:center; margin:18px 0 4px; font-size:18px; letter-spacing:.2px; }
.home-path .lessons-head.sub{ color:var(--muted); font-size:13px; font-family:var(--font); margin-top:26px; }

/* Home Rank / Daily-goal card (one white card, built by renderHome). */
.home-hero-row{ display:flex; gap:12px; margin:16px 2px 6px; }
.home-card{ flex:1; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:16px; box-shadow:var(--shadow-sm); }
.hc-rank{ flex:1; min-width:0; }
.hc-rank-name{ font-family:var(--font-serif); font-weight:700; font-size:17px; color:var(--ink); }
.hc-xp-bar{ height:7px; background:var(--p50); border-radius:999px; overflow:hidden; margin:8px 0 6px; }
.hc-xp-bar span{ display:block; height:100%; background:var(--gold); border-radius:999px; }
.hc-sub{ font-size:12px; color:var(--muted); font-weight:500; }
.hc-sub .hc-streak{ color:var(--gold-deep); font-weight:700; }

/* Quiet unit label — gold kicker + hairline + serif navy name (no gold slab). */
.unit-label{ display:flex; align-items:center; gap:12px; margin:24px 2px 4px; }
.unit-kicker{ font-family:var(--font); font-weight:700; font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--gold-deep); white-space:nowrap; }
.unit-line{ flex:1; height:1px; background:var(--line); }
.unit-name{ font-family:var(--font-serif); font-weight:500; font-size:15px; color:var(--ink); white-space:nowrap; }

/* Path nodes — restrained: current filled periwinkle + soft ring; done white + gold ring + check;
   locked white + hairline + grey lock. Thin dotted connectors; gentle winding. */
.path{ position:relative; }
.path-node{ position:relative; margin:14px 0; }
.path-node::before{ content:""; position:absolute; left:50%; top:-18px; width:0; height:18px;
  border-left:2px dotted var(--p100); transform:translateX(-50%); }
.path-node:first-child::before{ display:none; }
.path-node .pn-btn{ width:62px;height:62px;border-radius:50%;font-size:23px;border:none;
  background:#fff; color:var(--muted); box-shadow:none; transition:transform .06s; }
.path-node .pn-btn:active{ transform:scale(.95); }
.path-node.done .pn-btn{ background:#fff; color:var(--gold-deep); box-shadow:0 0 0 2.5px var(--gold) inset; }
.path-node.current .pn-btn{ width:70px;height:70px;background:var(--primary);color:#fff;
  box-shadow:0 0 0 6px rgba(83,89,181,.12); animation:none; }
.path-node.unlocked .pn-btn{ background:#fff;color:var(--primary);box-shadow:0 0 0 1.5px var(--p200) inset; }
.path-node.locked .pn-btn{ background:#fff;color:#B9B9C6;box-shadow:0 0 0 1px var(--line) inset; }
.pn-label{ font-family:var(--font); font-weight:600; font-size:13px; color:var(--muted); margin-top:7px; }
.path-node.current .pn-label{ color:var(--ink); font-weight:700; }
/* gentle winding (override the old wide zig-zag) */
.path-node:nth-child(6n+1){ transform:translateX(0); }
.path-node:nth-child(6n+2){ transform:translateX(34px); }
.path-node:nth-child(6n+3){ transform:translateX(48px); }
.path-node:nth-child(6n+4){ transform:translateX(34px); }
.path-node:nth-child(6n+5){ transform:translateX(0); }
.path-node:nth-child(6n+6){ transform:translateX(-34px); }
/* Start bubble — quiet white pill */
.pn-start{ position:absolute; top:-30px; left:50%; transform:translateX(-50%); background:#fff;
  border:1px solid var(--line); color:var(--primary); font-family:var(--font); font-weight:700;
  font-size:11px; padding:4px 11px; border-radius:8px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.pn-start::after{ content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#fff; border-bottom:0; }
/* Masri small beside the current node */
.path-mascot{ position:absolute; top:0; left:calc(50% + 44px); width:44px; height:44px;
  pointer-events:none; filter:drop-shadow(0 3px 5px rgba(10,0,51,.16)); }

/* ===================== LESSON — Speak voice loop ========================= */
.lesson-chrome{ background:#fff; border-bottom:1px solid var(--line); }
.lesson-bar{ background:var(--p50); }
.lesson-fill{ background:var(--primary); }
.step-chip{ font-family:var(--font); font-weight:600; background:#fff; border:1px solid var(--line); color:var(--muted); }
.step-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.step-chip.done{ color:var(--success); border-color:var(--success); background:#fff; }

.lessoncard{ border:1px solid var(--line); border-radius:18px; padding:24px 20px; box-shadow:var(--shadow-sm); }
.lessoncard .ar{ font-family:var(--font-ar); font-size:38px; line-height:1.5; color:var(--ink); font-weight:700; }
.lessoncard .franco{ font-size:17px; color:var(--primary); font-weight:600; font-style:normal; margin-top:8px; }
.lessoncard .en{ font-size:14px; color:var(--muted); background:var(--tint); }
.lessoncard .lc-prompt{ font-family:var(--font); font-weight:600; color:var(--muted); margin-top:16px; }
.her .ar{ font-family:var(--font-ar); color:var(--ink); }
.her .franco{ color:var(--primary); font-style:normal; font-weight:600; }
.listen-txt .ar{ font-family:var(--font-ar); }

/* Periwinkle mic — refined (smaller lip). */
.mic{ width:84px; height:84px; background:var(--primary); box-shadow:0 4px 0 var(--primary-press), 0 8px 20px rgba(83,89,181,.22); }
.mic:active{ transform:translateY(4px); box-shadow:0 0 0 var(--primary-press), 0 4px 12px rgba(83,89,181,.2); }
.mic-wave{ display:none; margin:2px 0 0; height:24px; }
body[data-state="listening"] .mic-wave{ display:flex; }
body[data-state="listening"] .mic{ box-shadow:0 0 0 6px rgba(83,89,181,.14), 0 4px 0 var(--primary-press); }
.miclabel{ font-family:var(--font); font-weight:600; color:var(--muted); }

/* "Heard: …" transcript chip — subtle; green check / coral try-again. No harsh red. */
.heard-chip{ background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:14px 14px 4px 14px;
  font-weight:500; box-shadow:none; }
.heard-chip::before{ content:"Heard: "; color:var(--muted); font-weight:600; }
.heard-chip.heard-ok{ border-color:var(--success); background:#F1F8F4; }
.heard-chip.heard-ok::before{ content:"✓ Heard: "; color:var(--success); }
.heard-chip.heard-no{ border-color:var(--danger); background:#FBF1F0; }
.heard-chip.heard-no::before{ content:"Heard: "; color:var(--danger-press); }

/* Feedback card: soft green correct / soft coral try-again. */
.bubble.her.fb-ok{ border-left:3px solid var(--success); }
.bubble.her.fb-ok .teach .lbl{ color:var(--success); }
.bubble.her.fb-no{ border-left:3px solid var(--danger); }
.continuebtn{ color:#fff; }

/* ===================== LESSON COMPLETE — celebration ===================== */
.celebrate-card{ border:1px solid var(--line); border-radius:20px; }
.celebrate-title{ font-family:var(--font-serif); font-weight:700; }
.celebrate-sub{ color:var(--muted); }
.cstat{ background:#fff; border:1px solid var(--line); border-radius:14px; }
.cstat-num{ font-family:var(--font); font-weight:700; }
.cstat-lbl{ font-family:var(--font); color:var(--muted); }
.celebrate-stats .cstat:nth-child(1){ background:var(--tint); }   /* one quiet tint accent */
.celebrate-stats .cstat:nth-child(1) .cstat-num{ color:var(--gold-deep); }
.celebrate-stats .cstat:nth-child(2) .cstat-num{ color:var(--success); }
.celebrate-stats .cstat:nth-child(3) .cstat-num{ color:var(--primary); }
.cb-chip{ background:#FBF1DD; color:var(--gold-deep); font-family:var(--font); font-weight:600; }

/* ===================== STREAK / habit panel ============================= */
.streak-modal{ position:fixed; inset:0; z-index:260; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,0,51,.4); backdrop-filter:blur(3px); }
.streak-modal.hidden{ display:none; }
.streak-sheet{ width:100%; max-width:420px; background:#fff; border-radius:22px 22px 0 0;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px)); text-align:center;
  box-shadow:0 -8px 40px rgba(10,0,51,.12); animation:sheetUp .32s cubic-bezier(.22,1,.36,1); }
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.sm-flame{ font-size:48px; line-height:1; }
.sm-n{ font-family:var(--font-serif); font-weight:700; font-size:44px; color:var(--gold-deep); line-height:1; margin-top:4px; }
.sm-lbl{ font-family:var(--font); font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; font-size:11px; }
.sm-week{ display:flex; justify-content:space-between; gap:6px; margin:22px 4px 14px; }
.sm-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.sm-day .sm-dot{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:#fff; border:1px solid var(--line); }
.sm-day.on .sm-dot{ background:#FBF1DD; border-color:var(--gold); }
.sm-day.today .sm-dot{ border:2px solid var(--primary); }
.sm-day small{ font-size:11px; font-weight:600; color:var(--muted); }
.sm-freeze{ font-size:12.5px; color:var(--primary); font-weight:600; min-height:18px; margin-bottom:16px; }
.sm-freeze:empty{ margin-bottom:4px; }

/* Progress + celebrate banner accents kept subtle */
.prog-banner{ background:var(--primary); }
.cb-chip,.badge.unlocked{ border-color:var(--p100); }

/* ===================== ICONS (Tabler webfont) =========================== */
.ti{ font-size:1.05em; line-height:1; vertical-align:-.12em; display:inline-block; }
.nav-item .ni-ico .ti{ font-size:22px; }
.mic .ti{ font-size:30px; color:#fff; vertical-align:-.18em; }
.logoutbtn .ti{ font-size:18px; }
.hud-mute .ti{ font-size:16px; color:var(--muted); }
.flame .ti{ color:var(--gold); }
.hc-streak .ti, .pb-streak .ti, .cstat .ti, .combo-x .ti{ color:var(--gold); }
.sm-flame .ti{ font-size:46px; color:var(--gold); }
.sm-day .ti{ font-size:15px; color:var(--gold); }
.sm-freeze .ti, .hc-streak .ti.ti-snowflake{ color:var(--primary); }
.pn-btn .ti{ font-size:24px; }            /* node icons inherit the node's color */
.path-node.current .pn-btn .ti{ font-size:26px; }
.listenbtn .ti, .spkbtn .ti, .replay .ti{ font-size:15px; vertical-align:-.16em; }
.chip .ti, .ob-goal .ti{ color:var(--primary); margin-right:3px; }
.badge-ic{ position:relative; display:inline-block; }
.badge-ic .ti{ font-size:28px; }
.badge.unlocked .badge-ic .ti{ color:var(--primary); }
.badge.locked .badge-ic .ti{ color:#C5C4D2; }
.badge.locked .badge-ic::after{ content:none; }   /* drop the old 🔒 emoji overlay */
.badge-lock{ position:absolute; right:-5px; bottom:-3px; background:#fff; border-radius:50%; line-height:0; padding:1px; }
.badge-lock .ti{ font-size:13px; color:var(--muted); }
.teach .lbl .ti{ color:var(--success); vertical-align:-.12em; }
.convbtn::before{ content:none; }

/* ===================== GREEN = correct/accuracy ONLY ==================== */
/* Recolor controls (mic, toggle, continue, rings) from green → periwinkle. */
body[data-state="speaking"] .mic{ background:var(--primary); box-shadow:0 0 0 6px rgba(83,89,181,.14), 0 4px 0 var(--primary-press); }
body[data-state="speaking"] .miclabel{ color:var(--muted); }
body[data-state="speaking"] .avatar .ring{ border-color:rgba(255,255,255,.65); }
body[data-state="speaking"] .status{ color:rgba(255,255,255,.82); }
.goal-ring-fill{ stroke:var(--primary); }
.celebrate-go{ background:var(--primary); box-shadow:0 3px 0 var(--primary-press); }
.celebrate-go:active{ box-shadow:0 0 0 var(--primary-press); }

/* ===================== Conversation toggle — small & subtle ============= */
.convbtn{ font-size:12px; font-weight:600; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--muted); box-shadow:none; }
.convbtn.on{ background:var(--primary-soft); border-color:var(--p200); color:var(--primary); }

/* ===================== Lesson bottom row — declutter =================== */
.ctl-top{ gap:8px; }
.langtoggle .seg{ font-size:12px; padding:6px 12px; }
.levelselect{ font-size:12px; padding:6px 10px; color:var(--muted); }

/* "Your journey" → sentence case */
.home-path .lessons-head{ text-transform:none; }

/* ============== Streaming chat: typing dots + speaker loading ============ */
.stream-en{ min-height:20px; }
.typing{ display:inline-flex; gap:5px; align-items:center; padding:2px 0; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.4; animation:typingDot 1s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typingDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:.9; transform:translateY(-3px); } }
.spkbtn.loading{ opacity:.55; pointer-events:none; animation:spkPulse 1s infinite ease-in-out; }
@keyframes spkPulse{ 50%{ opacity:.9; } }

/* ===================== Mascot — sits on a light disc ==================== */
/* The gold cat would vanish on the old gold disc; give it a light backing. */
.topbar .avatar{ background:#fff; }
.cardhead .mini-avatar{ background:var(--primary-soft); }
.avatar .mascot-emoji .ti{ color:var(--gold-deep); }
.cardhead .mini-avatar .ti{ color:var(--gold-deep); font-size:15px; }

/* ============== Mobile lesson layout (iOS) — compact bar ================ */
/* The teaching card scrolls fully into view; the action bar stays compact at the bottom. */
.controls{ position:relative; gap:8px; padding-top:9px; }
.ctl-top{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:nowrap; }
.langtoggle .seg{ font-size:13px; padding:6px 13px; min-width:38px; }
.ctl-gear{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:10px; cursor:pointer; }
.ctl-gear .ti{ font-size:18px; }
.ctl-gear:active{ transform:scale(.95); }
.ctl-menu{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% - 2px);
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:12px; display:flex; flex-direction:column; gap:10px; min-width:230px; z-index:30; }
.ctl-menu.hidden{ display:none; }
.ctl-menu-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:600; color:var(--muted); }
.ctl-menu .levelselect{ font-size:13px; }
.ctl-menu .convbtn{ width:100%; justify-content:center; }
/* Lesson scroll area always clears the bottom bar (belt-and-braces with the in-flow bar). */
.lesson-transcript{ padding-bottom:18px; scroll-padding-bottom:18px; }
.controls .hint{ font-size:11px; margin:0; }