/* ══════════════════════════════════════════════════════════════
   Derja with Aymen
   Visual language: the bilingual enamel street plaques of Algiers.
   White lettering on cobalt, Arabic above the Latin, a hairline
   rule set in from the edge. Each theme is announced like a street.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#F1F4F7; --surface:#FFFFFF; --surface-2:#E8EDF3; --sunk:#DFE6EE;
  --ink:#0D1626; --ink-2:#44546B; --ink-3:#7A8AA1;
  --line:#D2DBE5; --line-soft:#E3EAF1;

  --cobalt:#14417E; --cobalt-lift:#1B55A3;
  --plaque-bg:#14417E; --plaque-ink:#FFFFFF; --plaque-rule:rgba(255,255,255,.34);

  --accent:#14417E; --accent-soft:#DCE6F5;
  --amber:#9C5B08; --amber-soft:#F4E7D2;
  --green:#0C6E51; --green-soft:#D8EDE5;
  --warn:#A32F2F; --warn-soft:#F6E2E2;

  /* The line that says what time it is. Its own red rather than the --warn one:
     that red is meant to be read on the page's own ground, and this line has to
     stay legible lying across a cobalt lesson as well. */
  --now:#D93025;

  /* The colours he gives his students, so a glance at the week says who and
     not just what. Darker here where the ground is white; brighter in the
     dark theme below, where these would sink into it. Each is filled with
     white lettering, so only the fill changes between the two. */
  --c-ink:#FFFFFF;
  --c-rose:#B3185B;
  --c-red:#B3312A;
  --c-orange:#A85A08;
  --c-olive:#5F6F12;
  --c-green:#256B3C;
  --c-teal:#0B6E6C;
  --c-sky:#1466B8;
  --c-indigo:#3F45A8;
  --c-purple:#6E369A;
  --c-brown:#6F4A2A;
  --c-slate:#44566B;

  --lv1:#0C6E51; --lv1-bg:#D8EDE5;
  --lv2:#14417E; --lv2-bg:#DCE6F5;
  --lv3:#9C5B08; --lv3-bg:#F4E7D2;

  /* The line drawings. The slides keep their own teal, which is pinned to
     the cream ground and never changes; this one is for the drawings that
     sit in a unit note, on whichever ground the reader has chosen. */
  --teal:#14918A;

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Archivo",system-ui,sans-serif;
  --tr:"Noto Sans","Archivo",system-ui,sans-serif;
  --ar:"Noto Naskh Arabic","Segoe UI",Tahoma,serif;
  --arDisp:"Reem Kufi","Noto Naskh Arabic",serif;

  --head-h:118px;
  --radius:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#080D16; --surface:#101827; --surface-2:#161F31; --sunk:#0C1320;
    --ink:#E7EDF5; --ink-2:#9AAABF; --ink-3:#6B7C94;
    --line:#212D42; --line-soft:#182131;
    --cobalt:#4E86E8; --cobalt-lift:#6FA0F2;
    --plaque-bg:#15294A; --plaque-ink:#DFE9FA; --plaque-rule:rgba(140,180,255,.3);
    --accent:#6BA0F5; --accent-soft:#14243D;
    --amber:#E0A24A; --amber-soft:#2A2013;
    --green:#38BC90; --green-soft:#0F281F;
    --warn:#E0736C; --warn-soft:#2C1817;
    --now:#FF7B72;
    --c-ink:#0B1220;
    --c-rose:#F2679E;
    --c-red:#F0736C;
    --c-orange:#EE9A4A;
    --c-olive:#B6C64B;
    --c-green:#4FC97F;
    --c-teal:#3FC9BE;
    --c-sky:#63B2F5;
    --c-indigo:#8E92F2;
    --c-purple:#C286EE;
    --c-brown:#C79367;
    --c-slate:#9FB4C9;
    --lv1:#38BC90; --lv1-bg:#0F281F;
    --lv2:#6BA0F5; --lv2-bg:#14243D;
    --lv3:#E0A24A; --lv3-bg:#2A2013;
    --teal:#3FC9BE;
  }
}
:root[data-theme="dark"]{
  --bg:#080D16; --surface:#101827; --surface-2:#161F31; --sunk:#0C1320;
  --ink:#E7EDF5; --ink-2:#9AAABF; --ink-3:#6B7C94;
  --line:#212D42; --line-soft:#182131;
  --cobalt:#4E86E8; --cobalt-lift:#6FA0F2;
  --plaque-bg:#15294A; --plaque-ink:#DFE9FA; --plaque-rule:rgba(140,180,255,.3);
  --accent:#6BA0F5; --accent-soft:#14243D;
  --amber:#E0A24A; --amber-soft:#2A2013;
  --green:#38BC90; --green-soft:#0F281F;
  --warn:#E0736C; --warn-soft:#2C1817;
  --now:#FF7B72;
  --c-ink:#0B1220;
  --c-rose:#F2679E;
  --c-red:#F0736C;
  --c-orange:#EE9A4A;
  --c-olive:#B6C64B;
  --c-green:#4FC97F;
  --c-teal:#3FC9BE;
  --c-sky:#63B2F5;
  --c-indigo:#8E92F2;
  --c-purple:#C286EE;
  --c-brown:#C79367;
  --c-slate:#9FB4C9;
  --lv1:#38BC90; --lv1-bg:#0F281F;
  --lv2:#6BA0F5; --lv2-bg:#14243D;
  --lv3:#E0A24A; --lv3-bg:#2A2013;
  --teal:#3FC9BE;
}

*,*::before,*::after{box-sizing:border-box}
/* The browser's own rule for [hidden] is a user-agent rule, so any class that
   sets a display beats it and the element stays on the screen with nothing to
   show for the attribute. That has bitten this stylesheet three times now, so
   it is settled here once for every element on the site. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--accent)}
button,input,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ── the plaque, the core motif ─────────────────────────────── */
.plaque{
  position:relative;background:var(--plaque-bg);color:var(--plaque-ink);
  padding:16px 20px 14px;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--plaque-rule), 0 1px 0 rgba(0,0,0,.06);
}
.plaque::after{content:"";position:absolute;inset:5px;border:1px solid var(--plaque-rule);
  border-radius:1px;pointer-events:none}
.plaque-ar{font-family:var(--arDisp);direction:rtl;text-align:right;font-size:19px;line-height:1.5;
  opacity:.92;letter-spacing:0}
.plaque-lat{font-family:var(--disp);font-weight:700;font-stretch:118%;text-transform:uppercase;
  letter-spacing:.05em;font-size:15px;line-height:1.25;margin-top:2px}

/* ── sticky header ─────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:80;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar::before{content:"";position:absolute;inset:0;backdrop-filter:saturate(160%) blur(10px);z-index:-1}
.tb1{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--plaque-bg);
  color:var(--plaque-ink);font-family:var(--arDisp);font-size:15px;border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--plaque-rule)}
.brand-name{font-family:var(--disp);font-weight:700;font-stretch:118%;font-size:16px;
  letter-spacing:.01em;white-space:nowrap}
.tb-links{display:flex;gap:18px;margin-left:6px}
.tb-links a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:5px 0;border-bottom:2px solid transparent}
.tb-links a:hover{color:var(--ink);border-bottom-color:var(--cobalt)}
.tb-links a.is-admin{color:var(--amber)}
.tb-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.whoami{font-size:13px;color:var(--ink-3);white-space:nowrap}
.linkish{font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.linkish:hover{color:var(--ink);border-bottom-color:var(--cobalt)}
.topbar .linkish[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--cobalt)}
/* Logging out is a form now, not a link, so that no other site can do it for
   the student. It still has to look like the small link it used to be. */
.logoutform{display:inline-flex;margin:0}
button.linkish{font-family:inherit;background:none;border:0;
  border-bottom:1px solid transparent;padding:0;cursor:pointer}
.themebtn{display:grid;place-items:center;width:32px;height:32px;background:none;
  border:1px solid var(--line);border-radius:50%;color:var(--ink-2);cursor:pointer}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}

/* filter row */
.tb2{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.tb2-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.search{position:relative;flex:1 1 auto;min-width:0}
.search input{width:100%;font-size:15px;padding:10px 14px 10px 38px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)}
.search input::placeholder{color:var(--ink-3)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
/* words or sentences, in the same row as the rest of the filtering */
.kinds{display:flex;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.kinds button{padding:10px 14px;background:none;border:0;border-right:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.kinds button:last-child{border-right:0}
.kinds button:hover{color:var(--ink);background:var(--surface-2)}
.kinds button[aria-pressed="true"]{background:var(--cobalt);color:#fff}
.levels{display:flex;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.levels button{padding:10px 14px;background:none;border:0;border-right:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.levels button:last-child{border-right:0}
.levels button[aria-pressed="true"]{color:#fff}
.levels button[data-lvl="0"][aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.levels button[data-lvl="1"][aria-pressed="true"]{background:var(--lv1)}
.levels button[data-lvl="2"][aria-pressed="true"]{background:var(--lv2)}
.levels button[data-lvl="3"][aria-pressed="true"]{background:var(--lv3)}
.tb2 .tool{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tb2 .tool:hover{color:var(--ink);border-color:var(--ink-3)}
.tb2 .tool[aria-pressed="true"],.tb2 .tool[aria-expanded="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tool .badge{background:var(--cobalt);color:#fff;border-radius:20px;padding:1px 7px;font-size:10.5px}
.tool[aria-pressed="true"] .badge,.tool[aria-expanded="true"] .badge{background:var(--bg);color:var(--ink)}

.themepanel{border-top:1px solid var(--line-soft);background:var(--surface-2)}
.themepanel[hidden]{display:none}
.themepanel .wrap{padding-top:14px;padding-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:flex;align-items:baseline;gap:8px;padding:6px 12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);border-radius:20px;font-size:12.5px;cursor:pointer}
.chip .cAr{font-family:var(--ar);direction:rtl;font-size:12px;color:var(--ink-3)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--plaque-bg);border-color:var(--plaque-bg);color:var(--plaque-ink)}
.chip[aria-pressed="true"] .cAr{color:var(--plaque-ink);opacity:.75}
.panel-actions{display:flex;gap:14px;align-items:center;margin-top:12px}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding:52px 0 44px;border-bottom:1px solid var(--line-soft);background:
  linear-gradient(var(--surface-2), var(--bg))}
.hero-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.bigplaque{padding:30px 30px 26px;animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bigplaque .plaque-ar{font-size:clamp(26px,4vw,34px);margin-bottom:6px}
.bigplaque .plaque-lat{font-size:clamp(21px,3vw,27px);letter-spacing:.06em}
.bigplaque .bp-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--plaque-rule);
  display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.8;font-weight:600}
.intro{font-size:clamp(17px,2.2vw,20px);line-height:1.62;max-width:58ch;color:var(--ink-2)}
.intro strong{color:var(--ink);font-weight:600}
.intro + .intro{margin-top:14px;font-size:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.fact{display:flex;align-items:baseline;gap:7px;padding:7px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;font-size:13px;color:var(--ink-2)}
.fact b{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── sections ──────────────────────────────────────────────── */
section{padding:56px 0}
section[id]{scroll-margin-top:132px}
section + section{border-top:1px solid var(--line-soft)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:10px}
.sec-head h1,
.sec-head h2{font-family:var(--disp);font-weight:700;font-stretch:112%;
  font-size:clamp(23px,3.2vw,31px);letter-spacing:-.005em}
.sec-head .ar{font-family:var(--arDisp);direction:rtl;color:var(--ink-3);font-size:20px}
.sec-sub{color:var(--ink-2);max-width:66ch;margin-bottom:26px;font-size:15.5px}
.count{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── vocabulary ────────────────────────────────────────────── */
.themeblock{margin-top:34px}
.themeblock:first-child{margin-top:0}
.themeblock > .plaque{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.plaque-n{font-family:var(--disp);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
  opacity:.72;letter-spacing:.04em}
.entries{border:1px solid var(--line);border-top:0;background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.entry{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.6fr) 38px;
  gap:18px;padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.entry:last-child{border-bottom:0}
.entry:hover{background:var(--surface-2)}
/* The word wraps, the play button does not move. Two columns rather than one
   wrapping row: the second is the same width on every line whether there is a
   recording on it or not, so the speakers make a straight column down the page
   instead of hopping about after the longer words. */
.headword{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
/* Two marks in one fixed column: how well it is known, and his voice. Both
   keep their place whatever the word does. */
.hw-marks{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:34px}
/* The line that actually holds the words. unicode-bidi is not inherited, so
   setting it on the row above does nothing here: the right-to-left direction
   comes down and the plaintext rule does not, and "the ب family" came out as
   "family ب the". It has to sit on the element the text is in. */
.hw-text{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
  unicode-bidi:plaintext}
.headword > .say,.s-ar > .say{justify-self:center}
/* Where the two scripts meet. A line of pure Arabic reads right to left as it
   should; a line that opens with Latin, which plenty of the alphabet and
   grammar entries do, reads left to right instead of coming out backwards.
   plaintext lets each line decide from its own first real letter. */
.ar{font-family:var(--ar);direction:rtl;unicode-bidi:plaintext;font-size:24px;line-height:1.75;font-weight:600;cursor:pointer}
.ar:hover{color:var(--cobalt)}
.ar.lat{font-family:var(--disp);direction:ltr;font-size:20px;font-weight:600;font-style:italic}
.lv{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;line-height:1.5;white-space:nowrap}
.lv-1{background:var(--lv1-bg);color:var(--lv1)}
.lv-2{background:var(--lv2-bg);color:var(--lv2)}
.lv-3{background:var(--lv3-bg);color:var(--lv3)}
.tr{font-family:var(--tr);font-size:14px;color:var(--cobalt);letter-spacing:.01em}
.en{font-size:15.5px;margin-top:1px}
.fr{font-family:var(--tr);font-size:13px;font-style:italic;color:var(--ink-3);margin-top:1px}
.note{font-size:13.5px;color:var(--ink-2);margin-top:8px;padding-left:12px;
  border-left:2px solid var(--line)}
.note.flag{border-left-color:var(--amber)}
.star{background:none;border:0;cursor:pointer;color:var(--ink-3);opacity:.4;padding:3px;line-height:0}
.star:hover{color:var(--lv3);opacity:1}
.star[aria-pressed="true"]{color:var(--lv3);opacity:1}
.empty{padding:52px 20px;text-align:center;color:var(--ink-3);border:1px dashed var(--line);
  border-radius:var(--radius)}

/* ── sentences ─────────────────────────────────────────────── */
.sgroup{margin-top:32px}
.sgroup:first-child{margin-top:0}
.sgroup > .plaque{margin-bottom:0}
.sents{border:1px solid var(--line);border-top:0;background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius)}
.sent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 34px;gap:6px 32px;
  padding:18px 20px;border-bottom:1px solid var(--line-soft);align-items:start}
.sent .star{grid-column:3;grid-row:1}
.sent:last-child{border-bottom:0}
.s-ar{grid-column:2;grid-row:1 / span 3;align-self:center;font-family:var(--ar);direction:rtl;unicode-bidi:plaintext;
  text-align:right;font-size:23px;line-height:1.95;font-weight:600;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
/* RTL, so the button sits at the reading end of the line, which is the left. */
.s-ar > .hw-text{grid-column:2;display:block;min-width:0}
.s-ar > .hw-marks{grid-column:1;justify-content:flex-start}
.s-tr{grid-column:1;grid-row:1;font-family:var(--tr);font-size:14px;color:var(--cobalt)}
.s-en{grid-column:1;grid-row:2;font-size:16px}
.s-fr{grid-column:1;grid-row:3;font-family:var(--tr);font-size:13.5px;font-style:italic;color:var(--ink-3)}
@media(max-width:760px){
  .sent{grid-template-columns:1fr 30px;gap:4px 10px}
  .sent .star{grid-column:2;grid-row:1}
  .s-ar{grid-column:1;grid-row:1;margin-bottom:6px}
  .s-tr{grid-row:2}.s-en{grid-row:3}.s-fr{grid-row:4}
}

/* ── tables ────────────────────────────────────────────────── */
.tbl-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin:0 0 10px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:640px}
th{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:14.5px}
tr:last-child td{border-bottom:0}
td.meaning{font-weight:600;min-width:150px}
td.why{color:var(--ink-2);font-size:13.5px;min-width:230px}
td.why span[dir="rtl"]{font-family:var(--ar);font-size:16px;padding:0 .18em;unicode-bidi:isolate}
.pairs{display:flex;flex-direction:column;gap:8px}
.pair{display:flex;flex-direction:column;gap:1px}
.pair .a{font-family:var(--ar);direction:rtl;unicode-bidi:plaintext;text-align:left;font-size:19px;line-height:1.7}
.pair .l{font-family:var(--tr);font-size:12px;color:var(--ink-3)}
td.dz .a{color:var(--ink)} td.dz .l{color:var(--cobalt)}
td.ma .a{color:var(--warn)} td.ma .l{color:var(--warn);opacity:.8}
.shared td.ma .a,.shared td.ma .l{color:var(--ink-3);opacity:1}
.tablewrap + .tbl-label{margin-top:36px}

/* ── forms, cards, alerts ──────────────────────────────────── */
.gate{padding:56px 0 88px}
.gate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:60px;align-items:start}
@media(max-width:900px){.gate-grid{grid-template-columns:1fr;gap:36px}}
.sell{margin-top:26px;display:grid;gap:16px;max-width:54ch}
.sell li{display:flex;gap:13px;font-size:15.5px;color:var(--ink-2)}
.sell b{color:var(--ink);font-weight:600}
.sell .mark{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:2px;
  background:var(--plaque-bg);color:var(--plaque-ink);font-family:var(--ar);font-size:13px;margin-top:2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h1,
.card h2{font-family:var(--disp);font-weight:700;font-size:23px;margin-bottom:4px}
.card .sub{font-size:14.5px;color:var(--ink-2);margin-bottom:22px}
.field{display:grid;gap:6px;margin-bottom:16px}
/* Two short fields that belong to one sentence, side by side rather than
   stacked with all the air of two separate questions. */
.fieldrow{display:flex;flex-wrap:wrap;gap:0 26px;align-items:start}
.fieldrow .field{margin-bottom:10px}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.field input,.field textarea,.field select{width:100%;font-size:15px;padding:11px 13px;background:var(--bg);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)}
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.field .hint{font-size:12.5px;color:var(--ink-3)}
.btn{display:inline-block;width:100%;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:13px 20px;background:var(--plaque-bg);
  color:var(--plaque-ink);border:1px solid var(--plaque-bg);border-radius:var(--radius);
  cursor:pointer;text-decoration:none}
.btn:hover{background:var(--cobalt-lift);border-color:var(--cobalt-lift)}
.btn-sm{width:auto;padding:7px 13px;font-size:11px;letter-spacing:.05em}
.btn-ghost{background:none;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:none;color:var(--ink);border-color:var(--ink-3)}
.btn-danger{background:none;color:var(--warn);border-color:var(--warn)}
.btn-danger:hover{background:var(--warn);color:#fff;border-color:var(--warn)}
.card .alt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-2)}
.alert{border:1px solid var(--line);border-left-width:3px;padding:13px 16px;margin:0 0 22px;
  font-size:14.5px;background:var(--surface);border-radius:2px}
.alert-info{border-left-color:var(--cobalt)}
.alert-ok{border-left-color:var(--green);background:var(--green-soft)}
.alert-warn{border-left-color:var(--amber);background:var(--amber-soft)}
.alert-error{border-left-color:var(--warn);background:var(--warn-soft)}

/* ── admin ─────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;margin:24px 0 18px;flex-wrap:wrap}
.tabs a{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:9px 15px;
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none;background:var(--surface);border-radius:2px}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabs .n{opacity:.6;margin-left:6px}
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px}
.pill-pending{background:var(--lv3-bg);color:var(--lv3)}
.lessonrow .pill{background:var(--accent-soft);color:var(--cobalt)}
.pill-approved{background:var(--lv1-bg);color:var(--lv1)}
.pill-rejected{background:var(--warn-soft);color:var(--warn)}
.pill-admin{background:var(--lv2-bg);color:var(--lv2)}
td.acts{white-space:nowrap;text-align:right}
td.acts form{display:inline}
td .em{font-size:12.5px;color:var(--ink-3);display:block}
td .note{font-size:13px;color:var(--ink-2);font-style:italic;margin-top:4px;max-width:38ch;border:0;padding:0}

footer{border-top:1px solid var(--line);padding:34px 0 56px;color:var(--ink-3);font-size:13.5px}

/* ── responsive ────────────────────────────────────────────── */
@media(max-width:960px){
  .tb-links{display:none}
}
@media(max-width:720px){
  .tb1{height:54px;gap:10px}
  .whoami{display:none}
  .tb2{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:10px}
  /* overflow-x only bites when the box is allowed to be narrower than what is
     in it, which flex:0 0 auto forbids */
  .tb2-tools{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;
    flex:1 1 auto;min-width:0}
  .tb2-tools::-webkit-scrollbar{display:none}
  .levels{flex:0 0 auto}
  .levels button{padding:9px 11px;font-size:11.5px}
  .tb2 .tool{padding:9px 12px;font-size:11.5px}
  section[id]{scroll-margin-top:150px}
  .entry{grid-template-columns:1fr 34px;gap:3px 10px;padding:14px 16px}
  .headword{grid-column:1}
  .star{grid-column:2;grid-row:1}
  .entry > .meaning{grid-column:1/-1}
  .hero{padding:34px 0 32px}
  .bigplaque{padding:22px 22px 20px}
}
/* Paper is a handout. The nav, the phone tab bar and the footer are for
   somebody sitting at the site, and a student holding the sheet cannot
   click any of them. The tab bar is fixed, so left in it repeats on every
   single page. */
@media print{.topbar,.themepanel,.star,footer{display:none}
  body{background:#fff;color:#000}}

/* ── portrait logo ─────────────────────────────────────────── */
.brand-photo{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block;
  box-shadow:0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.18)}
.teacher{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line-soft)}
.teacher img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.16)}
.teacher b{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.teacher span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.selfcard{padding:18px 20px;margin-bottom:24px}
.selfform{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.selfpic{width:46px;height:46px;border-radius:11px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line)}
.selffield{flex:1 1 240px;display:grid;gap:6px}
.selffield label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.selffield input{width:100%;font-size:15px;padding:10px 13px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius)}
.selfform .btn{padding:11px 20px}
.tb-links a .wait{display:inline-block;min-width:17px;margin-left:6px;padding:1px 5px;border-radius:20px;
  background:var(--amber);color:var(--bg);font-size:10.5px;font-weight:700;text-align:center;line-height:1.5}
.testmail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
/* A flex item will not shrink below its own content unless told it may, which
   is how a file input pushed this row off the side of a phone. */
.testmail > *{min-width:0;max-width:100%}
.testmail input[type=file]{max-width:100%}
.testmail .hint{font-size:12.5px;color:var(--ink-3);flex:1 1 240px}

/* saved page */
.pagehead{padding:44px 0 8px;border-bottom:0}
.pagehead + section{border-top:0;padding-top:26px}
.subhead{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.01em}
.empty b{color:var(--ink);font-weight:700}
.wait-saved{background:var(--cobalt);color:#fff}
.steps{counter-reset:s;display:grid;gap:11px;margin:6px 0 0}
.steps li{counter-increment:s;position:relative;padding-left:34px;font-size:15px;color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:5px;background:var(--plaque-bg);color:var(--plaque-ink);
  font-size:11.5px;font-weight:700}
.steps b{color:var(--ink);font-weight:600}
.fineprint{font-size:13px;color:var(--ink-3);margin-top:14px;line-height:1.6}
.advanced{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.advanced summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.advanced summary:hover{color:var(--ink)}
.testmail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}

/* ── Saved: given its own button so nobody has to hunt for it ── */
.savedbtn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:7px 13px 7px 11px;border:1px solid var(--cobalt);border-radius:20px;
  color:var(--cobalt);font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.savedbtn:hover{background:var(--accent-soft)}
.savedbtn.on{background:var(--plaque-bg);border-color:var(--plaque-bg);color:var(--plaque-ink)}
.savedbtn svg{flex:0 0 auto}
.savedbtn b{background:var(--cobalt);color:#fff;border-radius:20px;padding:1px 7px;font-size:10.5px}
.savedbtn.on b{background:var(--plaque-ink);color:var(--plaque-bg)}

/* ── the teacher's bell ─────────────────────────────────────── */
.bellbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);
  color:var(--ink-2);text-decoration:none;background:var(--surface)}
.bellbtn:hover{background:var(--accent-soft);color:var(--cobalt)}
.bellbtn.on{background:var(--plaque-bg);border-color:var(--plaque-bg);color:var(--plaque-ink)}
.bellbtn.has-new{border-color:var(--cobalt);color:var(--cobalt)}
.bellbtn b{position:absolute;top:-5px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--now);color:#fff;font-size:10.5px;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface)}
.bellbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Notices ───────────────────────────────────────────────── */
.nt-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:860px){.nt-wrap{grid-template-columns:minmax(0,1fr)}}
.nt-listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.nt-listhead h2,.nt-ways h2{margin:0}
.nt-ways{display:flex;flex-direction:column;gap:14px}
.nt-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.nt-item{border-bottom:1px solid var(--line-soft)}
.nt-item a{display:flex;flex-direction:column;gap:2px;padding:11px 12px;color:var(--ink);text-decoration:none;
  border-inline-start:3px solid transparent}
.nt-item a:hover{background:var(--surface-2)}
.nt-item.is-new a{background:var(--accent-soft);border-inline-start-color:var(--cobalt)}
.nt-item.is-loud .nt-title{color:var(--amber)}
.nt-when{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nt-new{font-size:10.5px;color:#fff;background:var(--cobalt);border-radius:8px;padding:0 6px;margin-inline-start:4px}
.nt-title{font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.nt-body{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.nt-pages{display:flex;gap:16px;margin-top:12px}
.nt-way h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px;font-size:15.5px}
.nt-on,.nt-off{font-size:11px;font-weight:700;border-radius:8px;padding:1px 8px;letter-spacing:.02em}
.nt-on{background:var(--green-soft);color:var(--green)}
.nt-off{background:var(--surface-2);color:var(--ink-3)}
.nt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.nt-row input{flex:1 1 200px;min-width:0}
.nt-steps{margin:6px 0 0;padding-inline-start:20px;font-size:13.5px;color:var(--ink-2);display:flex;
  flex-direction:column;gap:6px}
.nt-ios{font-size:12.5px}
.nt-devices{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.nt-devices li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;
  padding:6px 10px;border:1px solid var(--line-soft);border-radius:8px}
.nt-devices li.is-this{border-color:var(--green)}
.nt-since{color:var(--ink-3)}

/* ── bottom tab bar, phones only ───────────────────────────── */
.tabbar{display:none}
@media(max-width:960px){
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -2px 14px rgba(0,0,0,.07);
  }
  .tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 2px 8px;text-decoration:none;color:var(--ink-3);font-size:10.5px;font-weight:600;
    letter-spacing:.01em;border-top:2px solid transparent}
  .tabbar a svg{width:21px;height:21px;display:block}
  .tabicon{position:relative;display:block;line-height:0}
  .tabicon b{position:absolute;top:-5px;right:-9px;min-width:16px;padding:0 4px;border-radius:20px;
    background:var(--amber);color:#fff;font-size:9.5px;line-height:16px;text-align:center;font-weight:700}
  .tablabel{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Colour along this bar means one thing only: the page you are on. Saved
     used to be blue whatever you were looking at, so two tabs lit up at once
     and neither of them told you where you were. It keeps its filled star and
     its count, which say what it holds without pretending to be the page. */
  .tabbar a[aria-current="page"]{color:var(--cobalt);border-top-color:var(--cobalt)}
  .tabbar a:active{background:var(--surface-2)}
  .tabbar a.tab-saved svg{fill:currentColor;fill-opacity:.22}
  .tabbar a.tab-saved[aria-current="page"] svg{fill:currentColor;fill-opacity:1}
  .tabbar a.tab-saved .tabicon b{background:var(--cobalt)}

  /* Home sits in the middle and stands up out of the bar. It is the way back
     to everything, and it is a different shape rather than a different
     colour, so it never competes with the mark that says where you are. */
  .tabbar{overflow:visible}
  .tabbar a.tab-home{justify-content:flex-end;padding-top:0}
  .tab-home .tabicon{width:52px;height:52px;margin-top:-24px;border-radius:999px;
    background:var(--cobalt);color:#fff;display:grid;place-items:center;
    border:4px solid var(--surface);box-shadow:0 4px 14px rgba(20,65,126,.32)}
  .tab-home .tabicon svg{width:23px;height:23px}
  .tab-home .tablabel{margin-top:2px}
  /* The line along the top of a tab marks the page you are on. Through a
     raised circle it reads as a line crossed out, so home says it another
     way: the label goes blue like the others, and the circle lightens. */
  .tabbar a.tab-home[aria-current="page"]{border-top-color:transparent}
  .tabbar a.tab-home[aria-current="page"] .tabicon{background:var(--cobalt-lift);
    box-shadow:0 0 0 3px var(--accent-soft),0 4px 14px rgba(20,65,126,.32)}
  .tabbar a.tab-home:active .tabicon{transform:translateY(1px)}
  body:has(.tabbar){padding-bottom:76px}
  .savedbtn span{display:none}
  .savedbtn{padding:7px 10px;gap:5px}
}

/* On paper the bar is not just useless, it is fixed, so it lands on every
   page of the handout. This has to sit after the block above, which
   turns it back on at any width a sheet of A4 lays out at. */
@media print{.tabbar{display:none}}

@media(max-width:420px){
  .savedbtn{display:none}   /* the bottom bar covers it on the smallest screens */
  /* six doors on a narrow phone: the labels give up a little room, not the
     tap targets, which stay the full height of the bar. */
  .tabbar a{font-size:9.5px;padding:9px 1px 8px;letter-spacing:-.01em}
  .tabbar a svg{width:20px;height:20px}
  .hm-stats b{font-size:23px}
}

/* ── watermark: the reader's own name, tiled faintly across the page ── */
/* Light enough that a paying student stops noticing it, and heavier on paper,
   which is where a copy actually leaves. */
.watermark{position:fixed;inset:0;z-index:70;pointer-events:none;
  color:var(--ink);opacity:.032;
  background:currentColor;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:420px 260px;mask-size:420px 260px}
@media print{.watermark{opacity:.16}}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.check input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--cobalt);cursor:pointer}
.check b{color:var(--ink);font-weight:600}

/* ── comparison tables: stack into cards on a phone, no sideways scrolling ── */
.scrollhint{display:none}
@media(max-width:760px){
  .scrollhint{display:none}
  /* Only the tables that actually stack into cards may drop their sideways
     scroll. This used to hit every .tablewrap, which blew the teacher's wide
     tables straight off the side of a phone. */
  .tablewrap:has(table.cmp){border:0;background:none;overflow:visible}
  table.cmp{min-width:0;width:100%;display:block}
  table.cmp thead{display:none}
  table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:100%}
  table.cmp tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:6px 0;margin-bottom:12px}
  table.cmp td{border:0;padding:9px 16px}
  table.cmp td::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:5px}
  table.cmp td.meaning{font-size:17px;font-weight:700;padding-bottom:4px}
  table.cmp td.meaning::before{display:none}
  table.cmp td.dz,table.cmp td.ma{display:inline-block;width:50%;vertical-align:top}
  table.cmp td.why{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:11px}
  table.cmp td.empty-why{display:none}
  table.cmp .pair .a{font-size:18px}
}
.matchmsg{font-size:12.5px;min-height:1.2em;display:block}
.matchmsg.good{color:var(--green)}
.matchmsg.bad{color:var(--warn)}
.field input.is-bad{border-color:var(--warn)}
.field input.is-good{border-color:var(--green)}

/* ══ home page ══════════════════════════════════════════════ */
.home-hero{padding:56px 0 60px;background:linear-gradient(var(--surface-2),var(--bg));
  border-bottom:1px solid var(--line-soft)}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto auto;gap:26px 52px;align-items:center}
.home-copy{grid-column:1;grid-row:1;align-self:end}
.home-cta{grid-column:1;grid-row:2;align-self:start}
.videoframe{grid-column:2;grid-row:1 / span 2;align-self:center}
/* On a phone the video belongs above the buttons, not below them. */
@media(max-width:900px){
  .home-grid{grid-template-columns:1fr;grid-template-rows:none;gap:26px}
  .home-copy,.home-cta,.videoframe{grid-column:1;grid-row:auto}
  .home-hero{padding:30px 0 38px}
}
.home-h1{font-family:var(--disp);font-weight:700;font-stretch:112%;letter-spacing:-.015em;
  font-size:clamp(34px,5.4vw,54px);line-height:1.06}
.home-lede{margin-top:18px;font-size:clamp(16px,2vw,19px);line-height:1.62;color:var(--ink-2);max-width:52ch}
.home-lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.videoframe{max-width:100%}
.videobox{position:relative;padding-top:56.25%;background:var(--plaque-bg);border-radius:var(--radius);
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--plaque-rule),0 10px 30px rgba(13,22,38,.14)}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videocap{margin-top:11px;font-size:13px;color:var(--ink-3);text-align:center}

.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.offer{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column}
.offer > .plaque{border-radius:0}
.offer-body{padding:20px 22px 24px}
.offer-for{font-size:14.5px;color:var(--ink-2);margin-bottom:14px}
.ticks{display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.ticks.big li{font-size:16.5px;padding-left:32px;color:var(--ink)}
.ticks.big li::before{left:4px;top:9px;width:14px;height:7px;border-width:2.5px}

.punch{font-family:var(--disp);font-weight:700;font-size:clamp(21px,3vw,28px);line-height:1.3;
  letter-spacing:-.005em}
.punch span{color:var(--cobalt)}
.punch.small{font-size:clamp(18px,2.4vw,23px);margin-top:28px}
.trial{max-width:60ch}

.libcard{display:grid;gap:16px;padding:30px 32px}
.libcard p{font-size:15.5px;line-height:1.6;opacity:.9;max-width:60ch}
.btn-onplaque{background:var(--plaque-ink);color:var(--plaque-bg);border-color:var(--plaque-ink)}
.btn-onplaque:hover{background:#fff;border-color:#fff;color:var(--plaque-bg)}
.linkish.onplaque{color:var(--plaque-ink);opacity:.85}
.linkish.onplaque:hover{opacity:1;border-bottom-color:var(--plaque-ink)}
@media(max-width:600px){.libcard{padding:24px 20px}}

/* The public header carries two extra buttons. Without this the row overflows
   and flexbox quietly squashes the theme button instead of the long brand name. */
.brand{min-width:0;flex:0 1 auto}
.brand-photo{flex:0 0 auto}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tb-right{min-width:0;flex-wrap:nowrap;flex:0 0 auto}
.tb-right .btn,.tb-right .linkish,.tb-right .logoutform,.themebtn,.savedbtn{flex:0 0 auto}
@media(max-width:600px){
  .tb1{gap:8px}
  .tb-right{gap:7px}
  /* On a phone the two reading links go, because the footer and the page carry
     them. Signing in stays: it used to go with them, and there was then no way
     into an account from a phone at all. */
  .topbar.is-public .tb-right .tb-hide-sm{display:none}
  .topbar.is-public .brand-name{display:none}          /* the photo is the logo at this size */
  /* and the photo keeps its size rather than being squeezed to a sliver by a
     long word in French */
  .topbar.is-public .brand{flex:0 0 auto}
  .brand-photo{width:32px;height:32px;min-width:32px}
  .tb-right .btn-sm{padding:8px 11px;font-size:11.5px;white-space:nowrap;letter-spacing:.03em}
}
/* The narrowest phones still in use. Two words and two settings in a 320 point
   row leaves nothing to spare, so the row itself gives up its margins first. */
@media(max-width:430px){
  .topbar .wrap{padding:0 13px}
  .tb1{gap:7px}
  .tb-right{gap:6px}
  .tb-right .btn-sm{padding:8px 9px}
  .langpick select{padding:5px 7px}
}
/* Narrower than that and something has to go. It is the light and dark switch:
   the page follows the phone's own setting anyway, whereas a visitor who cannot
   find the way in or the way to book has nothing. */
@media(max-width:349px){
  .topbar.is-public .themebtn{display:none}
}
/* The way in reads as a way in: an outline next to the solid one, so the pair
   says "sign in" or "book" rather than looking like two more links. */
.tb-signin{border-color:var(--line)}
.tb-signin:hover{background:none;color:var(--ink);border-color:var(--ink-3)}
.topbar.is-public .tb-signin{color:var(--ink-2)}
.topbar{overflow-x:hidden;overflow-x:clip}


/* ══ vocabulary editor ══════════════════════════════════════ */
.vsearch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.vsearch input[type=search]{flex:1 1 240px;min-width:0;font-size:15px;padding:10px 13px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)}
.vsearch .btn-sm{white-space:nowrap}
.vlist{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.vrow{display:flex;gap:18px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.vrow:last-child{border-bottom:0}
.vrow:hover{background:var(--surface-2)}
.vmain{flex:1 1 auto;min-width:0}
.vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vhead .ar{font-family:var(--ar);direction:rtl;unicode-bidi:plaintext;font-size:21px;font-weight:600;cursor:auto}
.vcat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vid{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.vsub{font-family:var(--tr);font-size:13.5px;color:var(--cobalt);margin-top:2px}
.ven{font-size:14.5px;margin-top:1px}
.vnote{font-size:13px;color:var(--ink-2);margin-top:5px;padding-left:11px;border-left:2px solid var(--line)}
.vacts{display:flex;gap:8px;align-items:center;flex:0 0 auto;flex-wrap:wrap}
.vacts form{display:inline}
.vform{display:block;background:var(--surface-2);border-left:3px solid var(--cobalt)}
.vform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px}
.vform-grid label,.catfields label{display:grid;gap:5px;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vform-grid label.wide{grid-column:1 / -1}
.vform-grid input,.vform-grid select,.catfields input{width:100%;font-size:15px;padding:10px 12px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  text-transform:none;letter-spacing:0;font-weight:400}
.vform-grid .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.vform-acts{display:flex;gap:10px;margin-top:16px}

/* The button that writes one of the three languages out of the English.
   It sits on the caption line rather than under the box, so the boxes stay a
   tidy row of the same height, and it says nothing until you hover it: the
   caption already says which language, and a row of the word Translate three
   times is noise. */
.vlab{display:flex;align-items:center;gap:6px;min-height:16px}
/* Only the ones on a caption line get stripped down to an icon. The one under
   the form is an ordinary button and keeps looking like one. */
.vlab .vtr{
  margin-inline-start:auto;flex:none;border:0;background:none;padding:2px;cursor:pointer;
  color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;
}
.vlab .vtr .vtr-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vtr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.vlab .vtr:hover{color:var(--cobalt)}
.vtr:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.vtr.is-busy{opacity:.5;cursor:progress}
.vtr:disabled{cursor:default}
.vform-grid input.is-fresh{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt)}

.vtr-all{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.vtr-all .btn{width:auto}
/* Where a student is, on the line under their name. Quiet, and the one that
   says nothing is stored is amber, because that is the state that sends
   somebody to a lesson at the wrong hour. */
.stu-tz{white-space:nowrap}
.stu-tz.is-none{color:var(--amber)}

.vtr-msg{font-size:12.5px;color:var(--ink-3)}
.vtr-msg.is-bad{color:var(--amber)}

/* The page that fills the whole library in. */
.tr-counts{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 4px}
.tr-count{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-3)}
.tr-count b{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.tr-count i{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tr-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 0}

.trlog{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;
  max-height:60vh;overflow:auto}
.trlog li{border-top:1px solid var(--line-soft)}
.trlog li:first-child{border-top:0}
.trlog a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:14px;align-items:baseline;padding:9px 2px;text-decoration:none;color:inherit}
.trlog a:hover{background:var(--sunk)}
.trlog .ar{font-family:var(--ar);font-size:17px;direction:rtl;unicode-bidi:plaintext;text-align:right}
.trlog b{font-weight:600;font-size:14px}
.trlog .trl-out{font-size:13.5px;color:var(--ink-3)}
@media (max-width:640px){
  .trlog a{grid-template-columns:1fr;gap:2px}
  .trlog .ar{text-align:start}
}
.catrow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.catfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;flex:1 1 340px}
.pager{display:flex;flex-wrap:wrap;gap:4px;margin-top:20px}
.pager a{padding:7px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  text-decoration:none;font-size:13px;border-radius:2px;font-variant-numeric:tabular-nums}
.pager a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.errlist{margin:0 0 18px;display:grid;gap:5px}
.errlist li{font-size:13.5px;color:var(--warn);padding-left:14px;position:relative}
.errlist li::before{content:"·";position:absolute;left:2px}
.field select{width:100%;font-size:15px;padding:11px 13px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius)}
.field input[type=file]{width:100%;font-size:14px;padding:10px;background:var(--bg);
  border:1px dashed var(--line);border-radius:var(--radius)}
@media(max-width:700px){
  .vrow{flex-direction:column;gap:12px}
  .vacts{width:100%}
}

/* ── teacher strip: the admin pages, reachable on a phone too ── */
/* Thirteen doors do not fit on a laptop, so the bar scrolls. A fade at the
   right edge is the difference between "there is more" and "it is cut off". */
.teacherbar{background:var(--plaque-bg);border-bottom:1px solid var(--plaque-bg);position:relative}
.teacherbar::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--plaque-bg));
}
.teacherbar .wrap{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;
  overflow-x:auto;scrollbar-width:none}
.teacherbar .wrap::-webkit-scrollbar{display:none}
.tb-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--plaque-ink);opacity:.6;white-space:nowrap;flex:0 0 auto}
.teacherbar a{display:inline-flex;align-items:center;gap:6px;color:var(--plaque-ink);
  text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;flex:0 0 auto;
  padding:4px 0;border-bottom:2px solid transparent;opacity:.82}
.teacherbar a:hover{opacity:1}
.teacherbar a[aria-current="page"]{opacity:1;border-bottom-color:var(--plaque-ink)}
.teacherbar a b{background:var(--amber);color:#fff;border-radius:20px;padding:1px 7px;font-size:10.5px}

/* ── booking ────────────────────────────────────────────────── */
.bookframe{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden}
.bookframe iframe{display:block;width:100%;min-height:640px}
@media(max-width:700px){.bookframe iframe{min-height:560px}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.langpick select{appearance:none;background:none;border:1px solid var(--line);border-radius:100px;
  color:var(--ink-2);font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:7px 10px;cursor:pointer}
.langpick select:hover{color:var(--ink);border-color:var(--ink-3)}
/* The public header used to be a dark plaque and this made the language picker
   legible on it. The header is the page colour now, so white on white left the
   language nearly invisible in daylight. It takes the ordinary colours. */
.langpick select{background:var(--surface)}

/* renaming a lesson, and putting one out of sight */
.lessonedit{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.lessonedit form{display:flex;gap:8px;align-items:center;flex:0 1 auto}
.lessonedit input[type=text],.lessonedit input:not([type]){flex:1 1 240px;min-width:0;font-size:14.5px;
  padding:8px 12px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius)}
.lessonedit .btn{white-space:nowrap}
@media(max-width:600px){.lessonedit form{flex:1 1 100%}}

/* ══ one student ═════════════════════════════════════════════ */
.stu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:18px;align-items:start}
.stu-grid .card{margin:0}
.stu-wide{grid-column:1 / -1}
.stu-access{border-color:var(--cobalt)}
.stu-now{margin:0 0 6px;font-size:19px;line-height:1.35}
.stu-now .em{display:block;font-size:13.5px;color:var(--ink-3);font-weight:400;margin-top:3px}
.stu-facts{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:16px 0 0;
  padding-top:16px;border-top:1px solid var(--line-soft);font-size:14.5px}
.stu-facts dt{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px;white-space:nowrap}
.stu-facts dd{margin:0;color:var(--ink-2)}
.stu-facts dd b{color:var(--ink);font-weight:650}
.stu-facts dd .em{color:var(--ink-3);font-size:13px}
@media(max-width:460px){
  .stu-facts{grid-template-columns:1fr;gap:2px 0}
  .stu-facts dd{margin-bottom:10px}
}
.stu-change{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)}
.stu-change summary{cursor:pointer;font-size:13px;color:var(--cobalt)}
.stu-change form{margin-top:12px}
.stu-hist{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.stu-hist summary{cursor:pointer;font-size:13px;color:var(--ink-3)}
.stu-hist summary:hover{color:var(--ink-2)}
.stu-hist .stu-list{margin-top:8px}
.stu-do{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:16px}
.stu-do form{margin:0}
.stu-give{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.stu-give .field{margin-bottom:12px}
.stu-note{margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
.stu-note:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.stu-note .field{margin-bottom:12px}
.stu-note .vform-grid{align-items:start}
.stu-note .btn{margin-top:4px}
.stu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stu-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.stu-list li:last-child{border-bottom:0}
.stu-list .em{display:block;font-size:12.5px;color:var(--ink-3)}
.stu-list .pill{flex:0 0 auto}
.stu-access .btn,.stu-do .btn{width:auto}
.stu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.stu-stats div{background:var(--surface-2);border-radius:var(--radius);padding:12px 10px;text-align:center}
.stu-stats b{display:block;font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums}
.stu-stats span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.3}
.emcopy{display:flex;align-items:center;gap:6px;white-space:nowrap}
.emcopy .copybit{margin-left:0}
.teamlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.teamlist li{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  background:var(--surface);display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:start}
.team-who strong{display:block;font-size:16px}
.team-who .em{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.team-perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:10px;align-items:end}
.team-perms .field{margin:0}
.team-perms .btn{width:auto;align-self:end}
.team-acts{display:flex;flex-wrap:wrap;gap:8px}
.team-acts .btn{width:auto}
@media(max-width:820px){
  .teamlist li{grid-template-columns:1fr}
}
.copybit{margin-left:7px;padding:1px 6px;font:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:none;
  border:1px solid var(--line);border-radius:100px;cursor:pointer;vertical-align:middle}
.copybit:hover{color:var(--cobalt);border-color:var(--cobalt)}
.stu-givehead{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.stulink{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.stulink:hover{border-bottom-color:var(--cobalt)}

/* the teacher's lessons page */
.lessonrow td .who{font-weight:700}
.lessonrow td .em{display:block;font-size:12.5px;color:var(--ink-3)}
.pill-cancelled{background:var(--warn-soft);color:var(--warn)}
.hoursgrid{display:grid;gap:10px;margin-bottom:18px}
.hoursday{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hoursday .dn{width:104px;font-size:13px;font-weight:700}
.hoursday input{width:96px;padding:8px 10px;font-size:14px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);font-variant-numeric:tabular-nums}
.hoursday .to{font-size:13px;color:var(--ink-3)}
@media (max-width:560px){
  .hoursday .dn{width:100%}
  .timegrid{grid-template-columns:repeat(auto-fill,minmax(min(78px,100%),1fr))}
}
.settinggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 20px}

/* days that are different */
.availgrid{display:grid;grid-template-columns:minmax(min(280px,100%),1fr) minmax(min(260px,100%),1fr);gap:20px;align-items:start}
.availform .hoursday input{width:96px}
.availlist{list-style:none;display:grid;gap:10px}
.availlist li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 13px;
  background:var(--surface-2);border-radius:var(--radius);font-size:14.5px}
.availlist .em{display:block;font-size:12.5px;color:var(--ink-3)}
.availacts{display:flex;gap:12px;align-items:center;flex-shrink:0}
@media (max-width:760px){ .availgrid{grid-template-columns:1fr} }

/* ═══ booking ═════════════════════════════════════════════════
   Its own surface: a single card the student works inside, with a
   softer corner than the rest of the site so it reads as a tool
   rather than a page.                                           */
.bookpage{--bk-r:12px;--bk-gap:0px;padding:26px 0 60px}
.bookpage .wrap{max-width:1080px}

.bk{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--bk-r);
  box-shadow:0 1px 2px rgba(13,22,38,.04),0 12px 32px -12px rgba(13,22,38,.16);
  overflow:hidden;min-height:560px;
}
.bk.has-times{grid-template-columns:300px minmax(0,1fr) 232px}
.bk.on-form{grid-template-columns:300px minmax(0,1fr)}
/* each panel keeps its own column, so hiding one never shuffles the others */
.bk-side{grid-column:1;grid-row:1}
.bk-main{grid-column:2;grid-row:1}
.bk-times{grid-column:3;grid-row:1}
.bk-form{grid-column:2;grid-row:1}
.bk-main[hidden],.bk-times[hidden],.bk-form[hidden]{display:none}

/* ── the left panel: who, what, how long ── */
.bk-side{padding:30px 28px;border-right:1px solid var(--line-soft);background:var(--surface)}
.bk-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin-bottom:14px}
.bk-host{font-size:14.5px;color:var(--ink-2);margin:0 0 2px}
.bk-title{font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 20px;line-height:1.2;text-wrap:balance}

.bk-durs{display:inline-flex;padding:3px;background:var(--sunk);border-radius:100px;margin-bottom:22px}
.bk-durs button{
  appearance:none;border:0;background:none;cursor:pointer;border-radius:100px;
  padding:8px 15px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);
  transition:background .14s ease,color .14s ease;
}
.bk-durs button:hover{color:var(--ink)}
.bk-durs button[aria-pressed="true"]{background:var(--surface);color:var(--cobalt);
  box-shadow:0 1px 2px rgba(13,22,38,.12)}

.bk-facts{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 20px}
.bk-facts li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.bk-facts svg{flex:0 0 17px;margin-top:2px;color:var(--ink-3)}
.bk-note{font-size:14px;line-height:1.6;color:var(--ink-2);padding-top:18px;
  border-top:1px solid var(--line-soft);white-space:pre-line}

/* ── the middle panel: the month ── */
.bk-main{padding:30px 28px;min-width:0}
.bk-h2{font-family:var(--disp);font-size:20px;font-weight:700;margin:0 0 20px;letter-spacing:-.01em}

.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cal-month{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.cal-nav{display:flex;gap:4px}
.cal-nav button{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:0;background:none;color:var(--cobalt);cursor:pointer;transition:background .14s ease;
}
.cal-nav button:hover:not(:disabled){background:var(--accent-soft)}
.cal-nav button:disabled{color:var(--ink-3);opacity:.4;cursor:default}

.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.cal-dows span{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:6px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cell{display:grid;place-items:center;height:44px}
.cal-day{
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent-soft);color:var(--cobalt);font:inherit;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;display:grid;place-items:center;position:relative;
  transition:background .14s ease,color .14s ease,transform .1s ease;
}
.cal-day:hover{background:var(--cobalt);color:#fff}
.cal-day:active{transform:scale(.94)}
.cal-day[aria-pressed="true"]{background:var(--cobalt);color:#fff}
.cal-day::after{
  content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.55;
}
.cal-day[aria-pressed="true"]::after{opacity:.8}
.cal-day.is-off{background:none;color:var(--ink-3);cursor:default;font-weight:400;opacity:.55}
.cal-day.is-off::after{display:none}
.cal-day.is-off:hover{background:none;color:var(--ink-3)}
.cal-today{box-shadow:inset 0 0 0 1.5px var(--cobalt)}

.tzrow{display:flex;align-items:center;gap:9px;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-2)}
.tzrow svg{flex:0 0 17px;color:var(--ink-3)}
.tzrow select{
  flex:1 1 auto;min-width:0;appearance:none;border:1px solid transparent;background:none;
  color:var(--ink);font:inherit;font-size:14px;padding:6px 8px;border-radius:6px;cursor:pointer;
}
.tzrow select:hover{border-color:var(--line);background:var(--bg)}

/* ── the right panel: the times ── */
.bk-times{padding:30px 22px 30px 8px;display:flex;flex-direction:column;min-width:0}
.bk-times-head{font-size:14.5px;font-weight:600;margin-bottom:14px;min-height:22px}
.bk-slots{display:flex;flex-direction:column;gap:9px;overflow-y:auto;max-height:392px;
  padding-right:6px;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%)}
.bk-slots:not([data-more="1"]){-webkit-mask-image:none;mask-image:none}
.slot{
  display:flex;gap:7px;
}
.slot button{
  flex:1 1 auto;padding:13px 8px;border-radius:8px;border:1px solid var(--cobalt);
  background:var(--surface);color:var(--cobalt);font:inherit;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:background .14s ease,color .14s ease;
}
.slot button:hover{background:var(--accent-soft)}
.slot.is-picked button.time{background:var(--ink-2);border-color:var(--ink-2);color:#fff;flex:1 1 45%}
.slot.is-picked button.next{background:var(--cobalt);border-color:var(--cobalt);color:#fff;flex:1 1 55%}
.slot.is-picked button.next:hover{background:var(--cobalt-lift);border-color:var(--cobalt-lift)}
.bk-empty{font-size:14px;color:var(--ink-3);padding:10px 0}

/* ── the details step ── */
.bk-form{padding:30px 28px;min-width:0;max-width:520px}
.bk-back{
  display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;
  color:var(--cobalt);font:inherit;font-size:14px;font-weight:600;padding:0;margin-bottom:18px;
}
.bk-back:hover{color:var(--cobalt-lift)}
.bk-when{
  display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--surface-2);
  border-radius:10px;margin-bottom:22px;font-size:15px;line-height:1.5;
}
.bk-when svg{flex:0 0 17px;margin-top:2px;color:var(--cobalt)}
.bk-when b{display:block;font-weight:600}
.bk-when span{font-size:13px;color:var(--ink-3)}

/* a long address he has to copy: it wraps rather than widening the page */
.urlcopy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.urlcopy code{flex:1 1 240px;min-width:0;word-break:break-all;overflow-wrap:anywhere;
  font-size:12.5px;background:var(--surface-2);padding:6px 8px;border-radius:4px}

/* tomorrow's lessons, with the message ready to send */
/* Rows divided by a hairline rather than a box each: seven boxes stacked
   read as seven separate things to deal with, not one list. */
.soonlist{list-style:none;margin:0;padding:0;display:grid}
.soonlist > li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;
  padding:11px 0;border-top:1px solid var(--line-soft)}
.soonlist > li:first-child{border-top:0;padding-top:2px}
.soonlist strong{font-family:var(--disp);font-size:15px}
.soonlist .em{display:block;font-size:12.5px;color:var(--ink-3)}
.soon-do{display:flex;gap:8px;flex-wrap:wrap}

/* one lesson, or the same time every week */
.bk-lab{font-size:13.5px;font-weight:600;color:var(--ink)}
.bk-hint{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.bk-every{display:grid;gap:8px}
.bk-every label{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);font-weight:400}
.bk-every label:hover{border-color:var(--cobalt)}
.bk-every label input[type=radio]{flex:0 0 17px;width:17px;height:17px;min-width:17px;
  margin:2px 0 0;padding:0;border-radius:50%;accent-color:var(--cobalt)}
.bk-every label span{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--ink-2)}
.bk-every b{color:var(--ink);font-weight:600}
.bk-every label:has(input:checked){border-color:var(--cobalt);background:var(--accent-soft)}

.bk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.bk-field label{font-size:13.5px;font-weight:600;color:var(--ink)}
.bk-field .opt{font-weight:400;color:var(--ink-3)}
.bk-field input,.bk-field textarea{
  width:100%;font:inherit;font-size:15px;padding:11px 13px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:8px;
}
.bk-field input:focus,.bk-field textarea:focus{outline:2px solid var(--accent-soft);
  border-color:var(--cobalt);outline-offset:0}
.bk-submit{
  width:auto;padding:13px 26px;border-radius:100px;border:1px solid var(--cobalt);
  background:var(--cobalt);color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.bk-submit:hover{background:var(--cobalt-lift);border-color:var(--cobalt-lift)}
.bk-submit[disabled]{opacity:.6;cursor:default}
.bk-fine{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.5}

/* ── after booking, and cancelling ── */
.bk-card{
  max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--bk-r);padding:34px 32px;text-align:center;
  box-shadow:0 1px 2px rgba(13,22,38,.04),0 12px 32px -12px rgba(13,22,38,.16);
}
.bk-tick{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  background:var(--green-soft);color:var(--green)}
.bk-card h1{font-family:var(--disp);font-size:25px;font-weight:700;margin:0 0 8px;letter-spacing:-.015em}
.bk-card .lead{font-size:15px;color:var(--ink-2);margin-bottom:22px;line-height:1.6}
.bk-recap{text-align:left;display:flex;flex-direction:column;gap:12px;padding:16px 18px;
  background:var(--surface-2);border-radius:10px;margin-bottom:20px}
.bk-recap div{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.bk-recap svg{flex:0 0 17px;margin-top:2px;color:var(--cobalt)}
.bk-recap b{display:block;font-weight:600}
.bk-recap span{display:block;font-size:13px;color:var(--ink-3)}
.bk-addcal{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.bk-addcal a{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink-2);font-size:13.5px;font-weight:600;text-decoration:none;
}
.bk-addcal a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.bk-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.bk-danger{
  padding:12px 24px;border-radius:100px;border:1px solid var(--warn);background:none;color:var(--warn);
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.bk-danger:hover{background:var(--warn);color:#fff}
.bk-quiet{
  display:inline-flex;align-items:center;padding:12px 24px;border-radius:100px;
  border:1px solid var(--line);background:none;color:var(--ink-2);text-decoration:none;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.bk-quiet:hover{border-color:var(--ink-3);color:var(--ink)}

/* ── the student's own lessons, under the card ── */
.bk-mine{max-width:1080px;margin:26px auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--bk-r);padding:22px 26px}
/* Standing above the times rather than under them, so it wants a little air
   below it instead of above, and the lesson itself wants to be noticed. */
.bk-mine.is-first{margin:0 auto 22px;border-color:var(--cobalt)}
.bk-mine.is-first li{background:var(--accent-soft)}
.bk-mine h2{font-family:var(--disp);font-size:17px;font-weight:700;margin:0 0 14px}
.bk-mine ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.bk-mine li{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 14px;background:var(--surface-2);border-radius:9px;font-size:14.5px}
.bk-mine .em{display:block;font-size:12.5px;color:var(--ink-3)}
.bk-mine-do{display:flex;gap:14px;flex-wrap:wrap}
.bk-more{margin-top:9px}
.bk-more summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--cobalt);
  padding:7px 2px;display:inline-flex;align-items:center;gap:6px}
.bk-more summary::-webkit-details-marker{display:none}
.bk-more summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.bk-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.bk-more summary:hover{text-decoration:underline}
.bk-more ul{margin-top:9px}

/* after booking, to somebody with nowhere to see it */
.bk-acct{max-width:1080px;margin:22px auto 0;background:var(--surface);
  border:1px solid var(--cobalt);border-radius:var(--bk-r);padding:24px 26px;display:grid;gap:10px}
.bk-acct h2{font-family:var(--disp);font-size:19px;font-weight:700;margin:0}
.bk-acct p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.bk-acct .cta-row{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.bk-acct .cta-row a:not(.btn){font-size:14px;color:var(--cobalt)}

.bk-loading{padding:40px 0;text-align:center;color:var(--ink-3);font-size:14px}

@media (max-width:900px){
  .bk,.bk.has-times,.bk.on-form{grid-template-columns:1fr;min-height:0}
  .bk-side,.bk-main,.bk-times,.bk-form{grid-column:1;grid-row:auto}
  .bk-side{border-right:0;border-bottom:1px solid var(--line-soft);padding:24px 22px}
  .bk-avatar{width:48px;height:48px}
  .bk-title{font-size:22px;margin-bottom:16px}
  .bk-main{padding:24px 22px}
  .bk-times{padding:0 22px 26px;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:20px}
  /* One time per row on a phone, as on a wide screen. Two columns fitted
     more on the screen, but the picked one had to take a whole row to hold
     its Next button, and every time after it jumped to a new place. A list
     that rearranges itself under your thumb is worse than a longer list. */
  .bk-slots{max-height:none;overflow:visible;display:flex;flex-direction:column}
  .bk-form{padding:24px 22px}
  .bookpage{padding:16px 0 40px}
  .bookpage .wrap{padding-left:14px;padding-right:14px}
}
@media (max-width:420px){
  .cal-cell{min-height:34px}
  .cal-day{font-size:14px}
}

/* ═══ learning: units, notes, exercises ═══════════════════════ */
.learnpage{padding:26px 0 60px}
.learn-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-bottom:22px}
.learn-head h1{font-family:var(--disp);font-size:29px;font-weight:700;letter-spacing:-.02em}
.lvltabs{display:inline-flex;padding:3px;background:var(--sunk);border-radius:100px;gap:2px;
  max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lvltabs::-webkit-scrollbar{display:none}
.lvltabs a{white-space:nowrap;flex:0 0 auto}
.lvltabs a{padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;color:var(--ink-2);
  text-decoration:none;transition:background .14s ease,color .14s ease}
.lvltabs a:hover{color:var(--ink)}
.lvltabs a[aria-selected="true"]{background:var(--surface);color:var(--cobalt);
  box-shadow:0 1px 2px rgba(13,22,38,.12)}

.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr));gap:16px}
.ucard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);
  transition:border-color .14s ease,transform .1s ease,box-shadow .14s ease}
.ucard:hover{border-color:var(--cobalt);box-shadow:0 8px 22px -14px rgba(13,22,38,.4)}
.ucard:active{transform:translateY(1px)}
.ucard-top{background:var(--plaque-bg);color:var(--plaque-ink);padding:20px 18px;min-height:82px;
  display:flex;align-items:center;justify-content:flex-end;
  box-shadow:inset 0 0 0 1px var(--plaque-rule)}
.ucard-ar{font-family:var(--arDisp);font-size:23px;direction:rtl;opacity:.95}
.ucard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.ucard-body h2{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.01em}
.ucard-body p{font-size:13.5px;color:var(--ink-2);line-height:1.5;flex:1}
.ucard.is-done .ucard-top{background:var(--green);box-shadow:none}

.ubar{position:relative;height:22px;border-radius:100px;background:var(--sunk);overflow:hidden;
  display:flex;align-items:center}
.ubar span{position:absolute;inset:0 auto 0 0;background:var(--accent-soft)}
.ubar b{position:relative;z-index:1;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ubar.big{height:30px;min-width:170px}
.is-done .ubar span{background:var(--green-soft)}
.is-done .ubar b{color:var(--green)}

.u-empty{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:34px;
  text-align:center;color:var(--ink-2)}
.u-empty b{color:var(--ink);font-size:17px}

/* the unit page */
.unitwrap,.notewrap{max-width:720px}
.crumb{font-size:14px;margin-bottom:16px}
.crumb a{color:var(--cobalt);text-decoration:none;font-weight:600}
.uhead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.uhead h1{font-family:var(--disp);font-size:28px;font-weight:700;letter-spacing:-.02em}
.uhead-ar{font-family:var(--arDisp);font-size:19px;color:var(--cobalt);direction:rtl;margin-top:2px}
.uhead-sub{font-size:14.5px;color:var(--ink-2);margin-top:8px;max-width:44ch}

.learnpage ol.steps{list-style:none;display:flex;flex-direction:column;gap:0;padding:0}
.learnpage ol.steps li{display:flex;align-items:center;gap:14px;padding:15px 0;position:relative}
.learnpage ol.steps li + li{border-top:1px solid var(--line-soft)}
.step-ic{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-3)}
.is-done .step-ic{background:var(--green-soft);color:var(--green)}
.learnpage ol.steps a{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:3px;text-decoration:none;color:var(--ink)}
.learnpage ol.steps li > span:not(.step-ic):not(.step-tick){flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.learnpage ol.steps b{display:block;width:100%;font-size:15.5px;font-weight:600;line-height:1.35}
.learnpage ol.steps a:hover b{color:var(--cobalt)}
.step-kind{display:block;width:100%;font-size:12.5px;color:var(--ink-3)}
.step-tick{color:var(--green);font-weight:700;font-size:17px}

/* the learning note */
.note-kind{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:6px}
.notewrap h1{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.02em;
  margin-bottom:22px;text-wrap:balance}
.notebody{font-size:16.5px;line-height:1.68}
.notebody p{margin-bottom:16px;color:var(--ink-2);max-width:62ch}
.notebody b{color:var(--ink)}
.notebody h2{font-family:var(--disp);font-size:20px;font-weight:700;margin:32px 0 12px;color:var(--ink)}
/* A drawing inside a learning note. Same line art the lessons use, sized to
   the reading column rather than to a slide, and it takes the ink colour so it
   works in both themes without a second copy. */
.n-draw{margin:26px auto;text-align:center;max-width:340px}
.n-draw .dw{width:100%;height:auto;color:var(--teal,#14918A)}
.n-draw figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-3)}
@media (max-width:520px){ .n-draw{max-width:260px;margin:20px auto} }

.wcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:10px;margin:0 0 20px}
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:14px 16px}
.wcard-ar{font-family:var(--ar);font-size:21px;line-height:1.5;color:var(--ink)}
.wcard-tr{font-family:var(--tr);font-size:13.5px;color:var(--cobalt);margin-top:3px}
.wcard-en{font-size:14px;color:var(--ink-2);margin-top:5px}
.wcard-note{font-size:12.5px;color:var(--ink-3);margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line-soft);line-height:1.5}
.note-done{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--line)}
.done-yes{color:var(--green);font-weight:600;font-size:15px}

/* the exercise player */
.exwrap{max-width:600px}
.ex-top{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.ex-quit{font-size:20px;line-height:1;color:var(--ink-3);text-decoration:none;padding:4px}
.ex-quit:hover{color:var(--ink)}
.ex-bar{flex:1;height:10px;border-radius:100px;background:var(--sunk);overflow:hidden}
.ex-bar span{display:block;height:100%;background:var(--cobalt);border-radius:100px;
  transition:width .3s ease}
.ex-count{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ex-stage{min-height:290px}
.ex-q{font-size:19px;line-height:1.4;font-weight:650;color:var(--ink);
  margin-bottom:18px;text-wrap:balance}
.ex-prompt{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:22px 20px;margin-bottom:22px;text-align:center}
/* The spelling leads and the Arabic sits under it. Most people here are
   learning to speak Derja and have not been taught the script yet, so a word
   printed only in Arabic is a word they cannot read, and an answer they cannot
   read is a guess. The shape stays on the screen, underneath, where the eye
   gets used to it without being asked to decode it. */
.ex-tr{display:block;font-family:var(--tr);font-size:27px;font-weight:600;line-height:1.35;
  color:var(--ink);direction:ltr;unicode-bidi:isolate}
.ex-ar{display:block;font-family:var(--ar);font-size:21px;line-height:1.6;color:var(--ink-3)}
.ex-prompt .ex-tr + .ex-ar{margin-top:8px}
.ex-en{display:block;font-size:19px;font-weight:600;color:var(--ink)}
.ex-lead{font-size:27px;line-height:1.35}
/* The meaning under a prompt is support, not the headline, whether it comes
   straight after the Arabic or after the spelling of it. */
.ex-prompt .ex-ar + .ex-en,
.ex-prompt .ex-tr + .ex-en{font-size:14.5px;font-weight:400;color:var(--ink-3);margin-top:8px}
.ex-prompt .ex-lead + .ex-ar{margin-top:10px}
/* A word being introduced, with nothing to answer. Marked out from a question
   so that the screen says at a glance which of the two it is. */
.ex-teach{border-color:var(--cobalt);background:var(--accent-soft);padding:28px 20px}
.ex-foot.is-teach .ex-keys{display:none}
.ex-teach .ex-en{margin-top:10px;font-size:17px;font-weight:500;color:var(--ink-2)}
.ex-note{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-3);
  max-width:42ch;margin-left:auto;margin-right:auto}
.ex-teach .say{margin-top:14px}
.ex-opts{display:flex;flex-direction:column;gap:10px}
.ex-opts.is-ar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex-opt{text-align:left;padding:14px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15.5px;cursor:pointer;
  transition:border-color .12s ease,background .12s ease}
.ex-opt:hover:not(:disabled){border-color:var(--cobalt)}
.ex-opt.is-on{border-color:var(--cobalt);background:var(--accent-soft)}
.ex-opt.is-right{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.ex-opt.is-wrong{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.ex-opt:disabled{cursor:default}
.ex-opts.is-ar .ex-opt{text-align:center}
.o-tr{display:block;font-family:var(--tr);font-size:19px;font-weight:600;line-height:1.35;
  color:var(--ink);direction:ltr;unicode-bidi:isolate}
.o-ar{display:block;font-family:var(--ar);font-size:15px;line-height:1.5;color:var(--ink-3);
  margin-top:2px}
.ex-opt.is-right .o-ar,.ex-opt.is-wrong .o-ar{color:inherit;opacity:.75}
.ex-opt.is-on .o-tr,.ex-opt.is-right .o-tr,.ex-opt.is-wrong .o-tr{color:inherit}

.ex-line{min-height:60px;border-bottom:2px dashed var(--line);margin-bottom:20px;padding:10px 4px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.ex-hint{font-size:14px;color:var(--ink-3)}
.ex-word{font-family:var(--ar);font-size:20px;background:var(--accent-soft);color:var(--cobalt);
  padding:6px 12px;border-radius:8px}
.ex-tiles{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.ex-tile{font-family:var(--ar);font-size:20px;padding:9px 15px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 2px 0 var(--line)}
.ex-tile:hover{border-color:var(--cobalt)}
.ex-tile.is-used{opacity:.3;box-shadow:none;cursor:default}

.ex-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.ex-verdict{font-size:15px;color:var(--ink-2)}
.ex-foot.is-right .ex-verdict{color:var(--green);font-weight:600}
.ex-foot.is-wrong .ex-verdict b{color:var(--warn)}
.ex-go{margin-left:auto}
.ex-end{text-align:center;padding:30px 0}
.ex-tick{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  background:var(--green-soft);color:var(--green)}
.ex-end h2{font-family:var(--disp);font-size:25px;font-weight:700;margin-bottom:6px}
.ex-score{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}

@media (max-width:560px){
  .ex-opts.is-ar{grid-template-columns:1fr}
  .ex-tr{font-size:24px}
  .ex-ar{font-size:19px}
  .learn-head{flex-direction:column;align-items:flex-start}
  .lvltabs{width:100%;justify-content:space-between}
}


/* ── library passes ─────────────────────────────────────────── */
.grantform{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 18px}
.grantform > p{grid-column:1/-1;margin:0}

/* ── an entry Aymen has not put his name to yet ─────────────── */
.unchecked{display:inline-block;vertical-align:middle;margin-inline-start:7px;padding:1px 7px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border-radius:999px;border:1px dashed var(--line);color:var(--ink-3);white-space:nowrap}
.entry.is-new{border-inline-start:2px solid var(--line)}

/* ── the rest of the library, held back ─────────────────────── */
.locked{margin:26px 0 0;padding:22px 24px;border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--surface-2);text-align:center}
.locked h3{margin:0 0 6px;font-size:17px}
.locked p{margin:0 auto;max-width:44ch;font-size:14px;color:var(--ink-2)}
.locked .btn{width:auto;margin-top:16px}

/* ── going through entries that came from a source ──────────── */
.reviewbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 18px;
  padding:13px 16px;border:1px dashed var(--line);border-radius:var(--radius);font-size:14px}
.reviewbar span{flex:1 1 260px;color:var(--ink-2)}
.reviewbar b{color:var(--ink)}
.reviewbar .btn{width:auto;flex:0 0 auto}
.vsrc{margin-top:5px;font-size:12px;color:var(--ink-3)}
.vflag{margin-top:4px;font-size:12.5px;color:var(--warn,#8a5a00)}
.vrow .unchecked{border-style:dashed}

/* ── front door ─────────────────────────────────────────────── */
.btn-lg{font-size:14px;padding:16px 26px}

/* today's word, a thin band under the hero */
.potd-band{background:var(--surface-2);border-block:1px solid var(--line);padding:13px 0}
.potd{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px}
.potd-label{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.potd-ar{font-family:var(--ar);font-size:23px;line-height:1.3;color:var(--ink)}
.potd-tr{font-size:14.5px;color:var(--cobalt);font-style:italic}
.potd-en{font-size:14.5px;color:var(--ink-2)}
.potd-more{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.potd .say{align-self:center}

.booth-say.is-asleep{color:var(--amber)}

/* fixing the words without leaving the booth */
.booth-edit{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:left}
.be-grid{display:grid;gap:10px 14px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.be-grid label{display:grid;gap:4px;font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.be-grid input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);font:inherit;font-size:15px;letter-spacing:0;text-transform:none}
.be-grid input:focus{outline:2px solid var(--cobalt);outline-offset:-1px;border-color:var(--cobalt)}
.be-grid input[name="ar"]{font-family:var(--ar);font-size:19px}
.be-wide{grid-column:1/-1}
.be-do{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.be-msg{font-size:13px;color:var(--ink-3)}

/* a short numbered list of things to do somewhere else */
.steps-plain{margin:0 0 18px;padding-left:22px;display:grid;gap:8px;font-size:14.5px;
  color:var(--ink-2);line-height:1.55;list-style:decimal outside}
.steps-plain li{padding-left:4px}
.steps-plain b{color:var(--ink)}
.steps-plain a{color:var(--cobalt)}

/* two words on one line, and what they would look like apart */
.splitlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.splitlist li{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  background:var(--bg);display:grid;gap:10px}
.splitlist.is-plain li{grid-template-columns:1fr auto;align-items:center}
.sp-was{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sp-was .ar{font-family:var(--ar);font-size:19px}
.sp-was .em{font-size:13px;color:var(--ink-3)}
.sp-warn{font-size:12px;color:var(--amber);background:var(--amber-soft);
  padding:1px 8px;border-radius:20px}
.sp-form{display:grid;gap:8px}
.sp-part{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.sp-part input{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.sp-part input:focus{outline:2px solid var(--cobalt);outline-offset:-1px}
.sp-acts{display:flex;gap:8px;align-items:center}
.sp-form p{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}

/* the recording queue, so any one of them can be gone to directly */
.booth{scroll-margin-top:118px}
.reclist{list-style:none;margin:12px 0 0;padding:0;max-height:360px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--radius);scrollbar-width:thin}
.reclist li{border-bottom:1px solid var(--line-soft)}
.reclist li:last-child{border-bottom:0}
.reclist button{width:100%;display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:4px 12px;padding:9px 13px;background:none;border:0;
  text-align:left;font:inherit;cursor:pointer;color:var(--ink)}
.reclist button:hover{background:var(--surface-2)}
.rl-ar{font-family:var(--ar);font-size:17px;line-height:1.5}
.rl-tr{font-size:13px;color:var(--cobalt);font-style:italic;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-en{grid-column:2;font-size:13px;color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-mark{grid-row:1/3;grid-column:3;color:var(--green);font-weight:700;font-size:14px}
.reclist li.is-got button{background:var(--green-soft)}
.reclist li.is-here button{box-shadow:inset 3px 0 0 var(--cobalt)}
@media(max-width:600px){
  /* room to read the meaning rather than a line ending in three dots */
  .rl-en{white-space:normal;overflow:visible}
}

/* ══ the student's own page ══════════════════════════════════ */
.hm-top{padding:26px 0 6px}
.hm-top h1{font-family:var(--disp);font-weight:700;font-stretch:110%;
  font-size:clamp(24px,4vw,32px);letter-spacing:-.01em;margin-bottom:16px}
.hm-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hm-stats li{flex:1 1 0;min-width:92px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;display:grid;gap:2px}
.hm-stats b{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1;
  color:var(--cobalt);font-variant-numeric:tabular-nums}
.hm-stats span{font-size:12.5px;color:var(--ink-3);line-height:1.3}
.hm-note{margin-top:10px;font-size:13.5px;color:var(--ink-3)}

/* A lesson that is booked sits at the top, where it cannot be missed. */
.hm-lesson{display:flex;align-items:center;gap:14px;margin-top:16px;
  background:var(--accent-soft);border:1px solid var(--cobalt);border-radius:var(--radius);
  padding:14px 18px;text-decoration:none;color:var(--ink)}
.hm-lesson:hover{background:var(--surface)}
.hm-lesson-ic{flex:0 0 auto;width:22px;height:22px;color:var(--cobalt)}
.hm-lesson-ic svg{width:22px;height:22px;display:block}
.hm-lesson-txt{display:grid;gap:2px;min-width:0}
.hm-lesson-k{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt)}
.hm-lesson-txt b{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.25}
.hm-lesson-l{font-size:13px;color:var(--ink-2)}

/* the one thing they were part way through */
.hm-go{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--plaque-bg);color:var(--plaque-ink);border-radius:var(--radius);
  padding:20px 24px;text-decoration:none;margin-bottom:18px}
.hm-go:hover{background:var(--cobalt-lift)}
.hm-go-txt{display:grid;gap:3px;flex:1 1 220px;min-width:0}
.hm-go-k{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;opacity:.8}
.hm-go-txt b{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.25}
.hm-go-l{font-size:14px;opacity:.85}
.hm-go-btn{flex:0 0 auto;background:var(--plaque-ink);color:var(--plaque-bg);
  border-color:var(--plaque-ink);width:auto;pointer-events:none}

/* everything else is a choice, laid out as cards */
.hm-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.hm-card{height:100%;display:flex;flex-direction:column;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;text-decoration:none;color:inherit}
.hm-card:hover{border-color:var(--cobalt)}
.hm-card-h{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt)}
.hm-big{font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums}
.hm-when{font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.3}
.hm-card-p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.hm-card-more{margin-top:auto;padding-top:6px;font-size:13px;color:var(--cobalt);font-weight:600}
.hm-card-more::after{content:" \203A"}
.hm-ring{position:relative;width:52px;height:52px;display:block}
.hm-ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.hm-ring circle{fill:none;stroke-width:3.2}
.hm-ring b{position:absolute;inset:0;display:grid;place-content:center;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* a unit somebody cannot open yet: what is in it, and what opens it */
.ushut{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:22px 24px;margin:20px 0 8px;display:grid;gap:10px}
.ushut h2{font-family:var(--disp);font-weight:700;font-size:20px;margin:0}
.ushut p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:62ch}
.ushut .cta-row{margin-top:6px}
.ushut.is-done{border-color:var(--green);background:var(--green-soft)}
.ushut.is-done h2{color:var(--green)}
.ushut.is-done p{color:var(--ink)}
.ushut-h{font-family:var(--disp);font-weight:700;font-size:17px;margin:26px 0 10px}

/* The sale, at a locked unit and at the end of the last free one. The ring is
   the same cobalt as the recommended card on the prices page: one thing, one
   look, wherever it is met. */
.offer-box{border:1px solid var(--cobalt);box-shadow:0 0 0 1px var(--cobalt);border-radius:var(--radius);
  background:var(--surface);padding:24px 26px 22px;margin:22px 0 8px;display:grid;gap:12px}
.offer-kick{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt);margin:0}
.offer-box h2{font-family:var(--disp);font-weight:700;font-size:21px;margin:0;line-height:1.3}
.offer-box.is-done h2{color:var(--green)}
.ofr-text{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:60ch}
.offer-box .payopts{margin:6px 0 0;max-width:420px}
.offer-box .payopt-note{margin:-4px 0 0}
.offer-cta{margin-top:4px}
.offer-fine{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.offer-else{margin:14px 0 0;font-size:14px}
@media (max-width:560px){ .offer-box{padding:18px 18px 16px} }
.steps.is-shut li{opacity:.72}
.steps.is-shut li b{font-weight:600}

/* what students say: their words, set like cards on a wall.
   Not .say, which is already the little speaker button. */
.saidlist{list-style:none;margin:0;padding:0;display:grid;align-items:start;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.saidcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.said-stars{color:var(--amber);letter-spacing:.12em;font-size:14px;margin:0;line-height:1}
.saidcard blockquote{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}
.saidcard blockquote::before{content:"\201C"}
.saidcard blockquote::after{content:"\201D"}
.said-by{margin:auto 0 0;padding-top:4px;font-size:13.5px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 10px}
.said-by b{font-family:var(--disp);font-weight:700;color:var(--ink)}
.said-by span{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
.saidmore{margin-top:16px}
.saidmore summary{cursor:pointer;display:inline-block;font-size:14px;color:var(--cobalt);
  padding:6px 0;list-style:none}
.saidmore summary::-webkit-details-marker{display:none}
.saidmore summary::after{content:" \203A";font-weight:700}
.saidmore[open] summary::after{content:" \02C4"}
.saidmore summary:hover{text-decoration:underline}
.saidmore .saidlist{margin-top:16px}

/* On a phone six cards one under another is a wall to scroll past. They
   become a row you swipe instead, with the next one peeking to say so. */
@media (max-width:700px){
  .saidlist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding:2px 0 10px;margin-inline:-4px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .saidcard{flex:0 0 min(84%,320px);scroll-snap-align:center;padding:18px 20px}
  .saidlist::after{content:"";flex:0 0 4px}
}

/* the same reviews on his own page, where the buttons live */
.saylist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.saylist li{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  background:var(--bg);display:grid;gap:8px}
.saylist li.is-off{opacity:.6}
.say-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.say-who strong{font-family:var(--disp);font-size:15.5px}
.say-who .stars{color:var(--amber);letter-spacing:.1em;font-size:13px}
.say-who .em{font-size:12.5px;color:var(--ink-3)}
.say-body{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.say-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* the booking block: the main act, so it gets the plaque */
.ticks.onplaque li{color:inherit;opacity:.92}
.ticks.onplaque li::before{border-color:currentColor}
.fineprint.onplaque{opacity:.75;color:inherit}

/* the two self-study zones */
.twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.zone{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.zone-head{display:grid;gap:5px}
.zone-kind{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt)}
.zone h3{font-family:var(--disp);font-weight:700;font-stretch:110%;font-size:21px;
  letter-spacing:-.01em;margin:0}
.zone > p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0}
.zone-cta{margin:auto 0 0;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.zone-cta .fineprint{margin:0}

/* a peek at the first few units */
.unitpeek{display:grid;gap:1px;margin:0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.unitpeek li{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--bg);font-size:14.5px}
.up-n{font-family:var(--disp);font-weight:700;font-size:11px;color:var(--plaque-ink);
  background:var(--cobalt);width:21px;height:21px;border-radius:99px;
  display:grid;place-content:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
.up-t{color:var(--ink);flex:1 1 auto}
.up-free{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cobalt);border:1px solid var(--cobalt);
  border-radius:99px;padding:1px 7px}

.lastcall{text-align:center;padding-bottom:64px}
.lastcall .punch{margin:0 auto}

/* ── the public phrase pages ────────────────────────────────── */
.phrasepage .pagehead{padding:38px 0 30px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.phrasepage .pagehead h1{font-family:var(--disp);font-weight:700;font-stretch:112%;
  font-size:clamp(27px,4.4vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;
  text-wrap:balance;max-width:22ch}
.ph-blurb{font-size:17px;color:var(--ink-2);margin:0;max-width:58ch;line-height:1.55}
.crumbs{display:flex;gap:9px;align-items:center;margin-bottom:14px;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.crumbs a{color:var(--cobalt)}

.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,272px);gap:44px;align-items:start}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr;gap:34px}}
.ph-intro{font-size:17px;line-height:1.68;color:var(--ink-2);max-width:64ch;margin:0 0 16px}
/* A signpost inside a long introduction. Smaller than the page's own headings,
   so it reads as a part of the piece rather than a new section of the site. */
.ph-sub{font-family:var(--disp);font-weight:700;font-stretch:110%;font-size:20px;
  line-height:1.3;color:var(--ink);max-width:64ch;margin:30px 0 12px}
.ph-h2{font-family:var(--disp);font-weight:700;font-stretch:110%;font-size:21px;
  letter-spacing:-.01em;margin:34px 0 16px}

.ph-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(228px,100%),1fr));gap:12px}
.ph-word{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:15px 17px}
.ph-sents{display:grid;gap:12px}
.ph-sent{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:16px 18px;border-left:3px solid var(--cobalt)}
/* Same rule on the public pages: the Arabic is right to left, so the play
   button belongs at the left end of the line, in a column of its own. */
.ph-ar{font-family:var(--ar);font-size:23px;line-height:1.6;color:var(--ink);
  display:flex;align-items:center;gap:10px}
/* The sentence takes the whole line and the button sits after it. As a grid
   the sentence fell into the 34px column meant for the button, and broke to
   one word a line. */
.ph-ar > span{flex:1 1 auto;min-width:0}
.ph-ar > .say{flex:none}
.ph-sent .ph-ar{font-size:25px}
.ph-say{font-size:14px;color:var(--cobalt);font-style:italic;margin-top:3px}
.ph-mean{font-size:15px;color:var(--ink-2);margin-top:5px}
.ph-note{font-size:13.5px;color:var(--ink-3);margin:9px 0 0;padding-top:9px;
  border-top:1px solid var(--line);line-height:1.55}

.ph-more{margin-top:30px;padding:24px 26px;border:1px dashed var(--line);
  border-radius:var(--radius);background:var(--surface-2)}
.ph-more h3{font-family:var(--disp);font-weight:700;font-size:19px;margin:0 0 7px}
.ph-more p{font-size:15px;color:var(--ink-2);margin:0 0 15px;max-width:52ch}
.ph-more .cta-row{margin:0}

.ph-side{display:grid;gap:22px;position:sticky;top:18px}
@media (max-width:860px){.ph-side{position:static}}
.ph-book{background:var(--plaque-bg);color:var(--plaque-ink);border-radius:var(--radius);
  padding:22px 24px;display:grid;gap:10px;justify-items:start}
.ph-book p{font-size:14.5px;line-height:1.6;opacity:.9;margin:0}
.ph-book .plaque-ar{font-size:18px;text-align:left}
.ph-near h2{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 11px}
.ph-near ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ph-near a{font-size:14.5px;color:var(--ink-2);text-decoration:none;line-height:1.4;display:block}
.ph-near a:hover{color:var(--cobalt);text-decoration:underline}

/* the index of them all */
.phindex{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:14px}
.phcard{display:grid;gap:6px;padding:19px 21px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);text-decoration:none;
  transition:border-color .15s ease,transform .15s ease}
@media (prefers-reduced-motion:reduce){.phcard{transition:none}}
.phcard:hover{border-color:var(--cobalt);transform:translateY(-1px)}
.phcard-t{font-family:var(--disp);font-weight:700;font-size:16.5px;color:var(--ink);line-height:1.32}
.phcard-b{font-size:14px;color:var(--ink-2);line-height:1.5}
.phcard-n{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ── pictures ───────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:18px}
.shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.shot-pic{background:var(--sunk);display:grid;place-items:center;min-height:120px}
.shot-pic img{display:block;width:100%;height:auto}
.shot-form{padding:14px 15px}
.shot-form .field{margin-bottom:10px}
.shot-form .field label{font-size:10px}
.shot-form input{font-size:13.5px;padding:8px 10px}
.shot-meta{font-size:12px;color:var(--ink-3);margin:0 0 12px;line-height:1.5}
.spot-pic img.thumb{width:64px;height:auto;border-radius:4px;display:block}

/* a picture at the top of a public page */
.ph-hero{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--sunk)}
.ph-hero img{display:block;width:100%;height:auto}
.ph-credit{font-size:12px;color:var(--ink-3);margin:7px 0 0;text-align:right}

/* and on a unit card */
.ucard-pic{margin:-1px -1px 0;background:var(--sunk);overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0}
.ucard-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.phcard-pic{display:block;margin:-19px -21px 4px;overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;background:var(--sunk)}
.phcard-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ── the plaque a public page wears instead of a photograph ─── */
.phplaque{display:inline-flex;flex-direction:column;gap:2px;align-items:flex-end;
  padding:13px 20px;margin:0 0 18px}
.phplaque .plaque-ar{font-size:22px}
.phplaque .plaque-lat{font-size:11px;opacity:.82}
.phcard-ar{font-family:var(--arDisp);font-size:16px;color:var(--cobalt);
  line-height:1.5;margin-bottom:1px}

/* ══════════════════════════════════════════════════════════════
   Touch and small screens.

   Most students will only ever see the site on a phone. Two things
   matter there and nowhere else: a thumb is about 9mm across, and
   ten-pixel text set on a bus is not readable. Sizes grow only for
   coarse pointers, so a mouse still gets the tighter layout.
   ══════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  /* The star is how a student keeps a word. It stays the same size to
     look at and grows a bigger area to hit, using padding pulled back
     out with margin so nothing around it moves. */
  .star{padding:11px;margin:-8px}

  /* The language switch, and any select in a form. */
  .langsel select,.topbar select,.field select{min-height:40px;padding-block:9px}

  /* Links acting as controls rather than sitting inside a sentence. */
  .topbar .linkish,.tabbar a,.tabs a,.crumbs a,.zone-cta a,.cta-row a{
    min-height:40px;display:inline-flex;align-items:center}
  .btn-sm{padding-block:11px}
  .qa summary{padding-block:15px}
}

@media (max-width:560px){
  /* Nothing on a phone goes below this. These were set at ten and eleven
     pixels, which is fine on a desk and not on a train. Measured on the
     pages themselves rather than guessed at. */
  .tablabel,.badge,.tb-label,.vid,.em,.hint,.fineprint,.videocap,
  .ph-credit,.shot-meta,.vsrc,.potd-label,.crumbs,.unchecked,.tag,
  .phcard-n,.plaque-n,.vcat,.plaque-lat,.bp-foot span,.field label{font-size:11.5px}
  .lv{font-size:11.5px}
  /* A button's own label should never be the smallest text on the page. */
  .btn-sm{font-size:12.5px}
  /* These carry a more specific rule elsewhere and need matching here. */
  .tb2-tools .badge,.phplaque .plaque-lat{font-size:11.5px}
  .cal-dows span,.ubar b,.note-kind,.pill,.selffield label,
  .tablewrap th,.testmail .pill{font-size:11.5px}
}

@media (pointer:coarse){
  /* Lists of links a student is meant to tap through, rather than links
     sitting inside a sentence. */
  .ph-near a{padding-block:8px}
  .steps a,.vacts a,.vacts button{min-height:40px;display:inline-flex;align-items:center}
  summary{padding-block:12px}
}

/* ══════════════════════════════════════════════════════════════
   The Course front door
   ══════════════════════════════════════════════════════════════ */
.co-head{background:var(--surface-2);border-bottom:1px solid var(--line);padding:30px 0 26px}
.co-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.co-kick{display:block;font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);margin-bottom:5px}
.co-title h1{font-family:var(--disp);font-weight:700;font-stretch:112%;
  font-size:clamp(28px,4.6vw,40px);line-height:1.05;letter-spacing:-.02em;margin:0}
.co-ar{font-family:var(--arDisp);font-size:24px;color:var(--ink-3)}

.co-stats{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:22px}
.cs{display:flex;align-items:baseline;gap:8px}
.cs b{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--cobalt);
  line-height:1;font-variant-numeric:tabular-nums}
.cs span{font-size:13.5px;color:var(--ink-2)}

/* the one button that matters on this page */
.co-resume{background:var(--plaque-bg);color:var(--plaque-ink)}
.co-resume-in{display:flex;align-items:center;justify-content:space-between;
  gap:18px 24px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.co-resume-txt{display:grid;gap:2px;min-width:0}
.co-resume-k{font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;opacity:.72}
.co-resume-txt b{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.25}
.co-resume-l{font-size:14px;opacity:.85}
.co-resume .btn{background:var(--plaque-ink);color:var(--plaque-bg);border-color:var(--plaque-ink)}
.co-resume .btn:hover{background:#fff;border-color:#fff}

/* unit cards */
.ugrid{list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(288px,100%),1fr));gap:16px}
.ucard{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
@media (prefers-reduced-motion:reduce){.ucard{transition:none}}
.ucard:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.ucard.is-shut{opacity:.62}
.ucard.is-shut:hover{opacity:.8}
.ucard-top{display:flex;align-items:center;gap:11px;
  background:var(--plaque-bg);color:var(--plaque-ink);padding:12px 16px}
.ucard-n{flex:0 0 auto;width:23px;height:23px;border-radius:999px;
  background:rgba(255,255,255,.18);display:grid;place-content:center;
  font-family:var(--disp);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.ucard-ar{font-family:var(--arDisp);font-size:18px;direction:rtl;margin-inline-start:auto;
  text-align:right;line-height:1.5}
.ucard-body{display:grid;gap:6px;padding:16px 17px 14px;flex:1 1 auto}
.ucard-t{font-family:var(--disp);font-weight:700;font-size:17.5px;color:var(--ink);line-height:1.3}
.ucard-s{font-size:14px;color:var(--ink-2);line-height:1.55}
/* The lessons inside a unit, named on its card. A plain list with a quiet
   marker: they are a table of contents, not a second set of buttons. */
.ucard-ls{display:grid;gap:4px;margin-top:4px}
.ucard-ls > span{position:relative;padding-inline-start:14px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ucard-ls > span::before{content:"";position:absolute;inset-inline-start:1px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--line)}
.uhead-k{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cobalt);margin:0 0 6px}
.uhead-k span{color:var(--ink-3);margin:0 3px}
.step-sum{display:block;width:100%;font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:1px 0 2px}
.learnpage ol.steps li.is-locked b{color:var(--ink-2)}
.learnpage ol.steps li.is-locked .step-ic{color:var(--ink-3)}
.learnpage ol.steps li > span.ucard-free:not(.step-ic):not(.step-tick){margin-inline-start:0;flex:none}
.ucard-body{align-content:start}
/* The teacher's list of units: one row each, the fields in a line. */
.partrows{display:grid;gap:10px;margin:14px 0 0}
.partrow{display:grid;grid-template-columns:34px minmax(0,2fr) minmax(0,1.3fr) 150px 74px auto;gap:8px;align-items:center}
.partrow .pr-n{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink-3);text-align:center}
.partrow .em{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.partrow input,.partrow select{min-width:0;width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
@media (max-width:820px){.partrow{grid-template-columns:34px minmax(0,1fr);padding-bottom:10px;border-bottom:1px solid var(--line)}
  .partrow > :nth-child(n+3){grid-column:2}}
.unit-next{margin-top:26px}
.ucard-foot{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:12px 17px 15px;border-top:1px solid var(--line-soft)}
.ucard-n2{font-size:13px;color:var(--ink-3)}
.ucard-free{margin-inline-start:auto;font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--lv1);
  border:1px solid var(--lv1);border-radius:999px;padding:2px 9px}
.ucard-shut{font-family:var(--disp);font-size:11.5px;font-weight:700;color:var(--ink-3)}
.ucard.is-done .ucard-top{background:var(--lv1)}

/* the ring that fills as a unit is finished */
.ring{position:relative;width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.ring-bg{stroke:var(--sunk)}
.ring-on{stroke:var(--cobalt);stroke-linecap:round;transition:stroke-dasharray .5s ease}
@media (prefers-reduced-motion:reduce){.ring-on{transition:none}}
.ring b{font-family:var(--disp);font-size:10.5px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;position:relative}
.ucard.is-done .ring-on{stroke:var(--lv1)}
.ucard.is-done .ring b{color:var(--lv1);font-size:14px}


@media (max-width:560px){
  .co-stats{gap:8px 22px}
  .cs b{font-size:22px}
}

/* ── the voice ─────────────────────────────────────────────── */
/* One small speaker beside an entry. It is a button, not a link, and it never
   moves the line it sits on: fixed box, no wrap, aligned to the text baseline. */
.say{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;padding:0;margin-inline-start:6px;vertical-align:-6px;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);
  color:var(--cobalt);cursor:pointer;transition:border-color .12s,background .12s}
.say:hover{border-color:var(--cobalt);background:var(--accent-soft)}
.say:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.say svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round}
.say .say-w{fill:none;opacity:.85}
.say .say-w2{opacity:.5}
.say.is-playing{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.say.is-playing .say-w2{opacity:1}
@media (pointer:coarse){ .say{width:34px;height:34px} .say svg{width:17px;height:17px} }

/* ── the recording booth ───────────────────────────────────── */
.rec-tally{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rt{flex:1 1 220px;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px 16px;position:relative;overflow:hidden}
.rt b{font-family:var(--disp);font-size:26px;line-height:1;color:var(--ink)}
.rt span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.rt i{position:absolute;left:0;bottom:0;height:3px;width:var(--p);background:var(--cobalt)}

.rec-pick{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.rec-pick .field{flex:1 1 190px;min-width:0;margin:0}
.rec-pick .field > *{max-width:100%}
.rec-up .field{max-width:520px}
.rec-up .field > *{min-width:0;max-width:100%}

.booth{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 0 26px;overflow:hidden}
.booth-bar{height:3px;background:var(--sunk)}
.booth-bar i{display:block;height:100%;width:0;background:var(--cobalt);transition:width .2s}
.booth-count{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  margin:14px 20px 0}
.booth-card{padding:26px 20px 22px;text-align:center}
.booth-ar{font-family:var(--arDisp);font-size:clamp(30px,7vw,46px);line-height:1.5;color:var(--ink);
  word-break:break-word}
.booth-tr{font-family:var(--tr);font-size:17px;color:var(--cobalt);margin-top:8px}
.booth-en{font-size:16px;color:var(--ink-2);margin-top:6px}
.booth-old{font-size:13px;color:var(--amber);margin-top:12px}
.booth-do{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 20px}
.booth-do .btn{width:auto}
.booth-do kbd{font:inherit;font-size:11px;opacity:.6;margin-inline-start:6px;
  border:1px solid currentColor;border-radius:3px;padding:0 4px}
.booth-say{text-align:center;font-size:13px;color:var(--ink-3);margin:16px 20px 0}
.booth-done{padding:40px 20px;text-align:center}
.rec-btn{min-width:170px}
.booth.is-on .rec-btn{background:var(--warn);border-color:var(--warn)}
.booth.is-on .booth-ar{color:var(--warn)}
.ex-hear{padding:10px 0 4px}
.say-big{width:74px;height:74px;margin:0;vertical-align:0;
  border-width:2px;box-shadow:0 1px 0 rgba(13,22,38,.05)}
.say-big svg{width:34px;height:34px}
@media (pointer:coarse){ .say-big{width:84px;height:84px} .say-big svg{width:38px;height:38px} }

/* On a phone there is no space bar to press, and the phone is where he is most
   likely to be recording, so the hints go and the buttons grow. */
@media (pointer:coarse){
  .booth-do kbd{display:none}
  .booth-do{gap:12px}
  .rec-btn{flex:1 1 100%;min-height:56px;font-size:16px}
  .booth-do .btn{flex:1 1 44%;min-height:48px}
}

/* ── what things cost ──────────────────────────────────────── */
/* 244 rather than 228: at the old floor a card came out 230 wide, which is not
   enough to hold a period, a badge and an amount on one line. */
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(244px,100%),1fr));align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px 26px;display:flex;flex-direction:column;min-width:0}
.plan.is-lead{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt)}
.plan h2{font-family:var(--disp);font-size:19px;line-height:1.3;margin:0 0 10px;color:var(--ink)}
/* Side by side, one card's heading runs to two lines and the others do not, and
   then every price and every tick list below them starts at a different height.
   Two lines are reserved once the cards are actually in a row, so the row reads
   as one row. Stacked on a phone there is nothing to line up with. */
@media (min-width:620px){ .plan h2{min-height:2.6em} }
/* Every card's price block is the same height and sits on the same bottom edge,
   so the tick lists underneath start level across the row instead of at four
   different heights. */
.plan-price{font-family:var(--disp);font-size:34px;line-height:1;color:var(--ink);margin:0 0 4px;
  min-height:36px;display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 7px}
.plan-price span{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--ink-3);
  line-height:1.6}
/* Not an amount. "By arrangement" set at the size of a number reads as a price
   and, in a narrow card, broke across two lines in the middle of the phrase. */
.plan-price.is-words{font-size:21px;line-height:1.2}
.plan-sub{font-size:14px;color:var(--ink-2);margin:0 0 16px}
.plan-list{list-style:none;padding:0;margin:0 0 20px;font-size:14.5px;color:var(--ink-2)}
.plan-list li{position:relative;padding-inline-start:22px;margin-bottom:9px;line-height:1.5}
.plan-list li::before{content:"";position:absolute;inset-inline-start:2px;top:8px;width:9px;height:5px;
  border-inline-start:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}
.plan .btn{margin-top:auto}
.plan-have{margin-top:auto;font-size:14px;color:var(--green);font-weight:600}
/* Nothing to celebrate: this is the line that stands where a buy button would,
   and in green and bold it read like good news. Quiet, and marked off from the
   list above it so it is plainly a note and not another feature. */
.plan-soon{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);
  font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.plan-soon b{color:var(--ink-2)}
.plans-foot{margin-top:24px;max-width:70ch}

.buycard{max-width:520px;margin:0 auto}
.buy-kick{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.buycard h1{font-family:var(--disp);font-size:26px;margin:0 0 8px;color:var(--ink)}
.buy-price{font-family:var(--disp);font-size:32px;line-height:1;margin:0 0 10px;color:var(--ink)}
.buy-price span{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--ink-3);
  margin-inline-start:6px}
#ppWrap{margin-top:20px;min-height:52px}
.wrap.narrow{max-width:640px}
.steps-num{margin:0 0 18px;padding-inline-start:20px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.steps-num li{margin-bottom:8px}

/* ── the three pages that come with taking money ───────────── */
.legalwrap h2{font-family:var(--disp);font-size:19px;margin:30px 0 10px;color:var(--ink)}
.legalwrap h2:first-child{margin-top:0}
.legalwrap p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
.legalwrap b{color:var(--ink)}

/* ── the matching question ─────────────────────────────────── */
.ex-match{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.mx-col{display:grid;gap:9px;align-content:start}
.mx{width:100%;min-height:52px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font-size:15px;line-height:1.35;cursor:pointer;
  text-align:center;transition:border-color .12s,background .12s,opacity .12s}
.mx-col[data-side="l"] .mx{font-family:var(--ar);font-size:20px}
.mx:hover{border-color:var(--cobalt)}
.mx.is-on{border-color:var(--cobalt);background:var(--accent-soft);box-shadow:0 0 0 1px var(--cobalt)}
.mx.is-done{opacity:.32;cursor:default;border-style:dashed}
.ex-opts.is-tr .ex-opt{font-family:var(--tr)}
@media (max-width:520px){ .ex-match{gap:7px} .mx{min-height:46px;font-size:14px;padding:9px 10px} }
.mx.is-right{opacity:1;border-color:var(--green);background:var(--green-soft);border-style:solid}
.mx.is-wrong{opacity:1;border-color:var(--warn);background:var(--warn-soft);border-style:solid}
.fixform{margin-top:20px;text-align:start;max-width:460px;margin-inline:auto}
.fixform .field{margin-bottom:12px}
.fixform .field > *{max-width:100%}
.fixform input.ar{font-family:var(--ar);font-size:19px}

/* the group, at the foot of the course */
.co-group{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-top:26px}
.co-group h2{font-family:var(--disp);font-size:18px;margin:0 0 5px;color:var(--ink)}
.co-group p{font-size:14.5px;color:var(--ink-2);margin:0;max-width:56ch}

/* ── setting the week by dragging ──────────────────────────── */
.hb-top{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:14px}
.hb-modes{display:flex;gap:8px;flex-wrap:wrap}
.hb-mode{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-size:14px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.hb-mode.is-on{border-color:var(--cobalt);color:var(--ink);box-shadow:0 0 0 1px var(--cobalt)}
.hb-mode b{font-weight:600;color:var(--ink-3);font-size:13px}
.hb-key{width:11px;height:11px;border-radius:3px;flex:none}
.hb-key-h{background:var(--cobalt)}
.hb-key-r{background:var(--amber)}
.hb-acts{display:flex;gap:8px;flex-wrap:wrap}
.hb-acts .btn{width:auto}

/* Seven days across do not fit a phone, and on the hours page swiping to see
   them fights the dragging the page is made of. Below 700 one day shows at a
   time and these choose it. On anything wider they are not there at all. */
.hb-days{display:none;gap:6px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px}
.hb-days::-webkit-scrollbar{display:none}
.hb-days button{flex:1 0 auto;min-width:56px;padding:9px 4px;font:inherit;font-size:12.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.hb-days button[aria-pressed="true"]{color:#fff;background:var(--cobalt);border-color:var(--cobalt)}
@media(max-width:700px){
  .hb-days{display:flex}
  .hb{grid-template-columns:52px minmax(0,1fr) !important;min-width:0 !important}
  .hb-day{display:none}
  .hb-day.is-showing{display:block}
  .hb-dayname{font-size:13px}
  .hbwrap{overflow-x:hidden}
  .hb-lab{font-size:12px}
}

.hbwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
.hb{display:grid;grid-template-columns:62px repeat(7,minmax(96px,1fr));min-width:740px}
/* Only the editor swallows a vertical drag. Everywhere else a finger scrolls
   the page as usual, and sideways always scrolls the grid. */
.hb.is-edit .hb-col{touch-action:none}
.hb-times{padding-top:34px}
.hb-time{position:relative;border-top:1px solid var(--line-soft)}
.hb-time span{position:absolute;top:-8px;right:10px;font-size:11px;color:var(--ink-3);
  background:var(--surface);padding:0 3px;font-variant-numeric:tabular-nums}
.hb-day{border-inline-start:1px solid var(--line-soft);min-width:0}
.hb-dayname{height:34px;display:flex;align-items:center;justify-content:center;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line)}
/* The hour lines down a column and the hour labels down the ruler have to be
   the same distance apart, and for a long time they were not: the ruler was
   built from --px while this gradient repeated every 40 pixels, so the two
   drifted apart by six pixels an hour and by tea time the label said one thing
   and the line said another. One number now, and it is the one the grid is
   built with. */
.hb-col{position:relative;cursor:crosshair;
  background-image:repeating-linear-gradient(to bottom,
    var(--line-soft) 0 1px, transparent 1px var(--px,46px))}

.hb-blk{position:absolute;left:3px;right:3px;border-radius:5px;overflow:hidden;
  border:1px solid transparent;font-size:11px;line-height:1.25}
.hb-hours{background:var(--accent-soft);border-color:var(--cobalt);color:var(--cobalt)}
.hb-reserved{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.hb-blk:not(.is-live){opacity:.42}
.hb-blk.is-live{cursor:grab}
.hb-lab{display:block;padding:4px 6px;font-variant-numeric:tabular-nums;pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-grip{position:absolute;left:0;right:0;height:9px;cursor:ns-resize}
.hb-top-grip{top:0}
.hb-bot-grip{bottom:0}
.hb-blk.is-live .hb-grip::after{content:"";position:absolute;left:50%;width:22px;height:2px;
  margin-left:-11px;border-radius:2px;background:currentColor;opacity:.5}
.hb-top-grip::after{top:3px}
.hb-bot-grip::after{bottom:3px}
.hb-x{position:absolute;top:2px;inset-inline-end:2px;width:20px;height:20px;padding:0;
  border:0;background:transparent;color:currentColor;font-size:15px;line-height:1;cursor:pointer;
  opacity:0;border-radius:4px}
.hb-blk.is-live:hover .hb-x,.hb-x:focus-visible{opacity:.85}
.hb-x:hover{background:rgba(0,0,0,.08)}
@media (pointer:coarse){
  .hb-x{opacity:.75;width:26px;height:26px}
  .hb-grip{height:14px}
}

/* ── the week, drawn ───────────────────────────────────────── */
.wk-top{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:14px}
.wk-move{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wk-move .btn{width:auto}
.wk-range{font-family:var(--disp);font-size:16px;color:var(--ink);margin-inline-start:6px}
.wk-keys{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.wk-keys span{display:inline-flex;align-items:center;gap:6px}
.wk-key{width:11px;height:11px;border-radius:3px;flex:none}
.wk-key-ok{background:var(--cobalt)}
.wk-key-wait{background:var(--surface);border:1px solid var(--cobalt)}
.wk-key-res{background:var(--amber-soft);border:1px solid var(--amber)}
.wk-key-free{background:var(--sunk)}
.wk-key-busy{background:repeating-linear-gradient(135deg,
  var(--sunk) 0 3px, var(--surface-2) 3px 6px);box-shadow:0 0 0 1px var(--line)}
.wk-key-cal{background:var(--green-soft);border:1px solid var(--green)}
.wk-key-mix{background:conic-gradient(var(--c-rose) 0 25%, var(--c-orange) 0 50%,
  var(--c-teal) 0 75%, var(--c-purple) 0)}
.wk-les.is-short{display:flex;gap:6px;align-items:center;padding:2px 6px}
.wk-les.is-short b{display:inline}

/* Three lines in the height of an hour, which is forty six pixels less a
   border. Tight, so the type is set tight: the pupils keep the weight and the
   account name goes small and half a step back. On a half hour block there is
   room for one line and the account is the one that goes. */
.wk-les.has-who{padding:3px 6px;line-height:1.16}
.wk-les.has-who b{font-size:11px}
.wk-les .wk-acc{font-size:10px;opacity:.82;font-weight:400}
.wk-les.is-short .wk-acc{display:none}

.hb.wk .hb-col{cursor:default}
.hb.wk .hb-dayname span{color:var(--ink);font-weight:600;margin-inline-start:3px}
.hb.wk .hb-day.is-today .hb-dayname{color:var(--cobalt);box-shadow:inset 0 -2px 0 var(--cobalt)}
.wk-off{position:absolute;left:0;right:0;background:var(--sunk);opacity:.55}
.wk-res{position:absolute;left:2px;right:2px;border-radius:5px;background:var(--amber-soft);
  border:1px solid var(--amber);color:var(--amber);font-size:11px;overflow:hidden}
.wk-res span{display:block;padding:3px 6px}
.wk-shut{position:absolute;inset:0;background:repeating-linear-gradient(45deg,
  transparent 0 6px, var(--line-soft) 6px 12px);display:flex;align-items:flex-start;
  justify-content:center;padding-top:8px}
.wk-shut span{font-size:11px;color:var(--ink-3);background:var(--surface);padding:1px 6px;
  border-radius:3px}
.wk-les{position:absolute;left:3px;right:3px;border-radius:5px;padding:4px 6px;overflow:hidden;
  font-size:11.5px;line-height:1.3;text-decoration:none;border:1px solid var(--cobalt)}
.wk-les.is-ok{background:var(--cobalt);color:#fff}
.wk-les.is-wait{background:var(--surface);color:var(--cobalt)}
.wk-les.is-off{background:var(--surface);border-color:var(--line);color:var(--ink-3);
  text-decoration:line-through}
.wk-les b{display:block;font-variant-numeric:tabular-nums;font-weight:700}
.wk-les span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-les:hover{filter:brightness(1.06)}
/* A block on the calendar is a button now, so it has to stop looking like one
   in every way except being pressable. */
.wk-les{font:inherit;font-size:11.5px;text-align:left;cursor:pointer;display:block;
  width:auto;font-family:inherit}
.wk-les:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* A lesson that comes back every week, told apart from a one off at a glance.
   Teal against the cobalt of a single booking: near enough to read as the same
   kind of thing, far enough apart to count them without opening any. */
.wk-les.is-every{background:var(--green);border-color:var(--green);color:#fff}
.wk-les.is-every.is-held{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.wk-rep{position:absolute;right:3px;bottom:2px;width:11px;height:11px;opacity:.72}
.wk-rep svg{width:100%;height:100%;display:block}
.wk-les.is-short .wk-rep{position:static;flex:none;margin-inline-start:auto}
.wk-key-every{background:var(--green);border:1px solid var(--green)}
/* what is on his Google calendar and not on this site: quieter than a lesson
   booked here, because there is nothing for him to do about it */
.wk-cal{position:absolute;left:2px;right:2px;border-radius:5px;background:var(--green-soft);
  border:1px solid var(--green);color:var(--green);font-size:11px;line-height:1.3;
  padding:3px 6px;overflow:hidden}
.wk-cal b{display:block;font-variant-numeric:tabular-nums;font-weight:700}
.wk-cal span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-cal.is-short{display:flex;gap:6px;align-items:center;padding:2px 6px}
.wk-cal.is-short b{display:inline}
.wk-res span b{display:block;font-variant-numeric:tabular-nums}
/* A lesson that came off. It stays where it was so the week tells the truth,
   but nothing about it looks like a lesson still to teach: no fill, a dashed
   edge, the name crossed through and a line saying who called it off. One that
   is still to be paid for carries the amber of something he has to act on.
   When somebody else has taken the hour since, it shrinks to the edge so the
   new lesson can be read on top of it. */
.wk-gone{position:absolute;left:3px;right:3px;border-radius:5px;padding:3px 6px;overflow:hidden;
  font-size:11px;line-height:1.2;color:var(--ink-3);background:var(--surface);
  border:1px dashed var(--line);
  background-image:repeating-linear-gradient(135deg,transparent 0 7px,var(--line-soft) 7px 9px)}
.wk-gone b{display:block;font-variant-numeric:tabular-nums;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-gone s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-gone .wk-gone-tag{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-gone.is-pay{border-color:var(--amber);color:var(--amber);background-color:var(--amber-soft)}
.wk-gone.is-short{display:flex;gap:6px;align-items:center;padding:2px 6px}
.wk-gone.is-short b{display:inline}
.wk-gone.is-short s{display:none}
.wk-gone.is-under{left:auto;width:30%;right:2px;z-index:2;padding:2px 4px}
.wk-gone.is-under s{display:none}
.wk-key-gone{background:var(--surface);border:1px dashed var(--ink-3)}
.wk-gone:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ── where he is in the day ────────────────────────────────── */
/* A thin red rule across today's column at the hour it is now, with a small
   arrow at the edge it starts from. Red because every other colour on this
   grid already means something: cobalt is a lesson, teal is one that repeats,
   amber is somebody waiting for him. Drawn over everything on the column and
   clicked through rather than at: it is a mark, not a thing to press. */
.wk-now{position:absolute;left:0;right:0;height:0;z-index:6;pointer-events:none;
  border-top:2px solid var(--now);
  box-shadow:0 0 0 1px var(--surface)}
/* ── the colour a student's lessons are drawn in ─────────────── */
/* One rule per colour would be eleven rules saying the same thing, so the
   chosen colour is handed to a single rule through a variable. A block that
   carries one of these still has everything else it had: the repeat arrow, the
   tick on one that has happened, and the dashed amber of one still waiting for
   an answer, which beats any colour because it is a thing he has to do. */
.c-rose{--c:var(--c-rose)}      .c-red{--c:var(--c-red)}
.c-orange{--c:var(--c-orange)}  .c-olive{--c:var(--c-olive)}
.c-green{--c:var(--c-green)}    .c-teal{--c:var(--c-teal)}
.c-sky{--c:var(--c-sky)}        .c-indigo{--c:var(--c-indigo)}
.c-purple{--c:var(--c-purple)}  .c-brown{--c:var(--c-brown)}
.c-slate{--c:var(--c-slate)}

/* White lettering on the deep shades of the light theme, near-black on the
   bright shades of the dark one. The same rule either way: the lettering goes
   opposite to the fill, and a name on a lesson is never nearly invisible. */
.wk-les.has-c{background:var(--c);border-color:var(--c);color:var(--c-ink)}
/* A lesson still waiting for him stays amber and dashed. The student's colour
   is still there, as a mark in the corner, so he knows who without the thing
   he has to answer looking like everything he has already answered. */
.wk-les.is-held.has-c{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.wk-les.is-held.has-c::after{content:"";position:absolute;top:4px;inset-inline-end:4px;
  width:8px;height:8px;border-radius:50%;background:var(--c)}

/* The same colour as a mark beside a name, on the lists and in the panels. */
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);
  flex:none;vertical-align:baseline;margin-inline-end:5px}

/* Picking one. Eleven swatches and a way back to no colour at all. */
.cpick{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
.cpick input{position:absolute;opacity:0;width:0;height:0}
.cpick label{cursor:pointer;line-height:0}
/* The swatch is the span that follows the radio, and only that one: each label
   also carries a span of words for anybody reading with their ears, and a rule
   that said "every span in here" made a thirty pixel circle out of it. */
.cpick input + span{display:block;width:30px;height:30px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cpick .c-none input + span{background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)}
.cpick .c-none input + span::after{content:"";display:block;width:100%;height:100%;border-radius:50%;
  background:linear-gradient(to bottom right,transparent calc(50% - 1px),
    var(--ink-3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px))}
.cpick input:checked + span{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink)}
.cpick input:focus-visible + span{outline:2px solid var(--ink);outline-offset:4px}

.wk-now::before{content:"";position:absolute;top:-5px;inset-inline-start:0;
  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-inline-start:7px solid var(--now)}


/* ── bookings waiting for an answer ────────────────────────── */
.holds{border-color:var(--amber)}
.hold{display:grid;gap:10px 18px;align-items:center;padding:14px 0;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) auto auto;
  border-top:1px solid var(--line-soft)}
.hold:first-of-type{border-top:0}
.hold b{display:block;color:var(--ink);font-size:15px}
.hold .em{display:block;font-size:12.5px;color:var(--ink-3)}
.hold-note{margin:6px 0 0;font-size:13px;color:var(--ink-2);
  border-inline-start:2px solid var(--line);padding-inline-start:9px}
.hold-do{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hold-do .btn{width:auto}
@media (max-width:720px){
  .hold{grid-template-columns:1fr;gap:6px}
  .hold-do{justify-content:flex-start;margin-top:6px}
}
.wk-key-held{background:var(--amber-soft);border:1px dashed var(--amber)}
.wk-les.is-held{background:var(--amber-soft);border-color:var(--amber);border-style:dashed;
  color:var(--amber)}
.bk-tick.is-wait{color:var(--amber);background:var(--amber-soft)}

/* ── putting something on the week, from the week itself ────── */
.wknew{
  border:none;border-radius:14px;padding:0;width:min(520px,calc(100vw - 28px));max-height:88vh;
  background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:auto;
}
.wknew::backdrop{background:rgba(12,18,30,.5)}

/* ── one thing already on the calendar ──────────────────────── */
.wkone{
  border:none;border-radius:14px;padding:0 24px 24px;width:min(430px,calc(100vw - 28px));
  max-height:88vh;background:var(--surface);color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:auto;
}
.wkone::backdrop{background:rgba(12,18,30,.5)}
.wkone > h2{font-family:var(--disp);font-size:22px;font-weight:700;margin:0;padding:24px 34px 18px 0}
.wko-card{border:1px solid var(--line);border-radius:10px;padding:16px}
.wko-head{display:flex;align-items:center;gap:14px}
.wko-mark{
  flex:none;width:52px;height:52px;border-radius:8px;display:grid;place-items:center;
  background:var(--cobalt);color:#fff;font-family:var(--disp);font-size:22px;font-weight:700;
}
.wko-mark.is-every{background:var(--green)}
.wko-mark.is-off{background:var(--ink-3)}
.wko-mark.is-held{background:var(--amber)}
.wko-when b{display:block;font-size:17px;font-weight:700;line-height:1.25}
.wko-when span{display:block;font-size:14.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wko-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);
}
.wko-facts .wko-who{color:var(--ink);font-weight:600}
.wko-facts .wko-n{margin-inline-start:auto;white-space:nowrap}
.wko-facts span:empty{display:none}
/* Who booked it, when that is somebody other than who is in it. */
.wko-acc{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)}
/* What the parent wrote, read the way you read a note somebody left you:
   set in from the edge with a rule down its side, and never cut off. */
.wko-note{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.45;
  border-inline-start:2px solid var(--line);padding-inline-start:10px;
  white-space:pre-wrap;overflow-wrap:anywhere}

.wko-acts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.wko-acts .btn{width:100%}
.wko-acts .btn[hidden]{display:none}
/* Yes and no side by side, because they are one question and not two jobs. */
.wko-hold{display:flex;gap:9px}
.wko-hold[hidden]{display:none}
.wko-hold .btn{flex:1;width:auto}

.wko-pane{margin-top:20px}
.wko-lead{font-size:15px;font-weight:600;margin-bottom:10px}
.wko-pane .fineprint{margin-top:8px}
.wko-pane-do{display:flex;gap:9px;margin-top:18px}
.wko-pane-do .btn{width:auto;flex:1 1 0}
@media (max-width:420px){
  .wkone{padding-inline:16px}
  .wko-mark{width:44px;height:44px;font-size:19px}
}
.wknew > h2{font-family:var(--disp);font-size:20px;font-weight:700;margin:0;padding:22px 24px 4px}
.wknew > h2 span{color:var(--cobalt)}
.wknew-x{position:absolute;top:12px;right:12px;margin:0}
.wknew-x button{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer;
}
.wknew-x button:hover{background:var(--accent-soft);color:var(--ink)}
.wknew-tabs{display:flex;gap:4px;padding:14px 24px 0;border-bottom:1px solid var(--line);margin-bottom:18px}
.wknew-tabs button{
  font:inherit;font-size:13px;font-weight:600;padding:9px 13px;border:none;background:none;
  color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.wknew-tabs button[aria-selected="true"]{color:var(--cobalt);border-bottom-color:var(--cobalt)}
.wknew-pane{padding:0 24px 24px}
.wknew-f{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;position:relative}
.wknew-f label,.wknew-lab{font-size:13px;font-weight:600;color:var(--ink)}
.wknew-opt{font-weight:400;color:var(--ink-3)}
.wknew-f input[type=text],.wknew-f input[type=email],.wknew-f input[type=date],.wknew-f select{
  width:100%;font:inherit;font-size:14.5px;padding:10px 12px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:8px;
}
.wknew-f input:focus,.wknew-f select:focus{outline:2px solid var(--accent-soft);border-color:var(--cobalt)}
.wknew-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wknew-hint{font-size:12px;color:var(--ink-3);line-height:1.45}
.wknew-fine{font-size:12px;color:var(--ink-3);line-height:1.5;margin:12px 0 0}
.wknew-check{display:flex;align-items:center;gap:9px;font-weight:400!important;cursor:pointer}
.wknew-check input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--cobalt)}
.wknew-check span{font-size:13.5px;color:var(--ink-2)}
.wknew-go{width:100%;margin-top:4px}
.wknew-list{
  max-height:212px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--bg);
}
.wknew-list button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;padding:9px 12px;
  border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;
}
.wknew-list button:last-of-type{border-bottom:none}
.wknew-list button:hover{background:var(--accent-soft)}
.wknew-list i{
  flex:0 0 30px;height:30px;border-radius:8px;background:var(--cobalt);color:#fff;font-style:normal;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.wknew-list span{display:flex;flex-direction:column;gap:1px;min-width:0}
.wknew-list b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wknew-list em{font-style:normal;font-size:12px;color:var(--ink-3)}
.wknew-none{padding:12px;margin:0;font-size:13px;color:var(--ink-3)}
@media (max-width:480px){
  .wknew > h2{font-size:18px;padding:20px 18px 4px}
  .wknew-tabs{padding:12px 18px 0}
  .wknew-pane{padding:0 18px 20px}
  .wknew-two{grid-template-columns:1fr}
}

/* ── what students can see, and what is still being written ─── */
.pubbox{
  border:1px solid var(--amber);border-left-width:4px;border-radius:11px;padding:17px 19px;
  background:var(--surface);margin-bottom:22px;
}
.pubbox.is-clear{border-color:var(--line);border-left-color:var(--green,#2c7a5b)}
.pubbox-h h3{font-family:var(--disp);font-size:16px;font-weight:700;margin:0 0 4px}
.pubbox-h h3 b{color:var(--amber);font-weight:700}
.pubbox.is-clear .pubbox-h h3 b{color:inherit}
.pubbox-sub{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.publist{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.publist li{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;font-size:13.5px}
.publist a{font-weight:600}
.publist .em{font-size:12.5px;color:var(--ink-3)}
.publevels{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.publevel{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);
}
.publevel span{display:flex;flex-direction:column;gap:1px}
.publevel b{font-size:13.5px;font-weight:600}
.publevel em{font-style:normal;font-size:12px;color:var(--ink-3)}
.publevel form{display:flex;gap:7px;flex-wrap:wrap}

/* a lesson standing at an hour he has since closed */
.strandcard{border-left:4px solid var(--amber)}
.strandcard h2{font-size:17px}

/* ── weeks of a weekly lesson that nobody has decided about ─── */
.gaps{
  max-width:1080px;margin:0 auto 22px;background:var(--surface);
  border:1px solid var(--cobalt);border-left-width:4px;border-radius:12px;padding:20px 22px;
}
.gaps h2{font-family:var(--disp);font-size:18px;font-weight:700;margin:0 0 5px}
.gaps-sub{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 4px}
.gaps-fine{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:14px 0 0}
.gap{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
.gap-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.gap-h b{font-family:var(--disp);font-size:15.5px}
.gap-h .em{font-size:12.5px;color:var(--ink-3)}
.gap-none{font-size:13.5px;color:var(--ink-3);margin:0 0 10px}
.gap-days{display:flex;flex-direction:column;gap:10px}
.gap-day{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.gap-dayname{
  flex:0 0 108px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);
}
.gap-times{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 200px;min-width:0}
.gap-times form{margin:0}
.gap-times button{
  font:inherit;font-size:13.5px;font-weight:600;padding:7px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--cobalt);
}
.gap-times button:hover{border-color:var(--cobalt);background:var(--accent-soft)}
.gap-skip{margin-top:13px}
.gap-skip button{
  font:inherit;font-size:13px;border:none;background:none;padding:0;cursor:pointer;
  color:var(--ink-3);text-decoration:underline;
}
.gap-skip button:hover{color:var(--ink)}
@media (max-width:520px){
  .gaps{padding:17px 16px}
  .gap-dayname{flex:1 1 100%}
}
.gap-more{margin-top:4px}
.gap-more summary{
  list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--cobalt);
  padding:7px 0;display:inline-flex;align-items:center;gap:7px;
}
.gap-more summary::-webkit-details-marker{display:none}
.gap-more summary::after{
  content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;
}
.gap-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.gap-more summary:hover{text-decoration:underline}
.gap-more .gap-day{margin-top:9px}
.em-warn{color:var(--amber)!important}

/* ── a student's own schedule ────────────────────────────────── */
.mytabs{max-width:1080px;margin:0 auto 20px;justify-content:center}
.bk-mine-empty{font-size:13.5px;color:var(--ink-3);line-height:1.55;margin:0}
.bk-mine-count{font-size:13.5px;color:var(--ink-2);margin:0 0 12px}
.bk-mine-count b{color:var(--ink);font-weight:600}
.bk-mine li.is-past{background:transparent;border:1px solid var(--line)}
.bk-mine.is-first li.is-past{background:transparent}
.pastmark{
  flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.03em;
  padding:4px 10px;border-radius:100px;white-space:nowrap;
}
.pastmark-ok{background:var(--accent-soft);color:var(--cobalt)}
.pastmark-off{background:var(--bg);color:var(--ink-3);border:1px solid var(--line)}

/* ── where else he can be found ─────────────────────────────── */
.socgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:4px 18px}
.socgrid .hint{min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socrow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 14px}
.socrow a{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:50%;color:var(--ink-2);background:var(--surface);
  transition:color .12s,border-color .12s,background .12s;
}
.socrow a:hover{color:var(--cobalt);border-color:var(--cobalt);background:var(--accent-soft)}
.socrow svg{width:18px;height:18px;display:block}

/* ── the lesson he is about to teach ────────────────────────── */
.nextcard{border-left:4px solid var(--cobalt)}
.nextcard.is-now{border-left-color:var(--green,#2c7a5b);background:var(--accent-soft)}
.nextcard-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.nextcard-k{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:3px;
}
.nextcard.is-now .nextcard-k{color:var(--green,#2c7a5b)}
.nextcard h2{font-family:var(--disp);font-size:20px;font-weight:700;margin:0 0 5px}
.nextcard .em{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.nextcard-note{font-size:13px;color:var(--ink-2);margin:8px 0 0;font-style:italic}
.nextcard-do{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.nextcard-do .btn-primary{width:auto}

/* ── who has paid for what ──────────────────────────────────── */
.payform{margin-bottom:26px}
.payfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px;margin-bottom:12px}
.payfields-wide{grid-column:1 / -1}
/* What a payment will do, worked out as he types it. Quiet until there is
   something in the box, and it never reads as a warning unless it is one. */
.payplan{margin:0 0 14px;font-size:14px;color:var(--ink-2)}
.payplan:empty{display:none}
.payplan p{margin:0 0 6px}
.payplan-head{color:var(--ink)}
.payplan-k{font-weight:600;color:var(--ink)}
.payplan-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:2px}
.payplan-list li{display:flex;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.payplan-left{background:var(--accent-soft);color:var(--accent);padding:6px 10px;border-radius:4px}
.payplan-bad{background:var(--warn-soft);color:var(--warn);padding:6px 10px;border-radius:4px}
/* the row's own pill colour is cobalt, which says nothing about money */
.lessonrow .pill-approved{background:var(--lv1-bg);color:var(--lv1)}
.lessonrow .pill-rejected{background:var(--warn-soft);color:var(--warn)}
.lessonrow .pill-pending{background:var(--lv3-bg);color:var(--lv3)}
.lessonrow.is-open{outline:2px solid var(--cobalt);outline-offset:-2px}
.paidmark{font-weight:600;color:var(--warn)}
.paidmark.is-paid{color:var(--lv1,var(--cobalt))}
.keepme{margin:2px 0 16px}
.field .lab{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
/* the radio cards inside a settings field are sentences, not field labels */
.field .bk-every label{font-size:inherit;letter-spacing:normal;text-transform:none;
  color:var(--ink);font-weight:400}
.reach-do{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.reach-do .em{font-size:13px;color:var(--ink-3)}

/* ── how the site works ─────────────────────────────────────── */
.helppage .hp-toc{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;padding:15px 18px;margin-bottom:34px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
}
.hp-toc b{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hp-toc a{font-size:13.5px;font-weight:600}
.hp-part{margin-bottom:44px;scroll-margin-top:96px}
.hp-part h2{font-family:var(--disp);font-size:23px;font-weight:700;margin:0 0 12px}
.hp-part p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 13px}
.hp-part ul{margin:0 0 15px;padding-left:22px;list-style:disc}
.hp-part ol{margin:0 0 15px;padding-left:22px;list-style:decimal}
.hp-part li::marker{color:var(--ink-3)}
.hp-part li{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:7px}
.hp-part b{color:var(--ink)}
.hp-note{
  font-size:14px!important;padding:13px 15px;border-radius:9px;background:var(--accent-soft);
  border-left:3px solid var(--cobalt);
}
/* The words read best in a narrow column and a screenshot does not. On a wide
   window the pictures step out past the text on both sides, which is the only
   way a picture of a whole screen is worth looking at without clicking it. */
.hp-shot{margin:0 0 22px}
@media (min-width:1080px){
  .helppage .hp-shot{margin-left:-190px;margin-right:-190px}
}
@media (min-width:900px) and (max-width:1079px){
  .helppage .hp-shot{margin-left:-100px;margin-right:-100px}
}
/* The desk one takes the room it needs to be readable; the phone one sits
   beside it at about the size a phone is. Both open full size on a click. */
.hp-shots{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:18px;align-items:start}
.hp-shots a{display:block;text-decoration:none;min-width:0}
.hp-shots img{
  display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);
}
.hp-shots a:hover img{border-color:var(--cobalt)}
.hp-shots span{
  display:block;margin-top:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.hp-shot figcaption{margin-top:9px;font-size:13px;color:var(--ink-3)}
.hp-rule{border:none;border-top:1px solid var(--line);margin:44px 0 26px}
.hp-onlyyou{
  font-size:14px!important;padding:12px 15px;border-radius:9px;background:var(--warn-soft);
  color:var(--warn);margin-bottom:34px!important;
}
.hp-onlyyou b{color:inherit}
.hp-foot{font-size:14px;color:var(--ink-3);padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .hp-shots{grid-template-columns:minmax(0,1fr);gap:14px}
  .hp-shots a.hp-ph{max-width:230px}
  .hp-part h2{font-size:20px}
}

/* ── the letters, read and rewritten ────────────────────────── */
.lt{scroll-margin-top:96px}
.lt-head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.lt-head h3{font-family:var(--disp);font-size:17px;font-weight:700;margin:0 0 3px;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}
.lt-head .sub{margin:0;font-size:12.5px}
.lt-do{display:flex;gap:8px;flex-wrap:wrap}
.lt-do form{margin:0}
.lt-preview{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:15px 17px;
  margin-bottom:12px;
}
.lt-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.lt-preview p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 9px}
.lt-preview p:last-child{margin-bottom:0}
.lt-preview .lt-subj{font-size:15px;color:var(--ink)}
.lt-url{font-size:12.5px;color:var(--ink-3);word-break:break-all}
.lt-none{color:var(--ink-3)!important;font-style:italic}
.lt-chat p{
  display:inline-block;background:var(--accent-soft);color:var(--ink);border-radius:12px;
  padding:9px 13px;font-size:14px;max-width:420px;
}
.lt-edit summary{
  list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--cobalt);
  padding:6px 0;display:inline-flex;align-items:center;gap:7px;
}
.lt-edit summary::-webkit-details-marker{display:none}
.lt-edit summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.lt-edit[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.lt-edit summary:hover{text-decoration:underline}
.lt-line{margin-top:14px}
.lt-line .hint em{color:var(--ink-3)}
.lt-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:20px;
  background:var(--accent-soft);color:var(--cobalt);margin-left:7px;
}
.lt-fine{font-size:12.5px;color:var(--ink-3);margin:14px 0 4px}

/* ── the pages he sets up once ──────────────────────────────── */
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px;margin:20px 0 8px}
.setcard{
  display:flex;flex-direction:column;gap:5px;padding:15px 17px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  transition:border-color .12s,transform .12s;
}
.setcard:hover{border-color:var(--cobalt);transform:translateY(-1px)}
.setcard b{font-family:var(--disp);font-size:15.5px;font-weight:700;color:var(--ink)}
.setcard span{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.lt-facts{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  margin:0 0 12px;display:flex;flex-direction:column;gap:5px;
}
.lt-facts div{display:flex;gap:12px;align-items:baseline}
.lt-facts span{flex:0 0 78px;font-size:11.5px;color:var(--ink-3)}
.lt-facts b{font-size:13.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}

/* ── hearing the exercises ──────────────────────────────────── */
.ex-prompt .say-big{margin-top:12px}
.ex-hear .say-big{margin:0}
/* a quiet button beside each Arabic option, for hearing the near miss */
.ex-optwrap{display:flex;align-items:center;gap:8px;min-width:0}
.ex-optwrap .ex-opt{flex:1 1 auto;min-width:0}
/* A speaker that is waiting for the answer to be checked. Present, so the
   layout does not jump when it wakes up, and plainly not pressable yet. */
.say.is-later{opacity:.28;cursor:default}
.say.is-later:hover{background:none;border-color:var(--line)}
.say-sm{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.say-sm svg{width:17px;height:17px}
.say-sm:hover{color:var(--cobalt);border-color:var(--cobalt)}
.say-sm.is-playing{color:var(--cobalt);border-color:var(--cobalt);background:var(--accent-soft)}
.ex-opts.is-ar{gap:9px}
.mx[data-au]{cursor:pointer}

/* the sound switch, beside the progress bar */
.ex-quiet{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);cursor:pointer;padding:0;margin-left:4px;
  display:inline-flex;align-items:center;justify-content:center;
}
.ex-quiet svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;fill-rule:evenodd}
.ex-quiet svg path{fill:none}
.ex-quiet svg path:first-child{fill:currentColor}
.ex-quiet .q-off{display:none}
.ex-quiet.is-off{color:var(--ink-3);opacity:.75}
.ex-quiet.is-off .q-on{display:none}
.ex-quiet.is-off .q-off{display:inline}
.ex-quiet:hover{color:var(--cobalt);border-color:var(--cobalt)}
.ex-later{display:block;margin-top:12px}

/* ── how the lesson is going, and how it went ───────────────── */
/* One block per question, filling in as the lesson goes. Nothing is announced
   after every answer: the bar is there to glance at, not to read. */
.ex-bar #exBar.is-seg{display:flex;gap:2px;background:none;border-radius:0}
.ex-bar #exBar.is-seg i{flex:1 1 0;min-width:2px;background:var(--sunk);border-radius:1px;
  transition:background .25s ease}
.ex-bar #exBar.is-seg i.is-right{background:var(--green)}
.ex-bar #exBar.is-seg i.is-wrong{background:var(--warn)}
.ex-bar #exBar.is-seg i.is-now{background:var(--cobalt)}

/* The number on an answer, for the keys. Drawn only where a keyboard is. */
.ex-opt[data-key],.ex-tile[data-key]{position:relative}
.ex-keys{display:none}
@media (hover:hover) and (pointer:fine){
  .ex-opt[data-key]::before,.ex-tile[data-key]::before{
    content:attr(data-key);position:absolute;top:5px;left:7px;
    font-family:var(--sans);font-size:10.5px;line-height:1;font-weight:600;
    color:var(--ink-3);opacity:.5;pointer-events:none}
  .ex-opt.is-on::before,.ex-opt.is-right::before,.ex-opt.is-wrong::before{opacity:.75;color:inherit}
  .ex-keys{display:block;font-size:12px;color:var(--ink-3);margin:0}
}

/* the score */
.ex-tally{display:flex;justify-content:center;gap:22px;margin:14px 0 6px;font-size:14.5px}
.ex-tally span{display:inline-flex;align-items:baseline;gap:5px;color:var(--ink-3)}
.ex-tally b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.ex-tally .ta-r b{color:var(--green)}
.ex-tally .ta-w b{color:var(--warn)}
/* none wrong is good news, and good news is not painted red */
.ex-tally .ta-w.is-none b{color:var(--ink-3)}
.ex-advice{font-size:14.5px;color:var(--ink-2);margin-top:12px;max-width:38ch;
  margin-left:auto;margin-right:auto;line-height:1.6}
/* .btn sets a display, which outranks the browser's own rule for [hidden],
   so the button has to be told again. */
.ex-again{margin-left:auto}
.ex-again[hidden]{display:none}
.ex-foot .ex-again + .ex-go{margin-left:10px}

/* what to look at again */
.ex-review{margin-top:28px;text-align:left;border-top:1px solid var(--line);padding-top:20px}
.ex-review h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:12px}
.ex-review ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ex-review li{display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.rv-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rv-q{font-size:13.5px;color:var(--ink-3)}
.rv-a{font-size:16px;color:var(--ink);font-weight:600}
.rv-q.is-ar{font-family:var(--ar);font-size:16px}
.rv-a.is-ar{font-family:var(--ar);font-size:19px;font-weight:500}
.ex-review .say-sm{flex:0 0 30px;width:30px;height:30px}
.ex-review .say-sm svg{width:15px;height:15px}

/* Finishing should feel like finishing. The tick lands with a little weight,
   and a clean sweep gets two rings out of it and nothing else: confetti after
   eleven out of twenty would be congratulating the wrong thing. */
.ex-tick{position:relative;animation:tickIn .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes tickIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.ex-end.is-perfect .ex-tick{background:var(--green);color:#fff}
.ex-pop{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);
  animation:popOut 1.1s ease-out .2s both}
.ex-pop2{animation-delay:.5s}
@keyframes popOut{from{transform:scale(1);opacity:.55}to{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ex-tick{animation:none}
  .ex-pop{display:none}
}

/* the same landing on a learning note that has just been read */
.note-done .btn.is-read{background:var(--green);border-color:var(--green);color:#fff;
  animation:tickIn .4s cubic-bezier(.2,1.5,.4,1) both}

/* ── the week: what he clicked, and what has already happened ── */
/* The block under the pointer, the width of the day and the height of one
   step, so a click near an hour line is not a guess. */
.wk-pick{
  position:absolute;left:2px;right:2px;border-radius:6px;pointer-events:none;
  background:var(--accent-soft);border:2px solid var(--cobalt);
  box-shadow:0 0 0 3px rgba(20,65,126,.12);
  animation:pickIn .18s ease-out both;z-index:1;
}
@keyframes pickIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .wk-pick{animation:none} }

/* A lesson that has been and gone. Quieter than one still to come, with a tick,
   so the week reads as a diary rather than a list of identical boxes. */
.wk-les.is-done{opacity:.72}
.wk-les.is-done:hover{opacity:1}
.wk-tick{
  position:absolute;right:3px;bottom:3px;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--cobalt);box-shadow:0 0 0 1.5px var(--cobalt);
}
.wk-tick svg{width:9px;height:9px}
.wk-les.is-done.is-short{padding-right:22px}
/* On a held lesson the card is white, so the tick inverts to stay visible. */
.wk-les.is-held .wk-tick{background:var(--cobalt);color:#fff;box-shadow:none}
/* Before the click: the half hour under the pointer, named, so there is no
   guessing which side of an hour line the pointer is on. */
.wk-hover{
  position:absolute;left:2px;right:2px;border-radius:6px;pointer-events:none;z-index:1;
  background:var(--accent-soft);border:1px dashed var(--cobalt);
  color:var(--cobalt);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;padding-left:6px;
}
@media (hover:none){ .wk-hover{display:none} }

/* Leaving a lesson half done, asked properly rather than by the browser. */
.leavebox{
  border:none;border-radius:14px;padding:26px;max-width:400px;width:calc(100% - 32px);
  background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(12,18,30,.28);
}
.leavebox::backdrop{background:rgba(12,18,30,.5)}
.leavebox h2{font-family:var(--disp);font-size:20px;font-weight:700;margin-bottom:10px}
.leavebox p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-bottom:20px}
.leave-do{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── the mastery mark ────────────────────────────────────────
   A zellige star, the eight-point kind that runs along a tiled wall. It fills
   one point at a time as a word is learned in the course, and loses its colour
   rather than its shape when the word slips, because that is what has happened
   to the word: it is still there, it has just gone quiet. */
.zel{
  display:inline-flex;flex:0 0 auto;width:var(--zs,20px);height:var(--zs,20px);
  line-height:0;vertical-align:middle;
}
.zel svg{width:100%;height:100%;display:block;overflow:visible}
.zel .zp{fill:var(--sunk);transition:fill .35s ease}
.zel.is-learning .zp.is-on{fill:var(--cobalt)}
.zel.is-strong   .zp.is-on{fill:var(--cobalt)}
.zel.is-faded    .zp.is-on{fill:var(--line)}
.zel.is-faded    .zp:not(.is-on){fill:var(--sunk)}
/* At full strength the star gets its quiet halo, which is the only way the
   eighth point differs from the seventh at a glance. */
.zel.is-strong svg{filter:drop-shadow(0 0 3px var(--accent-soft))}
@media (prefers-reduced-motion:reduce){ .zel .zp{transition:none} }

/* the key on the flashcards page */
.growbar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  margin:30px 0 18px;padding:18px 20px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
}
.growkey{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.growkey b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.growkey span{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;min-width:0}

/* ── the three decks ── */
.cardswrap{padding-bottom:40px}
.deckgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px}
.deck{
  display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  text-decoration:none;
}
a.deck:hover{border-color:var(--cobalt);transform:translateY(-1px)}
a.deck{transition:transform .16s ease,border-color .16s ease}
@media (prefers-reduced-motion:reduce){ a.deck{transition:none} a.deck:hover{transform:none} }
.deck-n{
  font-family:var(--disp);font-size:34px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--cobalt);
}
.deck b{font-size:16px;font-weight:700}
.deck-sub{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.deck.is-empty{opacity:.55}

/* ── practice by theme ────────────────────────────────────────── */
.pr-h{
  font-family:var(--disp);font-size:19px;margin:34px 0 2px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.prgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:14px}
.prcard{
  display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  text-decoration:none;transition:transform .16s ease,border-color .16s ease;
}
.prcard:hover{border-color:var(--cobalt);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){ .prcard{transition:none} .prcard:hover{transform:none} }
.prcard.is-fresh{border-color:var(--cobalt)}
.pr-t{font-size:16px;font-weight:700;line-height:1.3}
.pr-ar{font-family:var(--ar);direction:rtl;font-size:15px;color:var(--teal,#14918A);line-height:1.4}
/* The size of the thing, before they agree to it. Three words is a minute and
   forty is not, and the card has to say which. */
.pr-n{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pr-tag{
  font-size:11px;letter-spacing:.04em;font-weight:700;padding:3px 8px;border-radius:999px;
  background:var(--sunk);color:var(--ink-3);white-space:nowrap;
}
.pr-tag.is-new{background:var(--accent-soft);color:var(--cobalt)}
.pr-tag.is-due{background:var(--warn-soft,#FCEFD8);color:var(--warn,#9A6B10)}
.pr-go{margin-top:6px;font-size:13px;font-weight:700;color:var(--cobalt)}
@media (max-width:480px){
  /* minmax(0,1fr) rather than 1fr: a plain 1fr will not shrink below its
     content, so a long theme name pushed the second column off the screen. */
  .prgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prcard{padding:13px 14px;min-width:0}
  .pr-t{font-size:14.5px}
  .pr-t,.pr-n,.pr-tag{overflow-wrap:anywhere}
}
.deck.is-empty .deck-n{color:var(--ink-3)}
/* the pile that actually changes something is the one that stands out */
.deck.is-due{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.deck.is-due .deck-n{color:#fff}
.deck.is-due .deck-sub{color:rgba(255,255,255,.82)}
.deck.is-due:hover{border-color:#fff}

/* ── a card being answered ── */
.cd-prompt .ex-tr{margin-top:4px}
.ex-verdict .v-yes{color:var(--green)}
.cd-won,.cd-grew{
  display:inline-flex;align-items:center;gap:7px;margin-left:12px;
  font-size:13px;font-weight:700;padding:3px 10px;border-radius:100px;
  background:var(--green-soft);color:var(--green);
}
.cd-prize{position:relative;display:inline-flex;margin-bottom:16px}
.cd-points{font-size:15px;color:var(--ink-2);margin-bottom:4px}
.cd-points b{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--green);
  font-variant-numeric:tabular-nums;margin-right:4px}
.ex-grown{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;
  font-size:14.5px;color:var(--green);font-weight:600;
}

/* ── the strip on the home page ── */
.growstrip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;
  align-items:stretch;
}
.gs-num{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
}
.gs-num b{
  font-family:var(--disp);font-size:28px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.gs-num span{font-size:13px;color:var(--ink-3);line-height:1.4}
.gs-do{
  display:flex;align-items:center;gap:11px;padding:16px 18px;border-radius:10px;
  background:var(--cobalt);border:1px solid var(--cobalt);color:#fff;text-decoration:none;
  font-size:14.5px;
}
.gs-do b{font-family:var(--disp);font-size:24px;font-weight:700;margin-right:3px;
  font-variant-numeric:tabular-nums}
.gs-do .zel .zp{fill:rgba(255,255,255,.32)}
.gs-do .zel .zp.is-on{fill:#fff}
.gs-do:hover{background:var(--cobalt-lift)}
.gs-do.is-calm{background:var(--surface);border-color:var(--line);color:var(--ink)}
.gs-do.is-calm .zel .zp{fill:var(--sunk)}
.gs-do.is-calm .zel .zp.is-on{fill:var(--cobalt)}
.gs-do.is-calm:hover{border-color:var(--cobalt)}

/* ── the board ── */
.boardwrap{padding-bottom:50px}
.mycard{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:22px 0 10px;
  padding:22px 24px;background:var(--cobalt);color:#fff;border-radius:12px;
}
.my-pts{display:flex;flex-direction:column;line-height:1.05}
.my-pts b{font-family:var(--disp);font-size:46px;font-weight:700;font-variant-numeric:tabular-nums}
.my-pts span{font-size:13px;opacity:.85;margin-top:4px}
.my-bits{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.my-bit{
  display:flex;align-items:center;gap:7px;font-size:13.5px;
  background:rgba(255,255,255,.13);border-radius:100px;padding:6px 13px;color:#fff;
}
.my-bit b{font-weight:700;font-variant-numeric:tabular-nums}
.my-bit .zel .zp{fill:rgba(255,255,255,.3)}
.my-bit .zel .zp.is-on{fill:#fff}
a.my-bit{text-decoration:none;background:#fff;color:var(--cobalt)}
a.my-bit .zel .zp{fill:var(--sunk)}
a.my-bit .zel .zp.is-on{fill:var(--cobalt)}
a.my-bit:hover{background:var(--accent-soft)}
.board-when{font-size:13.5px;color:var(--ink-3);margin-bottom:22px}

.board{list-style:none;margin:0 0 34px;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.brow{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--line-soft);
}
.brow:last-child{border-bottom:0}
.b-place{
  font-family:var(--disp);font-size:16px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:center;
}
.b-who{font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-who em{
  font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--cobalt);padding:2px 7px;border-radius:2px;
  margin-left:8px;vertical-align:1px;
}
.b-pts{font-family:var(--disp);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.brow.is-me{background:var(--accent-soft)}
/* The first three get the plaque treatment on the number and nothing else:
   a board where the top row is three times the size stops being a list. */
.brow.is-top .b-place{
  background:var(--cobalt);color:#fff;border-radius:50%;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:14px;
}
.brow.t2 .b-place{background:var(--ink-2)}
.brow.t3 .b-place{background:var(--ink-3)}

.howpts{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.howpts h2{font-family:var(--disp);font-size:17px;font-weight:700;margin-bottom:14px}
.howpts ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.howpts li{display:grid;grid-template-columns:52px 1fr;gap:12px;font-size:14.5px;color:var(--ink-2)}
.howpts li b{
  font-weight:700;color:var(--cobalt);font-variant-numeric:tabular-nums;text-align:right;
}

/* An hour he took off. Not a lesson, so not cobalt: it reads as a wall rather
   than as somebody waiting for him, and it carries its own way out. */
.wk-les.is-busy{
  background:repeating-linear-gradient(135deg,
    var(--sunk) 0 6px, var(--surface-2) 6px 12px);
  border:1px solid var(--line);color:var(--ink-2);cursor:default;
}
.wk-les.is-busy b{color:var(--ink-3)}
.wk-les.is-busy:hover{filter:none}
.wk-undo{position:absolute;top:2px;right:2px;margin:0;line-height:0}
.wk-undo button{
  width:17px;height:17px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--surface);color:var(--ink-3);font-size:10px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--line);
}
.wk-undo button:hover{background:var(--warn);color:#fff;box-shadow:none}
.wk-les.is-busy.is-short{padding-right:22px}

/* ── how to be asked ─────────────────────────────────────────
   Three ways through the same words. A row of three, not a dropdown: the
   choice is the point and it should be visible without a tap. */
.modes{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 8px}
.mode{
  padding:9px 16px;border-radius:100px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);text-decoration:none;
  font-size:14px;font-weight:600;
}
.mode:hover{border-color:var(--cobalt);color:var(--ink)}
.mode.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.modehint{font-size:13.5px;color:var(--ink-3);margin:0 0 6px;max-width:62ch}

/* the Arabic revealed after a production question is answered */
.cd-reveal{display:block}
.ex-prompt .cd-reveal + .ex-en{margin-top:8px}

/* ── everything in their review ── */
.mgl{list-style:none;margin:22px 0 18px;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mgrow{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);
}
.mgrow:last-child{border-bottom:0}
.mgrow.is-due{background:var(--accent-soft)}
.mg-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
/* dir=rtl orders the characters correctly and would also push the whole line
   to the right, leaving the Arabic and its meaning at opposite ends of the
   row. The ordering is what dir is for here; the alignment is not. */
.mg-txt b{font-family:var(--ar);font-size:19px;font-weight:600;line-height:1.5;text-align:left}
.mg-txt em{font-style:normal;font-size:13.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-lvl{font-size:12px;color:var(--ink-3);text-align:right;white-space:nowrap}
.mg-lvl b{color:var(--cobalt);font-weight:700}
@media (max-width:520px){
  .mgrow{grid-template-columns:auto 1fr auto;row-gap:4px}
  .mg-lvl{grid-column:2;text-align:left}
  .mgrow .savestar{grid-row:1 / span 2;grid-column:3}
}

/* a heading you can sort by */
.sortby{
  border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.sortby::after{
  content:"";width:0;height:0;opacity:.35;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;
}
.sortby:hover::after{opacity:.7}
.sortby[aria-sort]::after{opacity:1}
.sortby[aria-sort=ascending]::after{border-top:0;border-bottom:5px solid currentColor}
/* his week, for the one person allowed to look at it */
.gs-do.is-week{background:var(--surface);border-color:var(--line);color:var(--ink)}
.gs-do.is-week svg{width:22px;height:22px;flex:0 0 22px;color:var(--cobalt)}
.gs-do.is-week:hover{border-color:var(--cobalt)}

/* ── the spelling under the Arabic, for readers who do not read the script ── */
.mx{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.mx-ar{font-family:var(--ar);font-size:15px;line-height:1.4;color:var(--ink-3)}
.mx-tr{font-family:var(--tr);font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;
  direction:ltr;unicode-bidi:isolate}
.mx.is-right .mx-tr,.mx.is-wrong .mx-tr{color:inherit}
.mx.is-right .mx-ar,.mx.is-wrong .mx-ar{color:inherit;opacity:.75}
.ex-tile{display:inline-flex;flex-direction:column;gap:1px;align-items:center;line-height:1.35}
.t-ar{font-family:var(--ar);font-size:16px;color:var(--ink-3)}
.t-tr{font-family:var(--tr);font-size:15px;font-weight:600;color:var(--ink);
  direction:ltr;unicode-bidi:isolate;text-align:center}
.ex-tile.is-used .t-tr{color:inherit}

/* keeping a word for review, wherever the button turns up */
.savestar{
  border:none;background:none;padding:4px;margin:0;cursor:pointer;line-height:0;
  color:var(--ink-3);border-radius:6px;flex:0 0 auto;
}
.savestar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.savestar:hover{color:var(--amber)}
.savestar.is-on{color:var(--amber)}
.savestar.is-on svg{fill:currentColor}

/* a word card in a learning note, with its star */
.wcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wcard-top .wcard-ar{min-width:0}

/* what a round or a lesson just went through */
.rvlist{margin-top:30px;text-align:left;border-top:1px solid var(--line);padding-top:20px}
.rvlist h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:12px}
.rvlist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rv-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line)}
.rv-row.is-miss{border-color:var(--warn);background:var(--warn-soft)}
.rv-w{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.rv-w b{font-family:var(--ar);font-size:19px;font-weight:600;line-height:1.5;text-align:left}
.rv-w i{font-style:normal;font-family:var(--tr);font-size:12.5px;color:var(--cobalt);
  direction:ltr;unicode-bidi:isolate}
.rv-w em{font-style:normal;font-size:13.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-lvl{font-size:11.5px;color:var(--ink-3);white-space:nowrap;text-align:right}

/* ── the way in to the list of your words ───────────────────────────────── */
/* A tile that goes somewhere should say so before it is clicked, so the two
   that now do get the same lift the decks get. */
a.gs-num{text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
a.gs-num:hover{border-color:var(--cobalt);box-shadow:0 2px 10px rgba(20,65,126,.09)}
a.growkey{text-decoration:none;color:var(--ink-2);border-radius:8px;
  padding:6px 9px;margin:-6px -9px;transition:background .12s}
a.growkey:hover{background:var(--accent-soft)}
.mgopen{margin:16px 0 0;text-align:center}
.mgopen .btn{display:inline-flex;width:auto}

/* the shelves of the list */
.mgtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.mgtab{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  text-decoration:none;font-size:13.5px;
}
.mgtab b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mgtab:hover{border-color:var(--ink-3);color:var(--ink)}
.mgtab.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.mgtab.is-on b{color:rgba(255,255,255,.75)}
.mgtab.is-due:not(.is-on){border-color:var(--cobalt);color:var(--cobalt)}
.mg-tr{font-style:normal;font-family:var(--tr);font-size:12.5px;color:var(--ink-3);
  letter-spacing:.01em;direction:ltr;unicode-bidi:isolate}

/* The way in to the slide lessons from the Course page. Only drawn when he
   has published some, so it is never a door onto an empty room. */
.co-decks{
  display:flex;align-items:center;gap:12px;margin-top:20px;padding:14px 18px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  text-decoration:none;color:var(--ink);transition:border-color .12s,box-shadow .12s;
}
.co-decks:hover{border-color:var(--cobalt);box-shadow:0 2px 10px rgba(20,65,126,.09)}
.co-decks svg{flex:0 0 auto;width:22px;height:22px;color:var(--cobalt)}
.co-decks span{flex:1 1 auto;font-size:14.5px;color:var(--ink-2)}
.co-decks b{color:var(--ink);font-weight:700}
.co-decks em{font-style:normal;color:var(--ink-3)}

/* A hand-written question. Its options are ordinary sentences most of the time,
   so they read as a column of statements; when an option is itself Derja it
   gets the Arabic face and sits in the middle, because four Arabic letters in a
   left-aligned column of body text look like a list of typos. */
.ex-opts.is-quiz .ex-opt{line-height:1.35}
.ex-opts.is-quiz .ex-opt.o-isar{font-family:var(--ar);font-size:1.35rem;text-align:center;
  padding:12px 16px}

/* A phone number, asked for as a country and a number. The country is wide
   enough to read a name in and the number takes the rest, and on a narrow
   phone they stack rather than squeezing the number into nothing. */
.phonerow{display:flex;gap:8px;align-items:stretch}
.phonerow select{flex:0 1 12.5rem;min-width:0}
.phonerow input{flex:1 1 auto;min-width:0}
@media (max-width:420px){
  .phonerow{flex-direction:column}
  .phonerow select{flex:1 1 auto}
}
.bk-phone .field{margin:0}
.bk-phone .field label{display:block}

/* ── the contact page ─────────────────────────────────────── */
.ctcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 26px}
.ctcard{border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;background:var(--card)}
.ctcard h3{margin:10px 0 6px;font-size:1.05rem}
.ctcard p{margin:0 0 6px}
.ctic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:var(--accent-soft);color:var(--cobalt)}
.ctsub{color:var(--muted);font-size:.92rem;line-height:1.5}
.ctnote{color:var(--muted);font-size:.94rem;margin:0 0 26px}
.cth{margin:28px 0 12px;font-size:1.1rem}
.ctsoc{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.ctsoc a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:999px;padding:8px 15px 8px 12px;text-decoration:none;color:inherit}
.ctsoc a:hover{border-color:var(--cobalt)}
.ctsoc-ic{display:inline-flex;color:var(--cobalt)}
.ctsoc-ic svg{display:block;width:18px;height:18px}
.ctfoot{color:var(--muted);font-size:.92rem}
@media (max-width:640px){ .ctcards{grid-template-columns:1fr} }

/* The WhatsApp button that stays put. Above the bottom bar when there is one,
   and it never covers the last line of the page because the page is padded. */
.wafab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;border-radius:999px;
  background:#1FA855;color:#fff;text-decoration:none;font-weight:650;letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(16,90,45,.34)}
.wafab:hover{background:#178C46;color:#fff}
.wafab:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wafab svg{flex:0 0 auto}
body:has(.tabbar) .wafab{bottom:calc(76px + env(safe-area-inset-bottom))}
.contactpage{padding-bottom:96px}
@media (max-width:520px){
  .wafab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wafab{padding:16px;border-radius:50%}
}

/* ── the menu on a phone ──────────────────────────────────── */
.menubtn{display:none;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;cursor:pointer}
.menubtn:hover{border-color:var(--cobalt)}
.menupanel{border-top:1px solid var(--line);background:var(--bg);padding:8px 0 12px}
.menupanel .wrap{display:flex;flex-direction:column;gap:2px}
.mp-group{display:flex;flex-wrap:wrap;gap:2px 4px;padding:6px 0}
.mp-group + .mp-group{border-top:1px solid var(--line)}
.mp-group a{display:block;padding:11px 12px;border-radius:9px;text-decoration:none;color:inherit;
  font-weight:600;flex:1 1 44%}
.mp-group a:hover{background:var(--accent-soft);color:var(--cobalt)}
.mp-group.is-admin a{color:var(--cobalt)}
.mp-group.is-fine a{font-weight:500;font-size:.9rem;color:var(--muted)}
@media (max-width:900px){ .menubtn{display:inline-flex} }
@media (min-width:901px){ .menupanel{display:none} }

/* ── writing to one student ───────────────────────────────── */
.wr-said{margin:0 0 18px;padding:12px 16px;border-left:3px solid var(--cobalt);
  background:var(--accent-soft);border-radius:0 8px 8px 0;font-style:italic;color:var(--ink-2)}
.wr-form textarea{font-family:inherit;line-height:1.6;min-height:280px}
.wr-h{margin:26px 0 10px;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.wr-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wr-hist li{font-size:.92rem;border-top:1px solid var(--line)}
.wr-hist summary{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  padding:8px 0;cursor:pointer;list-style:none}
.wr-hist summary::-webkit-details-marker{display:none}
.wr-hist summary::before{content:'▸';color:var(--muted);font-size:.8em;line-height:1.6}
.wr-hist details[open] summary::before{content:'▾'}
.wr-when{color:var(--muted);white-space:nowrap}
.wr-how{font-weight:650;white-space:nowrap}
.wr-kind{color:var(--muted);white-space:nowrap;font-size:.86em;
  border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.wr-what{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 30%}
.wr-bad{color:var(--warn);font-weight:650}
.wr-err{color:var(--warn);font-size:.9rem;margin:0 0 8px}
.wr-body{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:.9rem;
  color:var(--ink-2);background:var(--surface-2,var(--surface));border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;margin:0 0 12px;max-height:340px;overflow:auto}

/* ── the exercise studio ──────────────────────────────────────── */
/* His own room. He picks a theme, ticks the words he wants, chooses how they
   are asked, and gets a link. Nothing here is on the student's side of the
   site, so it is laid out for choosing quickly rather than for reading. */
.stbuild{margin-bottom:34px}
.stbuild h2{font-family:var(--disp);font-size:19px;font-weight:700;margin-bottom:16px}
.strow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.strow > label{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 auto;min-width:74px}
.strow select,.strow input[type=text],.strow input:not([type]),.stfind{
  flex:1 1 240px;min-width:0;padding:10px 12px;font:inherit;font-size:14.5px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
}
.stcount{font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.stcount b{color:var(--ink);font-size:14.5px}

/* The words of the theme, all of them, in one scrolling block. He is looking
   for four out of forty, so the list has to be short on the page and quick to
   run an eye down. */
.stpick{
  max-height:340px;overflow-y:auto;margin-bottom:18px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
}
.stitem{
  display:grid;grid-template-columns:auto 132px minmax(0,132px) minmax(0,1fr) auto;
  align-items:center;gap:12px;padding:9px 14px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.stitem:last-child{border-bottom:0}
.stitem:hover{background:var(--accent-soft)}
.stitem input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--cobalt);cursor:pointer}
.stitem:has(input:checked){background:var(--accent-soft)}
.stitem.is-off{opacity:.4;cursor:default}
.stitem.is-off:hover{background:none}
.st-ar{font-family:var(--ar);font-size:19px;line-height:1.5;color:var(--ink);
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-tr{font-family:var(--tr);font-size:12.5px;color:var(--cobalt);
  direction:ltr;unicode-bidi:isolate;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-me{font-size:13.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Recorded or not, said in the row rather than in a legend. A dot where the
   play button would be is enough: he is scanning for the ones that have it. */
.stitem .say{flex:0 0 auto}
.st-norec{width:28px;text-align:center;color:var(--line);font-size:17px;line-height:1;
  user-select:none}
.stonly{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;flex:0 0 auto}
.stonly input{width:15px;height:15px;accent-color:var(--cobalt);cursor:pointer}

/* ── one made exercise ───────────────────────────────────────── */
.stset{margin-bottom:16px;padding:22px}
.stset-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.stset-h h3{font-family:var(--disp);font-size:17px;font-weight:700;margin-bottom:3px}
.stset-h .sub{margin-bottom:0;font-size:13px;color:var(--ink-3)}
.stset-h .sub b{color:var(--warn)}
.stset-do{flex:0 0 auto}

.stlink{display:flex;gap:8px;align-items:center;margin-bottom:16px}
.stlink input{
  flex:1 1 auto;min-width:0;padding:9px 12px;font:inherit;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink-2);
}
.stcopy{flex:0 0 auto;white-space:nowrap}

.stboard{border-top:1px solid var(--line);padding-top:14px}
.stboard-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px}
.stboard-h > b{font-size:13.5px;color:var(--ink);white-space:nowrap}
.stboard .sub{margin-bottom:0;font-size:13px;color:var(--ink-3)}

/* The small text buttons on a card: things he does now and again, which should
   read as words rather than compete with the button that matters. */
.dbtn{
  background:none;border:0;padding:0;margin:0 0 0 4px;font:inherit;font-size:12.5px;
  color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.dbtn:hover{color:var(--cobalt)}
.dbtn:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:2px}

.stlist{list-style:none;display:flex;flex-direction:column;gap:1px;
  counter-reset:st}
.stlist li{
  counter-increment:st;
  display:grid;grid-template-columns:26px minmax(0,1fr) auto auto auto;
  align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;
  background:var(--bg);border-radius:var(--radius);
}
.stlist li:nth-child(odd){background:var(--surface-2)}
.stlist li::before{
  content:counter(st);font-family:var(--disp);font-size:12px;font-weight:700;
  color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums;
}
.b-n{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-s{font-variant-numeric:tabular-nums;font-weight:600}
.b-t{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-3)}
.b-x{margin:0;font-size:15px;line-height:1;text-decoration:none;color:var(--ink-3)}
.b-x:hover{color:var(--warn)}

@media (max-width:640px){
  .strow > label{min-width:0;flex:1 0 100%}
  .stpick{max-height:400px}
  .stitem{grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;padding:11px 12px}
  .stitem > input{grid-column:1;grid-row:1 / span 3}
  .st-ar,.st-tr,.st-me{grid-column:2}
  /* Down the left with the rest of the row, not pushed to the far edge by
     its own direction. */
  .st-ar{grid-row:1;text-align:left}
  .st-tr{grid-row:2}
  .st-me{grid-row:3}
  .stitem .say,.st-norec{grid-column:3;grid-row:1 / span 3}
  .st-ar,.st-tr,.st-me{white-space:normal}
  .stset{padding:18px 16px}
  .stlist li{grid-template-columns:22px minmax(0,1fr) auto auto auto;gap:8px;font-size:12.5px}
}

/* ── why a lesson is coming off ─────────────────────────────
   One button used to cancel a lesson and the row it left said the same thing
   whoever pressed it. Three answers now, in a real dialog: the first version
   hung off the button and lived inside the table's sideways scroll box, which
   cut the bottom off it. */
/* Painted on the dialog itself, the same way the calendar's one is. Putting
   the surface on an inner element and leaving the dialog transparent left the
   page showing straight through it. */
.whyoff{
  border:none;border-radius:14px;padding:22px;width:min(380px,calc(100vw - 28px));
  max-height:88vh;background:var(--surface);color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:auto;
}
.whyoff::backdrop{background:rgba(12,18,30,.5)}
.whyoff-in{text-align:left}
.whyoff-q{font-weight:700;font-size:16px;margin:0}
.whyoff-who{color:var(--ink-3);font-size:13px;margin:2px 0 14px}
.whyoff-op{display:flex;gap:9px;align-items:flex-start;padding:9px 8px;border-radius:var(--radius);
  cursor:pointer;font-size:13.5px;line-height:1.45}
.whyoff-op:hover{background:var(--surface-2)}
.whyoff-op input{margin-top:3px;flex:0 0 auto}
.whyoff-op b{display:block;font-weight:600}
.whyoff-op i{display:block;font-style:normal;color:var(--ink-3);font-size:12.5px;margin-top:1px}
.whyoff-pay{display:flex;gap:9px;align-items:center;margin:12px 0 0;padding:11px 8px;
  border-top:1px solid var(--line);font-size:13.5px;cursor:pointer}
.whyoff-note{width:100%;margin-top:8px;font-size:13px;padding:9px 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink)}
.whyoff-go{margin:16px 0 0;display:flex;gap:10px;justify-content:flex-end}
.wko-why{margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px}

/* The one thing a student must read before cancelling this close: that the
   hour is still paid for. Amber rather than red, because it is a fact about
   the booking and not an error they have made. */
.bk-warn{background:var(--amber-soft);border-left:3px solid var(--amber);color:var(--ink);
  padding:12px 14px;border-radius:var(--radius);font-size:14.5px;line-height:1.55;margin:0 0 18px}

/* The saving badge on a yearly pass. Worked out from the two prices rather than
   typed in, so it can never claim a discount that is not there. */
.plan-save{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;
  background:var(--green-soft);color:var(--green);font-size:12px;font-weight:700;
  letter-spacing:.02em;vertical-align:middle}

/* ── the three numbers under the headline ──────────────────── */
/* Countable proof, in the place a stranger looks first. Wraps to two lines on
   a narrow phone rather than shrinking below a readable size. */
.home-count{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;
  margin:22px 0 0;font-size:14.5px;color:var(--ink-2)}
.home-count li{display:flex;align-items:baseline;gap:6px}
.home-count b{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
@media(max-width:420px){ .home-count{gap:8px 16px;font-size:13.5px} .home-count b{font-size:19px} }

/* ── the video facade ──────────────────────────────────────── */
/* A still and a play button. The real player is fetched on click, so a visitor
   who never watches never pays for Vimeo, and a blocked or slow embed shows a
   picture rather than an empty rectangle. */
/* .videobox already holds the 16:9 shape with padding-top, so the button fills
   it absolutely rather than declaring a second aspect ratio of its own, which
   left a band of empty blue above the still. */
.videoplay{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;
  border:0;border-radius:inherit;overflow:hidden;cursor:pointer;background:var(--plaque-bg)}
/* The frame is shown as it is. It was dimmed to half while it was the avatar
   pretending to be a still; a real frame from the film does not need hiding. */
.videoplay img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.videoplay:hover img{transform:scale(1.02)}
.videoplay-ico{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--plaque-bg);
  display:flex;align-items:center;justify-content:center;padding-left:5px;
  box-shadow:0 4px 18px rgba(0,0,0,.28);transition:transform .12s ease}
.videoplay:hover .videoplay-ico{transform:scale(1.06)}
.videoplay-txt{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;
  font-size:13px;font-weight:600;color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.55))}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── choosing how to pay, inside one card ──────────────────── */
/* Three prices for one thing, rather than three cards repeating one feature
   list. The chosen row is the one the button buys. */
/* A grid, not a flex row. In a flex row the period label was allowed to shrink
   below its own text and then spill over the amount sitting next to it, so in a
   narrow card "for a year" was printed underneath the price. Three tracks: the
   circle, the words, the amount. The words track is the only elastic one and it
   wraps rather than overflows, so nothing can ever land on top of anything. */
.payopts{display:flex;flex-direction:column;gap:8px;margin:4px 0 18px}
.payopt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  column-gap:11px;padding:11px 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  transition:border-color .12s ease, background .12s ease}
.payopt:hover{border-color:var(--cobalt)}
.payopt.is-on{border-color:var(--cobalt);background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--cobalt)}
.payopt input{accent-color:var(--cobalt);width:17px;height:17px;margin:0}
.payopt-when{font-size:14px;color:var(--ink-2);line-height:1.35;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.payopt.is-on .payopt-when{color:var(--ink);font-weight:600}
/* The amount keeps its own track and is never squeezed: right edges line up
   down the card whether or not a row carries a badge. Tabular figures so the
   digits sit in columns too. */
.payopt-price{justify-self:end;font-size:19px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}

/* The first thing a brand new student sees, straight under the greeting. */
.hm-go-first{margin-top:16px}

/* ── how Derja is written here ─────────────────────────────── */
.sp-list{list-style:none;margin:26px 0 0;padding:0}
.sp-row{padding:16px 0;border-bottom:1px solid var(--line-soft);
  display:grid;grid-template-columns:96px 1fr auto;gap:6px 20px;align-items:baseline}
.sp-keys{display:flex;align-items:baseline;gap:11px}
.sp-lat{font-family:var(--tr);font-size:23px;font-weight:800;color:var(--cobalt);line-height:1}
.sp-ar{font-family:var(--ar);font-size:25px;color:var(--ink);line-height:1}
.sp-how{margin:0;color:var(--ink-2);line-height:1.55;font-size:14.5px}
.sp-ex{margin:0;text-align:right;white-space:nowrap}
.sp-ex-ar{font-family:var(--ar);font-size:20px;color:var(--ink);display:block}
.sp-ex-tr{font-family:var(--tr);color:var(--teal,#14918A);font-style:italic;font-size:13px}
.sp-ex-en{font-size:12.5px;color:var(--ink-3);margin-left:7px}
.sp-h2{margin-top:38px;font-size:20px}
.sp-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
/* One column on a phone: the letter, then what it sounds like, then the word. */
@media(max-width:640px){
  .sp-row{grid-template-columns:1fr;gap:8px}
  .sp-ex{text-align:left;white-space:normal;padding-left:13px;border-left:2px solid var(--line)}
  .sp-ex-ar{display:inline;margin-right:9px}
}

/* On a phone the button wraps under the text, so the block does not also need
   desktop padding: it was taking a third of the screen for one instruction. */
@media(max-width:520px){ .hm-go{padding:15px 17px;gap:12px} }

/* Said once to somebody trying the course without an account. Not a wall: they
   can read and answer, this only says what will not be kept. */
.trialbar{margin:0 0 18px;padding:11px 14px;border-radius:9px;font-size:14px;
  background:var(--amber-soft);color:var(--ink-2);border:1px solid var(--line)}
.trialbar a{font-weight:700;color:var(--cobalt)}

/* The renewing card, and the line under its choices. */
.plan-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;
  border-radius:20px;background:var(--accent-soft);color:var(--cobalt);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.payopt-note{margin:-8px 0 16px;font-size:13px;color:var(--ink-3)}
/* Held open while Paddle is still fetching, so the rows do not jump. Narrow
   enough that the period beside it still gets a line of its own. */
.payopt[data-months] .payopt-price{min-width:3.4em}

/* The badge rides with the period label and wraps under it when the card is
   too narrow to hold both on one line. It is never allowed into the price
   track, which is what used to push the amount out of line. */
.payopt .plan-save{margin:0;flex:0 0 auto;font-size:11px;padding:2px 7px}
.plan-tag.is-once{background:var(--surface-2);color:var(--ink-3)}

/* ── the front door, rebuilt around two doors ──────────────── */
/* People, said once, right under the buttons. The stars are the same glyphs
   the review cards use, so the two read as one thing. */
.home-proof{margin:16px 0 0;font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 10px}
.home-proof .said-stars{margin:0;font-size:13px;letter-spacing:.08em}
.home-proof a{color:var(--cobalt);font-weight:600}

/* Try it: two real lines on the left, one real question on the right. The band
   is the darker surface so it reads as a different kind of thing from the
   prose above and below it: something to do, not something to read. */
.tryband{background:var(--surface-2);border-block:1px solid var(--line)}
.tryit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px;
  align-items:start}
.try-kind{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt);margin:0 0 14px}
.try-lines,.try-ex{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px 20px}
.try-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line-soft)}
.try-line:first-of-type{border-top:0;padding-top:2px}
.try-who{font-family:var(--disp);font-weight:700;font-size:11px;color:var(--plaque-ink);
  background:var(--cobalt);width:24px;height:24px;border-radius:99px;display:grid;
  place-content:center;align-self:start;margin-top:6px}
.try-txt{display:grid;gap:3px;min-width:0}
.try-ar{font-family:var(--ar);font-size:24px;line-height:1.5;color:var(--ink);text-align:right}
.try-tr{font-family:var(--tr);font-size:15px;color:var(--cobalt)}
.try-en{font-size:14px;color:var(--ink-2)}
.try-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.try-note a{color:var(--cobalt);font-weight:600;white-space:nowrap}
.try-q{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:14px;line-height:1.4}
.try-ex .ex-opt{font-size:15px;padding:12px 14px}
.try-step + .try-step{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.try-verdict{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--ink)}
.try-after{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14px;
  line-height:1.6;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.try-after .btn{margin-left:auto}

/* Two doors, side by side, the same size. */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;
  align-items:stretch}
.door.zone .ticks{margin-top:2px}
.door-dark{display:flex;flex-direction:column;gap:14px;padding:26px 28px}
.door-dark .plaque-ar{text-align:left;font-size:17px;opacity:.8}
.door-dark .plaque-lat{margin:-8px 0 0;font-size:10.5px;letter-spacing:.15em;opacity:.85}
.door-dark h3{font-family:var(--disp);font-weight:700;font-stretch:110%;font-size:21px;
  letter-spacing:-.01em;margin:0}
.door-dark > p{font-size:15px;line-height:1.62;opacity:.92;margin:0}
.door-dark .zone-cta{margin-top:auto}
.door-dark .zone-cta .fineprint{margin:0}
@media (max-width:560px){
  .try-lines,.try-ex,.door-dark,.door.zone{padding:18px 18px 16px}
  .try-ar{font-size:21px}
}


/* ── the examples: one word, one sentence, and him reading it ── */
.exsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.exsum div{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.exsum b{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.exsum span{font-size:12.5px;color:var(--ink-3)}
.exrow{margin-bottom:16px}
/* The whole pile at once. Quiet while it is an offer, and marked while it is
   a question, so the second press never looks like the first. */
.exall{margin-top:18px}
.exall p{max-width:62ch}
.exall.is-asking{border-color:var(--warn);background:var(--warn-soft)}
.exword{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.exw-tr{font-family:var(--tr);font-size:20px;font-weight:700;color:var(--ink)}
.exw-ar{font-family:var(--ar);font-size:17px;color:var(--ink-3)}
.exw-me{font-size:14.5px;color:var(--ink-2)}
.exwarn{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:8px 12px;
  font-size:13.5px;margin-bottom:12px}
.exfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.exmore{margin-top:10px}
.exmore summary{cursor:pointer;font-size:13.5px;color:var(--ink-3);margin-bottom:10px}
.exdo{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.expage{display:flex;align-items:center;gap:14px;margin:10px 0 8px}

/* the example under a word, wherever a word is shown */
/* The example under a word: the spelling and the script on one line, what it
   means under them. Each piece isolated, or a right-to-left run and a
   left-to-right one on the same line reorder each other. */
.wx{display:flex;flex-direction:column;gap:1px;margin-top:7px;font-size:13px;line-height:1.5;
  color:var(--ink-3);border-left:2px solid var(--line);padding-left:10px}
.wx-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.wx b{font-family:var(--tr);font-weight:600;color:var(--ink-2);
  direction:ltr;unicode-bidi:isolate}
.wx-ar{font-family:var(--ar);font-size:13.5px;color:var(--ink-3);
  direction:rtl;unicode-bidi:isolate}
.wx-me{color:var(--ink-3)}
.wxbox{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--surface-2,var(--surface));
  border:1px solid var(--line);text-align:left}
.wxbox .wx-k{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.wxbox .wx-tr{display:block;font-family:var(--tr);font-size:17px;font-weight:600;color:var(--ink);
  line-height:1.4;direction:ltr;unicode-bidi:isolate}
.wxbox .wx-ar{display:block;font-family:var(--ar);font-size:15px;color:var(--ink-3);margin-top:4px}
.wxbox .wx-me{display:block;font-size:14px;color:var(--ink-2);margin-top:6px}

/* ── a note that can be heard, linked and asked about ───────── */
/* A word of Derja inside a sentence, with its button. Kept on one line so a
   play button never wraps away from the word it plays. */
.n-say{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:1px 5px 1px 7px;margin:0 1px}
.n-say-ar{font-family:var(--ar);font-size:1.06em;color:var(--ink)}
.n-say .say{width:22px;height:22px;flex:0 0 22px}
.n-unit{color:var(--brand);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.n-unit:hover{text-decoration-thickness:2px}
.n-mins{color:var(--ink-3);font-weight:400}
.n-mins::before{content:"·";margin:0 7px;color:var(--line)}

/* A paradigm is a grid. Notes could not hold one until now, so these are the
   first tables the course has ever shown. */
.notebody table{border-collapse:collapse;width:100%;margin:14px 0 18px;font-size:15px}
.notebody th{background:var(--surface-2,var(--surface));color:var(--ink);text-align:left;
  font-weight:700;padding:8px 11px;border:1px solid var(--line)}
.notebody td{padding:8px 11px;border:1px solid var(--line);vertical-align:baseline}
.notebody td[dir="rtl"],.notebody th[dir="rtl"]{font-family:var(--ar)}
@media (max-width:560px){
  .notebody table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── the questions under a note ─────────────────────────────── */
.asks{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.asks-h{font-size:19px;margin:0 0 14px}
.asklist{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:16px}
.ask{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.ask-waiting{border-style:dashed;margin-bottom:16px}
.ask-q{margin:0 0 6px;line-height:1.55}
.ask-who{margin:0;font-size:12.5px;color:var(--ink-3)}
.ask-a{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ask-me{margin:0 0 4px;font-size:12.5px;font-weight:700;color:var(--brand)}
.ask-a p{margin:0;line-height:1.55}
.askform{margin-top:8px}
.askform textarea{width:100%}
.askrow{margin-bottom:16px}
.ask-where{margin:0 0 8px;font-size:13px;color:var(--ink-3)}
.ask-note{color:var(--ink-2)}
.askacts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.sep{color:var(--line);margin:0 5px}

/* ── the index of every note ────────────────────────────────── */
.nfilter{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px}
.nfilter input[type=search]{flex:1 1 210px;min-width:0}
.nfilter select{flex:0 1 auto}
.nsum{margin-bottom:16px}
.nlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.nlvl{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 4px}
.nlvl:first-child{margin-top:0}
.ncard a{display:flex;flex-direction:column;gap:3px;padding:13px 15px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;color:inherit}
.ncard a:hover{border-color:var(--brand)}
.ncard-t{font-weight:700;color:var(--ink);line-height:1.35}
.ncard-u{font-size:13px;color:var(--ink-2)}
.ncard-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.ntag{font-size:11.5px;color:var(--ink-3);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px}
.nmins{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.course-index{margin:0 0 18px;font-size:14px}
.course-index a{color:var(--brand);text-decoration:none}
.course-index a:hover{text-decoration:underline}
.course-index b{background:var(--brand);color:#fff;border-radius:999px;padding:0 6px;font-size:12px}

/* ═══ a student's own lessons ═══════════════════════════════════
   The page they land on once they have lessons, as opposed to the one that
   sells them a first. It borrows the booking calendar's month wholesale, so
   the two pages feel like one site, and adds rows, tags and three panels. */
.sc-wrap{max-width:980px;padding-bottom:40px}
.sc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:6px 0 20px}
.sc-head h1{font-family:var(--disp);font-size:29px;font-weight:800;margin:0;letter-spacing:-.02em}
.sc-head .sub{margin:6px 0 0}
.sc-new{width:auto;flex:0 0 auto}
.sc-gaps{margin-bottom:18px}
.sc-gaps p{margin:0 0 6px}
.sc-gaps p:last-child{margin:0}

.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.sc-next{grid-column:1 / -1;display:flex;flex-direction:column;gap:3px;
  background:var(--cobalt);color:#fff;border-color:transparent}
.sc-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.sc-next-when{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.01em}
.sc-next-in,.sc-next-where{font-size:14px;opacity:.82}
.sc-cal{grid-column:1}
.sc-list{grid-column:2}
/* The weekly block and the money sit under the month, in the left column, so
   a student with fifty lessons in the right one does not leave a field of
   white next to it. */
.sc-weekly,.sc-money,.sc-push{grid-column:1}
.push-me-p{margin:0 0 13px}
.sc-push h2{margin-top:0}
.sc-empty{grid-column:1 / -1}
.sc-empty{text-align:center;padding:38px 24px}
.sc-empty h2{margin:0 0 6px}
.sc-empty .btn{width:auto;margin-top:16px}
.sc-cal-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:13.5px;color:var(--ink-2);min-height:20px;line-height:1.5}

.sc-tabs{margin:-6px 0 4px}
.sc-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.sc-row:last-child{border-bottom:0;padding-bottom:0}
.sc-row.is-over{opacity:.78}
.sc-when{display:flex;flex-direction:column;gap:4px;min-width:0}
.sc-when b{font-size:15px;font-weight:650}
.sc-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.sc-tag{border-radius:99px;padding:2px 9px;font-weight:650;font-size:11.5px;
  background:var(--surface-2);color:var(--ink-2)}
.sc-tag.is-wait{background:var(--amber-soft);color:var(--amber)}
.sc-tag.is-paid{background:var(--green-soft);color:var(--green)}
.sc-tag.is-owed{background:var(--warn-soft);color:var(--warn)}
.sc-tag.is-done{background:var(--accent-soft);color:var(--cobalt)}
.sc-tag.is-off{background:var(--sunk);color:var(--ink-3)}

.sc-do{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.sc-act{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--cobalt);cursor:pointer;border-radius:4px}
.sc-act:hover{text-decoration:underline}
.sc-act.is-off{color:var(--warn)}
.sc-shut{font-size:12.5px;color:var(--ink-3)}
.sc-none{margin:14px 0 0}
.sc-tally{margin:12px 0 4px;font-size:14px}
.sc-tally .em{color:var(--ink-3);font-weight:400}

/* ── the three panels ── */
.sc-pane{border:0;border-radius:16px;padding:0;max-width:480px;width:calc(100% - 32px);
  background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(8,13,22,.28)}
.sc-pane::backdrop{background:rgba(8,13,22,.46)}
.sc-pane form{padding:22px 22px 20px}
.sc-pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sc-pane-head h2{font-family:var(--disp);font-size:19px;font-weight:700;margin:0 0 4px}
.sc-x{border:0;background:none;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;
  padding:0 2px;border-radius:6px}
.sc-x:hover{color:var(--ink)}
.sc-pane .sub{margin:0 0 14px}
.sc-pane-cal{margin:8px 0 14px}
.sc-pane-times{display:flex;flex-wrap:wrap;gap:8px;max-height:132px;overflow-y:auto;
  margin-bottom:14px;scrollbar-width:thin}
.sc-pane-times .sub{margin:0}
.sc-time{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:8px 13px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .12s ease,background .12s ease}
.sc-time:hover{border-color:var(--cobalt)}
.sc-time.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.sc-pane-do{display:flex;gap:10px;justify-content:flex-end;padding-top:16px;
  border-top:1px solid var(--line-soft)}
.sc-pane-do .btn{width:auto}
/* A button that cannot be pressed yet should look like one. Without this the
   Move it button sits there dark and inviting while nothing is chosen. */
.sc-pane-do .btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.sc-pane-do .btn:disabled:hover{filter:none}
.sc-pane-msg{font-size:13.5px;color:var(--warn);margin:0 0 10px}
.sc-off-pay{margin:0 0 14px}
.sc-off-free{font-size:13.5px;color:var(--ink-2);margin:0 0 14px}
.sc-whys{display:flex;flex-wrap:wrap;gap:8px}
.sc-why{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:99px;padding:7px 13px;font-size:13.5px;cursor:pointer;
  transition:border-color .12s ease,background .12s ease}
.sc-why:hover{border-color:var(--cobalt)}
.sc-why input{margin:0}
.sc-why:has(input:checked){background:var(--accent-soft);border-color:var(--cobalt);color:var(--cobalt)}

@media (max-width:760px){
  .sc-grid{grid-template-columns:1fr}
  .sc-cal,.sc-list{grid-column:1}
  .sc-head{align-items:flex-start}
  .sc-new{width:100%;text-align:center}
  .sc-row{align-items:flex-start;flex-direction:column;gap:9px}
  .sc-do{width:100%;justify-content:flex-start}
  .sc-pane form{padding:18px 16px 16px}
  .sc-pane-do{flex-direction:column-reverse}
  .sc-pane-do .btn{width:100%}
}
.sc-mth{list-style:none;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);padding:16px 0 4px;border-bottom:0}
.sc-showall{margin-top:14px;border:0;background:none;padding:0;font:inherit;font-size:14px;
  font-weight:600;color:var(--cobalt);cursor:pointer}
.sc-showall:hover{text-decoration:underline}

/* ═══ importing a planning sheet ════════════════════════════════ */
.im-wrap{max-width:880px;padding-bottom:40px}
.im-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:6px 0 20px}
.im-head h1{font-family:var(--disp);font-size:27px;font-weight:800;margin:0;letter-spacing:-.02em}
.im-head .sub{margin:6px 0 0;max-width:52ch}
.im-back{width:auto;flex:0 0 auto}
.im-pick,.im-sum,.im-group,.im-done{margin-bottom:18px}
.im-pick select,.im-pick input[type=file]{width:100%}
.im-done h2{margin:0 0 10px}

.im-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 22px}
.im-tile{display:flex;flex-direction:column;gap:2px;min-width:118px;flex:1 1 118px;
  padding:12px 14px;border-radius:11px;border:1px solid var(--line);text-decoration:none;
  background:var(--surface);color:var(--ink)}
.im-tile:hover{border-color:var(--cobalt)}
.im-tile b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.im-tile span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.im-tile.is-new{background:var(--green-soft);border-color:transparent}
.im-tile.is-new b,.im-tile.is-new span{color:var(--green)}
.im-tile.is-clash{background:var(--warn-soft);border-color:transparent}
.im-tile.is-clash b,.im-tile.is-clash span{color:var(--warn)}
.im-tile.is-shut{background:var(--amber-soft);border-color:transparent}
.im-tile.is-shut b,.im-tile.is-shut span{color:var(--amber)}
.im-tile.is-bad{background:var(--warn-soft);border-color:transparent}
.im-tile.is-bad b,.im-tile.is-bad span{color:var(--warn)}

.im-choice{border-top:1px solid var(--line-soft);padding-top:16px}
.im-choice > label:first-child{font-weight:650;margin-bottom:8px;display:block}
.im-choice .check{align-items:flex-start;margin-bottom:8px}
.im-choice .check span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.im-do{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.im-do .btn{width:auto}

.im-group h2{font-size:17px;margin:0 0 4px}
.im-group .sub{margin:0 0 14px;max-width:62ch}
.im-rows{list-style:none;margin:0;padding:0;font-size:13.5px}
.im-rows li{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--line-soft)}
.im-rows li:last-child{border-bottom:0}
.im-line{color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 58px;font-size:12px}
.im-when{font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.im-note{color:var(--ink-2);min-width:0}
.im-why{color:var(--warn);font-size:12.5px}
/* Not a warning: a lesson that is already right where it should be and is
   about to be told who is in it. Green, because nothing is at risk. */
.im-fill{color:var(--green);font-size:12.5px}

@media (max-width:640px){
  .im-head{align-items:flex-start}
  .im-back{width:100%;text-align:center}
  .im-rows li{flex-direction:column;gap:3px}
  .im-line{flex:none}
}


/* ══ the Lessons page, and its Money tab ════════════════════════
   One state per student, one thing to do about it, and a student's page
   of its own rather than a card at the bottom of everybody. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ls-sub{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.strand-weeks{margin-top:8px}
.strand-weeks summary{cursor:pointer;font-size:13px;color:var(--cobalt);width:max-content}
.strand-weeks ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px;max-width:520px}
.strand-weeks li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)}
.soonlist > li > div:first-child{min-width:0;flex:1 1 260px}

.mn-intro{margin:0 0 18px;max-width:72ch}
.mn-intro p{font-size:14.5px;color:var(--ink-2);margin:0}
.mn-how summary,.mn-more summary{cursor:pointer;font-size:13px;color:var(--cobalt);width:max-content;margin-top:6px}
.mn-how p,.mn-more p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:8px 0 0}
.mn-lost details{margin-top:6px}
.mn-lost ul{margin:8px 0;padding-left:18px;font-size:13.5px}

.mn-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 18px}
.mn-tile{display:flex;flex-direction:column;gap:2px;padding:14px 18px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius);
  text-decoration:none;color:var(--ink)}
.mn-tile:hover{border-color:var(--ink-3)}
.mn-tile.is-owe{border-left-color:var(--warn)}
.mn-tile.is-used{border-left-color:var(--amber)}
.mn-tile.is-ahead{border-left-color:var(--green)}
.mn-tile.is-on{outline:2px solid var(--cobalt);outline-offset:-1px}
.mn-k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.mn-tile b,.mn-stat b{font-family:var(--disp);font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.mn-stat b small{font-size:14px;font-weight:500;color:var(--ink-3)}
.mn-s{font-size:12.5px;color:var(--ink-3)}
.mn-filtered{font-size:13.5px;color:var(--ink-2);margin:0 0 10px}

.mn-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.mn-row{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(200px,1.3fr) minmax(150px,1fr) 210px;
  gap:8px 22px;align-items:center;padding:14px 18px 14px 20px;border-top:1px solid var(--line-soft);position:relative}
.mn-row:first-child{border-top:0}
.mn-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:transparent}
.mn-row.is-owe::before{background:var(--warn)}
.mn-row.is-used::before{background:var(--amber)}
.mn-who{display:flex;flex-direction:column;min-width:0;text-decoration:none}
.mn-who b{font-size:15px;color:var(--ink);font-weight:650}
.mn-who span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-who:hover b{color:var(--cobalt)}
.mn-state{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.mn-chip{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.mn-chip.is-owe{background:var(--warn-soft);color:var(--warn)}
.mn-chip.is-used{background:var(--amber-soft);color:var(--amber)}
.mn-chip.is-ahead{background:var(--green-soft);color:var(--green)}
.mn-sub{font-size:12.5px;color:var(--ink-3);font-weight:400}
.mn-count{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mn-count b{color:var(--ink)}
.mn-bar{display:block;height:4px;max-width:150px;background:var(--sunk);border-radius:2px;overflow:hidden}
.mn-bar i{display:block;height:100%;background:var(--green)}
.mn-auto{font-size:12px;color:var(--ink-3)}
.mn-do{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.mn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-2)}
.mn-icon:hover{color:var(--green);border-color:var(--green)}
.mn-icon:focus-visible,.mn-who:focus-visible,.mn-tile:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
@media (max-width:820px){
  .mn-row{grid-template-columns:1fr auto;gap:8px 12px}
  .mn-row .mn-state,.mn-row .mn-count{grid-column:1 / -1}
  .mn-row .mn-do{grid-row:1;grid-column:2}
  .mn-count{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .mn-bar{width:90px}
}

.mn-back{margin:0 0 14px;font-size:14px}
.mn-back a{color:var(--ink-2);text-decoration:none}
.mn-back a:hover{color:var(--cobalt)}
.mn-draft{border-left:4px solid var(--cobalt);margin-bottom:20px}
.mn-head{margin-bottom:20px}
.mn-head-top{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-start;justify-content:space-between}
.mn-head-top h2{margin:0 0 2px}
.mn-head-do{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:20px}
.mn-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--bg);
  border:1px solid var(--line-soft);border-left:3px solid var(--line);border-radius:var(--radius)}
.mn-stat.is-owe{border-left-color:var(--warn)} .mn-stat.is-owe b{color:var(--warn)}
.mn-stat.is-used{border-left-color:var(--amber)}
.mn-stat.is-ahead{border-left-color:var(--green)}

.mn-cols{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:940px){.mn-cols{grid-template-columns:1fr}}
.mn-card{padding:22px 24px;margin-bottom:20px}
.mn-card h3{font-family:var(--disp);font-size:16.5px;font-weight:700;margin:0 0 14px;display:flex;
  flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.mn-payrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media (max-width:480px){.mn-payrow{grid-template-columns:1fr}}
.mn-payrow .field input,.mn-payrow .field select{min-width:0;height:46px}
.mn-payrow .field{margin-bottom:12px}
.field label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400}
.mn-join{display:flex}
.mn-join > *{min-width:0}
.mn-join > :first-child{border-top-right-radius:0;border-bottom-right-radius:0;flex:1 1 auto}
.mn-join > :last-child{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;flex:0 0 auto;width:auto}
.field .mn-join select{width:auto;padding-right:30px}
.field .mn-cur{width:74px}
.mn-formdo{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:6px}
.mn-hint{font-size:12.5px;color:var(--ink-3)}
.mn-more{margin:0 0 8px}
.mn-more .field{margin:8px 0 0}

.mn-lines{list-style:none;margin:0;padding:0}
.mn-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 16px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line-soft)}
.mn-lines li:first-child{border-top:0;padding-top:0}
.mn-l-main{min-width:0;font-size:14px;color:var(--ink-2)}
.mn-l-main b{color:var(--ink);font-weight:600;margin-right:6px}
.mn-l-meta{font-size:13px;color:var(--ink-2)}
.mn-lines .linkish{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink-3);
  border-bottom:1px solid transparent}
.mn-lines .linkish:hover{color:var(--ink);border-bottom-color:var(--cobalt)}
@media (max-width:560px){
  .mn-lines li{grid-template-columns:1fr auto}
  .mn-lines .mn-l-meta{grid-column:1;grid-row:2}
}

.mn-auto .mn-set{display:flex;flex-direction:column;gap:7px;padding:14px 0;border-top:1px solid var(--line-soft)}
.mn-auto .mn-set:first-of-type{border-top:0;padding-top:0}
.mn-auto .mn-set > b{font-size:14px;color:var(--ink)}
.mn-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.mn-inline input{width:64px;font-size:15px;padding:7px 8px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius)}
.mn-inline input:focus{outline:2px solid var(--cobalt);outline-offset:1px}
.mn-radio{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--ink-2);cursor:pointer}
.mn-auto .btn{margin:2px 0 10px}
.mn-hist .wr-what{white-space:normal}
@media (max-width:560px){
  .mn-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mn-tile{padding:10px 10px 10px 11px;border-left-width:3px}
  .mn-tile b{font-size:20px}
  .mn-tile .mn-k{font-size:9.5px;letter-spacing:.08em}
  .mn-tile .mn-s{display:none}
}
.ls-table .ls-day th{background:var(--surface-2);color:var(--ink);font-size:12px;letter-spacing:.06em;
  text-transform:none;font-weight:700;padding:9px 16px}
.ls-table .ls-day th span{font-weight:400;color:var(--ink-3);margin-left:8px}
.ls-table .ls-day:first-child th{border-top:0}
.ls-time .who{font-variant-numeric:tabular-nums;font-weight:700}
.ls-later{margin-top:14px}
.ls-later summary{cursor:pointer;font-size:13.5px;color:var(--cobalt);margin-bottom:12px;width:max-content}
@media (max-width:560px){
  .mn-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mn-stat{padding:10px 12px}
  .mn-stat b{font-size:21px}
}