/* ============================================================
   Harf design system (design/REDESIGN.md section 4, redesigned per
   design/proposals/PROPOSAL.md)

   ONE file for every screen. Two styles share one DOM and differ by
   tokens and a few [data-style] rules:
     <html data-style="textbook">   pages on a desk, booklet tabs, pen marks
     <html data-style="quiet">      a page of text, hairlines, footnotes
   Each has a light and a dark theme: <html data-theme="light|dark">
   (always resolved by base.html; "system" follows the OS live).

   Colour values live in the token blocks and nowhere else. The old
   token names (--cyan, --rose, --edge ...) are kept as the live
   tokens so every screen follows without edits; --accent, --wrong,
   --right are their readable aliases.

   Order: tokens (4 blocks), base and type, shell, components,
   Write (kept), motion, [data-style="quiet"] differences, then the
   two media blocks at the end of the file.
   ============================================================ */

/* ---- tokens: textbook, light (the default) ---------------------------- */
:root{
  --canvas:#f3eee3; --card:#fffdf8; --shell:#f8f3e8;
  --ink:#1f2430; --ink-2:#444b59; --muted:#6f6b63; --faint-2:#857f74;
  --faint:#b8b1a4;                 /* decorative only: never text */
  --accent:#2a4f9e; --accent-wash:#e6edfb; --on-accent:#ffffff;
  --right:#237a4b; --right-wash:#e2f2e9;
  --wrong:#b5261e; --wrong-wash:#fbe7e4;
  --amber:#8a6508; --amber-wash:#fbf1d6;
  --violet:#5c47b8; --violet-wash:#ebe7fa;
  --edge:#e1d9c6; --rule:#ece5d5;
  --ghost:#ebe5d8; --ghost-ink:#3e4452;
  --strike:#a39d92;
  --hi:#fdf0a6;                    /* the highlighter: evidence, the changed word */
  --shadow-tile:0 1px 2px rgba(31,36,48,.05),0 8px 24px -18px rgba(31,36,48,.25);
  --shadow-dock:0 -6px 30px -10px rgba(31,36,48,.35);
  --focus:0 0 0 3px rgba(42,79,158,.3);
  --scrim:rgba(31,36,48,.45);
  --ink-wash:rgba(31,36,48,.07); --ink-wash-2:rgba(31,36,48,.045);
  --side-bg:#f8f3e8; --side-cur:#ece5d5;
  /* the Write screen's three-colour legend */
  --fix-wash:rgba(35,122,75,.17); --fix-line:#237a4b;
  --tutor-line:#5c47b8; --unfixed-line:#b5261e;
  /* type */
  --f:'IBM Plex Sans',system-ui,sans-serif; --f-head:'Lora',Georgia,serif;
  --fa:'Noto Naskh Arabic','Amiri',serif; --fa-read:'Amiri','Noto Naskh Arabic',serif;
  --fw:400; --fw-label:500; --fw-strong:600; --fw-head:600;
  --a-read:30px; --a-read-lh:2.05;
  --r-card:12px; --r-pill:999px; --r-chip:10px;
}
/* ---- tokens: textbook, dark -------------------------------------------- */
:root[data-theme="dark"]{
  --canvas:#15171b; --card:#1e2127; --shell:#252931;
  --ink:#ebe6da; --ink-2:#c8c2b5; --muted:#9a948a; --faint-2:#8a8478; --faint:#4b5058;
  --accent:#9db7f2; --accent-wash:#243249; --on-accent:#0f1626;
  --right:#7ed39f; --right-wash:#1f3a2b;
  --wrong:#f29a93; --wrong-wash:#43262a;
  --amber:#e8c468; --amber-wash:#3b3320;
  --violet:#bcaef7; --violet-wash:#2f2a4a;
  --edge:#343942; --rule:#2b2f37;
  --ghost:#2b3039; --ghost-ink:#d6d0c4;
  --strike:#6e6a62; --hi:#5b4f1c;
  --shadow-tile:none; --shadow-dock:0 -6px 30px -10px rgba(0,0,0,.6);
  --focus:0 0 0 3px rgba(157,183,242,.4);
  --scrim:rgba(0,0,0,.6);
  --ink-wash:rgba(235,230,218,.09); --ink-wash-2:rgba(235,230,218,.06);
  --side-bg:#1a1d22; --side-cur:#2b3039;
  --fix-wash:rgba(126,211,159,.2); --fix-line:#7ed39f;
  --tutor-line:#bcaef7; --unfixed-line:#f29a93;
}
/* ---- tokens: quiet, light ---------------------------------------------- */
:root[data-style="quiet"]{
  --canvas:#f5f1ea; --card:#fbf8f3; --shell:#f1ece3;
  --ink:#26221c; --ink-2:#4e4840; --muted:#7a7268; --faint-2:#8c8479; --faint:#c2bbb0;
  --accent:#3b6b63; --accent-wash:#e3edea; --on-accent:#ffffff;
  --right:#3a7d44; --right-wash:#e5f1e6;
  --wrong:#a8533a; --wrong-wash:#f7e8e2;
  --amber:#8a6508; --amber-wash:#f8efd8;
  --violet:#6a56b5; --violet-wash:#ece8f8;
  --edge:#e4ddd1; --rule:#ece6db;
  --ghost:#ebe5da; --ghost-ink:#3b6b63;
  --strike:#a39d92; --hi:#e3edea;
  --shadow-tile:none; --shadow-dock:0 -6px 30px -10px rgba(38,34,28,.3);
  --focus:0 0 0 3px rgba(59,107,99,.3);
  --scrim:rgba(38,34,28,.45);
  --ink-wash:rgba(38,34,28,.07); --ink-wash-2:rgba(38,34,28,.045);
  --side-bg:#f5f1ea; --side-cur:#e9e3d8;
  --fix-wash:rgba(58,125,68,.17); --fix-line:#3a7d44;
  --tutor-line:#6a56b5; --unfixed-line:#a8533a;
  --f:'Inter',system-ui,sans-serif; --f-head:'Newsreader',Georgia,serif;
  --fa:'Noto Naskh Arabic',serif; --fa-read:'Scheherazade New','Noto Naskh Arabic',serif;
  --fw-head:500;
  --a-read:34px; --a-read-lh:2;
  --r-card:12px; --r-pill:999px; --r-chip:10px;
}
/* ---- tokens: quiet, dark ----------------------------------------------- */
:root[data-style="quiet"][data-theme="dark"]{
  --canvas:#171511; --card:#1f1c17; --shell:#262219;
  --ink:#ece6da; --ink-2:#cdc5b6; --muted:#9a9285; --faint-2:#8a8478; --faint:#4a453d;
  --accent:#8fc1b7; --accent-wash:#22332f; --on-accent:#10201c;
  --right:#86cf8f; --right-wash:#213626;
  --wrong:#e9a085; --wrong-wash:#3d2a22;
  --amber:#e3c06a; --amber-wash:#38301c;
  --violet:#bfb1f0; --violet-wash:#2d2847;
  --edge:#332f28; --rule:#2a2722;
  --ghost:#2a2620; --ghost-ink:#d6d0c4;
  --strike:#6e6a62; --hi:#2c3f3a;
  --shadow-dock:0 -6px 30px -10px rgba(0,0,0,.6);
  --focus:0 0 0 3px rgba(143,193,183,.4);
  --scrim:rgba(0,0,0,.6);
  --ink-wash:rgba(236,230,218,.09); --ink-wash-2:rgba(236,230,218,.06);
  --side-bg:#171511; --side-cur:#2a2620;
  --fix-wash:rgba(134,207,143,.2); --fix-line:#86cf8f;
  --tutor-line:#bfb1f0; --unfixed-line:#e9a085;
}
/* ---- aliases: the names the screens use ------------------------------- */
:root{
  --cyan:var(--accent); --cyan-wash:var(--accent-wash);
  --green:var(--right); --green-wash:var(--right-wash);
  --rose:var(--wrong); --rose-wash:var(--wrong-wash);
  --white:var(--on-accent);        /* text on --ink / --cyan / --green / --rose / --violet surfaces */
  --on-ink:var(--muted); --on-ink-2:var(--ink-2);
  --dock-h:60px; --side-w:220px; --col-w:720px; --two-w:1120px; --gutter:16px;
  --t-11:11.5px; --t-12:12.5px; --t-14:14px; --t-16:16px; --t-20:20px; --t-24:24px; --t-32:32px;
  --a-14:16px; --a-16:18px; --a-20:22px; --a-24:26px; --a-28:30px; --a-36:38px;
}

/* ---- base ------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--canvas);color:var(--ink);font:var(--fw) 15px/1.5 var(--f);
  -webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--f-head);font-weight:var(--fw-head)}
a{color:var(--accent)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- type scale: English ---------------------------------------------- */
/* .k: a quiet label (sentence case). .t-11 is kept for tags only. */
.k{font-size:var(--t-12);line-height:1.4;font-weight:var(--fw-label);letter-spacing:.01em;color:var(--muted)}
.t-11{font-size:var(--t-11);line-height:1.3;font-weight:var(--fw-strong);letter-spacing:.06em;text-transform:uppercase}
.t-12{font-size:var(--t-12);line-height:1.4}
.t-14{font-size:var(--t-14);line-height:1.5}
.t-16{font-size:var(--t-16);line-height:1.5}
.t-20{font-size:var(--t-20);line-height:1.25;font-weight:var(--fw-head);font-family:var(--f-head)}
.t-24{font-size:var(--t-24);line-height:1.2;font-weight:var(--fw-head);font-family:var(--f-head)}
.t-32{font-size:var(--t-32);line-height:1.1;font-weight:var(--fw-head);font-family:var(--f-head)}

/* ---- type scale: Arabic. The size classes come after .ar so they win. --- */
.ar{font-family:var(--fa);direction:rtl;unicode-bidi:isolate;font-size:var(--a-16);
  line-height:1.7;font-weight:400}
.ar-14{font-size:var(--a-14);line-height:1.7}
.ar-20{font-size:var(--a-20);line-height:1.9}
.ar-24{font-size:var(--a-24);line-height:1.9}
.ar-28{font-family:var(--fa-read);font-size:var(--a-28);line-height:2}
.ar-36{font-family:var(--fa-read);font-size:var(--a-36);line-height:1.5}

/* ---- utilities -------------------------------------------------------- */
.muted{color:var(--muted)} .ink-2{color:var(--ink-2)}
.c-cyan{color:var(--accent)} .c-green{color:var(--right)} .c-rose{color:var(--wrong)}
.c-amber{color:var(--amber)} .c-violet{color:var(--violet)}
.w8{font-weight:var(--fw-strong)} .w7{font-weight:var(--fw-label)}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-lg{display:flex;flex-direction:column;gap:20px}
.row{display:flex;align-items:center;gap:8px}
.row-wrap{display:flex;flex-wrap:wrap;gap:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.spacer{flex:1}
.mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{font-family:var(--f-head);font-style:italic;font-size:15px;line-height:1.4;color:var(--muted)}

/* ---- shell: .app, .main, .col, .two-pane ------------------------------ */
.app{display:flex;flex-direction:column;height:100dvh;min-height:0}
.main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.col{width:100%;max-width:var(--col-w);margin:0 auto;padding:8px var(--gutter) 24px}
.two-pane{width:100%;max-width:var(--col-w);margin:0 auto;padding:8px var(--gutter) 24px;
  display:block}
.pane-side{margin-top:16px}
body.bare .main{display:flex;flex-direction:column}
body.bare .app{margin-left:0}

/* header */
.hdr{flex:none;width:100%;max-width:var(--col-w);margin:0 auto;
  padding:16px var(--gutter) 10px;display:flex;align-items:flex-start;gap:8px}
.hdr.wide{max-width:var(--two-w)}
.hdr-main{flex:1;min-width:0}
.hdr-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hdr-title{font-family:var(--f-head);font-size:30px;line-height:1.15;font-weight:var(--fw-head);letter-spacing:-.01em}
.hdr.has-back .hdr-title{font-size:var(--t-24)}
.hdr-sub{font-size:var(--t-14);line-height:1.4;color:var(--muted);margin-top:4px}
.hdr-right{flex:none;display:flex;align-items:center;gap:8px}
.hdr-back{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-14);
  font-weight:var(--fw-label);color:var(--accent);text-decoration:none}
.hdr-back:hover{text-decoration:underline}
.hdr-x{flex:none;width:44px;height:44px;margin:-6px 0 0 -10px;border:0;border-radius:50%;
  background:none;color:var(--ink-2);font-size:26px;line-height:1;
  display:grid;place-items:center}
/* the (i) button: a 44px hit area around a 32px ghost circle */
.info-btn{flex:none;width:44px;height:44px;margin:-6px -6px 0 0;padding:0;border:0;
  background:none;display:grid;place-items:center;border-radius:50%}
.info-btn span{width:32px;height:32px;border-radius:50%;background:var(--ghost);
  color:var(--ghost-ink);display:grid;place-items:center;font-family:var(--f-head);font-style:italic;
  font-size:var(--t-16);font-weight:var(--fw-head);pointer-events:none}
.info-btn:focus-visible{outline:none}
.info-btn:focus-visible span{box-shadow:var(--focus)}

/* dock (phone) */
.dock{flex:none;position:sticky;bottom:0;z-index:10;display:grid;
  grid-template-columns:repeat(5,1fr);height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:var(--card);
  border-top:1px solid var(--edge)}
.dock a{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;min-width:0;color:var(--muted);text-decoration:none;
  font-size:var(--t-12);font-weight:var(--fw-label)}
.dock a[aria-current="page"]{color:var(--accent)}
.dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dock .n{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:var(--t-11);font-weight:var(--fw-strong);line-height:16px;text-align:center}
.dock a:focus-visible{outline-offset:-4px;border-radius:var(--r-chip)}

/* sidebar (desktop): light, the current item tinted */
.side{display:none;position:fixed;top:0;bottom:0;left:0;width:var(--side-w);
  flex-direction:column;background:var(--side-bg);color:var(--muted);z-index:10;
  padding:24px 12px;border-right:1px solid var(--edge)}
.side-brand{padding:4px 12px 24px;font-family:var(--f-head);font-size:26px;font-weight:var(--fw-head);color:var(--ink)}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{position:relative;display:block;padding:10px 12px;border-radius:10px;color:var(--muted);
  text-decoration:none;font-size:var(--t-16);font-weight:var(--fw-label)}
.side-nav a:hover{color:var(--ink)}
.side-nav a[aria-current="page"]{color:var(--ink);background:var(--side-cur)}
.side-nav a:focus-visible{outline-offset:-2px}
.side-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--edge)}
.side-foot a{font-size:var(--t-14)}
.side-phase{padding:12px;font-size:var(--t-12);color:var(--muted)}

/* ---- components ------------------------------------------------------- */
/* a page of the book */
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--shadow-tile)}
.card.tap{cursor:pointer}
.card.tap:hover{border-color:var(--accent)}
a.card{display:block;color:inherit;text-decoration:none}
.card + .card,.card + .stats,.stats + .card{margin-top:14px}
.card.prompt .k{margin-bottom:4px}
.card.prompt p{font-size:var(--t-16);line-height:1.5;color:var(--ink)}

/* buttons. .pill is the legacy alias used by the kept Write code. */
.btn,.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border:0;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font-family:var(--f);font-size:var(--t-16);
  font-weight:var(--fw-strong);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.btn:focus-visible,.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.ghost,.pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn.ghost:hover,.pill.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.btn[disabled],.pill[disabled]{opacity:.45;cursor:default}
.btn.sm{min-height:40px;padding:0 16px;font-size:var(--t-14)}
.linkbtn{border:0;background:none;padding:10px 4px;min-height:40px;font:var(--fw-label) 14px var(--f);
  color:var(--accent);cursor:pointer;border-radius:6px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
a.linkbtn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;
  min-height:40px}
.actions{display:flex;gap:8px;margin-top:16px;padding:12px 0;position:sticky;bottom:0;
  background:var(--canvas);z-index:5}
.actions .btn,.actions .pill{flex:1}
.actions .btn.ghost{flex:none}

/* option chip and tray (spot-the-error, gaps) */
.tray{direction:rtl;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;
  background:var(--card);border:1.5px solid var(--edge);border-radius:var(--r-chip);
  color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);
  color:var(--accent)}
.chip.right{border-color:var(--right);background:var(--right-wash);color:var(--right)}
.chip.wrong{border-color:var(--wrong);background:var(--wrong-wash);color:var(--wrong)}
.chip.dim{border-style:dashed;background:transparent;color:var(--faint-2)}
.chip[disabled]{cursor:default}
.chip.flat{border-color:transparent;background:transparent;cursor:default;padding:6px 2px}

/* option list (multiple choice): a radio dot, the text beside it */
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;
  background:var(--card);border:1.5px solid var(--edge);border-radius:var(--r-card);
  color:var(--ink);text-align:start;cursor:pointer}
.opt::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--faint-2);
  background:transparent}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.opt[aria-pressed="true"]::before{border-color:var(--accent);
  background:var(--accent);box-shadow:inset 0 0 0 4px var(--accent-wash)}
.opt.right{border-color:var(--right);background:var(--right-wash);color:var(--ink)}
.opt.right::before{border-color:var(--right);background:var(--right)}
.opt.wrong{border-color:var(--wrong);background:var(--wrong-wash);color:var(--wrong)}
.opt.wrong::before{border-color:var(--wrong);background:var(--wrong)}
.opt.wrong .ar,.opt.wrong .t-16{text-decoration:line-through;text-decoration-color:var(--wrong);text-decoration-thickness:1.5px}
.opt.dim{border-style:dashed;background:transparent;color:var(--faint-2)}
.opt.dim::before{border-style:dashed}
.opt[disabled]{cursor:default}
.match{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.match-col{display:flex;flex-direction:column;gap:8px}

/* the feedback block (section 5.1): the mark under the question */
.fb{background:var(--shell);border:1px solid var(--edge);
  border-radius:var(--r-card);padding:14px 16px;color:var(--ink);
  animation:rise .15s ease-out both}
.fb-verdict{display:flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:var(--t-20);line-height:1.3;
  font-weight:var(--fw-head);color:var(--right)}
.fb.wrong .fb-verdict{color:var(--wrong)}
.fb-kind{margin-top:4px;color:var(--muted);font-size:var(--t-12);line-height:1.4;font-weight:var(--fw-label);
  letter-spacing:0;text-transform:none}
.fb-sent{margin:10px 0}
.fb-sent .fb-gloss{font-size:var(--t-16);line-height:1.5;font-weight:var(--fw-label);color:var(--ink-2);
  margin-top:2px}
mark.fb-hi{background:var(--hi);color:var(--ink);border-radius:4px;padding:0 4px}
.fb-why{font-size:var(--t-14);line-height:1.5;color:var(--ink-2)}
.fb-picked,.fb-card{font-size:var(--t-12);line-height:1.4;color:var(--muted);margin-top:6px}
.fb .btn{width:100%;margin-top:14px}

/* progress strip (session runner, placement): in a lesson it is the row of section tabs. The bar of a
   segment is the tab's underline (full when current, filled to the progress otherwise). */
.strip{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--edge)}
.strip::-webkit-scrollbar{display:none}
.strip-seg{flex:1 0 auto;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;
  align-items:stretch;padding:8px 10px 0;margin-bottom:-1px}
.strip-l{order:1} .strip-s{order:2} .strip-bar{order:3}
.strip-bar{display:block;height:2.5px;border-radius:0;background:transparent;
  overflow:hidden;margin-top:6px}
.strip-bar > i{display:block;height:100%;width:var(--p,0%);background:var(--accent);opacity:.35}
.strip-l{display:block;font-size:var(--t-14);line-height:1.3;font-weight:var(--fw-label);
  color:var(--muted);white-space:nowrap;letter-spacing:0;text-transform:none}
.strip-seg.done .strip-bar > i{width:100%}
.strip-seg.done .strip-l{color:var(--ink-2)}
.strip-seg.cur .strip-bar > i{width:100%;opacity:1}
.strip-seg.cur .strip-l{font-weight:var(--fw-strong);color:var(--ink)}
.strip-seg.skip .strip-l{text-decoration:line-through;color:var(--muted)}
.strip.dense{gap:0}
/* a lesson's sections: when they don't fit (a phone) the tabs wrap onto a second row instead of scrolling */
.strip.wrap{flex-wrap:wrap;overflow-x:visible;row-gap:4px}
.strip.wrap .strip-seg{padding:6px 8px 0}
.strip.dense .strip-l{display:block}
/* a finished step can be looked at again: its segment is a button */
button.strip-seg{border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;
  border-radius:var(--r-chip) var(--r-chip) 0 0}
button.strip-seg:hover{background:var(--ink-wash-2)}
button.strip-seg:hover .strip-l{color:var(--ink)}
button.strip-seg:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
button.strip-seg.looking .strip-bar > i{width:100%;opacity:1}
button.strip-seg.looking .strip-l{color:var(--ink);font-weight:var(--fw-strong)}
/* the paper's sections: a button each from Read on (locked before it); the state under the label */
.strip-seg.paper{position:relative}
.strip-s{display:block;order:1;font-size:var(--t-11);line-height:1.3;font-weight:var(--fw-label);color:var(--muted);
  letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.3em}
.strip-s:empty{min-height:0}
.strip-seg.paper.done .strip-s{color:var(--right)}
.strip-seg.paper.done .strip-s:not(:empty)::before{content:"\2713\00a0"}
.strip-seg.paper.locked .strip-l{color:var(--muted);font-weight:var(--fw)}
.strip-seg.paper.skip .strip-l{color:var(--muted)}
button.strip-seg.paper.open .strip-bar > i{width:100%;opacity:1}
button.strip-seg.paper.open .strip-l{color:var(--ink);font-weight:var(--fw-strong)}
.pp-pend{margin:0 0 12px;padding-left:20px}
.pp-pend li{margin:2px 0}
/* the look-back view: a label bar on top, the item, Previous / Next, then the way back */
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
  padding:8px 12px;background:var(--shell);border:1px solid var(--edge);border-radius:var(--r-card)}
.lb-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lb-name{font-size:var(--t-14);font-weight:var(--fw-strong);color:var(--ink)}
.lb-bar .linkbtn{flex:none}
.lb-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.lb-nav .btn{flex:0 0 auto;min-width:112px}
.lb-nav .btn:disabled{opacity:.45}
.lb-back{margin-top:16px;width:100%}
.lb-pass{padding:16px}
.lb-pass > .k{margin-bottom:8px}
.lb-write{display:flex;flex-direction:column;gap:10px}
.lb-write p{margin:0}
.lb-text{line-height:2}
/* the exam paper (a lesson's sections after Read): the answer-sheet row on top (with "Check my answers" at the
   right end), Back / Next in ONE row directly under the question */
.pp-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pp-nums{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
.pp-num{flex:none;min-width:40px;min-height:40px;padding:0 6px;border-radius:50%;
  border:1.5px solid var(--edge);background:var(--card);color:var(--ink-2);font-family:var(--f-head);
  font-weight:var(--fw-head);font-size:var(--t-16)}
.pp-num.ans{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pp-num.right{background:var(--right);border-color:var(--right);color:var(--on-accent)}
.pp-num.wrong{background:var(--wrong);border-color:var(--wrong);color:var(--on-accent)}
.pp-num.blank,.pp-num.neutral{background:var(--ghost);border-color:var(--ghost);color:var(--muted)}
.pp-num.cur{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--accent)}
.pp-num:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pp-check-link{flex:none;align-self:center;min-height:44px;padding:0 4px;color:var(--accent);
  text-align:right;white-space:nowrap}
.pp-check-link[disabled]{opacity:.45;cursor:default;text-decoration:none}
/* the score once checked: a pen stamp at the right end of the row */
.pp-result{padding:0;margin:0 0 12px;display:inline-flex;align-items:baseline;gap:8px;
  background:none;border:0;box-shadow:none}
.pp-result-t{font-family:var(--f-head);font-style:italic;font-weight:var(--fw-head);font-size:var(--t-20);
  color:var(--wrong);border:2px solid var(--wrong);border-radius:6px;padding:0 10px;transform:rotate(-2deg)}
.pp-item:focus{outline:none}
/* the question number in the margin (the paper's index, set by session.js as data-n) */
.pp-item[data-n]{position:relative;padding-left:40px}
.pp-item[data-n]::before{content:attr(data-n);position:absolute;left:0;top:18px;font-family:var(--f-head);
  font-weight:var(--fw-head);font-size:26px;line-height:1;color:var(--accent)}
.pp-item[data-n].ok::before{color:var(--right)}
.pp-item[data-n].bad::before{color:var(--wrong)}
.pp-item[data-n] .item-card{border:0;background:transparent;box-shadow:none;padding:0}
.pp-item[data-n] .item-top{display:none}
/* the bottom row: in the flow directly under the answer and its marking (owner rule: the next action sits under
   the answer), on a phone too, so it never covers the feedback */
.pp-nav{margin-top:16px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--edge)}
.pp-nav-row{display:flex;gap:8px;align-items:center}
.pp-nav .btn{min-height:48px;padding:0 18px}
.pp-nav .pp-back{flex:none}
.pp-nav .pp-primary{flex:1 1 auto}
.pp-sub{margin:6px 0 0;line-height:1.3;text-align:right}
.pp-hint{text-align:left}
@media (min-width:768px){
  /* desktop: in the flow right under the card, as wide as the card, the primary button on its right */
  .pp-nav{position:static;background:none;box-shadow:none;padding:12px 0}
  .pp-nav .pp-primary{flex:none;min-width:180px;margin-left:auto}
}
.pp-blank{margin:0 0 12px}
/* the passage beside the drill steps (session runner) */
.pane-pass{padding:16px;margin-bottom:16px;max-height:min(60dvh,560px);overflow-y:auto}
.pane-pass > .k{margin-bottom:8px}
.pane-pass .w{font-size:var(--a-24);line-height:1.9}
/* the passage sheet: the title and close button stay put, the text scrolls */
#passage-sheet .sheet{display:flex;flex-direction:column;overflow:hidden}
#passage-sheet .sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* passage (tap-gloss): one button per word, punctuation grouped with its word */
.passage{direction:rtl;display:flex;flex-wrap:wrap;gap:0 3px;align-items:baseline}
.w{font-family:var(--fa-read);font-size:var(--a-read);line-height:var(--a-read-lh);color:var(--ink);
  background:transparent;border:0;border-radius:6px;padding:0 3px;cursor:pointer}
.w:hover{background:var(--ink-wash-2)}
.w:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.w[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent);box-shadow:0 2px 0 var(--accent)}
.passage.dense .w{font-size:var(--a-24);line-height:1.9}
.w.flat{cursor:default;padding:0;margin-inline-start:-3px}
.w.flat:hover{background:none}
.w.unk{text-decoration:underline wavy var(--amber);text-underline-offset:6px;text-decoration-thickness:1.5px}
.w.unk[aria-pressed="true"]{box-shadow:0 0 0 2px var(--amber);background:var(--amber-wash);color:var(--amber)}
.w.var{text-decoration:underline dotted var(--amber);text-underline-offset:6px}
.w.var[aria-pressed="true"]{box-shadow:0 0 0 2px var(--amber)}
.wg{display:inline-flex;align-items:baseline;white-space:nowrap}
.passage .wg .w.flat{margin-inline-start:0}
.wg .w:not(:last-child){padding-inline-end:1px}

/* fact card (the gloss of one word): a margin note. On the phone it docks to the bottom of the screen
   (.note-dock) and never covers more than ~45% of it, so the sentence stays in view. */
.gcard{background:var(--shell);border:1px solid var(--edge);border-left:3px solid var(--accent);
  border-radius:var(--r-card);padding:14px 16px 12px;animation:rise .15s ease-out both}
.gcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gcard .form{font-family:var(--fa-read);font-size:var(--a-36);line-height:1.5;direction:rtl;
  unicode-bidi:isolate;font-weight:400}
.gcard .en{font-size:18px;line-height:1.35;font-weight:var(--fw-strong);margin-top:2px}
.gcard .sub{font-size:var(--t-14);line-height:1.4;color:var(--muted);margin-top:2px}
.gcard .facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--edge)}
.gcard .facts:empty{display:none;margin:0;padding:0;border:0}
.gcard .fact{display:flex;align-items:baseline;gap:6px;background:none;border:0;padding:0;min-width:0}
.gcard .fact .k{display:inline;font-size:var(--t-12)}
.gcard .fact .v{font-size:var(--t-14);font-weight:var(--fw-label);color:var(--ink)}
.gcard .fact .v.ar-20{font-size:var(--a-20);line-height:1.6}
.gcard .mark{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-pill);
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--edge);color:var(--ink);
  font:var(--fw-label) 14px var(--f);cursor:pointer}
.gcard .mark[aria-pressed="true"]{background:var(--right-wash);color:var(--right);box-shadow:none}
.gcard .mark[disabled]{opacity:.45;cursor:default}
.gcard.unknown{background:var(--amber-wash);border-color:var(--amber);color:var(--amber)}
.gcard.unknown .sub{color:var(--ink-2)}
.note-dock{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;max-height:45dvh;overflow-y:auto;
  overscroll-behavior:contain;border-radius:var(--r-card);box-shadow:var(--shadow-dock)}
.note-dock .gcard{padding-right:48px}
body.note-open .main{padding-bottom:46dvh}
.note-dock .note-x{position:absolute;top:6px;right:6px;width:40px;height:40px;margin:0;border:0;border-radius:50%;
  background:none;color:var(--muted);font-size:var(--t-24);line-height:1;display:grid;place-items:center}
.sheet-b .gcard{border:0;padding:0;background:none}

/* met-words rail */
.wrail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.wrail::-webkit-scrollbar{display:none}
.wrail button{flex:none;border:1.5px solid var(--edge);border-radius:var(--r-card);
  background:var(--card);padding:8px 12px;font-family:var(--f);color:var(--ink);
  text-align:center}
.wrail button[aria-pressed="true"]{border-color:var(--accent)}
.wrail .a{font-size:var(--a-20);line-height:1.9}
.wrail .e{font-size:var(--t-12);font-weight:var(--fw-label);color:var(--muted);max-width:112px;
  line-height:1.3}

/* skeletons */
.sk{display:block}
.sk-line,.sk-bar,.sk-chip{display:block;border-radius:6px;background:var(--edge)}
.sk-line{height:12px;margin-top:10px}
.sk-line:first-child{margin-top:0}
.sk-card{padding:16px}
.sk-card .sk-title{height:20px;width:55%;border-radius:6px;background:var(--edge)}
.sk-card .sk-line{margin-top:12px}
.sk-passage{display:flex;flex-direction:column;gap:12px}
.sk-passage .sk-bar{height:24px;margin-inline-start:auto}
.sk-chips{display:flex;flex-wrap:wrap;gap:8px;direction:rtl}
.sk-chips .sk-chip{height:40px;border-radius:var(--r-chip)}
[aria-busy="true"]{animation:pulse 1.4s ease-in-out infinite}

/* empty and error states */
.empty{text-align:center;padding:48px var(--gutter)}
.empty-t{font-family:var(--f-head);font-size:var(--t-20);line-height:1.25;font-weight:var(--fw-head)}
.empty-b{font-size:var(--t-14);line-height:1.5;color:var(--muted);margin-top:8px}
.empty .btn{margin-top:20px}
.empty.compact{padding:20px var(--gutter)}
.err{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.err-b{font-size:var(--t-14);line-height:1.5;color:var(--ink-2)}

/* sheet: a bottom sheet on the phone, a centred dialog on desktop (media block) */
.sheet-bg{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;
  align-items:flex-end;justify-content:center;animation:fade .15s ease-out both}
.sheet{position:relative;width:100%;max-height:85dvh;overflow-y:auto;background:var(--card);
  border-radius:16px 16px 0 0;padding:24px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  animation:rise .15s ease-out both}
.sheet::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;
  margin-left:-20px;border-radius:2px;background:var(--edge)}
.sheet-h{font-family:var(--f-head);font-size:var(--t-20);line-height:1.25;font-weight:var(--fw-head);padding-right:44px}
.sheet-b{margin-top:12px;font-size:var(--t-14);line-height:1.5;color:var(--ink-2)}
.sheet-b p + p,.sheet-b ul,.sheet-b .stack{margin-top:10px}
.sheet-b strong{color:var(--ink);font-weight:var(--fw-strong)}
.sheet-x{position:absolute;top:10px;right:8px;width:44px;height:44px;border:0;border-radius:50%;
  background:none;color:var(--ink-2);font-size:var(--t-24);line-height:1;
  display:grid;place-items:center}
.sheet .actions{position:static;background:none;padding:0;margin-top:20px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);padding:12px 18px;
  border-radius:999px;background:var(--ink);color:var(--canvas);
  font-size:var(--t-14);font-weight:var(--fw-label);line-height:1.3;text-align:center;
  animation:rise-x .15s ease-out both}
body.bare .toast{bottom:calc(88px + env(safe-area-inset-bottom))}   /* above the sticky action bar */

/* stat tiles: figures on a rule, not boxes */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);
  padding:12px;text-align:center}
.stat-n{font-family:var(--f-head);font-size:26px;line-height:1.2;font-weight:var(--fw-head);font-variant-numeric:tabular-nums}
.stat-n.big{font-size:var(--t-32);line-height:1.1}
.stat-n.pending{color:var(--faint-2);animation:pulse 1.3s ease-in-out infinite}
.stat-l{font-size:var(--t-12);line-height:1.4;color:var(--muted);margin-top:2px}

/* criterion bar */
.crit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.crit + .crit{margin-top:12px}
.crit-l{font-size:var(--t-14);font-weight:var(--fw-label)}
.crit-v{font-size:var(--t-12);color:var(--muted);font-variant-numeric:tabular-nums}
.crit-bar{grid-column:1 / -1;height:5px;border-radius:3px;background:var(--rule);
  overflow:hidden}
.crit-bar > i{display:block;height:100%;width:var(--p,0%);background:var(--accent)}
.crit.met .crit-bar > i{background:var(--right)}
.crit.met .crit-v{color:var(--right)}

/* level pill and tag */
.lvl{display:inline-block;padding:2px 8px;border-radius:4px;background:var(--accent-wash);
  color:var(--accent);font-size:var(--t-12);font-weight:var(--fw-strong);line-height:1.4}
.tag{display:inline-block;padding:2px 7px;border-radius:4px;background:var(--ghost);
  color:var(--ghost-ink);font-size:var(--t-11);font-weight:var(--fw-strong);letter-spacing:.04em;
  text-transform:uppercase;line-height:1.3}
.tag.ai{background:var(--violet-wash);color:var(--violet)}

/* tabs: a segmented control (and the harakat / appearance switches) */
.seg{display:flex;padding:3px;gap:3px;border-radius:var(--r-pill);background:var(--ghost)}
.seg.scroll-x{overflow-x:auto;scrollbar-width:none}
.seg.scroll-x::-webkit-scrollbar{display:none}
.seg-btn{flex:1;min-height:40px;min-width:44px;border:0;border-radius:calc(var(--r-pill) - 2px);background:transparent;
  font:var(--fw-label) 13px var(--f);color:var(--ink-2);padding:0 12px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.seg-btn[aria-selected="true"],.seg-btn[aria-pressed="true"]{background:var(--card);
  color:var(--ink);box-shadow:var(--shadow-tile),0 0 0 1px var(--edge)}
.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the harakat switch: a label and On / Off */
#hk.seg{align-items:center;padding-left:10px}
#hk.seg::before{content:"Harakat";font-size:var(--t-14);font-weight:var(--fw-label);color:var(--ink-2);margin-right:6px}
#hk .seg-btn{flex:none;min-height:40px;padding:0 10px;font-size:var(--t-12)}
@media (max-width:479px){#hk.seg{padding-left:3px}#hk.seg::before{display:none}}
.spin{width:10px;height:10px;border-radius:50%;border:2px solid var(--faint);
  border-top-color:var(--accent);display:inline-block;animation:spin .8s linear infinite}

/* row card (roots and press rows) */
.rows{display:flex;flex-direction:column;gap:8px}
.row-card{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);
  padding:12px;font-family:var(--f);color:var(--ink)}
button.row-card,a.row-card{cursor:pointer;text-decoration:none}
.row-card[aria-pressed="true"]{border-color:var(--accent)}
.row-card .slot{font-size:var(--t-12);font-weight:var(--fw-strong);color:var(--muted);min-width:44px}
.row-card .word{min-width:76px}
.row-card .en{font-size:var(--t-14);font-weight:var(--fw-strong)}
.row-card .meta{font-size:var(--t-12);font-weight:var(--fw);color:var(--muted)}

/* conjugation table (moved from grammar.html) */
.table{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);
  padding:2px 14px 6px}
.conj{display:flex;align-items:center;gap:10px;padding:5px 0;width:100%;min-height:40px;
  border:0;border-top:1px solid var(--rule);background:transparent;font-family:var(--f);
  text-align:left}
.conj:first-child{border-top-color:transparent}
.conj .person{font-size:var(--t-12);font-weight:var(--fw-label);color:var(--muted);min-width:52px}
.conj .form{flex:1;text-align:right;color:var(--ink)}
.conj .tr{font-size:var(--t-12);font-weight:var(--fw-label);color:var(--accent);min-width:74px;text-align:right}

/* ---- Write: draft, marks, notes, tutor (kept) -------------------------- */
.draft{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-card);
  padding:16px}
/* pre-wrap: the rendered spans can carry runs of spaces around a flagged word */
.draft p{font-family:var(--fa);direction:rtl;font-size:var(--a-20);line-height:2;
  margin:0;white-space:pre-wrap}
.draft textarea{width:100%;border:0;resize:none;background:transparent;font-family:var(--fa);
  direction:rtl;font-size:var(--a-20);line-height:1.95;color:var(--ink);min-height:150px;
  outline:none}
.draft textarea::placeholder{color:var(--faint-2)}
.draft:focus-within{border-color:var(--accent)}
.draft p.corr{line-height:2.35}
.corr-wait{font-size:var(--t-12);font-weight:var(--fw);line-height:1.5;color:var(--muted);
  padding:6px 2px;animation:pulse 1.3s ease-in-out infinite}
.corr-extra{margin-top:8px;padding:0 4px}
.corr-cap{font-size:var(--t-12);font-weight:var(--fw);line-height:1.45;color:var(--muted);margin:8px 0 0}

mark.cfix,mark.cunfixed{color:inherit;font:inherit;cursor:pointer;border-radius:4px;
  padding:0 3px}
mark.cfix{background:var(--fix-wash)}
mark.cfix.src-tutor{text-decoration:underline dotted var(--tutor-line);
  text-decoration-thickness:2px;text-underline-offset:7px}
mark.cunfixed{background:transparent;text-decoration:underline dashed var(--unfixed-line);
  text-decoration-thickness:2px;text-underline-offset:7px}
mark.cfix[aria-pressed="true"],mark.cunfixed[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--fix-line)}
mark.cunfixed[aria-pressed="true"]{box-shadow:0 0 0 2px var(--unfixed-line)}
mark.cfix:focus-visible,mark.cunfixed:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
mark.flag{color:inherit;border-radius:4px;padding:0 3px;border-bottom:2px solid var(--line);
  background:var(--wash);cursor:pointer;font:inherit}
mark.flag[aria-pressed="true"]{box-shadow:0 0 0 2px var(--line)}
mark.flag.disputed{background:transparent;border-bottom-style:dashed}
mark.flag.tutor-in{animation:tnmark .3s ease-out both}

.legend{display:flex;flex-wrap:wrap;gap:6px 14px}
.legend .chip{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;
  border-radius:0;background:none;cursor:default;font-size:var(--t-12);font-weight:var(--fw-label);
  color:var(--ink-2)}
.legend .sw{width:14px;height:10px;border-radius:3px;display:inline-block}
.legend .sw.fix-rule{background:var(--fix-wash);box-shadow:inset 0 0 0 1px var(--fix-line)}
.legend .sw.fix-tutor{background:var(--fix-wash);border-bottom:2px dotted var(--tutor-line);
  border-radius:3px 3px 0 0}
.legend .sw.unfixed{background:transparent;border-bottom:2px dashed var(--unfixed-line);
  border-radius:0}

.flags{display:flex;gap:8px;flex-wrap:wrap}
.flags .pill{flex:1 1 0;min-width:88px;min-height:40px;font-size:var(--t-12);font-weight:var(--fw-strong);
  padding:8px 4px;border:1.5px solid transparent}
.note{border-radius:var(--r-card);padding:16px;animation:rise .15s ease-out both}
.note .swap{display:flex;gap:10px;align-items:baseline;margin-top:8px;flex-wrap:wrap}
.note .was{font-size:var(--a-20);color:var(--strike);text-decoration:line-through}
.note .now{font-size:var(--a-20)}
.note .needs{font-size:var(--t-12);font-weight:var(--fw-strong);letter-spacing:.04em;padding:4px 10px;
  border-radius:999px;background:var(--ink-wash)}
.note .body{font-size:var(--t-14);font-weight:var(--fw);line-height:1.5;color:var(--ink-2);
  margin-top:8px}
.note .blurb{font-size:var(--t-12);font-weight:var(--fw);line-height:1.45;margin-top:8px}
.note .wrote{margin-top:8px;font-size:var(--t-14);font-weight:var(--fw-label);color:var(--ink-2)}
.note .wrote .wrote-lab{unicode-bidi:isolate}
.note .wrote .tn-ar{font-family:var(--fa);unicode-bidi:isolate;font-size:var(--a-16);
  font-weight:400}
.note .card-line{font-size:var(--t-12);line-height:1.4;color:var(--muted);margin-top:8px}
.note-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.note-x{flex:none;width:40px;height:40px;margin:-8px -8px -8px 0;border:0;border-radius:50%;
  background:var(--ink-wash);color:var(--ink-2);font:var(--fw-label) 14px/1 var(--f);
  display:flex;align-items:center;justify-content:center}
.note-x:hover{background:var(--ghost)}
.note-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* compact mode: after a tap on a marked word the draft shrinks to a scrolling
   window so the note under it is on screen too. --compact-h is set by script. */
#reviewed.compact{max-height:var(--compact-h,40dvh);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin}
.draft-bar{margin-top:8px;padding:0 4px;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.draft-bar .hint{font-size:var(--t-12);font-weight:var(--fw);color:var(--muted)}

.msg{margin-top:12px;border-radius:var(--r-card);padding:12px 14px;font-size:var(--t-14);
  font-weight:var(--fw);line-height:1.5}
.msg.warn{background:var(--amber-wash);color:var(--amber)}
.msg.note{background:var(--ink-wash-2);color:var(--ink-2)}

.tutor-status{margin-top:12px;border-radius:var(--r-chip);padding:10px 12px;
  background:var(--violet-wash);color:var(--violet)}
.tutor-status .ts-row{display:flex;align-items:center;gap:8px;font-size:var(--t-12);
  font-weight:var(--fw-strong);line-height:1.35}
.tutor-status .ts-sub{font-size:var(--t-12);font-weight:var(--fw);line-height:1.45;color:var(--muted);
  margin-top:3px}
.ts-icon{flex:none;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--violet-wash);border-top-color:var(--tutor-line)}
.tutor-status.done{background:var(--right-wash);color:var(--right)}
.tutor-status.done .ts-icon{border:0;background:var(--right);position:relative}
.tutor-status.done .ts-icon::after{content:"";position:absolute;left:3px;top:1.5px;width:3px;
  height:6px;border:solid var(--on-accent);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.tutor-status.error{background:var(--amber-wash);color:var(--amber)}
.tutor-status.error .ts-icon{border:0;background:var(--amber);position:relative}
.tutor-status.error .ts-icon::after{content:"!";position:absolute;inset:0;color:var(--on-accent);
  font:var(--fw-strong) 9px/12px var(--f);text-align:center}
.tutor-status.pending .ts-icon{animation:spin .8s linear infinite}
.tutor-status.fading{opacity:0;transition:opacity .4s ease-out}

.tutor-skeleton{min-height:118px}
.tutor-skeleton .sk{display:block;height:9px;border-radius:5px;margin:0 0 12px;
  background:var(--edge);animation:pulse 1.4s ease-in-out infinite}
.tutor-skeleton .sk:first-child{height:11px;margin-bottom:14px}

.tutor-body{font-size:var(--t-14)}
.tutor-body p{font-size:var(--t-14);font-weight:var(--fw);line-height:1.55;color:var(--ink-2);
  margin:8px 0 0}
.tutor-body h3{font-size:var(--t-14);font-weight:var(--fw-strong);color:var(--ink);margin:12px 0 4px;
  line-height:1.35;font-family:var(--f)}
.tutor-body h4{font-size:var(--t-14);font-weight:var(--fw-strong);color:var(--ink-2);margin:10px 0 4px;
  line-height:1.35}
.tutor-body p:first-child,.tutor-body h3:first-child,.tutor-body h4:first-child,
.tutor-body ul:first-child{margin-top:0}
.tutor-body ul{margin:4px 0 0;padding-inline-start:18px}
.tutor-body li{font-size:var(--t-14);font-weight:var(--fw);line-height:1.55;color:var(--ink-2);
  margin:4px 0 0}
.tutor-body li:first-child{margin-top:0}
.tutor-body strong{color:var(--ink);font-weight:var(--fw-strong)}
/* Arabic runs inside the tutor's prose are isolated RTL islands */
.tutor-body .tn-ar{font-family:var(--fa);unicode-bidi:isolate;font-size:var(--a-16);
  font-weight:400}
.tutor-body .tn-unverified{text-decoration:underline dotted var(--faint-2);
  text-underline-offset:3px;cursor:help}
.tutor-loading,.tutor-error{font-size:var(--t-14);font-weight:var(--fw);line-height:1.5;
  color:var(--muted)}
.tutor-loading{animation:pulse 1.3s ease-in-out infinite}
.tutor-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);
  font-size:var(--t-12);font-weight:var(--fw);color:var(--muted);line-height:1.5}

/* ---- motion ------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rise-x{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tnmark{from{background-color:transparent;border-bottom-color:transparent}}

/* ---- quiet: the differences from the textbook ------------------------- */
/* a page of text: no bordered pages, a hairline between sections */
[data-style="quiet"] .card{background:transparent;border:0;border-top:1px solid var(--edge);border-radius:0;
  padding:18px 0;box-shadow:none}
[data-style="quiet"] .card:first-child,[data-style="quiet"] .col > .card:first-child,
[data-style="quiet"] #step > .card:first-child{border-top:0;padding-top:4px}
[data-style="quiet"] .card + .card,[data-style="quiet"] .card + .stats,[data-style="quiet"] .stats + .card{margin-top:4px}
[data-style="quiet"] .card.tap{border:1px solid var(--edge);border-radius:var(--r-card);padding:16px}
[data-style="quiet"] .stat,[data-style="quiet"] .row-card,[data-style="quiet"] .lb-bar,[data-style="quiet"] .table{
  background:transparent;border-color:var(--edge)}
[data-style="quiet"] .stat{border:0;text-align:left;padding:8px 0}
[data-style="quiet"] .stat-n{font-size:30px;font-weight:400}
[data-style="quiet"] .fb{background:transparent;border:0;border-top:1px solid var(--edge);border-radius:0;padding:12px 0 0}
[data-style="quiet"] .fb-verdict{color:var(--accent)}
[data-style="quiet"] .fb.wrong .fb-verdict{color:var(--wrong)}
[data-style="quiet"] .gcard{background:transparent;border:0;border-top:1px solid var(--edge);border-radius:0;padding:12px 0 0}
[data-style="quiet"] .note-dock{background:var(--card);padding:0 16px 12px}
[data-style="quiet"] .note-dock .gcard{padding-right:40px}
[data-style="quiet"] .opt{background:transparent}
[data-style="quiet"] .opt[aria-pressed="true"]{background:var(--accent-wash)}
[data-style="quiet"] .pane-pass{border:0;padding:0;background:transparent;box-shadow:none}
/* a hairline progress line instead of tabs */
[data-style="quiet"] .strip{border-bottom:0;gap:6px}
[data-style="quiet"] .strip-seg{padding:4px 0 0;flex-direction:column}
[data-style="quiet"] .strip-bar{order:0;height:3px;border-radius:2px;background:var(--edge);margin:0 0 6px}
[data-style="quiet"] .strip-bar > i{opacity:.45;border-radius:2px}
[data-style="quiet"] .strip-l{font-size:var(--t-12)}
[data-style="quiet"] button.strip-seg{border-radius:var(--r-chip)}
[data-style="quiet"] .pp-num{border-radius:50%;font-family:var(--f);font-size:var(--t-14)}
[data-style="quiet"] .pp-num.cur{box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--accent)}
[data-style="quiet"] .pp-result-t{transform:none;border:0;padding:0;font-style:italic;color:var(--ink)}
[data-style="quiet"] .pp-item[data-n]::before{font-family:var(--f);font-weight:var(--fw-label);font-size:var(--t-14);
  color:var(--muted);top:22px}
[data-style="quiet"] .pp-item[data-n]{padding-left:32px}
[data-style="quiet"] .pp-nav{box-shadow:none;border-top:1px solid var(--edge)}
[data-style="quiet"] .eyebrow{font-family:var(--f);font-style:normal;font-size:var(--t-12);font-weight:var(--fw-label);
  letter-spacing:.02em}
[data-style="quiet"] .hdr-title{font-weight:400;font-size:34px}
[data-style="quiet"] .info-btn span{background:transparent;box-shadow:inset 0 0 0 1.5px var(--edge)}
[data-style="quiet"] .side{border-right:0}
[data-style="quiet"] .dock{border-top-color:var(--edge)}
[data-style="quiet"] .sheet{border-radius:20px 20px 0 0}
[data-style="quiet"] .w[aria-pressed="true"]{background:transparent}
[data-style="quiet"] mark.fb-hi{background:transparent;color:var(--accent);box-shadow:0 2px 0 var(--accent);border-radius:0;padding:0 2px}

/* ---- desktop: one media block ----------------------------------------- */
@media (min-width:900px){
  :root{--gutter:32px}
  .dock{display:none}
  .side{display:flex}
  .app{margin-left:var(--side-w)}
  .two-pane{max-width:var(--two-w);display:grid;grid-template-columns:minmax(0,1fr) 360px;
    gap:40px;align-items:start}
  .pane-side{margin-top:0;position:sticky;top:16px;align-self:start}
  .pane-side .wrail{flex-direction:column;overflow:visible}
  .strip-l{letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .strip-s{min-height:1.3em}
  .actions{position:static;background:none;padding-left:0;padding-right:0}
  .sheet-bg{align-items:center}
  .sheet{width:480px;max-width:calc(100vw - 32px);border-radius:var(--r-card);
    padding:28px 24px 20px}
  .sheet::before{display:none}
  .toast{bottom:24px}
  body.bare .toast{bottom:24px}
  /* the margin note sits in the pane: no dock */
  .note-dock{position:static;max-height:none;box-shadow:none;overflow:visible}
  .note-dock .note-x{display:none}
  .note-dock .gcard{padding-right:16px}
  body.note-open .main{padding-bottom:0}
  [data-style="quiet"] .note-dock{padding:0;background:transparent}
  [data-style="quiet"] .sheet{border-radius:var(--r-card)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}