/* Arabic Ladder mock-up kit · shared by every mock-up page (5 Oct 2026).
 * Tokens and components copied from the design system (artifact 1HKPC2ckhu3huqNmqceTce, README in reviews/design-system-README.md).
 * Pages link this file and add only their own page-specific rules. Change a shared rule here, never in a page. */
:root{
  color-scheme:light;
  --parchment:#F7F4EC;--white:#FFFFFF;--navy:#0A2244;--navy-hover:#17335F;--body:#334561;--slate:#556B8A;--placeholder:#556B8A;--chevron:#8190A6;
  --gold:#BE9032;--gold-hover:#C99D40;--gold-deep:#7A5A10;--gold-light:#D8B25C;--linen:#EFEBE1;--band:#FBF9F4;--navy-wash:#EDF1F7;--gold-wash:#F7EEDB;--gold-wash-hover:#F4E8CF;
  --ivory:#F3F0E9;--mist:#C6D2E4;--brick:#9A3B2E;
  --line:rgba(10,34,68,.07);--line-bar:rgba(10,34,68,.1);--control-line:rgba(10,34,68,.22);--field-line:rgba(10,34,68,.5);--step-line:rgba(10,34,68,.24);--gold-ring:rgba(190,144,50,.22);--hover-wash:rgba(10,34,68,.035);
  --font-display:'Cormorant Garamond',Georgia,serif;--font-sans:Jost,system-ui,-apple-system,'Segoe UI',sans-serif;--font-arabic:Amiri,'Noto Naskh Arabic','Geeza Pro',serif;
  --radius-section:14px;--radius-tone:10px;--radius-control:8px;--radius-check:6px;--radius-round:999px;
  --shadow-section:0 0 0 1px rgba(10,34,68,.11),0 1px 2px rgba(10,34,68,.04);--shadow-float:0 0 0 1px rgba(10,34,68,.08),0 12px 32px -12px rgba(10,34,68,.28);
  --button-height:44px;--button-height-lg:52px;--button-height-sm:36px;--row-height:64px;--topbar-height:68px;--face-size:40px;
  --mock:#E4E0D6;--mock-ink:#3A3F47;
}
/* type sizes (tokens.css) */
.t-display{font-size:64px;line-height:1;font-weight:600;letter-spacing:-.015em}
.t-title{font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-.01em}
.t-number{font-size:32px;line-height:1;font-weight:500}
.t-section{font-size:19px;line-height:1.3;font-weight:500}
.t-row{font-size:16px;line-height:1.4;font-weight:500}
.t-body{font-size:16px;line-height:1.6}
.t-small{font-size:14px;line-height:1.45}
.t-label{font-size:13px;line-height:1.3;font-weight:500}
.t-eyebrow{font-size:12px;line-height:1.2;font-weight:500;letter-spacing:.14em}
.ar-reading{font-size:44px;line-height:1.9}.ar-word{font-size:30px;line-height:1.8}.ar-inline{font-size:22px;line-height:1.9}.ar-small{font-size:18px;line-height:1.9}

/* ===== design system bundle.css (as published) ===== */
body{margin:0;background:var(--parchment);color:var(--navy);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
[hidden]{display:none!important}
h1,h2,h3,h4,p,ul,ol,figure,figcaption{margin:0;padding:0}
a{color:var(--navy)}
.t-display,.t-title,.t-number{font-family:var(--font-display);color:var(--navy);font-variant-numeric:lining-nums tabular-nums}
.t-section,.t-row,.t-label{font-family:var(--font-sans);color:var(--navy)}
.t-body{font-family:var(--font-sans);color:var(--body)}
.t-small{font-family:var(--font-sans);color:var(--slate)}
.t-eyebrow{font-family:var(--font-sans);color:var(--slate);text-transform:uppercase}
.ar-word{white-space:nowrap}
.ar,.ar-board,.ar-reading,.ar-word,.ar-inline,.ar-small{font-family:var(--font-arabic);direction:rtl;font-weight:400;color:var(--navy)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico .fill,.ico.fill{fill:currentColor;stroke:none}
.goldline{height:2px;background:var(--gold);flex:none}
.topbar{height:var(--topbar-height);display:flex;align-items:center;gap:40px;padding:0 40px;background:var(--white);border-bottom:1px solid var(--line-bar);flex:none}
.brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
.brand b{font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--navy)}
.tab{position:relative;height:var(--topbar-height);display:flex;align-items:center;gap:8px;font:400 16px/1 var(--font-sans);color:var(--body);text-decoration:none;background:none;border:0;margin:0;padding:0;cursor:pointer;flex:none}
.tab-on{color:var(--navy);font-weight:500}
.tab-on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--gold)}
.ptabs{display:flex;background:var(--white);border-top:1px solid var(--line-bar);padding:0 8px 22px}
.ptab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:10px;height:58px;font:400 12px/1 var(--font-sans);color:var(--slate);background:none;border:0;margin:0;text-decoration:none;position:relative}
.ptab-on{color:var(--navy);font-weight:500}
.ptab-on::before{content:'';position:absolute;top:0;left:32%;right:32%;height:2px;border-radius:2px;background:var(--gold)}
.card{background:var(--white);border-radius:var(--radius-section);box-shadow:var(--shadow-section);display:flex;flex-direction:column;min-width:0}
.card-h{display:flex;align-items:flex-start;gap:12px;padding:20px 24px 12px}
.ch-t{display:flex;flex-direction:column;min-width:0}
.card-h .sub{font-size:14px;line-height:1.45;color:var(--slate);margin-top:3px}
.card-h .end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.sec{padding:16px 24px;border-top:1px solid var(--line)}
.pad{padding:0 24px 24px}
.floor{display:flex;align-items:center;gap:10px;padding:14px 24px;min-height:72px;border-top:1px solid var(--line);margin-top:auto}
.floor .end{margin-left:auto;display:flex;gap:10px}
.navy{background:var(--navy);color:var(--ivory);border-radius:var(--radius-section)}
.navy .t-eyebrow{color:var(--gold-light)}
.navy .mist{color:var(--mist)}
.well{border-radius:var(--radius-tone)}
.w-paper{background:var(--parchment)}
.w-gold{background:var(--gold-wash)}
.note{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius-tone);font-size:15px;line-height:1.55;color:var(--navy)}
.note .ico{margin-top:2px}
.note-navy{background:var(--navy-wash)}
.note-gold{background:var(--gold-wash)}
.note-gold .ico{color:var(--gold-deep)}
.note-error{background:var(--white);box-shadow:inset 0 0 0 1px var(--brick);color:var(--brick)}
.row{display:flex;align-items:center;gap:14px;padding:10px 12px;min-height:var(--row-height);border-radius:var(--radius-tone);text-decoration:none;color:inherit;transition:background-color var(--t-colour) var(--ease-colour)}
.chev{color:var(--chevron);flex:none;transition:transform var(--t-turn) var(--ease-out)}
.av{width:var(--face-size);height:var(--face-size);border-radius:999px;background:var(--linen);color:var(--navy);display:grid;place-items:center;font:500 14px/1 var(--font-sans);letter-spacing:.03em;flex:none}
.av-sm{width:32px;height:32px;font-size:12px}
.dot{width:7px;height:7px;border-radius:999px;background:currentColor;flex:none}
/* .live (the breathing gold dot): see MOTION at the end */
.btn{appearance:none;-webkit-appearance:none;border:0;margin:0;font:500 15px/1 var(--font-sans);height:var(--button-height);padding:0 20px;border-radius:var(--radius-control);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;text-decoration:none;flex:none;transition:transform var(--t-press) var(--ease-out),background-color var(--t-colour) var(--ease-colour),box-shadow var(--t-colour) var(--ease-colour),color var(--t-colour) var(--ease-colour)}
.btn:active{transform:scale(var(--press))}
.btn .ico{width:18px;height:18px}
.btn-lg{height:var(--button-height-lg);padding:0 26px;font-size:16px;border-radius:var(--radius-tone)}
.btn-sm{height:var(--button-height-sm);padding:0 14px;font-size:14px}
.btn-primary{background:var(--navy);color:var(--white)}
.btn-secondary{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1px var(--control-line)}
.btn-quiet{background:transparent;color:var(--navy);padding:0 6px;text-decoration:underline;text-decoration-color:rgba(10,34,68,.28);text-underline-offset:5px}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-onnavy{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(243,240,233,.35)}
.btn:focus-visible,.tab:focus-visible,.pill:focus-visible,.row:focus-visible,.ptab:focus-visible,.mrow:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.navy .btn:focus-visible,.navy .mrow:focus-visible{outline-color:var(--gold-light)}
/* focus (5 Oct): one navy ring for anything you can press or type in, never the browser's own colour.
 * Zero specificity, so every component's own focus look above and in pages still wins. */
:where(a[href],button,select,summary,input,textarea,[tabindex]:not([tabindex="-1"])):where(:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
:where(.navy) :where(a[href],button,select,summary,[tabindex]:not([tabindex="-1"])):where(:focus-visible){outline-color:var(--gold-light)}
/* a heading or section the app moves focus to is a landing spot, not a control: no ring */
:where([tabindex="-1"]):focus{outline:none}
.back:focus-visible,.brand:focus-visible{border-radius:4px}
.topbar .who:focus-visible{border-radius:var(--radius-round);outline-offset:4px}
.av:focus-visible,.av.phone-av:focus-visible{border-radius:var(--radius-round)}
/* text selection and the typing caret in the palette */
::selection{background:rgba(190,144,50,.3);color:var(--navy)}
.navy ::selection{background:rgba(216,178,92,.4);color:var(--white)}
input,textarea,[contenteditable]{caret-color:var(--navy)}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--radius-round);font:500 13px/1 var(--font-sans);white-space:nowrap;border:0;margin:0;flex:none}
.pill-plain{background:var(--linen);color:var(--body)}
.pill-gold{background:var(--gold-wash);color:var(--gold-deep)}
.float{background:var(--white);border-radius:12px;box-shadow:var(--shadow-float)}
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{background:var(--navy-hover)}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px rgba(10,34,68,.5)}
.btn-gold:hover{background:var(--gold-hover)}
.btn-quiet:hover{text-decoration-color:var(--navy)}
.btn-onnavy:hover{box-shadow:inset 0 0 0 1px rgba(243,240,233,.7)}
.hov:hover{background:var(--hover-wash)}
.hov:hover .chev{transform:translateX(var(--nudge))}
.navy .mrow:hover{background:rgba(243,240,233,.06)}
.navy .mrow:hover .chev{transform:translateX(var(--nudge))}
}

/* ===== mock-up controls (not part of the app) ===== */
.mockbar{position:sticky;top:0;z-index:20;background:var(--mock);color:var(--mock-ink);border-bottom:1px dashed #9AA0A8;font:14px/1.4 var(--font-sans);padding-block:10px;padding-inline:16px}
.mockbar .in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.mockbar .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B7079}
.mockbar select{height:34px;border-radius:6px;border:1px solid #A7ACB3;background:#F6F4EF;color:var(--mock-ink);font:14px var(--font-sans);padding:0 8px;max-width:100%}
.mockbar button{height:34px;min-width:34px;border-radius:6px;border:1px solid #A7ACB3;background:#F6F4EF;color:var(--mock-ink);font:14px var(--font-sans);cursor:pointer;padding:0 10px}
.mockbar button[aria-pressed="true"]{background:var(--mock-ink);color:#fff;border-color:var(--mock-ink)}
.mockbar .when{flex:1 1 100%;color:#4A5059;font-size:13.5px}
.mockbar .when b{font-weight:500}
.mockbar .grow{flex:1}


[hidden]{display:none!important}
.inset{display:flex;flex-direction:column;gap:2px;padding:0 12px 12px}

/* ===== class page ===== */
.stage{padding-block:28px 64px;padding-inline:16px}
.app{max-width:1280px;margin:0 auto;background:var(--parchment);border-radius:12px;box-shadow:0 0 0 1px rgba(10,34,68,.12),0 20px 50px -30px rgba(10,34,68,.35);overflow:hidden;display:flex;flex-direction:column}
.topbar .tabs{display:flex;gap:28px}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:15px;text-decoration:none}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--gold-wash);color:var(--gold-deep);font:500 12px/1 var(--font-sans)}
.ptabs{display:none}
.page{padding:28px 40px 56px;display:flex;flex-direction:column;gap:24px}
.back{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--body);text-decoration:none;align-self:flex-start;min-height:44px;margin:-10px 0 -14px}
.back .ico{width:18px;height:18px}
.head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.head .ch-t{gap:8px}
.head .end{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;padding-bottom:4px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.main,.side{display:flex;flex-direction:column;gap:20px;min-width:0}
.prose{padding:0 24px 8px;display:flex;flex-direction:column;gap:12px;max-width:62ch}
.prose p{font-size:16px;line-height:1.65;color:var(--body)}
.wrow{display:flex;align-items:center;gap:12px;padding:6px 12px;min-height:60px;border-radius:var(--radius-tone)}
.wrow .en{flex:1;min-width:0;display:flex;flex-direction:column}
.wrow .en b{font-weight:400;font-size:16px;color:var(--navy)}
.wrow .en span{font-size:13.5px;color:var(--slate)}
.wrow .ar-word{line-height:1.8}
.play{width:36px;height:36px;border-radius:999px;border:0;background:var(--navy-wash);color:var(--navy);display:grid;place-items:center;cursor:pointer;flex:none}
.play .ico{width:16px;height:16px}
.words{padding:0 12px 12px;display:flex;flex-direction:column}
.words .wrow + .wrow{border-top:1px solid var(--line);border-radius:0}
.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.hard{margin:4px 24px 20px}
.video{margin:0 24px;aspect-ratio:16/9;border-radius:var(--radius-tone);background:linear-gradient(160deg,#2A3D5A,#13243F);position:relative;display:grid;place-items:center;max-height:420px;width:calc(100% - 48px)}
.video .bigplay{width:72px;height:72px;border-radius:999px;background:rgba(243,240,233,.14);color:var(--ivory);display:grid;place-items:center;border:0;cursor:pointer}
.video .bigplay .ico{width:30px;height:30px}
.video .len{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(10,34,68,.6);color:var(--ivory);font-size:13px}
.video .tag{position:absolute;left:12px;top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.tsearch{display:flex;gap:8px;padding:16px 24px 6px}
.tlines{padding:0 12px 12px}
.tline{display:flex;gap:14px;padding:10px 12px;border-radius:var(--radius-tone);text-decoration:none;color:inherit}
.tline .ts{font-size:13.5px;color:var(--gold-deep);font-variant-numeric:tabular-nums;width:56px;flex:none;padding-top:2px}
.tline .tx{font-size:15px;line-height:1.55;color:var(--body)}
.tline .tx b{font-weight:500;color:var(--navy)}
.tline.now{background:var(--gold-wash)}
.input{height:var(--button-height);width:100%;border:0;margin:0;border-radius:var(--radius-control);background:var(--white);box-shadow:inset 0 0 0 1px var(--field-line);padding:0 14px;font:400 15px/1.4 var(--font-sans);color:var(--navy);outline:none;min-width:0}
.input:focus{box-shadow:inset 0 0 0 1.5px var(--navy),0 0 0 4px rgba(10,34,68,.08)}
.input::placeholder{color:var(--placeholder)}
.covered{list-style:none;margin:0;padding:0 24px 18px;display:flex;flex-direction:column}
.covered li{display:flex;gap:12px;padding:9px 0;font-size:15px;line-height:1.45;color:var(--body);border-top:1px solid var(--line)}
.covered li:first-child{border-top:0}
.covered .n{font-size:13px;color:var(--slate);width:18px;flex:none;padding-top:2px;font-variant-numeric:tabular-nums}
.covered .tk{color:var(--navy);flex:none}
.covered .tk .ico{width:18px;height:18px}
.covered .ar-inline{font-size:19px;line-height:1.75}
.covered li.todo{color:var(--slate)}
.lessonp{margin:0 24px;padding:12px 16px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lessonp .en{align-self:flex-start;font-weight:500;color:var(--navy);font-size:16px;line-height:1.45}
.prep{list-style:none;margin:0;padding:0 12px 12px}
.prep .row .ch-t b{font-weight:500;font-size:16px}
.prep .row .ch-t span{font-size:14px;color:var(--slate)}
.prep .row .meta{margin-left:auto;font-size:14px;color:var(--slate)}
.prep .row .ico{color:var(--navy)}
.prep .row{border-top:1px solid var(--line);border-radius:0}
.prep li:first-child .row{border-top:0}
.faces{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 18px}
.chip{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 4px;border-radius:999px;background:var(--band);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--navy)}
.chip .av{width:28px;height:28px;font-size:12px}
.chip.away{color:var(--slate)}
.chip.away .av{background:transparent;box-shadow:inset 0 0 0 1px var(--step-line);color:var(--slate)}
.banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-section);background:var(--gold-wash)}
.banner .ico{color:var(--gold-deep)}
.banner .tx{flex:1;font-size:15.5px;line-height:1.5;color:var(--navy)}
.done-sec{display:flex;align-items:center;gap:16px;padding:20px 24px}
.done-sec .ch-t{flex:1}
.ok{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius-section);background:var(--white);box-shadow:var(--shadow-section)}
.ok .ico{color:var(--navy)}
.sk{background:linear-gradient(90deg,var(--linen),#F4F1E9,var(--linen));background-size:200% 100%;border-radius:8px;animation:k-shimmer var(--t-shimmer) var(--ease-breath) infinite;animation-play-state:var(--loops)}

.app.phone{max-width:390px;height:800px;border-radius:36px;box-shadow:0 0 0 10px #1E2633,0 30px 60px -30px rgba(10,34,68,.5)}
.app.phone .goldline,.app.phone .topbar{display:none}
.app.phone .scroll-outer{flex:1;overflow:auto}
.app.phone .ptabs{display:flex}
.app.phone .page{padding:20px 20px 28px;gap:18px}
.app.phone .t-title{font-size:34px}
.app.phone .grid{grid-template-columns:minmax(0,1fr);align-items:stretch} /* one column: every card runs the full width (fix round 9) */
.app.phone .head .end{margin-left:0}
.app.phone .cols2{grid-template-columns:1fr}
.app.phone .floor{flex-wrap:wrap}
/* phone tabs carry the same badges as the computer tabs, at the icon's shoulder */
.ptab .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;font-size:12px}
/* the Account avatar on a phone, top right of the page (as student Home); hidden when the page draws its own .phone-av */
.kav-wrap{display:none;position:relative;height:0}
.kav{text-decoration:none}
.app.phone .kav-wrap{display:block}
.app.phone .kav{display:grid;position:absolute;top:20px;right:20px;width:44px;height:44px;z-index:2}
.app.live .kav-wrap,.app:has(#page .phone-av) .kav-wrap{display:none}
.app.phone:not(:has(#page .phone-av)) #page>.head:first-child .ch-t,
.app.phone:not(:has(#page .phone-av)) #page>.sr:first-child+.head .ch-t{padding-right:52px}
@media (max-width:860px){
  .app:not(.phone) .topbar{gap:18px;padding:0 16px;overflow-x:auto}
  .app:not(.phone) .brand b{display:none}
  .app:not(.phone) .page{padding:20px 16px 40px}
  .cols2{grid-template-columns:1fr}
  .app:not(.phone) .grid{align-items:stretch} /* pages stack the grid to one column here: every card runs the full width (fix round 9) */
}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:30;padding:12px 14px 12px 18px;display:flex;align-items:center;gap:14px;font-size:15px;color:var(--navy);max-width:calc(100% - 32px);transition:opacity var(--t-arrive) var(--ease-out),transform var(--t-arrive) var(--ease-out)}
/* toast motion (MOTION spec "toast"): rises in when shown; leaves the same way (.out, kit.js); new words while showing change in place */
@starting-style{.toast{opacity:0;transform:translate(-50%,var(--rise))}}
.toast.out{opacity:0;transform:translate(-50%,var(--rise));transition-duration:var(--t-out)}
.sr{position:absolute;left:-9999px}


/* ===== shared controls ===== */
.cb{appearance:none;-webkit-appearance:none;margin:0;width:22px;height:22px;border-radius:var(--radius-check);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--field-line);display:inline-grid;place-content:center;cursor:pointer;flex:none;transition:background-color var(--t-quick) var(--ease-colour),box-shadow var(--t-quick) var(--ease-colour),transform var(--t-press) var(--ease-out)}
.ticks label{display:flex;align-items:flex-start;gap:12px;padding:10px 10px;border-radius:var(--radius-tone);cursor:pointer;font-size:15px;line-height:1.45;color:var(--navy)}
.ticks label .n{font-size:13px;color:var(--slate);width:20px;flex:none;padding-top:2px;font-variant-numeric:tabular-nums}
.ticks label .cb{margin-top:1px}
.ticks label.cur{background:var(--gold-wash)}
.ticks label .ar-inline{font-size:19px;line-height:1.75}
.ticks label .now{margin-left:auto;font-size:12px;color:var(--gold-deep);flex:none;padding-top:3px}
.switch{position:relative;width:44px;height:26px;flex:none}
.cb::after{content:'';width:10px;height:5px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:translateY(-1px) rotate(-45deg) scale(var(--check-from));opacity:0;transition:transform var(--t-check) var(--ease-out),opacity var(--t-quick) var(--ease-colour)}
.cb:checked{background:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.cb:checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
.cb:active{transform:scale(var(--press-sm))}
.cb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ticks{list-style:none;margin:0;padding:0 8px 8px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch .tr{position:absolute;inset:0;border-radius:999px;background:var(--linen);box-shadow:inset 0 0 0 1px var(--control-line);transition:background-color var(--t-colour) var(--ease-colour)}
.switch .th{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:var(--white);box-shadow:0 1px 2px rgba(10,34,68,.25);transition:transform var(--t-switch) var(--ease-out)}
.switch input:checked ~ .tr{background:var(--navy);box-shadow:none}
.switch input:checked ~ .th{transform:translateX(18px)}
.switch input:focus-visible ~ .tr{outline:2px solid var(--navy);outline-offset:2px}
.task{padding:0 24px 16px;display:flex;flex-direction:column;gap:8px}
.task ol{margin:0;padding-left:20px;font-size:15px;line-height:1.55;color:var(--body);display:flex;flex-direction:column;gap:6px}
.moveon{display:flex;align-items:flex-start;gap:12px;padding:16px 24px;font-size:15.5px;line-height:1.5;color:var(--navy);cursor:pointer}
.moveon span span{display:block;font-size:14px;color:var(--slate)}
.select{height:var(--button-height);width:100%;border:0;margin:0;border-radius:var(--radius-control);background:var(--white);box-shadow:inset 0 0 0 1px var(--field-line);padding:0 42px 0 14px;font:400 16px/1.4 var(--font-sans);color:var(--navy);appearance:none;-webkit-appearance:none;cursor:pointer}
.select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--navy),0 0 0 4px rgba(10,34,68,.08)}
.selwrap{position:relative;display:flex;width:100%}
.selwrap .ico{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;color:var(--body)}
.field{display:flex;flex-direction:column;gap:6px}
.field .lab{font-size:14px;font-weight:500;color:var(--navy)}
.field .hint{font-size:13px;color:var(--slate)}
textarea.input{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.55;display:block;font-size:15.5px}
.fields{padding:4px 24px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields .wide{grid-column:1/-1}
.brief{padding:0 24px 18px;display:flex;flex-direction:column}

/* ===== shared page pieces (moved from enquiry.html, 5 Oct) ===== */
/* label · value rows, like a receipt: words on the left edge, values on the right; stacked on a phone */
.kvs{list-style:none;margin:0;padding:0 24px 10px}
.kvs li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.kvs li:first-child{border-top:0}
.kvs .k{color:var(--slate);flex:none;max-width:55%}
.kvs .v{color:var(--navy);text-align:right;min-width:0;overflow-wrap:anywhere}
.kvs.wide .k{max-width:none;flex:1;color:var(--navy)}
.kvs.wide .v{flex:none;color:var(--slate);font-variant-numeric:tabular-nums}
.app.phone .kvs:not(.wide) li{flex-direction:column;align-items:flex-start;gap:2px}
.app.phone .kvs:not(.wide) .k{max-width:none}
.app.phone .kvs:not(.wide) .v{text-align:left}
/* a small group label inside a section (rule 3), and a quoted message */
.grp{font:500 13px/1.3 var(--font-sans);color:var(--slate);padding:10px 24px 4px;margin:0}
.quote{padding:2px 24px 20px;font-size:15px;line-height:1.6;color:var(--body);max-width:60ch}
/* a .quote starts with its opening mark (“), which hangs so the words snap to the section's left edge */
.quote{text-indent:-.32em}
/* finishing details (from the enquiry polish pass, 5 Oct) */
/* a heading straight onto its floor gets the same air below as above */
.card-h:has(+ .floor){padding-bottom:20px}
/* no lone last words in helper lines, quotes and values */
.card-h .sub,.ch-t>.t-small,.floor .t-small,.quote,.note span,.kvs .v,.t-body{text-wrap:pretty}
/* done mark at the start of a section's heading: a check in a gold circle; .plain for a quiet ending */
.card-h>.ic{width:var(--face-size);height:var(--face-size);border-radius:999px;background:var(--gold-wash);color:var(--navy);display:grid;place-items:center;flex:none}
.card-h>.ic.plain{background:var(--linen)}
/* choice chips (times, evenings): off is plain white, on is gold-wash with navy text; navy stays for the one button */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.eves{display:flex;gap:8px;flex-wrap:wrap}
.ch{appearance:none;border:0;margin:0;height:44px;min-width:76px;padding:0 16px;border-radius:var(--radius-round);background:var(--white);box-shadow:inset 0 0 0 1px var(--control-line);font:500 15px/1 var(--font-sans);color:var(--navy);cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color var(--t-colour) var(--ease-colour),box-shadow var(--t-colour) var(--ease-colour),transform var(--t-press) var(--ease-out)}
.eves .ch{min-width:60px}
.ch:active{transform:scale(var(--press))}
.ch[aria-pressed="true"]{background:var(--gold-wash);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--gold)}
.ch:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ch:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1px rgba(10,34,68,.5)}}

/* top bar: logo and avatar reach the 44px tap size (review 5 Oct) */
.topbar .brand,.topbar .who{min-height:44px}

/* ===== MOTION (6 Oct 2026) · copy this whole section, from here to "end of MOTION", exactly ===== */
/* MOTION SPEC · almost nothing moves. Only what just changed moves, once and briefly. Arabic being read, numbers and money,
 * the moment strip (mock-up controls) and anything in a live class never move. Only transform and opacity animate.
 * Every value below is a token in :root; pages and kit.js use the tokens, never their own numbers.
 *
 * name      what moves                                   property                                 duration · easing                    enter / exit                                     reduced motion
 * press     .btn .ch .vp-b (.cb .nb use --press-sm)      transform: scale(--press)                --t-press · --ease-out               on :active; transition, retargets on release     no scale
 *           never on anything holding Arabic (.cbtn practice answers), never in a live class
 * hover     washes, rings, text colour (mouse only)      background-color, box-shadow, color      --t-colour · --ease-colour           retargets                                        same
 * nudge     row chevron on hover                         transform: translateX(--nudge)           --t-turn · --ease-out                retargets                                        none
 * turn      fold chevron turning                         transform: rotate                        --t-turn · --ease-out                retargets                                        instant
 * tick      checkbox tick, radio dot settling            transform: scale(--check-from / --dot-from → 1), opacity   --t-check · --ease-out; box fill --t-quick   retargets   fade only
 * switch    switch thumb sliding                         transform: translateX                    --t-switch · --ease-out              retargets                                        instant
 * arrive    the region that just changed (kit.js adds   opacity 0→1, transform: translateY(--rise → 0)   --t-arrive · --ease-out      in only; what leaves goes at once                fade only
 *           .arrive; .arrive-fade = opacity only, for a region holding Arabic). Never on: moment-strip flips, a new view (its h1 changed),
 *           more than 3 regions at once, controls, typing, tabs, chips, Arabic reading surfaces, a live class
 * fold      <details> content, and a "more" that kit.js sees arrive   as arrive                        --t-arrive · --ease-out              opens with arrive; closes at once (no height)    fade only
 * toast     the message at the bottom                    opacity, transform: translate(-50%, --rise → 0)  in --t-arrive, out --t-out · --ease-out   in from below, leaves the same way;
 *           stays --t-toast (--t-toast-long with an Undo), longer while hovered or focused; a new message while one shows changes the words in place (no re-rise);
 *           its words also go to the persistent polite status region #k-live; any Undo in it also exists inline on the page          fade only
 * pop       small menu from its button (guest join)      opacity, transform: scale(--pop-scale → 1), origin at the button   --t-pop · --ease-out   in only                        fade only
 * stagger   Welcome "You're ready"; Finish → After       arrive with delay i × --stagger, at most 5 items   --t-arrive · --ease-out     in only                                          no delay
 * breath    live dot (Home, Today, recording)            ::after ring: opacity .5→0, transform: scale(1 → --breath-scale)   --t-breath · --ease-breath,
 *           --breaths times when it appears, then one breath every --t-breath-gap; still in the live class room                      still
 * shimmer   loading skeleton                             background-position (loop)              --t-shimmer · --ease-breath           loops                                            still
 * progress  upload bar filling                           transform: scaleX(.3 → 1), origin left   --t-progress · --ease-out            once                                             full at once
 * talk      guest mic level bars                         transform: scaleY (loop)                 --t-talk · --ease-breath, --talk-step apart   loops                                   still
 * zoom      homework photo zoom and turn                 transform                                --t-move · --ease-move               retargets                                        instant
 * sheet     side drawer (class-live-options)             opacity, transform: translateX(--rise → 0)   --t-sheet · --ease-out           in only                                          fade only
 *
 * Still zones: .app.live (the live class room) and [data-still] set every movement token to nothing: no press, no tick,
 * no rise, no loops (the live dot is still). Opacity fades for messages remain.
 * JS (kit.js, Mock.motion): reduced() is checked in JS too (no smooth scroll); after a re-render focus goes back to the same
 * control; system-made changes are announced in #k-live. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entering, leaving, presses, turns */
  --ease-move:cubic-bezier(.77,0,.175,1);    /* something moving on screen (photo zoom, turn) */
  --ease-colour:ease;                        /* hover and colour changes */
  --ease-breath:ease-in-out;                 /* breaths and loops */
  --ease-steady:linear;                      /* the clock between rare breaths */
  --t-quick:120ms;      /* checkbox and radio fill */
  --t-out:120ms;        /* toast leaving */
  --t-press:140ms;      /* press */
  --t-colour:160ms;     /* hover, colour, wash */
  --t-check:160ms;      /* tick and radio dot settling */
  --t-switch:160ms;     /* switch thumb */
  --t-pop:180ms;        /* small menu opening */
  --t-turn:200ms;       /* chevron turn and nudge */
  --t-arrive:200ms;     /* something new arriving */
  --t-move:200ms;       /* photo zoom and turn */
  --t-sheet:240ms;      /* side drawer */
  --t-shimmer:1.4s;     /* skeleton shimmer, one sweep */
  --t-progress:1.3s;    /* upload bar */
  --t-talk:1.1s;        /* mic bars, one cycle */
  --talk-step:.15s;     /* mic bars, gap between bars */
  --t-toast:2.8s;       /* a toast stays this long (not while hovered or focused) */
  --t-toast-long:6s;    /* a toast that carries an Undo */
  --t-breath:2.4s;      /* one breath of the live dot */
  --breaths:3;          /* breaths when the dot appears */
  --t-breath-gap:180s;  /* then one breath this often */
  --stagger:40ms;       /* gap between staggered items */
  --rise:6px;           /* how far something arriving rises */
  --nudge:2px;          /* chevron nudge on hover */
  --press:.97;          /* press scale */
  --press-sm:.94;       /* press scale for small square controls */
  --pop-scale:.96;      /* menu starts at */
  --check-from:.5;      /* tick starts at */
  --dot-from:.4;        /* radio dot starts at */
  --breath-scale:2.4;   /* breath ring grows to */
  --loops:running;      /* animation-play-state for every loop */
}
/* still zones: the live class room, and anything marked data-still */
.app.live,[data-still]{--rise:0px;--nudge:0px;--press:1;--press-sm:1;--pop-scale:1;--check-from:1;--dot-from:1;--t-check:0ms;--t-quick:0ms;--t-switch:0ms;--t-turn:0ms;--stagger:0ms;--loops:paused}
/* the toast sits outside the room: while a live class or a still zone is on screen it only fades */
body:has(.app.live,[data-still]) .toast{--rise:0px}
/* arrive: kit.js adds it to the one region a re-render changed, then takes it off */
.arrive{animation:k-arrive var(--t-arrive) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * var(--stagger))}
.arrive-fade{animation:k-fade var(--t-arrive) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * var(--stagger))}
@keyframes k-arrive{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes k-fade{from{opacity:0}}
/* fold: a <details> body arrives as it opens; closing is instant */
details[open]>:not(summary){animation:k-arrive var(--t-arrive) var(--ease-out)}
/* pop: a small menu from its button (set transform-origin at the button) */
@keyframes k-pop{from{opacity:0;transform:scale(var(--pop-scale))}}
/* sheet: a side drawer */
@keyframes k-sheet{from{opacity:0;transform:translateX(var(--rise))}}
/* live dot: a ring breathes out of it, --breaths times, then once every --t-breath-gap */
.live:not(.app){background:var(--gold);position:relative}
.live:not(.app)::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--gold);opacity:0;pointer-events:none;
  animation:k-breath var(--t-breath) var(--ease-breath) var(--breaths),k-breath-rare var(--t-breath-gap) var(--ease-steady) calc(var(--t-breath) * var(--breaths)) infinite;animation-play-state:var(--loops)}
@keyframes k-breath{0%{opacity:.5;transform:scale(1)}50%,100%{opacity:0;transform:scale(var(--breath-scale))}}
/* one breath in the last --t-breath of each gap (2.4s of 180s = the last 1.33%) */
@keyframes k-breath-rare{0%,98.67%{opacity:0;transform:scale(1)}98.68%{opacity:.5;transform:scale(1);animation-timing-function:var(--ease-breath)}99.33%,100%{opacity:0;transform:scale(var(--breath-scale))}}
.app.live .live:not(.app)::after,[data-still] .live:not(.app)::after{animation:none}
/* shimmer, progress, talk: the loops and bars pages use */
@keyframes k-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes k-progress{from{transform:scaleX(.3)}to{transform:scaleX(1)}}
@keyframes k-talk{0%,100%{transform:scaleY(.2)}40%{transform:scaleY(.9)}70%{transform:scaleY(.45)}}
/* reduced motion: the one block. Things fade; nothing travels, scales, turns or loops. */
@media (prefers-reduced-motion:reduce){
  :root{--rise:0px;--nudge:0px;--press:1;--press-sm:1;--pop-scale:1;--check-from:1;--dot-from:1;--t-turn:0ms;--t-switch:0ms;--t-move:0ms;--t-progress:0ms;--stagger:0ms;--loops:paused}
  .live:not(.app)::after{animation:none}
}
/* ===== end of MOTION ===== */