/* © Dr. Chadi Chahdi. IEP099 Grammar Booklet, Second Edition, and the Writing Center. Designed and written by Dr. Chadi Chahdi. */
/* IEP099 Grammar Booklet — interactive practice site. Same palette/fonts as the print booklet's own design system. */
:root{
  --navy:#121C40; --navy-2:#27325C; --ink:#161E38; --ink-2:#414B69; --mute:#6E7791; --rule:#D5DAE6; --hair:#E6E9F1; --tint:#F3F4F8; --paper:#FBFAF6; --surface:#FFFFFF;
  --teal:#07B8A5; --teal-d:#007A6E; --teal-t:#E6F6F3;
  --amber:#FCAD1B; --amber-d:#8F5B00; --amber-t:#FFF4D8;
  --red:#B3372F; --red-t:#FCEEEC;
  --ok-bg:var(--teal-t); --ok-bd:#9FDCD2; --ok-ink:var(--teal-d);
  --bad-bg:var(--red-t); --bad-bd:#EBBAB4; --bad-ink:var(--red);
  --serif:'Newsreader',Georgia,serif; --sans:'Source Sans 3','Segoe UI',Arial,sans-serif;
  color-scheme: light;
}
/* Dark-mode note: an earlier pilot version of this page redefined every color token for dark mode except
   --surface (cards/exercise boxes), which silently stayed white. Text inside those boxes then used the
   dark palette's near-white ink color on a white box, so it read as missing/invisible. Every token below
   is now redefined in both dark blocks — this is the fix for that. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#0B1230; --navy-2:#1B2550; --ink:#EDEFF7; --ink-2:#C7CCE0; --mute:#9AA2C0; --rule:#33406B; --hair:#232C55; --tint:#161E44; --paper:#0B1230; --surface:#121A3E;
    --teal:#1FD9C4; --teal-d:#E0A800; --teal-t:#10312F;
    --amber:#FFC24D; --amber-d:#FFD98A; --amber-t:#332608;
    --red:#FF8A7A; --red-t:#3A1A1C;
    --ok-bg:var(--teal-t); --ok-bd:#1FD9C4; --ok-ink:#7CF3E6;
    --bad-bg:var(--red-t); --bad-bd:#FF8A7A; --bad-ink:#FFB3A8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --navy:#0B1230; --navy-2:#1B2550; --ink:#EDEFF7; --ink-2:#C7CCE0; --mute:#9AA2C0; --rule:#33406B; --hair:#232C55; --tint:#161E44; --paper:#0B1230; --surface:#121A3E;
  --teal:#1FD9C4; --teal-d:#E0A800; --teal-t:#10312F;
  --amber:#FFC24D; --amber-d:#FFD98A; --amber-t:#332608;
  --red:#FF8A7A; --red-t:#3A1A1C;
  --ok-bg:var(--teal-t); --ok-bd:#1FD9C4; --ok-ink:#7CF3E6;
  --bad-bg:var(--red-t); --bad-bd:#FF8A7A; --bad-ink:#FFB3A8;
  color-scheme: dark;
}
/* High contrast is a fixed, guaranteed-readable black-on-white palette — it deliberately overrides the
   light/dark choice (same specificity as the theme rules above, but later in source, so it always wins). */
:root[data-contrast="high"]{
  --navy:#000000; --navy-2:#000000; --ink:#000000; --ink-2:#000000; --mute:#1A1A1A; --rule:#000000; --hair:#000000; --tint:#FFFFFF; --paper:#FFFFFF; --surface:#FFFFFF;
  --teal:#00695C; --teal-d:#00695C; --teal-t:#DFF2EF;
  --amber:#7A4D00; --amber-d:#7A4D00; --amber-t:#FFF1D9;
  --red:#8B0000; --red-t:#FFE2E2;
  --ok-bg:var(--teal-t); --ok-bd:#00695C; --ok-ink:#00695C;
  --bad-bg:var(--red-t); --bad-bd:#8B0000; --bad-ink:#8B0000;
  color-scheme: light;
}
/* Text size: a device-wide zoom rather than rewriting every font-size in this stylesheet to rem. */
:root[data-size="lg"] body{zoom:1.15}
:root[data-size="xl"] body{zoom:1.3}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 64px}
a{color:var(--teal-d)}
::selection{background:var(--amber-t);color:var(--ink)}

/* ---------- sticky status bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);color:#fff;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.bar a.home{color:#fff;text-decoration:none;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px;opacity:.9}
.bar a.home:hover{opacity:1}
.bar a.home svg{width:14px;height:14px}
.bar-sub{font:400 13px/1 var(--sans);color:#C9CEE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-spacer{flex:1;min-width:0}
.bar-score{font:700 13px/1 var(--sans);color:#fff;background:rgba(255,255,255,.14);padding:6px 10px;border-radius:20px;white-space:nowrap;flex:none}
.bar-score.zero{opacity:.55}
.bar-score.timer-urgent{background:var(--red);color:#fff;opacity:1}

/* ---------- display settings (text size / contrast / theme) ---------- */
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;flex:none;padding:0}
.a11y-btn[hidden]{display:none}
.a11y-btn svg{width:15px;height:15px}
.a11y-btn:hover{background:rgba(255,255,255,.22)}
.a11y-panel{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--hair);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.22);padding:12px 14px;min-width:220px}
.a11y-panel[hidden]{display:none}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.a11y-row+.a11y-row{border-top:1px solid var(--hair)}
.a11y-label{font:600 12.5px/1 var(--sans);color:var(--ink-2)}
.a11y-opts{display:flex;gap:5px}
.a11y-opts button{font:600 12px/1 var(--sans);padding:6px 9px;border-radius:6px;border:1.3px solid var(--rule);background:var(--tint);color:var(--ink-2);cursor:pointer}
.a11y-opts button:hover{border-color:var(--teal)}
.a11y-opts button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:480px){
  .a11y-panel{left:16px !important;right:16px !important;width:auto}
}
.bar-link{display:inline-flex;align-items:center;gap:5px;color:#C9CEE6;text-decoration:none;font:600 13px/1 var(--sans);white-space:nowrap;flex:none}
.bar-link svg{width:13px;height:13px;flex:none}
.bar-link:hover{color:#fff}
.bar-user{display:inline-flex;align-items:center;gap:5px;color:#C9CEE6;font:600 13px/1 var(--sans);white-space:nowrap;flex:none;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.bar-user[hidden]{display:none}
.bar-user svg{width:13px;height:13px;flex:none}
.bar-user span{overflow:hidden;text-overflow:ellipsis}

/* ---------- hero ---------- */
.hero{padding:36px 0 22px}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);margin:0 0 10px}
h1{font:600 40px/1.08 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;text-wrap:balance}
.sub{font:italic 500 19px/1.35 var(--serif);color:var(--ink-2);margin:0 0 4px}
.rule{height:3px;width:64px;background:var(--amber);border-radius:2px;margin:20px 0 0}

/* ---------- exercise block ---------- */
.ex{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:22px 22px 20px;margin-bottom:20px}
.ex-tag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy);padding:5px 10px;border-radius:20px;margin-bottom:9px}
.ex-title{font:600 20px/1.2 var(--serif);color:var(--ink);margin:0 0 6px}
.ex-instr{font:400 14.5px/1.5 var(--sans);color:var(--ink-2);margin:0 0 10px}
.ex-instr b{color:var(--ink)}
.ex-eg{font:italic 500 14.5px/1.5 var(--serif);color:var(--ink);background:var(--tint);border-radius:8px;padding:8px 12px;margin:0 0 14px}
.ex-eg b{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--mute);margin-right:6px}
.ex-bank{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.ex-bank span{font:600 12.5px/1 var(--sans);color:var(--teal-d);background:var(--teal-t);padding:6px 10px;border-radius:20px}

.item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--hair)}
.item:first-of-type{border-top:none;padding-top:2px}
.item .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal-t);color:var(--teal-d);font:700 12.5px/24px var(--sans);text-align:center;margin-top:1px}
.item .body{flex:1;min-width:0}
.item .q{font:400 15.5px/1.6 var(--sans);color:var(--ink)}
.item .q b{color:var(--ink)}
.item.checked.correct{background:var(--ok-bg)}
.item.checked.incorrect{background:var(--bad-bg)}
.item.checked{border-radius:9px;margin:0 -10px;padding:10px}
.item.checked + .item{border-top-color:transparent}

input.blank{font:600 15.5px/1.4 var(--sans);color:var(--ink);background:var(--tint);border:1.5px solid var(--rule);border-radius:7px;padding:4px 9px;min-width:70px;text-align:center}
input.blank:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.item.checked.correct input.blank{border-color:var(--ok-bd);background:var(--surface)}
.item.checked.incorrect input.blank{border-color:var(--bad-bd);background:var(--surface);text-decoration:line-through;text-decoration-color:var(--bad-ink)}

.choice{display:inline-flex;gap:0;border:1.5px solid var(--rule);border-radius:8px;overflow:hidden;vertical-align:middle;margin:0 3px}
.choice button{font:600 14.5px/1 var(--sans);color:var(--ink-2);background:var(--surface);border:0;padding:8px 12px;cursor:pointer}
.choice button + button{border-left:1.5px solid var(--rule)}
.choice button.sel{background:var(--teal);color:var(--navy);border-color:var(--teal)}
.choice button:hover:not(.sel){background:var(--tint)}
.item.checked .choice button.right{background:var(--ok-bg);color:var(--ok-ink);font-weight:700}
.item.checked .choice button.sel.wrong{background:var(--bad-bg);color:var(--bad-ink);text-decoration:line-through}

.choice.mc{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;border:0;border-radius:0;overflow:visible}
.choice.mc button{border-radius:8px;border:1.5px solid var(--rule);padding:8px 12px}

input.rewrite{display:block;width:100%;font:400 15px/1.5 var(--sans);color:var(--ink);background:var(--tint);border:1.5px solid var(--rule);border-radius:8px;padding:9px 12px;margin-top:8px}
input.rewrite[hidden]{display:none}
input.rewrite:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.item.checked.correct input.rewrite{border-color:var(--ok-bd);background:var(--surface)}
.item.checked.incorrect input.rewrite{border-color:var(--bad-bd);background:var(--surface)}
.model{font:400 14px/1.5 var(--sans);color:var(--ok-ink);margin-top:6px;display:none}
.item.checked.incorrect .model{display:block}

.rw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rw-row .q{flex:1;min-width:0}
.xt-picker{display:flex;gap:10px;flex:none}
button.xt-btn{width:38px;height:38px;font:700 16px/1 var(--sans);border-radius:8px;cursor:pointer;border:1.5px solid transparent}
button.xt-btn.x{background:var(--bad-bg);color:var(--bad-ink)}
button.xt-btn.t{background:var(--ok-bg);color:var(--ok-ink)}
button.xt-btn.x.sel{border-color:var(--bad-ink)}
button.xt-btn.t.sel{border-color:var(--ok-ink)}
button.xt-btn:hover{filter:brightness(0.96)}
.model b{font-weight:700}

input.code{font:700 15px/1 var(--sans);color:var(--ink);background:var(--tint);border:1.5px solid var(--rule);border-radius:7px;width:44px;height:36px;text-align:center;text-transform:uppercase;margin-left:8px}
input.code.long{width:min(100%,18em);text-align:left;text-transform:none;font-weight:600;padding:0 12px}
input.code:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.item.checked.correct input.code{border-color:var(--ok-bd);background:var(--surface)}
.item.checked.incorrect input.code{border-color:var(--bad-bd);background:var(--surface)}

select.match{font:600 14.5px/1 var(--sans);color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:7px;padding:7px 10px;margin-left:8px;max-width:220px}
select.match:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.item.checked.correct select.match{border-color:var(--ok-bd)}
.item.checked.incorrect select.match{border-color:var(--bad-bd)}

.hint{background:var(--amber-t);border:1px solid var(--amber);border-radius:10px;padding:12px 14px;margin-top:14px}
.hint-h{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-d);margin-bottom:7px}
.hint-row{font:400 14px/1.5 var(--sans);color:var(--ink);margin:0 0 4px}
.hint-row:last-child{margin-bottom:0}
.hint-row b{color:var(--ink)}
.hint-eg{font:italic 500 13.5px/1.4 var(--serif);color:var(--ink-2)}
.time-panel{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:18px;margin-top:0}
.time-panel[hidden]{display:none}

.ex-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
/* Instructor-built sets check everything at once on Submit, not per activity — each exercise's own
   Check/Try again/score row stays hidden until #setMain gets the .submitted class. */
#setMain:not(.submitted) #setList .ex-actions{display:none}
button.btn{display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1 var(--sans);color:#fff;background:var(--navy-2);border:0;border-radius:9px;padding:11px 16px;cursor:pointer}
button.btn[hidden]{display:none}
button.btn svg{width:15px;height:15px;flex:none}
button.btn:hover{filter:brightness(1.2)}
button.btn.ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--rule)}
button.btn.ghost:hover{background:var(--tint)}
button.btn.accent{background:var(--teal);color:var(--navy)}
button.btn.accent:hover{background:var(--teal-d);color:#fff}
button.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ex-score{font:700 13.5px/1 var(--sans);color:var(--mute)}
.ex-score.done{color:var(--teal-d)}

/* ---------- topic footer nav ---------- */
.topnav{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hair)}
.topnav a{display:block;text-decoration:none;color:var(--ink-2);font:600 14px/1.4 var(--sans);max-width:46%}
.topnav a b{display:block;color:var(--ink);font:600 15.5px/1.3 var(--serif)}
.topnav a.next{text-align:right;margin-left:auto}
.topnav a:hover b{color:var(--teal-d)}

footer.note{margin-top:30px;padding-top:18px;border-top:1px solid var(--hair);font:400 13px/1.6 var(--sans);color:var(--mute)}
p.note{font:400 13.5px/1.5 var(--sans);color:var(--mute)}
p.credit{margin:18px 0 0;font:600 12px/1.5 var(--sans);color:var(--mute);text-align:center}

/* ---------- my progress page ---------- */
.progress-settings{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 6px}
.progress-settings label{flex:1;min-width:200px;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.progress-settings label.narrow{flex:0 0 90px;min-width:90px}
.progress-settings input{display:block;width:100%;margin-top:7px;font:400 15px/1.4 var(--sans);color:var(--ink);background:var(--tint);border:1.5px solid var(--rule);border-radius:8px;padding:10px 12px}
.progress-settings input:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.progress-list{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:6px 18px;margin-top:20px}
.progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.progress-row:first-child{border-top:none}
.progress-row.progress-total{font-weight:700}
.progress-row.progress-total .pr-title b{color:var(--ink)}
.pr-title{display:flex;flex-direction:column;min-width:0}
.pr-title b{font:600 15px/1.3 var(--sans);color:var(--ink)}
.pr-title span{font:400 12.5px/1.3 var(--sans);color:var(--mute);margin-top:2px}
.pr-score{flex:none;font:700 13.5px/1 var(--sans);color:var(--mute);background:var(--tint);padding:6px 10px;border-radius:20px}
.pr-score.full{color:var(--teal-d);background:var(--teal-t)}

/* ---------- table of contents ---------- */
.toc-strand{margin:44px 0 10px}
.toc-strand h2{font:600 24px/1.2 var(--serif);color:var(--ink);margin:0 0 3px}
.toc-strand p{font:400 14px/1.4 var(--sans);color:var(--mute);margin:0}
.toc-unit{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:16px 18px;margin-top:14px}

/* ---------- instructor builder: collapsible unit list ---------- */
.builder-unit{background:var(--surface);border:1px solid var(--hair);border-radius:14px;margin-top:10px;overflow:hidden}
.builder-unit summary{display:flex;align-items:center;gap:9px;padding:14px 18px;cursor:pointer;list-style:none;font:600 15.5px/1.2 var(--serif);color:var(--ink)}
.builder-unit summary::-webkit-details-marker{display:none}
.builder-chevron{display:flex;flex:none;color:var(--mute);transition:transform .15s}
.builder-chevron svg{width:16px;height:16px}
.builder-unit[open] .builder-chevron{transform:rotate(90deg)}
.builder-badge{margin-left:auto;font:700 11.5px/1 var(--sans);color:var(--teal-d);background:var(--teal-t);padding:5px 9px;border-radius:20px;flex:none}
.builder-badge:empty{display:none}
.builder-body{padding:0 18px 14px}
.builder-topic{background:var(--tint);border:1px solid var(--hair);border-radius:10px;margin:8px 0 0}
.builder-topic summary{padding:10px 14px;font:700 12.5px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink-2)}
.builder-topic .builder-body{padding:2px 14px 10px}
.qr-box{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.qr-box img{width:160px;height:160px;border-radius:8px;border:1px solid var(--hair);background:#fff;padding:8px}
.toc-unit-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.toc-unit-h .u{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--teal-d);padding:5px 9px;border-radius:20px;flex:none}
.toc-unit-h h3{font:600 19px/1.25 var(--serif);color:var(--ink);margin:0}
.toc-topics{display:flex;flex-direction:column;gap:2px}
.toc-topic{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;text-decoration:none;color:var(--ink)}
.toc-topic:hover{background:var(--tint)}
.toc-topic .tt{flex:1;min-width:0}
.toc-topic .tt b{display:block;font:600 15.5px/1.3 var(--sans);color:var(--ink)}
.toc-topic .tt span{font:400 13px/1.3 var(--sans);color:var(--mute)}
.toc-topic .count{flex:none;font:700 11.5px/1 var(--sans);color:var(--teal-d);background:var(--teal-t);padding:5px 8px;border-radius:20px}
.toc-topic .arrow{flex:none;color:var(--mute);width:16px;height:16px}

.home-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 16px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;text-decoration:none;color:var(--ink)}
.home-card:hover{border-color:var(--teal);background:var(--tint)}
.home-card svg{width:34px;height:34px;color:var(--teal-d)}
.home-card b{font:600 18px/1.2 var(--serif);color:var(--ink)}
.home-card span{font:400 13px/1.4 var(--sans);color:var(--mute)}
@media (max-width:480px){
  .home-card{padding:22px 12px}
}

.hero-stats{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font:600 26px/1 var(--serif);color:var(--ink)}
.hero-stats span{font:400 12.5px/1.4 var(--sans);color:var(--mute);margin-top:3px}

@media (max-width:480px){
  .wrap{padding:0 16px 48px}
  h1{font-size:28px}
  .sub{font-size:16px}
  .bar-sub{display:none}
  .bar{padding:10px 16px}
  .ex{padding:16px 14px 14px;border-radius:12px}
  .ex-title{font-size:18px}
  .item .q,.item .q b{font-size:16px}
  .choice button{padding:10px 13px;font-size:15px}
  input.blank{min-width:52px;padding:8px 10px;font-size:16px}
  input.rewrite{font-size:16px;padding:11px 12px}
  input.code{width:42px;height:42px;font-size:16px}
  select.match{max-width:100%;padding:9px 10px;font-size:15px;margin-left:0;margin-top:8px;display:block}
  button.btn{padding:12px 16px;font-size:14px}
  .ex-actions{gap:8px 10px}
  .cards{gap:10px}
  .hero-stats{gap:16px}
  .toc-topic{padding:12px 8px}
  .progress-settings{gap:10px}
  .progress-settings input{padding:11px 12px;font-size:16px}
  .progress-list{padding:4px 14px}
}

/* ---------- engagement layer: streak, rings, plan panel, review and speaking pages ---------- */
.bar-streak{display:inline-flex;align-items:center;gap:4px;font:700 12.5px/1 var(--sans);color:#FFC24D;white-space:nowrap;flex:none}
.bar-streak[hidden]{display:none}
.bar-streak svg{width:14px;height:14px;flex:none}

.after-check{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--tint)}
.after-msg{margin:0;font:600 14px/1.4 var(--sans);color:var(--ink)}
.next-btn{display:inline-flex;align-items:center;font:700 13.5px/1 var(--sans);color:var(--navy);background:var(--teal);padding:11px 16px;border-radius:9px;text-decoration:none;white-space:nowrap}
.next-btn:hover{filter:brightness(1.1)}
.next-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
canvas.confetti{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9998}

.unit-progress{margin:8px 0 0;font:600 13.5px/1.4 var(--sans);color:var(--teal-d)}
.unit-progress[hidden]{display:none}

.ring{position:relative;flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}
.ring-svg{position:absolute;top:0;left:0;width:100%;height:100%}
.ring-bg{fill:none;stroke:var(--hair);stroke-width:3.5}
.ring-fg{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round}
.ring-check{fill:none;stroke:var(--teal-d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ring-pct{position:relative;font:700 10.5px/1 var(--sans);color:var(--ink-2)}
.mastered-tag{flex:none;font:700 11px/1 var(--sans);letter-spacing:.04em;color:var(--amber-d);background:var(--amber-t);padding:5px 8px;border-radius:20px}

.plan{margin:22px 0 4px;padding:16px 18px;border:1px solid var(--hair);border-radius:14px;background:var(--surface)}
.plan[hidden]{display:none}
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--hair)}
.plan-row:first-child{border-top:none;padding-top:0}
.plan-row[hidden]{display:none}
.plan-label{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.plan-text{font:400 15px/1.45 var(--sans);color:var(--ink)}
.plan-text b{font-weight:700}
.plan-chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.chip{font:700 12px/1 var(--sans);padding:7px 11px;border-radius:20px;border:1.5px solid var(--rule);background:transparent;color:var(--ink-2);cursor:pointer}
.chip.on{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.plan-link{font:700 13px/1 var(--sans);color:var(--teal-d);text-decoration:none;white-space:nowrap}
.plan-link:hover{text-decoration:underline}
.plan-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:14px;border-top:1px solid var(--hair)}
a.plan-btn{display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1 var(--sans);padding:11px 16px;border-radius:9px;text-decoration:none;color:var(--navy);background:var(--teal)}
a.plan-btn.ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--rule)}
a.plan-btn:hover{filter:brightness(1.08)}
a.plan-btn.ghost:hover{background:var(--tint);filter:none}
a.plan-btn svg{width:15px;height:15px;flex:none}

.pu-block{margin-top:22px}
.pu-block h2{font:600 20px/1.25 var(--serif);color:var(--ink);margin:0 0 4px}
.pu-group{margin-top:16px;padding:14px 16px;border:1px solid var(--hair);border-radius:14px;background:var(--surface)}
.pu-group h3{font:600 16.5px/1.3 var(--serif);color:var(--ink);margin:0}
.pu-ready{font:400 13.5px/1.4 var(--sans);color:var(--ink-2);margin:3px 0 6px}
.pu-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.pu-row:hover .pu-title b{color:var(--teal-d)}
.pu-title{flex:1;min-width:0}
.pu-title b{display:block;font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.pu-title span{font:400 12.5px/1.3 var(--sans);color:var(--mute)}
.pu-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

#reviewList .ex-actions{display:none}
.rv-main .ex{margin-top:6px}
.rv-summary{margin-top:18px;padding:16px 18px;border:1px solid var(--ok-bd);border-radius:12px;background:var(--ok-bg);color:var(--ok-ink)}
.rv-summary b{font:600 18px/1.3 var(--serif);display:block}
.rv-summary p{margin:4px 0 0;font:400 14.5px/1.5 var(--sans)}
.rv-empty{margin-top:16px;padding:18px;border:1px dashed var(--rule);border-radius:12px;color:var(--ink-2);font:400 15px/1.5 var(--sans)}
.rv-empty[hidden],.rv-summary[hidden]{display:none}

.sp-controls{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.sp-controls label{flex:1;min-width:150px;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sp-controls select{display:block;width:100%;margin-top:7px;font:400 15px/1.4 var(--sans);color:var(--ink);background:var(--tint);border:1.5px solid var(--rule);border-radius:8px;padding:10px 12px}
.sp-card{margin-top:18px;padding:22px 22px 20px;border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.sp-theme{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
.sp-topic{font:600 24px/1.3 var(--serif);color:var(--ink);margin:10px 0 12px}
.sp-tip{display:inline-block;font:600 13.5px/1.4 var(--sans);color:var(--amber-d);background:var(--amber-t);padding:7px 11px;border-radius:9px}
.sp-timer{margin-top:18px;text-align:center}
.sp-phase{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sp-clock{font:700 56px/1.1 var(--serif);color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.sp-clock.speak{color:var(--teal-d)}
.sp-clock.low{color:var(--red)}
.sp-bar{height:6px;border-radius:3px;background:var(--hair);margin-top:12px;overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .4s linear}
.sp-after{margin-top:18px}
.sp-after[hidden],.sp-timer[hidden]{display:none}
.sp-after h3{font:600 17px/1.3 var(--serif);color:var(--ink);margin:0 0 6px}
.sp-after ol,.sp-after ul{margin:0 0 14px;padding-left:20px;font:400 15px/1.6 var(--sans);color:var(--ink)}
.sp-check label{display:flex;align-items:flex-start;gap:9px;padding:4px 0;font:400 14.5px/1.45 var(--sans);color:var(--ink);cursor:pointer}
@media (max-width:640px){
  .sp-topic{font-size:21px}
  .sp-clock{font-size:46px}
  .plan{padding:14px 14px}
}

/* ---- speaking trainer ---- */
.spk-controls{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 16px}
.spk-field{display:flex;flex-direction:column;gap:5px;font:600 12.5px var(--sans);color:var(--mute);flex:1 1 220px}
.spk-field select{font:400 15px var(--sans);padding:9px 10px;border:1px solid var(--rule);border-radius:9px;background:var(--surface);color:var(--ink)}
.spk-card{border:1px solid var(--rule);border-radius:14px;background:var(--surface);padding:22px 22px 20px}
.spk-theme{margin:0;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d)}
.spk-prompt{margin:10px 0 8px;font:600 25px/1.3 var(--serif);color:var(--ink)}
.spk-clock{display:flex;align-items:baseline;gap:14px;margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--tint)}
.spk-clock[hidden],.spk-follow[hidden]{display:none}
.spk-phase{font:700 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.spk-time{font:600 40px/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.spk-clock.speak .spk-time{color:var(--teal-d)}
.spk-clock.urgent .spk-time{color:#B3372F}
.spk-follow{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.spk-follow-h{margin:0 0 6px;font:700 13px var(--sans);color:var(--ink-2)}
.spk-follow ul{margin:0;padding-left:20px;font:400 15.5px/1.7 var(--sans)}

/* ---- plan panel polish ---- */
.plan-go{margin-top:8px}
.plan-streak{margin:12px 0 0;font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.plan-streak[hidden]{display:none}
.plan-more{display:none}
@media (max-width:600px){
  .plan-topics{display:none}
  .plan:not(.open) #planNudge{display:none}
  .plan-more{display:block;margin:10px 0 0;padding:6px 0;background:none;border:0;font:700 13px/1 var(--sans);color:var(--teal-d);cursor:pointer}
  .plan-actions{gap:8px}
  a.plan-btn{flex:1 1 calc(50% - 4px);justify-content:center;padding:12px 10px}
  a.plan-btn:first-child{flex-basis:100%}
  .bar-link{font-size:0;gap:0}
  .bar-link svg{width:18px;height:18px}
  .bar{gap:10px}
}

/* ---- welcome page: Student · Writing Center · Instructor ---- */
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.home-card.wc{border-color:var(--amber);border-width:2px;background:var(--amber-t)}
.home-card.wc:hover{background:var(--amber-t);filter:brightness(1.04);border-color:var(--amber)}
.home-card.wc svg{color:var(--amber-d)}
@media (max-width:640px){
  .home-grid{grid-template-columns:1fr 1fr}
  .home-card.wc{grid-column:1/-1;order:-1}
}

/* welcome page: Writing Center progress mark */
.home-card.wc{position:relative}
.home-ring{position:absolute;top:10px;right:10px;width:34px;height:34px;display:grid;place-items:center}
.home-ring[hidden]{display:none}
.home-ring svg{position:absolute;inset:0;width:100%;height:100%}
.home-ring svg.no-icon{width:100%;height:100%;color:inherit}
.home-ring .bg{fill:none;stroke:rgba(0,0,0,.12);stroke-width:4}
.home-ring .fg{fill:none;stroke:var(--amber-d);stroke-width:4;stroke-linecap:round}
.home-ring.full .bg{fill:var(--amber-d);stroke:var(--amber-d)}
.home-ring .tick{fill:none;stroke:var(--amber-t);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.home-ring b{position:relative;font:700 12px var(--sans);color:var(--amber-d)}

/* Beta tag on the welcome-page Writing Center card */
.beta-tag{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:999px;background:var(--amber-d);color:var(--amber-t);font:800 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.home-card.wc .beta-tag{color:#fff;background:#7A4D00;font:800 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home-card.wc .beta-tag{background:#FFC24D;color:#2B1E00}}
:root[data-theme="dark"] .home-card.wc .beta-tag{background:#FFC24D;color:#2B1E00}

/* welcome page: the Grammar Booklet card gets the same progress ring, in teal */
.home-card{position:relative}
.home-card.gb .home-ring .fg{stroke:var(--teal-d)}
.home-card.gb .home-ring.full .bg{fill:var(--teal-d);stroke:var(--teal-d)}
.home-card.gb .home-ring .tick{stroke:var(--teal-t)}
.home-card.gb .home-ring b{color:var(--teal-d)}

/* ---- one menu for the top bar ---- */
.bar-menu{position:relative;flex:none;display:inline-flex}
.bar-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.bar-menu-btn:hover{background:rgba(255,255,255,.24)}
.bar-menu-btn svg{width:17px;height:17px}
.bar-menu-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:60;min-width:220px;max-width:calc(100vw - 24px);display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.bar-menu-panel[hidden]{display:none}
.bar-menu-panel [hidden]{display:none!important}
.bar-menu-panel>*{display:flex!important;align-items:center;gap:10px;width:100%;max-width:none!important;padding:11px 12px;border:0;border-radius:8px;background:none;color:var(--ink)!important;font:600 14.5px/1.2 var(--sans)!important;text-align:left;text-decoration:none;cursor:pointer;white-space:normal}
.bar-menu-panel>a:hover,.bar-menu-panel>button:hover{background:var(--tint)}
.bar-menu-panel svg{width:17px!important;height:17px!important;flex:none;color:var(--ink-2)}
.bar-menu-panel .bar-streak,.bar-menu-panel .bar-user{cursor:default}
.bar-menu-panel .bar-streak svg{color:var(--amber-d)}
.bar-menu-panel .bar-user span{overflow:visible;text-overflow:clip}
.a11y-ghost{position:absolute;right:12px;top:50%;width:28px;height:28px;margin-top:-14px;opacity:0;pointer-events:none}

/* ---- phone polish ---- */
@media (max-width:480px){
  /* the top bar stays on one line (practice sets keep wrapping, they carry a timer and instructor controls) */
  .bar:not(:has(#timerBadge)){flex-wrap:nowrap}
  .bar{gap:8px;padding:9px 14px}
  .bar a.home{flex:none}
  .bar .bar-score{font-size:12px;padding:6px 10px;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
  .bar-badges .bb-w{display:none}
  .bar-menu-btn{width:34px;height:34px}
  /* small headings that wrap get room to breathe */
  .eyebrow{line-height:1.45}
  /* unit rows: the title gets the full width, the item count sits underneath, no chevron */
  .toc-unit{padding:14px 10px}
  .toc-topic{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center;padding:12px 6px}
  .toc-topic .ring{grid-row:1 / span 3}
  .toc-topic .tt,.toc-topic .count,.toc-topic .mastered-tag{grid-column:2}
  .toc-topic .count,.toc-topic .mastered-tag{justify-self:start}
  .toc-topic .arrow{display:none}
  /* comfortable thumb targets, and room above the phone's home bar */
  .btn,button.btn,a.btn{min-height:46px}
  .wrap{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){
  /* practice sets carry a timer and the instructor's time button: the back link shrinks to its arrow so the bar fits on one line */
  .bar:has(#timerBadge){flex-wrap:nowrap}
  .bar:has(#timerBadge) a.home{font-size:0;gap:0}
  .bar:has(#timerBadge) a.home svg{width:18px;height:18px}
  .bar:has(#timerBadge) .bar-score{max-width:38vw}
}

/* progress circles: the empty track must be visible on the dark theme too, and a bit larger on phones */
.home-ring .bg{stroke:var(--rule);stroke-opacity:1}
.home-ring .fg{stroke-width:4.5}
.home-ring{width:38px;height:38px}
.home-ring b{font-size:13px}
@media (max-width:480px){ .home-ring{top:12px;right:12px} }


/* The praise words: dark yellow */
.after-lead{color:#8A5A00;font-weight:700}
:root[data-theme="dark"] .after-lead{color:#E0A800}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .after-lead{color:#E0A800}}

/* Instructor access box (opened from the menu) */
.inst-sheet{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(5,8,22,.66)}
.inst-card{position:relative;width:min(340px,100%);padding:24px 20px 20px;border-radius:18px;background:var(--surface);color:var(--ink);border:1.5px solid var(--hair);display:grid;gap:10px}
.inst-card h3{margin:0;font:700 19px var(--sans)}.inst-card p{margin:0;font:400 14.5px/1.45 var(--sans);color:var(--ink-2)}
.inst-card input{width:100%;box-sizing:border-box;padding:12px;border:1.5px solid var(--hair);border-radius:10px;background:var(--tint);color:var(--ink);font:16px var(--sans)}
.inst-go{min-height:46px;border:0;border-radius:999px;background:var(--amber);color:#1a1a2e;font:700 15px var(--sans);cursor:pointer}
.inst-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:var(--tint);color:var(--ink);font:400 22px/1 var(--sans);cursor:pointer}
.inst-card .inst-msg{min-height:1.2em;font-size:13.5px}