/* 00-tokens.css */
/* ===================================================================== the whiteboard world: tokens
   A hi-tech meeting-room whiteboard (surface brief: .impeccable/surfaces/src-js-pages-room-js.md).
   Ground: board white with a faint sheen. Frame: brushed aluminium rail and marker tray. Ink: near-black.
   Markers: blue for structure, links and the one primary action; green for done and correct; red only for errors.
   Sticky notes for key points, round magnets for progress, masking tape for labels. */
:root{
  color-scheme:light;
  /* board */
  --board:#FAFBF9; --board-2:#F3F5F4; --board-3:#ECEFEE; --sheet:#FFFFFF;
  --sheen:rgba(219,230,239,.42);
  --rule:#DADEE1; --rule-2:#C5CAD0; --rule-3:#A9AFB6;
  /* ink and markers */
  --ink:#1B1D21; --ink-2:#3A3F46; --ink-3:#565C64;
  --blue:#1F4FBF; --on-blue:#FFFFFF; --blue-2:#2B5DD1; --blue-ink:#173E99; --blue-cap:#122F75; --blue-wash:rgba(31,79,191,.08); --blue-wash-2:rgba(31,79,191,.14);
  --green:#1E8E4D; --green-2:#3DB872; --green-ink:#156B39; --green-wash:rgba(30,142,77,.09);
  --red:#D23B2E; --red-ink:#A92A20; --red-wash:rgba(210,59,46,.08); --on-red:#FFFFFF;
  /* paper and tape: one material in both themes (light paper; the dark room only dims it) */
  --note:#FFF1A8; --note-edge:rgba(120,100,0,.05); --note-ink:#1B1D21;
  --note-green:#DDF3E4; --note-pink:#FFE0DA; --note-blue:#DCE7FB;
  --tape:#EEE7D3; --tape-ink:#3B3526;
  /* what is written on paper: the light ink set, applied inside every note, alert and tape label (03-components, "paper") */
  --paper-ink-2:#3A3F46; --paper-ink-3:#565C64;
  --paper-blue:#1F4FBF; --paper-blue-2:#2B5DD1; --paper-blue-ink:#173E99; --paper-blue-cap:#122F75; --paper-on-marker:#FFFFFF;
  --paper-green:#1E8E4D; --paper-green-ink:#156B39; --paper-red:#D23B2E; --paper-red-ink:#A92A20; --paper-warn:#9A5B00;
  --paper-rule:rgba(27,29,33,.13); --paper-rule-2:rgba(27,29,33,.22); --paper-rule-3:rgba(27,29,33,.38);
  --paper-field:#FFFFFF; --paper-plastic-hi:#FFFFFF; --paper-plastic-lo:#ECEEF0; --paper-plastic-edge:#8E949B;
  /* the row that is you in a table: a highlighter stroke */
  --mark-wash:rgba(255,241,168,.55);
  /* magnets: the numeral or check always sits on the darker body (white on the light board's magnets: 5.8:1 and up) */
  --mag-done-hi:#2A9A5A; --mag-done:#1E8E4D; --mag-done-lo:#156B39; --on-mag-done:#FFFFFF;
  --mag-cur-hi:#2B5DD1; --mag-cur:#1F4FBF; --mag-cur-lo:#122F75; --on-mag-cur:#FFFFFF;
  /* aluminium */
  --alu-hi:#E6E8EA; --alu:#D6D9DC; --alu-lo:#C9CDD2; --alu-edge:#A5AAB0; --tray-hi:#CFD2D6; --tray-lo:#B6BBC1; --tray-edge:#9FA4AA;
  --plastic-hi:#FFFFFF; --plastic-lo:#ECEEF0; --plastic-edge:#8E949B;
  /* the brushed grain and top shine of every rail (header, Bit's panel, the tutor's rails): use var(--alu-grain) as the first background layer */
  --alu-grain-hi:rgba(255,255,255,.16); --alu-shine:rgba(255,255,255,.7); --alu-hover:rgba(255,255,255,.4);
  --alu-grain:repeating-linear-gradient(180deg,var(--alu-grain-hi) 0 1px,rgba(0,0,0,.018) 1px 3px);
  /* small text engraved in the rail (4.5:1 or better on the lightest grain line) */
  --rail-ink-3:#4B5158;
  /* track accent (set per track by App.pstyle as --pc) */
  --pc:#1F4FBF; --pg:#1F4FBF;
  /* depth: paper lifts, notes curl, magnets sit proud */
  --lift:0 1px 1px rgba(20,24,30,.05),0 10px 24px -16px rgba(20,24,30,.24);
  --lift-2:0 2px 4px rgba(20,24,30,.06),0 22px 44px -22px rgba(20,24,30,.34);
  --note-shadow:0 9px 12px -7px rgba(60,50,10,.38),0 1px 2px rgba(60,50,10,.14);
  --magnet-shadow:0 2px 3px rgba(0,0,0,.28),inset 0 -2px 3px rgba(0,0,0,.22),inset 0 2px 2px rgba(255,255,255,.35);
  --key-shadow:0 1px 1px rgba(0,0,0,.12);
  /* shape */
  --r:9px; --r-sm:6px; --r-lg:12px; --r-paper:3px;
  /* type */
  --head:'Rubik','Noto Sans Hebrew',system-ui,sans-serif;
  --body:'Noto Sans Hebrew','Heebo',system-ui,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,Menlo,monospace;
  --hand:'Amatic SC','Rubik',sans-serif;
  /* rhythm (4-based) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;
  --rail-h:60px;
  /* legacy names still used by inline styles in page code */
  --bg:var(--board); --panel:var(--sheet); --panel2:var(--board-2); --panel3:var(--board-3); --line:var(--rule); --line2:var(--rule-2);
  --fg:var(--ink); --fg2:var(--ink-2); --muted:var(--ink-3); --link:var(--blue);
  --ok:var(--green); --ok-soft:var(--note-green); --bad:var(--red); --bad-soft:var(--note-pink); --warn:#9A5B00;
  --amber:#F2B134; --amber-ink:#8C5C00; --amber-soft:var(--note);
  --navy:#1B1D21; --navy2:#2A2E34; --navy-fg:#F4F5F2; --navy-muted:#C5CAD0;
  /* the lesson drawings are marker on board now */
  --s-bg:var(--board); --s-panel:var(--sheet); --s-line:var(--rule-2); --s-fg:var(--ink); --s-muted:var(--ink-3); --s-accent:var(--blue); --s-warn:#B86E00; --s-good:var(--green);
}
/* a glass board in a dim room */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --board:#14171B; --board-2:#1A1E23; --board-3:#21262C; --sheet:#1D2126; --sheen:rgba(120,140,170,.06);
    --rule:#2A3038; --rule-2:#38404A; --rule-3:#4A535E;
    --ink:#ECEAE4; --ink-2:#C9CCD1; --ink-3:#A0A7B0;
    --blue:#86A8FF; --on-blue:#0E1A33; --blue-2:#9BB8FF; --blue-ink:#B5C9FF; --blue-cap:#4D6FCC; --blue-wash:rgba(134,168,255,.10); --blue-wash-2:rgba(134,168,255,.18);
    --green:#5BD597; --green-2:#7BE3AE; --green-ink:#A4EEC6; --green-wash:rgba(91,213,151,.10);
    --red:#FF8A7E; --red-ink:#FFB0A7; --red-wash:rgba(255,138,126,.10); --on-red:#2A0D0A;
    --note:#E6D47C; --note-ink:#24200A; --note-green:#BFDCC7; --note-pink:#E9C4BB; --note-blue:#C1D0EB;
    --tape:rgba(236,224,190,.86); --tape-ink:#3B3526;
    --paper-ink-3:#4A5058; --paper-blue:#173E99; --paper-blue-2:#1F4FBF; --paper-blue-ink:#122F75; --paper-blue-cap:#0E2560;
    --paper-green:#156B39; --paper-green-ink:#0F5A2E; --paper-red:#A92A20; --paper-red-ink:#8E2118; --paper-warn:#7A4800;
    --paper-field:#F3F1EB; --paper-plastic-hi:#F3F1EB; --paper-plastic-lo:#E0DDD5; --paper-plastic-edge:#80868D;
    --mark-wash:rgba(134,168,255,.13);
    --mag-done-hi:#7BE3AE; --mag-done:#5BD597; --mag-done-lo:#3BAE76; --on-mag-done:#0B2A18;
    --mag-cur-hi:#A9C1FF; --mag-cur:#86A8FF; --mag-cur-lo:#5F84E0; --on-mag-cur:#0E1A33;
    --alu-hi:#3B4047; --alu:#30353B; --alu-lo:#292D33; --alu-edge:#1C1F23; --tray-hi:#2B3036; --tray-lo:#23272C; --tray-edge:#16191C;
    --plastic-hi:#2F343A; --plastic-lo:#262A30; --plastic-edge:#4A515A;
    --alu-grain-hi:rgba(255,255,255,.04); --alu-shine:rgba(255,255,255,.08); --alu-hover:rgba(255,255,255,.07);
    --rail-ink-3:#B9BFC6;
    --lift:0 1px 1px rgba(0,0,0,.3),0 12px 28px -16px rgba(0,0,0,.6); --lift-2:0 2px 4px rgba(0,0,0,.35),0 24px 48px -22px rgba(0,0,0,.7);
    --note-shadow:0 9px 14px -7px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
    --warn:#E0A54A; --amber-ink:#E9C46A; --navy:#0E1013; --navy2:#1A1D21;
    --s-warn:#E0A54A;
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --board:#14171B; --board-2:#1A1E23; --board-3:#21262C; --sheet:#1D2126; --sheen:rgba(120,140,170,.06);
  --rule:#2A3038; --rule-2:#38404A; --rule-3:#4A535E;
  --ink:#ECEAE4; --ink-2:#C9CCD1; --ink-3:#A0A7B0;
  --blue:#86A8FF; --on-blue:#0E1A33; --blue-2:#9BB8FF; --blue-ink:#B5C9FF; --blue-cap:#4D6FCC; --blue-wash:rgba(134,168,255,.10); --blue-wash-2:rgba(134,168,255,.18);
  --green:#5BD597; --green-2:#7BE3AE; --green-ink:#A4EEC6; --green-wash:rgba(91,213,151,.10);
  --red:#FF8A7E; --red-ink:#FFB0A7; --red-wash:rgba(255,138,126,.10); --on-red:#2A0D0A;
  --note:#E6D47C; --note-ink:#24200A; --note-green:#BFDCC7; --note-pink:#E9C4BB; --note-blue:#C1D0EB;
  --tape:rgba(236,224,190,.86); --tape-ink:#3B3526;
  --paper-ink-3:#4A5058; --paper-blue:#173E99; --paper-blue-2:#1F4FBF; --paper-blue-ink:#122F75; --paper-blue-cap:#0E2560;
  --paper-green:#156B39; --paper-green-ink:#0F5A2E; --paper-red:#A92A20; --paper-red-ink:#8E2118; --paper-warn:#7A4800;
  --paper-field:#F3F1EB; --paper-plastic-hi:#F3F1EB; --paper-plastic-lo:#E0DDD5; --paper-plastic-edge:#80868D;
  --mark-wash:rgba(134,168,255,.13);
  --mag-done-hi:#7BE3AE; --mag-done:#5BD597; --mag-done-lo:#3BAE76; --on-mag-done:#0B2A18;
  --mag-cur-hi:#A9C1FF; --mag-cur:#86A8FF; --mag-cur-lo:#5F84E0; --on-mag-cur:#0E1A33;
  --alu-hi:#3B4047; --alu:#30353B; --alu-lo:#292D33; --alu-edge:#1C1F23; --tray-hi:#2B3036; --tray-lo:#23272C; --tray-edge:#16191C;
  --plastic-hi:#2F343A; --plastic-lo:#262A30; --plastic-edge:#4A515A;
  --alu-grain-hi:rgba(255,255,255,.04); --alu-shine:rgba(255,255,255,.08); --alu-hover:rgba(255,255,255,.07);
  --rail-ink-3:#B9BFC6;
  --lift:0 1px 1px rgba(0,0,0,.3),0 12px 28px -16px rgba(0,0,0,.6); --lift-2:0 2px 4px rgba(0,0,0,.35),0 24px 48px -22px rgba(0,0,0,.7);
  --note-shadow:0 9px 14px -7px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
  --warn:#E0A54A; --amber-ink:#E9C46A; --navy:#0E1013; --navy2:#1A1D21;
  --s-warn:#E0A54A;
}

/* 01-base.css */
/* ===================================================================== base: the board, type, browser surfaces */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:400 17px/1.68 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--board);caret-color:var(--blue);accent-color:var(--blue)}
@media (hover:hover) and (min-width:761px){
  body{background:linear-gradient(112deg,transparent 18%,var(--sheen) 40%,transparent 58%) fixed,var(--board)}
}
#app{min-height:100vh;display:flex;flex-direction:column}
main.wrap{flex:1 0 auto}
::selection{background:var(--blue-wash-2);color:var(--ink)}
a{color:var(--blue);text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0;line-height:1.25;text-wrap:balance}
h1{font-size:30px;font-weight:700;letter-spacing:-.2px}
h2{font-size:22px;font-weight:700}
h3{font-size:18px;font-weight:600}
h4{font-size:16px;font-weight:600}
p{margin:0}
small,.small{font-size:14px;line-height:1.5}
.muted{color:var(--ink-3)}
.mono,code,kbd,samp,pre{font-family:var(--mono)}
.mono,.num{font-variant-numeric:tabular-nums}
code{font-size:.88em;background:color-mix(in srgb,var(--ink) 5.5%,transparent);padding:1px 5px;border-radius:4px;unicode-bidi:isolate}
bdi{unicode-bidi:isolate}
img,svg{max-width:100%}
.ic{width:18px;height:18px;flex:none;vertical-align:-3px}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}
main.wrap{padding-block:var(--s7) var(--s10)}
.empty{color:var(--ink-3);text-align:center;padding:var(--s8) var(--s4);font-size:16px}
.prose{max-width:72ch}
.prose h2{margin:var(--s7) 0 var(--s3)} .prose h3{margin:var(--s6) 0 var(--s2)} .prose p,.prose li{margin-bottom:var(--s3)}
details summary{cursor:pointer;font-family:var(--head);font-weight:500}
details summary::marker{color:var(--ink-3)}
/* scrollbars and form chrome take the board's colors */
*{scrollbar-width:thin;scrollbar-color:var(--rule-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:8px;border:2px solid var(--board)}
::-webkit-scrollbar-thumb:hover{background:var(--rule-3)}
::placeholder{color:var(--ink-3);opacity:1}
/* motion: one material, settle fast, nothing that hides content by default */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* 02-shell.css */
/* ===================================================================== shell: the aluminium rail, nav, tray, footer, toast */
.top{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);
  background:var(--alu-grain),linear-gradient(180deg,var(--alu-hi),var(--alu) 55%,var(--alu-lo));
  border-bottom:1px solid var(--alu-edge);box-shadow:inset 0 1px 0 var(--alu-shine),0 2px 5px rgba(20,24,30,.08)}
.top .wrap{height:var(--rail-h);display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
.brand b{display:block;font:700 18px/1.15 var(--head);color:var(--ink)}
.brand small{display:block;font:500 12px/1.3 var(--head);color:var(--ink-3)}
.top .brand small{color:var(--rail-ink-3)}
#logo,#logo2{display:inline-flex} #logo svg,#logo2 svg{width:32px;height:32px}
body[data-area=studio] .top .brand small,body[data-area=admin] .top .brand small{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:1px 8px;border-radius:2px;background:var(--tape);color:var(--tape-ink);font-size:12px}
body[data-area=studio] .top .brand small::before,body[data-area=admin] .top .brand small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--paper-green)}
body[data-area=admin] .top .brand small::before{background:var(--tape-ink)}
/* the nav: labels engraved in the rail, the current one underlined in marker */
.nav{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0;height:100%}
.nav a{position:relative;display:flex;align-items:center;gap:7px;padding:0 11px;color:var(--ink-2);font:500 15px var(--head);text-decoration:none;white-space:nowrap}
.nav a .ic{width:18px;height:18px;opacity:.8}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.on{color:var(--ink)}
.nav a.on .ic{opacity:1}
.nav a.on::after{content:"";position:absolute;inset-inline:9px;bottom:9px;height:3px;border-radius:3px;background:var(--blue)}
/* the tray: tools sit in the rail like markers in the tray */
.tools{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex:none}
.tchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:7px;color:var(--ink-2);font:500 14px var(--head);text-decoration:none;border:1px solid transparent;transition:background-color .15s,border-color .15s}
.tchip:hover{background:var(--alu-hover);border-color:var(--alu-edge);color:var(--ink);text-decoration:none}
.tchip.ibtn{width:36px;padding:0;justify-content:center}
.tchip.area{position:relative;padding-inline-end:24px;background:linear-gradient(180deg,var(--plastic-hi),var(--plastic-lo));border-color:var(--plastic-edge);box-shadow:0 1px 2px rgba(0,0,0,.14);color:var(--ink)}
.tchip.area::after{content:"";position:absolute;inset-block:-1px;inset-inline-end:-1px;width:12px;border-start-end-radius:7px;border-end-end-radius:7px;background:var(--cap,var(--ink))}
.tchip.to-studio{--cap:var(--green)} .tchip.to-admin{--cap:var(--ink)} .tchip.to-academy{--cap:var(--blue)}
.tchip.bell{position:relative;width:36px;padding:0;justify-content:center}
.tchip.bell .badge{position:absolute;top:2px;inset-inline-end:1px;display:block;min-width:18px;height:18px;padding:0 4px;margin:0;border:0;border-radius:9px;background:var(--red);color:var(--on-red);font:600 11px/18px var(--head);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--alu-hi)}
.tsep{width:1px;height:24px;background:var(--alu-edge);margin:0 4px}
.meav{display:inline-flex;border-radius:50%;box-shadow:0 0 0 2px var(--alu-hi),0 0 0 3px var(--alu-edge);text-decoration:none}
/* announcement: a note stuck under the rail */
#announce .announce{display:flex;gap:10px;align-items:center;margin-top:var(--s4);padding:10px 16px;background:var(--note);color:var(--note-ink);border-radius:2px;box-shadow:var(--note-shadow);font-size:15px}
/* footer: the bottom edge of the board */
.foot{margin-top:auto;border-top:1px solid var(--rule);background:var(--board-2)}
.foot .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s7);padding-block:var(--s7);align-items:start}
.foot p{color:var(--ink-3);font-size:14px;line-height:1.65;max-width:68ch}
.foot-links{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--s5)}
.foot-links a{color:var(--ink-2);font:500 14px var(--head)}
/* toast: a note that slides onto the board */
#toast{position:fixed;inset-inline:0;bottom:24px;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);z-index:90;padding:12px 18px;border-radius:2px;background:var(--note);color:var(--note-ink);box-shadow:var(--note-shadow);font:500 15px/1.5 var(--body);opacity:0;pointer-events:none;transform:translateY(14px) rotate(-.6deg);transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
#toast.on{opacity:1;transform:translateY(0) rotate(-.6deg)}
/* guests see the board without the student tools */
body.guest .nav,body.guest .tools,body.guest #bithost{display:none}
/* tablet rail */
@media (min-width:761px) and (max-width:1100px){
  .nav a{padding:0 12px}
  .nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav a.on::after{inset-inline:8px}
}
@media (max-width:860px){
  .foot .wrap{grid-template-columns:1fr} .foot-links{grid-column:1}
}
@media (max-width:760px){
  .wrap{padding-inline:16px}
  .top .wrap{gap:10px}
  .brand small{display:none!important}
  .hide-s{display:none!important}
  .nav{position:fixed;inset-inline:0;bottom:0;z-index:45;height:calc(62px + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);justify-content:space-around;
    background:linear-gradient(180deg,var(--alu-hi),var(--alu-lo));border-top:1px solid var(--alu-edge);box-shadow:0 -2px 6px rgba(20,24,30,.08)}
  .nav a{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;padding:0 2px;font-size:11.5px}
  .nav a span{max-width:100%;overflow:hidden;white-space:normal;text-align:center;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* eight places (the admin console): each takes the width its label needs, so no label is cut */
  .nav:has(> a:nth-child(8)){padding-inline:2px}
  .nav:has(> a:nth-child(8)) a{flex:1 1 auto;min-width:40px;padding:0 1px;font-size:10.5px}
  .nav a.on::after{top:0;bottom:auto;inset-inline:24%}
  main.wrap{padding-block:var(--s5) 112px}
  .foot{padding-bottom:64px}
  #toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media print{ .top,.foot,#announce,#toast,#bithost,#tutorhost,.noprint{display:none!important} body{background:#fff} }

/* 03-components.css */
/* ===================================================================== components: the board's vocabulary
   markers (buttons), fields, sheets pinned to the board, tape labels, sticky notes, magnets, marker lines.
   Hierarchy comes from weight and space; boxes are the exception. */

/* ---------- markers: a white plastic body with a colored cap at the inline end ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 28px 0 16px;padding-inline:16px 28px;
  border:1px solid var(--plastic-edge);border-radius:7px;background:linear-gradient(180deg,var(--plastic-hi),var(--plastic-lo));color:var(--ink);
  font:500 15px/1 var(--head);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:background-color .15s,box-shadow .15s,transform .08s}
.btn::after{content:"";position:absolute;inset-block:-1px;inset-inline-end:-1px;width:14px;border-start-end-radius:7px;border-end-end-radius:7px;background:var(--cap,var(--ink));box-shadow:inset 1px 0 0 rgba(255,255,255,.3)}
.btn:hover{background:var(--plastic-hi);text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.16)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(0,0,0,.12)}
.btn .ic{width:18px;height:18px}
.btn.pri{background:var(--blue) linear-gradient(180deg,var(--blue-2),var(--blue));border-color:var(--blue-ink);--cap:var(--blue-cap);color:var(--on-blue)}
.btn.pri:hover{background:var(--blue-2)}
.btn.ok{--cap:var(--green)} .btn.pc{--cap:var(--pc)} .btn.dark{--cap:var(--ink)}
.btn.danger{--cap:var(--red);color:var(--red-ink)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;padding-inline:10px;color:var(--blue)}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--blue-wash);text-decoration:none}
.btn.sm{height:32px;padding-inline:12px 22px;font-size:14px;border-radius:6px}
.btn.sm::before{content:"";position:absolute;inset:-4px 0}
.btn.sm::after{width:10px;border-start-end-radius:6px;border-end-end-radius:6px}
.btn.lg{height:48px;padding-inline:22px 34px;font-size:16px}
.btn.lg::after{width:16px}
.btn[disabled],.btn[aria-disabled=true]{cursor:not-allowed;color:var(--ink-3);background:var(--board-2);box-shadow:none;--cap:var(--rule-3);transform:none}
.btn.pri[disabled]{color:color-mix(in srgb,var(--on-blue) 75%,transparent);background:color-mix(in srgb,var(--blue) 55%,var(--board))}
.lnk{display:inline-flex;align-items:center;gap:5px;padding:4px 2px;border:0;background:none;color:var(--blue);font:500 15px var(--head);cursor:pointer;text-decoration:none}
.lnk:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- fields ---------- */
input,textarea,select{font:400 16px/1.5 var(--body);color:var(--ink);background:var(--sheet);border:1px solid var(--rule-3);border-radius:8px;padding:9px 12px;min-height:42px;max-width:100%;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical}
input:hover,textarea:hover,select:hover{border-color:var(--ink-3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash-2)}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;padding:0;accent-color:var(--blue)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.chk{display:inline-flex;align-items:flex-start;gap:9px;font-size:15px;line-height:1.5;cursor:pointer}
.chk input{margin-top:3px}
.qin{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.qin input{flex:1 1 220px}
.form{display:flex;flex-direction:column;gap:var(--s4)}
.form label{display:flex;flex-direction:column;gap:6px;font:500 15px var(--head);color:var(--ink-2)}
.form label.chk{flex-direction:row;align-items:flex-start;font:400 15px/1.5 var(--body);color:var(--ink)}
.form label small{font:400 13.5px var(--body);color:var(--ink-3)}
.pw{position:relative;display:flex} .pw input{flex:1;padding-inline-end:44px}
.pwt{position:absolute;inset-block:0;inset-inline-end:4px;margin:auto;width:40px;height:40px;border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:6px}
.pwt:hover{color:var(--ink);background:var(--board-2)}

/* ---------- sheets: paper pinned to the board (the only box, used sparingly) ---------- */
.card{background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift);padding:var(--s6)}
.card.flat{background:transparent;box-shadow:none;padding:0}
.card.tight{padding:var(--s4)}
.card + .card{margin-top:var(--s5)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.card-h h2,.card-h h3{font-size:18px;font-weight:600}
.card-h .more{font:500 14px var(--head);color:var(--blue)}
.stack{display:flex;flex-direction:column;gap:var(--s5)}
.narrow{max-width:560px;margin-inline:auto}

/* ---------- page scaffolding ---------- */
.page-h{margin:var(--s2) 0 var(--s7)}
.page-h h1{font-size:30px}
.page-h p.sub,.page-h .sub{margin-top:var(--s2);color:var(--ink-3);font-size:16.5px;max-width:70ch}
.eyebrow{display:block;font:500 14px var(--head);color:var(--ink-3);margin-bottom:var(--s1)}
.sec{margin-top:var(--s9)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8);align-items:start}
.grid2>*{min-width:0}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s6)}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:var(--s4);font:500 14px var(--head);color:var(--ink-2)}
.crumbs a{color:var(--blue);display:inline-block;padding-block:11px;margin-block:-11px}
.crumbs .ic{width:14px;height:14px;color:var(--ink-3)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
@media (max-width:1080px){ .grid2{grid-template-columns:1fr;gap:var(--s7)} }

/* ---------- tabs: the current one underlined in marker ---------- */
.ultabs{display:flex;gap:var(--s5);flex-wrap:wrap;border-bottom:1px solid var(--rule);margin-bottom:var(--s5)}
.ultab{position:relative;padding:10px 2px;border:0;background:none;color:var(--ink-2);font:500 15px var(--head);cursor:pointer;text-decoration:none}
.ultab:hover{color:var(--ink);text-decoration:none}
.ultab.on{color:var(--ink);font-weight:600}
.ultab.on::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:3px;border-radius:3px;background:var(--blue)}
.card-h .ultabs{border:0;margin:0;gap:var(--s4)}
/* phones: tabs stay one row that scrolls sideways (App.scrollCurrent brings the current tab into view); .hscroll gives any row of links the same behaviour */
@media (max-width:760px){
  .ultabs,.hscroll{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ultabs::-webkit-scrollbar,.hscroll::-webkit-scrollbar{display:none}
  .ultabs > *,.hscroll > *{flex:none;white-space:nowrap}
  .ultabs .ultab.on::after{bottom:0}
  .ultabs .ultab:focus-visible,.hscroll a:focus-visible{outline-offset:-2px}
}

/* ---------- tape labels ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:2px;background:var(--tape);color:var(--tape-ink);font:500 13px/1.6 var(--head);white-space:nowrap}
.tag.code{font-family:var(--mono);font-size:12.5px}
.tag::before{content:none}
.tag.ok::before,.tag.bad::before,.tag.warn::before,.tag.pc::before,.tag.d-easy::before,.tag.d-mid::before,.tag.d-hard::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,var(--ink-3))}
.tag.ok{--dot:var(--green)} .tag.bad{--dot:var(--red)} .tag.warn{--dot:var(--warn)} .tag.pc{--dot:var(--pc)}
.tag.d-easy{--dot:var(--green)} .tag.d-mid{--dot:var(--blue)} .tag.d-hard{--dot:var(--ink)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- sticky notes and alerts ---------- */
.note{position:relative;padding:14px 14px 12px;background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note);color:var(--note-ink);border-radius:1px;box-shadow:var(--note-shadow);transform:rotate(var(--tilt,0deg));font:500 15px/1.5 var(--body)}
.note code{background:rgba(0,0,0,.06)}
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:2px;background:var(--note-blue);color:var(--note-ink);box-shadow:var(--note-shadow);font-size:15.5px;line-height:1.55}
.alert .ic{flex:none;margin-top:2px;color:var(--blue)}
.alert.ok{background:var(--note-green)} .alert.ok .ic{color:var(--green)}
.alert.bad{background:var(--note-pink)} .alert.bad .ic{color:var(--red)}
.alert.warn{background:var(--note);color:var(--note-ink)} .alert.warn .ic{color:var(--note-ink)}

/* ---------- paper: notes, alerts and tape are light paper in both themes (the dark room only dims them), so whatever is
   written on them takes the paper ink set from the tokens. The area pieces drawn on note paper or tape are listed here once,
   so their own color:var(--ink), links, icons, tags and buttons stay legible without per-area dark rules. ---------- */
:where(.note,.alert,.tag,#toast,#announce .announce,
  .chips li,.tipbox,.hint,.celebrate,.zoomcard,.tnote,.snote,.status,.fc-back,.qf,.sr-item mark,.scode-h,.seqi,.arange,.codebox,.pbadge,
  .seclist .chk-bad,.bit-bubble,.bm.user,.bp-ctx,.chipb,.tu-turn.me p,.tu-turn.f p,.tu-note,.ts-note){
  color-scheme:light;
  --ink:var(--note-ink); --ink-2:var(--paper-ink-2); --ink-3:var(--paper-ink-3);
  --blue:var(--paper-blue); --blue-2:var(--paper-blue-2); --blue-ink:var(--paper-blue-ink); --blue-cap:var(--paper-blue-cap); --on-blue:var(--paper-on-marker);
  --blue-wash:color-mix(in srgb,var(--paper-blue) 9%,transparent); --blue-wash-2:color-mix(in srgb,var(--paper-blue) 15%,transparent);
  --green:var(--paper-green); --green-2:var(--paper-green); --green-ink:var(--paper-green-ink); --green-wash:color-mix(in srgb,var(--paper-green) 10%,transparent);
  --red:var(--paper-red); --red-ink:var(--paper-red-ink); --red-wash:color-mix(in srgb,var(--paper-red) 9%,transparent); --on-red:var(--paper-on-marker);
  --warn:var(--paper-warn); --amber-ink:var(--paper-warn);
  --rule:var(--paper-rule); --rule-2:var(--paper-rule-2); --rule-3:var(--paper-rule-3);
  --sheet:var(--paper-field); --board-2:color-mix(in srgb,var(--note-ink) 5%,transparent); --board-3:color-mix(in srgb,var(--note-ink) 9%,transparent);
  --plastic-hi:var(--paper-plastic-hi); --plastic-lo:var(--paper-plastic-lo); --plastic-edge:var(--paper-plastic-edge);
  --mag-done-hi:var(--paper-green); --mag-done:var(--paper-green); --mag-done-lo:var(--paper-green-ink); --on-mag-done:var(--paper-on-marker);
  --mag-cur-hi:var(--paper-blue-2); --mag-cur:var(--paper-blue); --mag-cur-lo:var(--paper-blue-cap); --on-mag-cur:var(--paper-on-marker);
  --fg:var(--ink); --fg2:var(--ink-2); --muted:var(--ink-3); --link:var(--blue); --ok:var(--green); --bad:var(--red);
  --line:var(--rule); --line2:var(--rule-2); --panel:var(--sheet); --panel2:var(--board-2);
}

/* ---------- marker line progress ---------- */
.pbar{position:relative;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--rule-2) 0 6px,transparent 6px 10px);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:4px;background:var(--blue);transition:width .6s cubic-bezier(.16,1,.3,1)}
.pbar.ok i{background:var(--green)} .pbar.pc i{background:var(--pc)}
.prow{display:flex;align-items:center;gap:var(--s3);font-size:14px;color:var(--ink-3)}
.prow .pbar{flex:1}

/* ---------- magnets: progress you can see across the room ---------- */
.mag{flex:none;position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--mono);color:var(--ink-2);background:transparent;border:2px solid var(--rule-3);box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mag.done{border:0;color:var(--on-mag-done);background:radial-gradient(circle at 38% 32%,var(--mag-done-hi),var(--mag-done) 58%,var(--mag-done-lo));box-shadow:var(--magnet-shadow)}
.mag.cur{border:0;color:var(--on-mag-cur);font-weight:600;background:radial-gradient(circle at 38% 32%,var(--mag-cur-hi),var(--mag-cur) 58%,var(--mag-cur-lo));box-shadow:var(--magnet-shadow)}
.mag.done .ic,.mag.cur .ic{width:14px;height:14px;stroke-width:2.6}
.mag.sm{width:20px;height:20px;font-size:10px}

/* ---------- the hand: Bit's marker annotations, never running text ---------- */
.hand{font:700 26px/1 var(--hand);color:var(--ink);letter-spacing:.2px}
.ghost:not(.btn){opacity:.14;filter:blur(.2px);pointer-events:none;user-select:none}

/* ---------- facts, key-value, stats ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s4);font-size:15px}
.kv dd{margin:0}
.kv dt,.kv b{color:var(--ink-3);font-weight:500}
.facts{display:flex;flex-direction:column;gap:var(--s3);margin:0;padding:0;list-style:none}
.facts li{display:flex;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--rule);font-size:15px}
.facts li:last-child{border:0;padding:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s5)}
.stats > div b,.stats .big{display:block;font:700 28px/1.1 var(--head);font-variant-numeric:tabular-nums;color:var(--ink)}
.stats > div span,.stats small{color:var(--ink-3);font-size:14px}

/* ---------- tables: written on the board, ruled lightly ---------- */
.tablewrap{overflow-x:auto;position:relative}
.roster{width:100%;border-collapse:collapse;font-size:15px}
.roster th{text-align:start;font:600 14px var(--head);color:var(--ink-2);padding:10px 12px;border-bottom:1px solid var(--rule)}
.roster thead th{border-bottom:2px solid var(--ink)}
.roster td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}
.roster tr:hover td,.roster tbody tr:hover th{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.roster tr.me td,.roster tr.me th{background:var(--mark-wash)}
.roster td.num,.roster th.num{text-align:end;font-variant-numeric:tabular-nums}

/* ---------- spinner ---------- */
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--rule-2);border-top-color:var(--blue);border-radius:50%;animation:wb-spin .8s linear infinite;vertical-align:-3px}
@keyframes wb-spin{to{transform:rotate(360deg)}}

/* 10-home.css */
/* ===================================================================== home: dashboard, track catalog, one track's syllabus, search
   Owner of the shared patterns other areas reuse:
   - the page banner .flash (.fart .fstats .fmeta .acts .x .slim .medals): a title written on the board with the drawing beside it
   - lesson rows .lrows/.lrow (App.roomRow), .cont/.cbody, .cgrid, .pgrid with App.pathCard (.pcard), App.postCard (.post)
   - the goal rows .mission/.mrow/.mh
   Everything else here is scoped to this area's own containers (.hm-*). */

/* ---------- the page banner: written straight on the board, the track drawing beside it ---------- */
.flash{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s6) var(--s9);margin:var(--s1) 0 0}
.flash > div:not(.fart){min-width:0}
.flash h1{font-size:34px;line-height:1.2;letter-spacing:-.3px}
.flash h1:focus{outline:none}
.flash p{margin-top:var(--s3);max-width:64ch;color:var(--ink-2);text-wrap:pretty}
.flash p.fmeta,.flash .fmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3);color:var(--ink-3);font:500 15px/1.5 var(--head)}
.flash .fart{display:flex;align-items:center;justify-content:center;min-width:0}
.flash .fart .art{display:block;width:min(400px,32vw);height:auto}
.flash .x{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;z-index:1;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);cursor:pointer}
.flash .x:hover{background:var(--board-3);color:var(--ink)}
.flash.slim{gap:var(--s4) var(--s8)}
.flash.slim h1{font-size:28px}
.flash.slim .fart .art{width:min(300px,26vw)}
.flash.slim .fart .medal{width:112px;height:auto}
/* numbers written large with a hairline between them */
.fstats{display:flex;flex-wrap:wrap;gap:var(--s4) 0;margin-top:var(--s6)}
.fstats > div{display:flex;flex-direction:column;gap:2px;padding-inline:var(--s6);border-inline-start:1px solid var(--rule-2)}
.fstats > div:first-child{padding-inline-start:0;border-inline-start:0}
.fstats b{font:700 26px/1.15 var(--head);font-variant-numeric:tabular-nums;color:var(--ink)}
.fstats span{font:500 14px/1.4 var(--head);color:var(--ink-3)}
.medals{display:flex;align-items:flex-end;justify-content:center;gap:var(--s1)}
.medals .medal{flex:0 1 auto;height:auto}
.medals.sm .medal{width:46px}
/* a group of actions; in the banner (and .hm-tray) it sits in a shallow marker tray */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.flash .acts{margin-top:var(--s6)}
.flash .acts,.hm-tray{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:6px;border-radius:10px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);
  box-shadow:inset 0 2px 3px color-mix(in srgb,var(--tray-edge) 55%,transparent),0 1px 0 color-mix(in srgb,var(--alu-hi) 80%,transparent)}

/* ---------- media + text + action rows ---------- */
.cont{display:flex;align-items:center;gap:var(--s4)}
.cont .cbody{flex:1;min-width:0}
.cont .cbody h3{font-size:18px}
.cont .cbody p,.cont .cbody small{display:block;margin-top:var(--s1);color:var(--ink-3);font-size:15px;line-height:1.55}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--s6)}
.cgrid > .card + .card{margin-top:0}

/* ---------- lesson rows: the lesson icon is a magnet with its progress ring ---------- */
.lrows{display:flex;flex-direction:column}
.lrow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);min-height:68px;padding:var(--s3);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;transition:background-color .15s}
.lrow + .lrow{border-top:1px solid var(--rule)}
a.lrow:hover{background:var(--blue-wash);text-decoration:none}
a.lrow:hover b{color:var(--blue-ink)}
.lrow .lt{min-width:0}
.lrow b{display:block;font:600 16.5px/1.4 var(--head);color:var(--ink)}
.lrow .ld{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;color:var(--ink-3);font-size:14.5px;line-height:1.5}
.lrow .lmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.lrow .lmeta .tags{justify-content:flex-end;flex-wrap:nowrap}
.lrow .lmeta .tag .ic{width:12px;height:12px}
.lrow .ricon,.hm-now .ricon{--art-ground:var(--sheet);position:relative;z-index:1;display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--sheet);box-shadow:var(--magnet-shadow)}
.lrow .ricon svg,.hm-now .ricon svg{width:100%;height:100%;overflow:visible;direction:ltr}
.lrow.soon{color:var(--ink-3)}
.lrow.soon b{color:var(--ink-2);font-weight:500}
.lrow.soon .ricon{box-shadow:none;background:transparent}
/* the lesson the learner is on: a paper strip pinned to the board */
.lrow.cur{background:var(--sheet);box-shadow:var(--lift);border-radius:var(--r-paper);border-top-color:transparent}
.lrow.cur + .lrow{border-top-color:transparent}
a.lrow.cur:hover{background:var(--sheet)}

/* ---------- goal rows (shared: weekly goal, certificates, profile) ---------- */
.mission{display:flex;flex-direction:column;gap:var(--s5)}
.mrow .mh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);font:600 15px/1.4 var(--head);color:var(--ink)}
.mrow .mh span{flex:none;font:500 13.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mrow .prow{margin-top:var(--s2)}
.mrow .prow .ic{color:var(--ink-3)}

/* ---------- tracks: each one written as a row with its drawing; .pgrid lays them out ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:0 var(--s7)}
.pcard{position:relative;display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s4) var(--s2);border-top:1px solid var(--rule);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;transition:background-color .15s}
.pcard:hover{background:var(--blue-wash);text-decoration:none}
.pcard:hover .pc-h{color:var(--blue-ink)}
.pc-art{position:relative;display:block;aspect-ratio:420/240;margin-top:3px}
.pc-art .art{display:block;width:100%;height:100%}
.pcard .stepn{position:absolute;inset-block-start:-6px;inset-inline-start:-6px;width:26px;height:26px;background:var(--sheet);border-color:var(--pc);color:var(--ink);font-weight:600}
.pc-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.pc-body .pc-h{font-size:17.5px;font-weight:600;line-height:1.3;transition:color .15s}
.pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3);color:var(--ink-3);font:500 13.5px/1.5 var(--head)}
.pc-meta .code{font:500 12.5px var(--mono);color:var(--ink-2);unicode-bidi:isolate}
.pc-meta .ic{width:13px;height:13px;vertical-align:-2px}
.pc-d{color:var(--ink-2);font-size:14.5px;line-height:1.5;text-wrap:pretty}
.pc-body .tags{margin-top:2px}
.pc-body .prow{width:100%;margin-top:var(--s1)}
.pc-body .prow b{font:500 13px var(--mono);color:var(--ink-2)}
/* the certificate type as a tape label */
.tag.ctype .ic{width:13px;height:13px;color:var(--ink-2)}

/* ---------- posts (App.postCard): a sheet pinned to the feed ---------- */
.post{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.post header{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:14px;color:var(--ink-3)}
.post h3{font-size:19px}
.post > p{max-width:68ch;color:var(--ink-2);text-wrap:pretty}
.post .acts{gap:var(--s2)}
.post .person,.fitem .person{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;color:var(--ink);font:600 14.5px var(--head);text-decoration:none;min-width:0}
.post .person:hover span,.fitem .person:hover span{text-decoration:underline;text-underline-offset:4px}
.post .person span,.fitem .person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .av,.fitem .av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover}
.post .av-i,.fitem .av-i{display:inline-grid;place-items:center;color:#fff;font:600 13px var(--head)}
.fitem .av{width:28px;height:28px}

/* ===================================================================== this area's own blocks */
.hm-meta{margin-top:var(--s1);color:var(--ink-3);font:500 15px/1.5 var(--head)}
.hm-bh{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s4)}
.hm-bh .hm-meta{margin:0}
.hm-bh .lnk .ic,.hm-more .lnk .ic{width:15px;height:15px}
.hm-more{margin-top:var(--s3);padding-inline:var(--s3)}
/* links that sit alone get a full touch target */
.hm-bh .lnk,.hm-more .lnk,.hm-blk .acts .lnk,.fitem .lnk{min-height:40px}
/* small markers keep their size but get a 40px hit area */
.hm-side .btn.sm::before,.post .btn.sm::before{content:"";position:absolute;inset:-4px 0}

/* ---------- dashboard ---------- */
.hm-hello .hm-bit{position:relative;flex-direction:column;align-items:center;gap:var(--s2);padding-inline-end:var(--s7)}
.hm-hello .hm-bit .bit{width:76px;height:76px}
.hm-hello .hm-bit .hand{display:block;transform:rotate(-3deg);font-size:28px;white-space:nowrap}
.hm-dash{align-items:start}
.hm-main{display:flex;flex-direction:column;gap:var(--s9);min-width:0}
/* the lesson to continue: written large, the finished ones stay faintly erased beside it */
.hm-now{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.hm-now:has(.hm-trace){grid-template-columns:minmax(0,1fr) minmax(0,200px)}
.hm-now-in{grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-items:start}
.hm-now-in .ricon{margin-top:2px}
.hm-now-b{min-width:0}
.hm-now h2{font-size:28px;line-height:1.25;letter-spacing:-.2px}
.hm-now .hm-meta{margin-top:var(--s2)}
.hm-now .hm-sub{margin-top:var(--s3);max-width:62ch;color:var(--ink-2);font-size:16px;line-height:1.6;text-wrap:pretty}
.hm-prog{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.hm-trail{display:flex;flex-wrap:wrap;gap:6px}
.hm-trail .mag.sm .ic{width:12px;height:12px}
.hm-qs{color:var(--ink-3);font:500 14px var(--head);font-variant-numeric:tabular-nums}
.hm-now .hm-tray{margin-top:var(--s6)}
.hm-big{width:56px;height:56px}
.hm-now .mag.hm-big .ic{width:22px;height:22px}
.hm-trace{grid-column:2;grid-row:1;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding-top:var(--s2);pointer-events:none;user-select:none;overflow:hidden}
/* finished lessons stay as faint erased marker: only the shared .ghost treatment (opacity .14), no doubled or offset text */
.hm-trace span{display:block;max-width:100%;font:600 21px/1.25 var(--head);color:var(--ink);transform:rotate(-1.5deg)}
.hm-trace span:nth-child(2){font-size:18px;transform:rotate(-1deg)}
.hm-trace span:nth-child(3){font-size:16px;transform:rotate(-2deg)}
/* my learning */
.hm-learn .hm-bh{align-items:flex-end;margin-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.hm-learn .ultabs{border:0;margin:0;gap:var(--s5)}
.hm-learn .ultab,.hm-tiers .ultab{min-height:44px}
.pathhead{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s4) var(--s3) var(--s2)}
.pathhead h3{font-size:18px;margin-inline-end:var(--s1)}
.pathhead .pbar{flex:0 1 160px;min-width:90px}
.pathhead b{font:500 13.5px var(--mono);color:var(--ink-2)}
.hm-learn .lrows .empty{padding:var(--s7) var(--s3);text-align:start}
.hm-tracks .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:0 var(--s6)}
/* the side column: short blocks in the board's margin, separated by space and a hairline */
.hm-side{display:flex;flex-direction:column;gap:var(--s7);min-width:0}
.hm-blk h2,.hm-facts h2,.hm-zoom h2{font-size:18px;font-weight:600;line-height:1.35}
.hm-side > .hm-blk + .hm-blk{padding-top:var(--s6);border-top:1px solid var(--rule)}
.hm-blk > p:not(.hm-meta){margin-top:var(--s2);color:var(--ink-2);font-size:15.5px;line-height:1.6}
.hm-blk > .acts{margin-top:var(--s4)}
.hm-blk .hm-bh{margin-bottom:var(--s2)}
.hm-blk .empty{padding:var(--s3) 0;text-align:start;font-size:15px}
.hm-week .mission{margin-top:var(--s4)}
.hm-week .mh span{font:500 14px var(--head)}
.hm-mags{display:flex;gap:var(--s2);margin-top:var(--s2)}
.hm-days{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;gap:6px}
.hm-days li{position:relative;display:flex;flex-direction:column;align-items:center}
.hm-days .mag{width:32px;height:32px;font:600 13px var(--head)}
.hm-days .mag.later{border-style:dashed;color:var(--ink-3)}
.hm-days .today::after{content:"";position:absolute;bottom:-8px;inset-inline:6px;height:3px;border-radius:3px;background:var(--blue)}
.hm-goal{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);color:var(--green-ink);font:600 15px var(--head)}
.hm-zoom{--tilt:-.8deg;padding:var(--s4) var(--s5) var(--s5)}
.hm-zoom h2{display:flex;align-items:center;gap:var(--s2);color:inherit}
.hm-zoom p{margin-top:var(--s2)} .hm-zoom p.small{margin-top:2px;color:inherit}
.hm-zoom .btn{margin-top:var(--s3)}
.hm-ready .hm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:14.5px}
.hm-dot{width:9px;height:9px;border-radius:50%;background:var(--pc);flex:none}
.hm-ready .kv{margin-top:var(--s4);font-size:15px}
.hm-ready .kv dd{margin:0;font-variant-numeric:tabular-nums}
.hm-ready .prow{margin-top:var(--s3)}
.hm-ready .acts{margin-top:var(--s4)}
.hm-feed .hm-bh{margin-bottom:0}
.feedmini{display:flex;flex-direction:column}
.fitem{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-block:var(--s3)}
.fitem + .fitem{border-top:1px solid var(--rule)}
.fitem .fh{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);width:100%}
.fitem .fh small{flex:none;color:var(--ink-3)}
.fitem h3{font-size:15.5px;font-weight:600}
.fitem p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.fitem .lnk{font-size:14px}

/* ---------- the catalog ---------- */
.hm-cath{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s5) var(--s7)}
.hm-cath .acts{gap:var(--s2)}
/* the legend: a key written along the board */
.ctypes{display:flex;flex-wrap:wrap;gap:var(--s4) 0;margin:0 0 var(--s7)}
.ctypebox{flex:1 1 220px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding-inline:var(--s5);border-inline-start:1px solid var(--rule-2)}
.ctypebox:first-child{padding-inline-start:0;border-inline-start:0}
.ctypebox.t-career{margin-inline-start:var(--s5)} /* the career certificate is not a tier: it stands a little apart */
.ctypebox dt{margin:0}
.ctypebox dd{margin:0;color:var(--ink-3);font-size:14.5px;line-height:1.5}
.hm-tiers{margin-bottom:0}
.hm-tiers .n{font:500 12.5px var(--mono);color:var(--ink-3)}
.hm-tiers .ultab.on .n{color:var(--ink-2)}
/* groups: the name in the margin column, the tracks written beside it */
.hm-grp{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s4) var(--s8);margin-top:var(--s9)}
.hm-grp-h{align-self:start;position:sticky;top:calc(var(--rail-h) + var(--s4));padding-top:var(--s4)}
.hm-grp-h h2{font-size:22px}
.hm-grp-h p{margin-top:var(--s2);color:var(--ink-3);font-size:15px;line-height:1.5}
.hm-grp-h p.hm-meta{margin-top:var(--s3);color:var(--ink-2);font-size:14px}
/* the core tracks as a drawn sequence: 1, then 2, then 3 */
.hm-seq{display:flex;align-items:flex-start;gap:0}
.hm-seq .pcard{flex:1 1 0;min-width:0;grid-template-columns:1fr;gap:var(--s3);padding:var(--s4) var(--s3) var(--s3);border-top:0}
.hm-seq .pc-art{margin:0}
.hm-seq .pcard .stepn{width:30px;height:30px;font-size:13px;inset-block-start:-4px;inset-inline-start:-4px}
.hm-arrow{flex:none;align-self:flex-start;display:grid;place-items:center;width:52px;margin-top:clamp(48px,6vw,84px);color:var(--ink-2)}
.hm-arrow svg{display:block;overflow:visible}
/* careers: tracks added up to a role */
.hm-careers{margin-top:var(--s10)}
.hm-careers .cgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:0 var(--s8)}
.career{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s5) 0 var(--s6);border-top:1px solid var(--rule)}
.career-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s3);width:100%}
.career h3{font-size:19px}
.career > p{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:62ch}
.cpath{list-style:none;margin:var(--s1) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) 0}
.cpath li{display:flex;align-items:center}
.cpath li + li::before{content:"+";padding-inline:var(--s2);color:var(--ink-3);font:500 22px/1 var(--head)}
.cpath a{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;padding-inline:4px;border-radius:var(--r-sm);color:var(--ink);font-size:14.5px;text-decoration:none}
.cpath a:hover span{text-decoration:underline;text-underline-offset:4px}
.cpath .mag{border-color:var(--pc)}
.cpath .mag.done .ic{width:12px;height:12px}
.cpath b{font:600 12.5px var(--mono);color:var(--ink-2);unicode-bidi:isolate}
.career .prow{width:100%;max-width:420px}
.career .prow span{flex:none}

/* ---------- one track ---------- */
.hm-pflash .fmeta .tag.pc{--dot:var(--pc)}
.hm-pflash .nw,.hm-facts .nw{white-space:nowrap}
.hm-syl .domsec + .domsec{margin-top:var(--s7)}
.domh{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s2) var(--s3) var(--s3)}
.domh h3{flex:1 1 220px;font-size:18px}
.domh > .mag{width:32px;height:32px;font-size:13px}
.domh .w{display:inline-flex;align-items:center;gap:var(--s2);color:var(--ink-3);font:500 13.5px var(--head);font-variant-numeric:tabular-nums}
.domh .dbar{display:block;width:72px;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.domh .dbar i{display:block;height:100%;border-radius:2px;background:var(--pc)}
/* the lessons hang on one marker line, magnet after magnet */
.hm-syl .lrows{position:relative}
.hm-syl .lrow::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(var(--s3) + 23px);width:2px;background:var(--rule-2)}
.hm-syl .lrow.done::before{background:color-mix(in srgb,var(--green) 60%,var(--rule-2))}
.hm-syl .lrow:first-child::before{inset-block-start:50%}
.hm-syl .lrow:last-child::before{inset-block-end:50%}
.hm-syl .lrow:only-child::before{display:none}
.hm-facts{--tilt:.7deg;padding:var(--s5)}
.hm-facts h2{color:inherit}
.hm-facts ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.hm-facts li{display:flex;align-items:flex-start;gap:var(--s2);font-size:15px;line-height:1.5}
.hm-facts li .ic{flex:none;margin-top:3px;width:15px;height:15px}
.hm-side > .askcard{margin-top:0}

/* ---------- search ---------- */
.hm-search{max-width:780px}
.hm-search .qin input{min-height:48px;font-size:17px}
.hm-search .qin .btn{height:48px}
.hm-scount{min-height:1.5em;margin-top:var(--s5);color:var(--ink-3);font:500 14px var(--head)}
.search-res{display:flex;flex-direction:column;margin-top:var(--s2)}
.search-res .empty{text-align:start;padding:var(--s5) var(--s3)}
.sr-item{display:flex;flex-direction:column;gap:4px;padding:var(--s4) var(--s3);border-top:1px solid var(--rule);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;transition:background-color .15s}
.sr-item:hover{background:var(--blue-wash);text-decoration:none}
.sr-item b{font:600 17px/1.4 var(--head);color:var(--blue)}
.sr-item:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sr-item .sr-x{max-width:72ch;color:var(--ink-2);font-size:15px;line-height:1.6}
.sr-item small{display:flex;align-items:center;gap:var(--s2);color:var(--ink-3);font:500 13.5px var(--head)}
.sr-item small::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pc)}
.sr-item mark{padding:0 2px;border-radius:2px;background:var(--note);color:var(--note-ink)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .hm-now,.hm-now:has(.hm-trace){grid-template-columns:minmax(0,1fr)}
  .hm-trace{display:none}
}
@media (max-width:1080px) and (min-width:761px){
  .hm-side{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s7) var(--s8)}
  .hm-side > .hm-blk + .hm-blk{padding-top:0;border-top:0}
}
@media (max-width:960px){
  .hm-grp{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .hm-grp-h{position:static;padding-top:0}
}
@media (max-width:860px){
  .flash{grid-template-columns:minmax(0,1fr)}
  .flash .fart{order:-1;justify-content:flex-start}
  .flash .fart .art{width:min(320px,100%)}
  .hm-hello .hm-bit{display:none}
  .hm-pflash .fart .art{width:min(280px,80%)}
}
@media (max-width:760px){
  .flash h1{font-size:28px}
  .flash.slim h1{font-size:24px}
  .fstats > div{padding-inline:var(--s4)}
  .fstats b{font-size:22px}
  .flash .acts,.hm-tray{display:flex}
  .flash .acts .btn,.hm-tray .btn{flex:1 1 auto}
  .hm-now h2{font-size:24px}
  .hm-now-in{gap:var(--s3)}
  .hm-now-in > .ricon{width:48px!important;height:48px!important}
  .hm-learn .ultabs{gap:var(--s4)}
  .hm-seq{flex-direction:column;align-items:stretch}
  .hm-seq .pcard{grid-template-columns:112px minmax(0,1fr);padding:var(--s3) var(--s2)}
  .hm-arrow{align-self:center;width:auto;height:36px;margin:0}
  .hm-arrow svg{transform:rotate(-90deg)}
  .ctypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}
  .ctypebox,.ctypebox:first-child{padding:0;border:0}
}
@media (max-width:560px){
  .lrow{grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s3)}
  .lrow .lmeta{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center}
  .lrow .lmeta .tags{flex-wrap:wrap}
  .lrow .ricon{width:44px!important;height:44px!important}
  .hm-syl .lrow::before{inset-inline-start:calc(var(--s3) + 21px)}
  .pcard{grid-template-columns:96px minmax(0,1fr);gap:var(--s3)}
  .hm-seq .pcard{grid-template-columns:96px minmax(0,1fr)}
  .cont{flex-wrap:wrap} .cont .cbody{flex:1 1 60%} .cont > .btn{flex:1 1 100%}
  .ctypebox dd{font-size:13.5px}
  .hm-cath .acts{width:100%;flex-wrap:nowrap} .hm-cath .acts .btn{flex:1 1 0;min-width:0;padding-inline:10px 24px;font-size:14px}
  .fstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}
  .fstats > div,.fstats > div:first-child{padding:0;border:0}
}

/* 15-art.css */
/* ===================================================================== art: the drawings on the board
   Track drawings (Art.scene, svg.art), certificate seals (Art.medal, svg.medal), lesson icons (Art.ricon, .ricon),
   lesson diagrams (Scenes.render, inside svg.tsvg) and the shared arrowheads (ids ah and aw in the defsHost element).
   The SVGs carry classes, never colors: this file maps them to the tokens, so the dark glass board works by itself.
   Every drawing sits inside .wb. The track accent arrives on the svg as --a (track color, light board) and --a2
   (track glow, dark board); lesson diagrams fall back to the page's --pc/--pg. A container that puts a drawing on
   another ground can set --art-ground, the fill used where a mark must cover the line under it. */

/* ---------- roots ---------- */
.wb{--acc:var(--a,var(--pc));--gd:var(--art-ground,var(--board))}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .wb{--acc:var(--a2,var(--pg,var(--a,var(--pc))))} }
:root[data-theme=dark] .wb{--acc:var(--a2,var(--pg,var(--a,var(--pc))))}
svg.art{display:block;max-width:100%;height:auto;overflow:visible}
svg.medal{display:inline-block;flex:none;max-width:100%;height:auto;overflow:visible;vertical-align:middle}
.ricon{position:relative;display:inline-grid;place-items:center;flex:none}
.ricon svg{width:100%;height:100%;overflow:visible;direction:ltr}
.tsvg{display:block;width:100%;height:auto;direction:rtl}
.tsvg text{unicode-bidi:plaintext}
.tsvg text.he{unicode-bidi:normal}
.icsvg{width:1.25em;height:1.25em;vertical-align:-.25em}

/* ---------- the marker: round ends, round corners ---------- */
.wb path,.wb rect,.wb circle,.wb ellipse,.wb line,.wb polyline,.wb polygon{stroke-linecap:round;stroke-linejoin:round}
.wb text{font-family:var(--head);stroke:none}

/* ---------- lesson diagram labels (the .lbl family is the scenes' own; never reuse it elsewhere) ---------- */
.wb .lbl{font:600 13.5px var(--head);fill:var(--ink)}
.wb .lbl-m{font:400 13px var(--body);fill:var(--ink-2)}
.wb .lbl-b{font:700 16px var(--head);fill:var(--ink)}
.wb .w-t{font-family:var(--head)}
.wb .w-m{font-family:var(--mono)}
.wb .w-sm{font-size:12px}

/* ---------- marker colors (stroke) ---------- */
.wb .w-k{stroke:var(--ink)}
.wb .w-k2{stroke:var(--ink-2)}
.wb .w-k3{stroke:var(--ink-3)}
.wb .w-r3{stroke:var(--rule-3)}
.wb .w-bl{stroke:var(--blue)}
.wb .w-ac{stroke:var(--acc)}
.wb .w-gr{stroke:var(--green)}
.wb .w-rd{stroke:var(--red)}
.wb .w-wn{stroke:var(--warn)}

/* ---------- marker colors (fill), tape and washes; after the labels so they win ---------- */
.wb .w-fk{fill:var(--ink)}
.wb .w-fk2{fill:var(--ink-2)}
.wb .w-fk3{fill:var(--ink-3)}
.wb .w-fbl{fill:var(--blue)}
.wb .w-fac{fill:var(--acc)}
.wb .w-fgr{fill:var(--green)}
.wb .w-frd{fill:var(--red)}
.wb .w-fwn{fill:var(--warn)}
.wb .w-ftp{fill:var(--tape)}
.wb .w-ftpi{fill:var(--tape-ink)}
.wb .w-fbw{fill:var(--blue-wash-2)}
.wb .w-faw{fill:color-mix(in srgb,var(--acc) 14%,transparent)}
.wb .w-fgd{fill:var(--gd)}

/* ---------- thumbnails: a track drawing under about 300px keeps a real marker line instead of a scaled-down hairline.
   Automatic in the path card (.pc-art); elsewhere opt in with Art.scene(pa, 'thumb') or an .art-thumb container. ---------- */
:is(.pc-art,.art-thumb) svg.art :is(path,rect,circle,ellipse),svg.art.thumb :is(path,rect,circle,ellipse){vector-effect:non-scaling-stroke;stroke-width:1.3px}
:is(.pc-art,.art-thumb) svg.art pattern path,svg.art.thumb pattern path{stroke-width:.9px}

/* ---------- the certificate keeps a fixed light palette (40-cert.css, --c-*) in both themes: so does its seal ---------- */
:root .tcert .wb.medal,:root .tcert .wb.art{--ink:var(--c-ink);--ink-2:var(--c-ink-2);--ink-3:var(--c-ink-3);--rule-3:var(--c-rule-3);--art-ground:var(--c-paper);--acc:var(--a,var(--pc))}

/* ---------- motion: the lesson diagram is drawn in marker as the task opens (and on "replay"), once ---------- */
@media (prefers-reduced-motion:no-preference){
  .wb .fade{animation:wb-fade .5s cubic-bezier(.16,1,.3,1) var(--d,0s) backwards}
  .wb .drw{stroke-dasharray:1 1;animation:wb-draw .75s cubic-bezier(.45,0,.2,1) var(--d,0s) backwards}
  .bit .bit-led{animation:wb-led 2.4s ease-in-out infinite}
  .bit .bit-eyes{transform-box:fill-box;transform-origin:center;animation:wb-blink 5.5s infinite}
}
@media print{ .wb .fade,.wb .drw,.bit .bit-led,.bit .bit-eyes{animation:none!important} }
@keyframes wb-fade{from{opacity:0}}
@keyframes wb-draw{from{stroke-dashoffset:1}}
@keyframes wb-led{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wb-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* 20-room.css */
/* ===================================================================== the lesson page: an explanation on the meeting-room whiteboard
   Surface brief: .impeccable/surfaces/src-js-pages-room-js.md. Composition: .impeccable/mocks/decision/whiteboard.html.
   Desktop: the magnets rail at the inline start (lesson title, progress, one magnet per task, the paper flag where you are),
   then the open task in two bands: the reading column with its drawing beside it, then the questions with the key points
   (sticky notes), the exam tip and the erased traces of earlier tasks beside them. Under 1000px it becomes one column.
   This file also owns the question components the exam reuses: .opts .optrow .opt .okey .qhead .qq .qmeta .qbody .qhelp
   .qtools .match .mrowq .qn .qrow .seq .seqi .expl, and .chips .ttext. */

/* ---------- the top band: where you stand, and the marker tray ---------- */
.room{--draw-w:404px}
.rtop{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:0 0 var(--s7)}
.rtop .crumbs{flex:1 1 300px;min-width:0;margin:0}
.rtop .crumbs a{padding-block:12px;margin-block:-12px}
.room .crumbs .ccode{font:500 12px/1 var(--mono);color:var(--ink-3);margin-inline-start:2px;letter-spacing:.2px}
/* the tray: the lesson's actions sit together like markers in the tray under the board */
.rh-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:5px 8px;border-radius:8px;margin-inline-start:auto;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);
  box-shadow:inset 0 2px 3px color-mix(in srgb,var(--tray-edge) 75%,transparent),0 1px 0 color-mix(in srgb,var(--alu-hi) 70%,transparent)}
.rh-acts .btn{height:40px;font-size:14.5px}
.rh-acts .btn .bit{width:24px;height:24px;flex:none}
.rh-acts .rh-voice{gap:7px}
.rh-acts .tstep[disabled]{opacity:.7}
.rh-step{display:contents}
/* "next task" carries a blue cap while the lesson goes on; a finished lesson keeps blue for "the next lesson" only */
.room:not(.rdone) .rh-acts .tnextb{--cap:var(--blue)}
/* English terms in titles stay whole when the line wraps (bidi() in pages-room.js marks the short ones) */
.room bdi.nw{white-space:nowrap}
.rh-sep{width:1px;height:26px;background:var(--tray-edge);margin-inline:2px}
#labhead:empty{display:none}
#labhead{display:contents}

/* ---------- the board: the magnets rail and the main area ---------- */
.rlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);align-items:start}
.rmain{min-width:0;display:flex;flex-direction:column;gap:var(--s7);container:rmain/inline-size}
#briefbox:empty,#labbox:empty,#labx:empty,#roomdone:empty{display:none}

/* the lesson heading block at the top of the rail */
.rhead h1{font:700 22px/1.3 var(--head);letter-spacing:0;text-wrap:balance}
.rhead .campbar{display:flex;align-items:flex-start;gap:6px;margin-top:var(--s2);font:500 14px/1.45 var(--head);color:var(--ink-2)}
.rhead .campbar .ic{margin-top:2px;color:var(--blue)}
.rhead .tags{margin-top:var(--s3)}
/* the meta line's links: what the lesson teaches (opens the briefing in the main column) and the track's exam */
.rhead .rlinks{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--s2)}
.rhead .rlinks .lnk,.rhead .rexam{min-height:40px;font-size:14px;text-align:start}
.rhead .rbrief[aria-expanded="true"]{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}

/* progress, written on the board */
.progcard{margin-top:var(--s6)}
.progcard p{font:500 14.5px/1.4 var(--head);color:var(--ink-2)}
.progcard p b{font-weight:700;color:var(--ink)}
.progcard .pbar{margin-block:var(--s2) var(--s1);height:6px}
.progcard small{display:block;color:var(--ink-3);font-size:13px}

/* the magnets: one per task; the current one holds a paper flag */
.tlist{margin-top:var(--s5)}
.tlist ol{list-style:none;margin:0;padding:0}
.tl{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:4px 0;border:0;background:none;text-align:start;color:var(--ink-2);font:400 14px/1.35 var(--body);cursor:pointer;border-radius:6px}
.tl .mag{position:relative;z-index:2}
.tl .tt{min-width:0;overflow-wrap:anywhere}
.tl:hover{color:var(--ink)}
.tl:hover .tt{text-decoration:underline;text-decoration-color:var(--rule-3);text-underline-offset:4px}
.tl.here{gap:0;margin-block:6px}
.tl.here .tt{position:relative;z-index:1;flex:1;margin-inline-start:-14px;padding:7px 12px 7px 10px;padding-inline-start:24px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-paper);
  box-shadow:0 4px 8px -4px color-mix(in srgb,var(--ink) 30%,transparent);transform:rotate(-1deg);color:var(--ink);font-weight:600}
.tl.here:hover .tt{text-decoration:none}
.tl.here .tt small{display:block;margin-top:1px;font:400 12.5px/1.4 var(--body);color:var(--ink-3)}
.rside .ractions{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-top:var(--s4)}
.rside .ractions .lnk{font-size:13.5px;min-height:40px}

/* a lesson opened from a class: the class path, scoped here (markup from pages-campus.js) */
.rside .campside.card{background:none;box-shadow:none;padding:0;margin-top:var(--s6)}
.rside .campside h3{display:flex;align-items:center;gap:6px;font:600 15px var(--head)}
.rside .campside > small{display:block;color:var(--ink-3);font-size:13px}
.rside .campside .mini{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.rside .campside .ms{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:2px 0;border:0;background:none;text-align:start;color:var(--ink-2);font:400 13.5px/1.35 var(--body);cursor:pointer}
.rside .campside .ms.cur{color:var(--ink);font-weight:600}
.rside .campside .ms.zoom{cursor:default}
.rside .campside .ms small{display:block;color:var(--ink-3)}
.rside .campside .tn{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--rule-3);display:grid;place-items:center;font:500 11px var(--mono);color:var(--ink-2)}
.rside .campside .ms.done .tn{border:0;background:var(--green);color:var(--board);box-shadow:var(--magnet-shadow)}
.rside .campside .ms.cur .tn{border:0;background:var(--blue);color:var(--board);box-shadow:var(--magnet-shadow)}
.rside .campside .tn .ic{width:12px;height:12px}
.rside .campside .lb5 li{display:flex;align-items:center;gap:8px;min-height:36px}
.rside .campside .lb5 .rk{width:18px;font:500 12px var(--mono);color:var(--ink-3)}
.rside .campside .lb5 b{margin-inline-start:auto}
.rside .campside > .lnk{margin-top:var(--s2)}

/* ---------- the brief: "before you start", written on the board (only while open; closed, its link sits in the meta line) ---------- */
.brief{padding-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.brief .bh{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.brief .bh h2{font:700 20px/1.3 var(--head);scroll-margin-top:calc(var(--rail-h) + 16px)}
.brief .bh h2:focus{outline:none}
#briefbox{scroll-margin-top:calc(var(--rail-h) + 16px)}
.brief .bmeta{flex:1 1 auto;color:var(--ink-3);font-size:14.5px}
.brief .btoggle{margin-inline-start:auto;min-height:40px;font-size:14.5px}
.brief .bbody{margin-top:var(--s5)}
.brief .blead{max-width:68ch;margin-bottom:var(--s6);color:var(--ink-2);font-size:17px;text-wrap:pretty}
.brief .bcols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s6) var(--s8)}
.brief h3{margin:0 0 var(--s3);font:600 15.5px var(--head)}
.brief .bnote{max-width:62ch;color:var(--ink-2);font-size:15.5px;line-height:1.65}
.brief .bnote + h3{margin-top:var(--s6)}
.goals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.goals li{position:relative;padding-inline-start:24px;font-size:15.5px;line-height:1.6}
.goals li::before{content:"";position:absolute;inset-inline-start:2px;top:.78em;width:13px;height:3px;border-radius:2px;background:var(--pc)}
.brief .bfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s7)}
.brief .bhow{display:flex;align-items:flex-start;gap:10px;flex:1 1 320px;max-width:64ch;color:var(--ink-2);font-size:15px;line-height:1.6}
.brief .bhow .bit{width:34px;height:34px;flex:none}

/* ---------- the task accordion ---------- */
#tasks{display:flex;flex-direction:column}
.task{scroll-margin-top:calc(var(--rail-h) + 16px)}
.task + .task{border-top:1px solid var(--rule)}
.th{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s1) var(--s4);min-height:58px;padding-block:var(--s2)}
.th h2{grid-column:1;grid-row:1;margin:0;min-width:0;font:600 16.5px/1.4 var(--head)}
.thb{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:40px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.thb::after{content:"";position:absolute;inset:0;z-index:1}
.thb:focus-visible{outline:none}
.th:has(.thb:focus-visible){outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.th:hover .ttl{text-decoration:underline;text-decoration-color:var(--rule-3);text-underline-offset:5px}
.tbadge{flex:none;display:inline-grid}
.ttl{min-width:0;overflow-wrap:anywhere}
.th .caret{grid-column:3;grid-row:1;display:grid;place-items:center;width:32px;height:32px;color:var(--ink-3);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.task.open .th .caret{transform:rotate(-90deg)}
.th .tmeta{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font:500 13.5px/1.4 var(--head);color:var(--ink-3)}
.task:not(.open) .tmn{display:none}
.tmeta > * + *::before{content:"·";margin-inline:8px;color:var(--ink-3)}
.task:not(.open) .tmeta > *::before{content:none}
.tstat{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tstat:empty{display:none}
.tstat.ok{color:var(--green-ink)}
.labtag{vertical-align:2px}
.labtag .ic{width:13px;height:13px}
/* the open task: its title is the largest type on the board */
.task.open .th{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding-block:var(--s2) 0}
.task.open .th h2{font:700 24px/1.3 var(--head);letter-spacing:-.1px}
.task.open .th .caret{grid-column:2}
.task.open .th .tmeta{grid-column:1 / -1;grid-row:2;margin-top:var(--s1);font:400 14px/1.45 var(--body)}
.tbody{display:flex;flex-direction:column;gap:var(--s7);padding-block:var(--s5) var(--s8)}

/* the reading column */
.ttext{max-width:68ch;margin:0;font:400 17px/1.75 var(--body);color:var(--ink);text-wrap:pretty}
.tqa{min-width:0}
.tnext{display:flex;justify-content:flex-end;margin-top:var(--s8)}
.tnext:empty{display:none}

/* the drawing, in marker straight on the board (the drawing inside the SVG is scenes.js) */
.tscene{min-width:0}
.tstage{position:relative}
.tstage.warn{padding-inline-start:var(--s3);border-inline-start:1px solid var(--red)}
.tsvg{display:block;width:100%;height:auto;max-height:360px;direction:rtl}
.tsvg text{unicode-bidi:plaintext}
.tsacts{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s1)}
.tsacts .replay,.tsacts .scenehelp{min-height:40px;font-size:14px;color:var(--ink-2)}
.tsacts .replay:hover,.tsacts .scenehelp:hover{color:var(--blue)}

/* a code listing written on the board, with a marker circle around the key token and Bit's note under it */
.scode{min-width:0}
.scode-h{display:inline-block;margin:0 0 var(--s3);padding:2px 10px;border-radius:2px;background:var(--tape);color:var(--tape-ink);font:500 13.5px/1.6 var(--head);transform:rotate(-.8deg);box-shadow:0 1px 1px color-mix(in srgb,var(--ink) 10%,transparent)}
/* nothing is cut at the column edge: a long line soft-wraps, and its continuation hangs past the prompt (--hang) */
.scode pre{margin:0;padding:8px 10px 10px;direction:ltr;text-align:left;font:400 12.5px/21px var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;border-radius:4px}
.scode .cl{display:block;padding-inline-start:var(--hang,0ch);text-indent:calc(-1 * var(--hang,0ch))}
.scode .c-p{color:var(--ink-3)}
.scode .c-out{color:var(--ink-2)}
.scode .c-com{color:var(--ink-3);font-style:italic}
.scode .c-key{position:relative;font-weight:600}
.scode .c-key::after{content:"";position:absolute;inset:-4px -6px -3px -6px;border:2px solid var(--ink);border-top-color:color-mix(in srgb,var(--ink) 65%,transparent);border-radius:50%;transform:rotate(-4deg);pointer-events:none}
.scode .c-ann{display:flex;align-items:flex-end;gap:5px;width:max-content;max-width:100%;margin-block:6px -2px;margin-inline-start:max(0px,min(calc(var(--col) * 1ch - 6px),calc(100% - 9.5em)));padding-bottom:0;color:var(--ink);line-height:1;white-space:nowrap;text-indent:0;user-select:none;-webkit-user-select:none}
.scode .c-ann.flip{justify-content:flex-end;margin-inline-start:0;width:min(100%,calc(var(--col) * 1ch + 6px))}
.c-arrow{flex:none;width:34px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.scode .c-ann.flip .c-arrow{transform:scaleX(-1)}
.scode .c-ann .bit,.tann .bit{flex:none;width:24px;height:24px;margin-bottom:2px}
.scode .c-ann .hand,.tann .hand{font-size:27px;line-height:.95}
/* Bit's note beside a drawing or a table: under it at the end side, the arrow reaching up into it */
.tann{display:flex;align-items:flex-end;justify-content:flex-end;gap:5px;margin:-4px 0 0;padding-inline-end:6%;color:var(--ink);line-height:1;white-space:nowrap;user-select:none;-webkit-user-select:none;pointer-events:none}
.tann .c-arrow{height:30px;margin-bottom:12px;transform:scaleX(-1)}
.stable-wrap + .tann{margin-top:var(--s2)}

/* a table written on the board: a marker rule under the header, hairlines between rows */
.stable-wrap{overflow-x:auto;border-radius:4px}
.stable{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;color:var(--ink)}
.stable thead th{padding:8px 10px;border-bottom:2px solid var(--ink);text-align:start;vertical-align:bottom;font:600 13.5px/1.4 var(--head);color:var(--ink)}
.stable tbody th,.stable tbody td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top}
.stable tbody th{font-weight:600;white-space:nowrap;unicode-bidi:plaintext}
.stable tbody td{color:var(--ink-2)}
.stable tbody tr:last-child > *{border-bottom:0}

/* key points: short sticky notes */
.tkeys{min-width:0}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s5)}
.chips li{--tilt:-1deg;position:relative;flex:1 1 112px;max-width:210px;min-height:74px;padding:14px 12px 12px;border-radius:1px;
  background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note);color:var(--note-ink);box-shadow:var(--note-shadow);
  transform:rotate(var(--tilt));font:500 14.5px/1.5 var(--body);overflow-wrap:anywhere}
.chips li:nth-child(3n+2){--tilt:.6deg}
.chips li:nth-child(3n){--tilt:-.4deg}
.chips li.w{background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note-pink);color:var(--ink)}
.chips li code{background:color-mix(in srgb,var(--note-ink) 8%,transparent)}
/* the exam tip: a wider note held by a strip of masking tape */
.tipbox{position:relative;margin-top:var(--s7);padding:22px 16px 14px;border-radius:1px;background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note);color:var(--note-ink);box-shadow:var(--note-shadow);transform:rotate(.35deg)}
.chips + .tipbox,.tipbox + .tipbox{margin-top:var(--s7)}
.tkeys > .tipbox:first-child{margin-top:var(--s3)}
.tipbox .tiph{position:absolute;top:-11px;inset-inline-start:18px;padding:2px 12px;background:var(--tape);color:var(--tape-ink);font:600 13px/1.6 var(--head);transform:rotate(-1.6deg);box-shadow:0 1px 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.tipbox p{margin:0;font:400 15px/1.6 var(--body);text-wrap:pretty}
/* erased traces of the tasks done just before: decorative (aria-hidden), the rail carries the same information */
.terase{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s8);color:var(--ink);transform:rotate(-.5deg);
  -webkit-mask-image:linear-gradient(168deg,black 0 14%,rgb(0 0 0 / .3) 21% 33%,black 41% 57%,rgb(0 0 0 / .2) 63% 75%,black 83%);
  mask-image:linear-gradient(168deg,black 0 14%,rgb(0 0 0 / .3) 21% 33%,black 41% 57%,rgb(0 0 0 / .2) 63% 75%,black 83%)}
.terase p{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;font:400 13.5px/1.4 var(--body)}
.terase b{flex:1 0 100%;width:fit-content;padding-bottom:3px;border-bottom:2px solid currentColor;font:600 17px/1.35 var(--head)}

/* the "?" help buttons beside options and the task text (voice tutor): quiet pencil grey until the row is pointed at or
   focused, then marker blue, so each question shows one blue way to Bit at rest */
.qhelp{flex:none;position:relative;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;transition:background-color .15s,color .15s}
.qhelp:hover,.qhelp:focus-visible,.optrow:hover > .qhelp,.optrow:focus-within > .qhelp,.mrowq:hover > .qhelp,.mrowq:focus-within > .qhelp{color:var(--blue)}
.qhelp:hover{background:var(--blue-wash)}
.qhelp .ic{width:22px;height:22px;stroke-width:1.8}
.qhelp.in{display:inline-grid;width:28px;height:28px;margin-inline-start:4px;vertical-align:-7px}
.qhelp.in::after{content:"";position:absolute;inset:-6px}
.qhelp.in .ic{width:18px;height:18px}

/* ---------- questions (lessons and exams) ---------- */
.tqs{display:flex;flex-direction:column;gap:var(--s9)}
.q{min-width:0;scroll-margin-top:calc(var(--rail-h) + 24px)}
.q:focus{outline:none}
.qhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-bottom:var(--s2)}
.qlabel{margin:0;font:700 18px/1.35 var(--head)}
.qmeta{display:inline-flex;align-items:center;gap:6px;font:500 13.5px/1.4 var(--head);color:var(--ink-3)}
.qmeta.qok{color:var(--green-ink)}
.qmeta .ic{width:15px;height:15px}
.qkind{white-space:nowrap}
.qq{max-width:68ch;margin:0 0 var(--s4);font:500 17px/1.65 var(--body);color:var(--ink);text-wrap:pretty}
.qbody{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.qn{flex:none;display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 5px;border:2px solid var(--rule-3);border-radius:14px;font:600 13px/1 var(--mono);color:var(--ink-2)}
/* answer options: a row on the board with a letter key, the text and the "?" */
.opts{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.opt{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center;gap:14px;padding:7px 10px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--sheet);color:var(--ink);
  font:400 16px/1.5 var(--body);text-align:start;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.opt bdi{min-width:0;overflow-wrap:anywhere}
.opt.code bdi{font:500 14.5px/1.5 var(--mono);direction:ltr;unicode-bidi:isolate}
.okey{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--rule-3);border-radius:6px;background:var(--board-2);box-shadow:var(--key-shadow);font:600 14px/1 var(--head);color:var(--ink);transition:inherit}
.okey .ic{width:15px;height:15px;stroke-width:2.6}
.opt:hover:not([disabled]){border-color:var(--rule-3)}
.opt:hover:not([disabled]) .okey{border-color:var(--ink-3)}
.opt:active:not([disabled]){background:var(--board-2)}
.opt[disabled]{cursor:default}
.opt[disabled]:not(.bad):not(.sel):not(.right){color:var(--ink-3)}
.opt.sel{border-color:var(--blue);background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue)}
.opt.sel .okey{border-color:var(--blue);background:var(--blue);color:var(--sheet)}
.opt.bad,.opt.bad[disabled]{border-color:color-mix(in srgb,var(--red) 55%,var(--rule-2));background:var(--red-wash);color:var(--ink-2);cursor:default}
.opt.bad .okey{border-color:var(--red);background:transparent;color:var(--red-ink);box-shadow:none}
.opt.bad bdi{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--red) 70%,transparent);text-decoration-thickness:1.5px}
.opt.right{border-color:var(--green);background:var(--green-wash)}
.opt.right .okey{border-color:var(--green);background:var(--green);color:var(--sheet)}
.optrow{display:flex;align-items:center;gap:4px;min-height:46px;padding-inline:3px 6px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--sheet);transition:border-color .15s,background-color .15s,box-shadow .15s}
.optrow > .opt{align-self:stretch;border:0;border-radius:calc(var(--r) - 2px);background:none;box-shadow:none;padding-inline:6px}
.optrow > .opt:focus-visible{outline-offset:0}
.optrow:has(> .opt:not([disabled]):hover){border-color:var(--rule-3)}
.optrow:has(> .opt.sel){border-color:var(--blue);background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue)}
.optrow:has(> .opt.bad),.optrow.bad{border-color:color-mix(in srgb,var(--red) 55%,var(--rule-2));background:var(--red-wash)}
.optrow > .opt.sel,.optrow > .opt.bad{background:none;box-shadow:none}
/* order: the chosen sequence shows as tape labels */
.seq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:36px}
.seqi{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:2px;background:var(--tape);color:var(--tape-ink);font:500 14px/1.5 var(--head)}
.seqi .num{font:600 12.5px var(--mono)}
/* match */
.match{display:flex;flex-direction:column}
.mrowq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) repeat(2,auto);align-items:center;gap:8px 12px;padding-block:8px;border-bottom:1px solid var(--rule)}
.mrowq:first-child{border-top:1px solid var(--rule)}
.mrowq b{font:600 15.5px/1.45 var(--body);color:var(--ink);overflow-wrap:anywhere}
.mrowq select{width:100%;min-height:44px}
.mrowq select.ok{border-color:var(--green);background:var(--green-wash)}
.mrowq select.bad{border-color:var(--red);background:var(--red-wash)}
.mres{display:inline-grid;place-items:center;width:24px}
.mrowq.ok .mres{color:var(--green)}
.mrowq.bad .mres{color:var(--red)}
/* text, open answers and the send row */
.qrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.qrow input{flex:1 1 220px;width:auto;min-height:44px}
.qrow small{color:var(--ink-3);font-size:14px}
.qta{width:100%;min-height:112px}
.hintb{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--rule-3);border-radius:8px;background:var(--sheet);color:var(--ink-2);cursor:pointer}
.hintb:hover,.hintb[aria-pressed=true]{border-color:var(--ink-3);background:var(--note);color:var(--note-ink)}
.qmsg{display:flex;align-items:center;gap:6px;margin:0;font:500 15px/1.5 var(--head);color:var(--ink-2)}
.qmsg.bad{color:var(--red-ink)}
.qmsg:focus{outline:none}
.qans{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--green) 45%,var(--rule));border-radius:var(--r);background:var(--green-wash)}
.qans:focus{outline:none}
.qcheck{display:inline-flex;align-items:center;gap:6px;font:600 14.5px/1.4 var(--head);color:var(--green-ink)}
.qv{min-width:0;color:var(--ink);overflow-wrap:anywhere}
.qv.code{font:500 14.5px/1.5 var(--mono);direction:ltr}
.expl,.fb{max-width:68ch;margin:0;padding-inline-start:14px;border-inline-start:1px solid var(--rule-3);color:var(--ink-2);font-size:15.5px;line-height:1.65}
.expl b{margin-inline-end:4px;font:600 15px var(--head);color:var(--ink)}
.fb{display:flex;align-items:flex-start;gap:8px}
.fb .ic{flex:none;margin-top:4px;color:var(--ink-3)}
.hint{display:flex;align-items:flex-start;gap:8px;max-width:60ch;margin:0;padding:12px 14px 10px;border-radius:1px;background:var(--note);color:var(--note-ink);box-shadow:var(--note-shadow);font-size:15px;line-height:1.55}
.hint .ic{flex:none;margin-top:3px}
.qtools{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s5)}
.qtools .lnk{min-height:40px;font-size:15px}
.qtools .qvoice,.qtools .qask{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.qtools .lnk .bit{width:24px;height:24px;flex:none}

/* ---------- lab addresses: [[ip]] [[attacker]] ... in the lesson text, filled in by App.labSubst (app-core.js) ----------
   A live address is set in the code face with a marker underline in the track color; before a machine runs, the neutral
   MACHINE_IP chip is a dashed outline (its title says how to get the address). */
.labaddr{display:inline;padding:0 .3em;border-radius:3px;background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:inset 0 -2px 0 var(--pc);
  font-size:.9em;font-weight:500;unicode-bidi:isolate;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.labaddr-off{box-shadow:none;outline:1px dashed var(--rule-3);outline-offset:-1px;color:var(--ink-2)}
.chips li .labaddr-off{color:inherit}
.scode .labaddr{font-size:1em;font-weight:600}

/* ---------- the strip under the lab line (#labx, the lesson's own; the lab line itself is labs.js / 25-labs.css) ----------
   Before a machine runs and the room offers a choice: which machine to start (a small segmented choice, the os on tape; the
   one primary action stays the tray's "הפעלת מכונה"). While a machine runs: its target, attacker and subnet addresses.
   The strip hugs the lab line: the line gives up its own rule and padding so the two read as one ruled band. */
#labx{padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
#labbox:not(:empty) + #labx:not(:empty){margin-top:calc(var(--s1) - var(--s7))}
#labbox:has(+ #labx:not(:empty)) .labline{border-bottom:0;padding-bottom:0}
.labpick{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s1)}
.lpc-h{margin:0;font:600 14.5px/1.4 var(--head);color:var(--ink-2)}
.lpc-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.lpc{position:relative;display:inline-flex;min-width:0;max-width:100%;cursor:pointer}
.lpc input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.lpc-b{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0;min-height:44px;padding:6px 14px 6px 12px;padding-inline:12px 14px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--sheet);color:var(--ink);
  font:500 15px/1.4 var(--head);transition:border-color .15s,background-color .15s,box-shadow .15s}
.lpc-b::before{content:"";flex:none;width:16px;height:16px;border:2px solid var(--rule-3);border-radius:50%;background:var(--sheet)}
.lpc:hover .lpc-b{border-color:var(--rule-3)}
.lpc input:checked + .lpc-b{border-color:var(--blue);background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue)}
.lpc input:checked + .lpc-b::before{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 2.5px var(--sheet)}
.lpc input:focus-visible + .lpc-b{outline:2px solid var(--blue);outline-offset:2px}
.lpc-n{min-width:0;overflow-wrap:anywhere}
.lpc-os{transform:rotate(-1deg)}
.lpc-os .ic{width:13px;height:13px}
.lpc-about{margin:0;max-width:72ch;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.lpc-meta{color:var(--ink-3)}
/* with a choice on offer the lab line's own machine name, quota and blurb describe only the first machine: the chooser says them per machine */
#labbox:has(+ #labx .labpick) .labline .lab-h > h2,
#labbox:has(+ #labx .labpick) .labline .lab-h > .lab-quota,
#labbox:has(+ #labx .labpick) .labline .lab-about{display:none}
.labnet{padding-top:var(--s1)}
.labnet dl{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s6);margin:0}
.labnet .ln{display:inline-flex;align-items:center;gap:8px;min-height:40px}
.labnet dt{font:500 13.5px/1.4 var(--head);color:var(--ink-3)}
.labnet dd{display:inline-flex;align-items:center;gap:2px;margin:0}
.labnet code{padding:2px 9px;border:1px solid var(--rule-2);border-radius:6px;background:var(--board-2);color:var(--ink);font:500 15px/1.5 var(--mono);font-variant-numeric:tabular-nums;unicode-bidi:isolate;user-select:all}
.labnet .lnk{min-width:40px;min-height:40px;justify-content:center;color:var(--ink-3)}
.labnet .lnk:hover{color:var(--blue)}
.labnet .lnk .ic{width:15px;height:15px}

/* ---------- the whole lesson done: a quiet green note ---------- */
.celebrate{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);max-width:780px;padding:var(--s5) var(--s6);border-radius:1px;
  background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note-green);color:var(--ink);box-shadow:var(--note-shadow);transform:rotate(-.3deg)}
.celebrate > div{flex:1 1 280px}
.celebrate h2{font:700 20px/1.3 var(--head)}
.celebrate p{margin-top:var(--s1);color:var(--ink-2);font-size:15.5px;line-height:1.6;text-wrap:pretty}

/* ---------- layouts ---------- */
/* one task at a time on every width: the magnets list the others (the rail on desktop, a row of magnets on narrow
   screens); with no task open, the whole list shows as an accordion */
.rlayout:not(.split) #tasks:has(> .task.open) > .task:not(.open){display:none}
.rlayout:not(.split) #tasks:has(> .task.open) > .task + .task.open{border-top:0}
.rlayout:not(.split) .task.open .tbadge{display:none}
/* the board with the magnets rail */
@media (min-width:1000px){
  .rlayout{grid-template-columns:184px minmax(0,1fr);column-gap:44px}
  .rside{position:sticky;top:calc(var(--rail-h) + 16px);max-height:calc(100vh - var(--rail-h) - 32px);overflow-y:auto;overscroll-behavior:contain;padding:4px 2px var(--s4);padding-inline-end:10px;margin-inline-end:-10px}
  .rlayout:not(.split) .task.open .th h2{font-size:28px;line-height:1.25;letter-spacing:-.2px}
  .rlayout:not(.split) .task.open .th{padding-top:0}
}
/* two bands when the main area is wide enough: text | drawing, then questions | notes */
@container rmain (min-width:820px){
  /* rows: title, text, then a row the drawing may run into while the questions already start, then the rest.
     The drawing spans rows 1-3 and the questions rows 3-4, so neither column waits for the other. */
  .task.open{display:grid;grid-template-columns:minmax(440px,1fr) minmax(300px,var(--draw-w));grid-template-rows:auto auto auto 1fr;column-gap:44px;align-items:start;padding-bottom:var(--s8)}
  .task.open .tbody{display:contents}
  .task.open .th{grid-column:1;grid-row:1}
  .task.open .ttext{grid-column:1;grid-row:2;margin-top:var(--s5)}
  .task.open .tscene{grid-column:2;grid-row:1 / 4;padding-top:6px}
  .task.open .tqa{grid-column:1;grid-row:3 / 5;margin-top:var(--s8)}
  .task.open .tkeys{grid-column:2;grid-row:4;margin-top:var(--s8)}
}
@media (max-width:999px){
  .rside .ractions,.rside .campside{display:none}
  .rside{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s7)}
  .rside .rhead{flex:1 1 320px}
  .rside #rsidebody{flex:1 1 300px;min-width:0}
  .progcard{margin-top:0}
  /* the magnets as one row on a thin marker line; it scrolls sideways when the lesson has many tasks, and the current
     magnet is brought into view (App.scrollCurrent, .hscroll) */
  .tlist{margin-top:var(--s3)}
  .tlist ol{display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px;
    background:linear-gradient(var(--rule-2),var(--rule-2)) 0 50% / 100% 1px no-repeat}
  .tlist ol::-webkit-scrollbar{display:none}
  .tlist li{flex:none}
  .tl,.tl.here{position:relative;width:44px;height:44px;min-height:44px;margin:0;padding:0;justify-content:center;gap:0;border-radius:50%}
  .tl:focus-visible{outline-offset:-3px}
  .tl .mag:not(.done):not(.cur){background:var(--board)}
  .tl .tt,.tl.here .tt{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;transform:none;background:none;box-shadow:none}
}
@media (max-width:760px){
  .rtop{gap:var(--s2) var(--s4);margin-bottom:var(--s5)}
  .rlayout,.rmain{gap:var(--s5)}
  #labbox:not(:empty) + #labx:not(:empty){margin-top:calc(var(--s1) - var(--s5))}
  .labnet dl{gap:0 var(--s4)}
  .lpc{flex:1 1 100%}
  .lpc-b{width:100%}
  /* the crumbs keep the way back; the lesson's own name is the heading right below them */
  .room .crumbs{position:relative}
  .room .crumbs [aria-current]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .room .crumbs .ic:has(+ [aria-current]){display:none}
  /* the tray in one full row. Without a machine marker, previous and next carry their short labels ("הקודמת", "הבאה")
     and share the tray beside Bit's icon; with one, they shrink to icons (named for screen readers) and the machine
     marker takes the rest of the row */
  .rh-acts{width:100%;justify-content:flex-start;gap:6px;padding:4px 6px;margin-inline-start:0}
  .rh-acts .btn{padding-inline:10px 22px}
  .rh-acts .tstep{flex:1 1 0;min-width:0;gap:6px}
  .rh-acts .tsl{white-space:nowrap}
  .rh-acts .tsl-w{display:none}
  .rh-acts:has(#labhead > *) .tstep{flex:none}
  .rh-acts:has(#labhead > *) .tsl{display:none}
  #labhead .btn{flex:1 1 auto}
  .rh-sep{display:none}
  .rhead h1{font-size:22px}
  .rhead .tags{margin-top:var(--s2)}
  .rhead .rlinks{flex-direction:row;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s1)}
  .task.open .th h2{font-size:20px}
  .tbody{padding-block:var(--s4) var(--s7)}
  /* the erased traces stay off the phone: the magnets already say what is done, and the questions come first */
  .terase{display:none}
  .brief .bcols{grid-template-columns:minmax(0,1fr)}
  .mrowq{grid-template-columns:minmax(0,1fr) auto}
  .mrowq select{grid-column:1 / -1;grid-row:2}
  .mrowq .mres{grid-row:1;grid-column:2}
  .chips li{max-width:none}
  .celebrate{padding:var(--s4)}
}
@media (prefers-reduced-motion:reduce){
  .th .caret{transition:none}
}
@media print{
  .rh-acts,.rside .tlist,.rside .ractions,.qhelp,.tsacts,.qtools,.tnext,.tann,.scode .c-ann,.rlinks,#labx{display:none!important}
  .chips li,.tipbox,.celebrate{box-shadow:none;transform:none;border:1px solid var(--rule-2)}
}

/* 25-labs.css */
/* ===================================================================== labs: the practice machine
   In a lesson: the lab line on the board above the task (#labbox .labline: a tape label, the machine's name, its quota or
   login, one show/hide marker with the timer while it runs, and a fold for what it holds, the commands, extend and stop),
   the tray marker that starts it (#labhead .startvm) and the split view (.rlayout.split + aside.labdock). Full view
   lab.<id> (.labview): a work tool, the machine's screen under an aluminium control bar that holds the markers. The remote
   screen stays dark in both themes, like a monitor. */

/* ---------- the lab line in the lesson: one ruled line, not a sheet, so the task keeps the first view ---------- */
.labcard.labline{min-width:0;padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.labline .lab-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s3);min-height:44px}
.labline h2{min-width:0;font:600 16px/1.35 var(--head);color:var(--ink)}
.labline .lab-tape{order:-1;transform:rotate(-1.2deg);box-shadow:0 1px 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.labline .lab-tape .ic{width:13px;height:13px}
.labline .lab-mock{order:-1}
.labline .lab-quota{flex:0 1 auto;font-size:14.5px}
.labline .lab-moreb{margin-inline-start:auto;min-height:40px;font-size:14.5px}
.labline .lab-go{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-inline-start:auto}
.labline .lab-go + .lab-moreb{margin-inline-start:0}
.labline .lab-go .btn{height:40px}
.labline > .lab-cmds > summary{display:none}
.labline > .lab-cmds[open]{margin-top:var(--s2);padding-top:var(--s3);border-top:1px dashed var(--rule-2)}
.labline > .lab-cmds > * + *{margin-top:var(--s3)}
.labline > .lab-cmds > summary + *{margin-top:0}
.lab-about{margin-top:2px;max-width:68ch;color:var(--ink-2);font-size:15px;line-height:1.6}
.lab-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.lab-quota{flex:1 1 260px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;color:var(--ink-2);font-size:15px}
.lab-quota .ic{color:var(--ink-3)}
.lab-more{display:inline-flex;flex-wrap:wrap;gap:var(--s2);margin-inline-start:auto}
.lab-time{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--rule-2);border-radius:6px;background:var(--board-2);color:var(--ink);font:500 15px/1.5 var(--mono);font-variant-numeric:tabular-nums}
.lab-time:empty{display:none}
.lab-time .ic{width:15px;height:15px;color:var(--ink-3)}
.lab-login{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 var(--s5);font-size:14.5px;color:var(--ink-2)}
.lab-login > span{display:inline-flex;align-items:center;gap:6px}
.lab-login b{color:var(--ink);font-weight:600}
.lab-login .lnk{min-width:40px;min-height:40px;justify-content:center;vertical-align:middle}
.lab-cmds .lab-cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lab-cmds li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:36px}
.lab-cmds code{font-size:13.5px;padding:3px 8px}
.lab-cmds .lnk{min-height:40px;font-size:14px}
.lab-cmds .lab-row .btn.sm{height:40px}
.lab-note{margin:0;max-width:72ch;color:var(--ink-3);font-size:14px;line-height:1.6}
.lab-note .labtag{vertical-align:0;font-size:12.5px}
.lab-pay{min-width:0;margin-top:var(--s3)}
.lab-quota-m{display:none}
.labline > .alert{margin-top:var(--s2)}

/* ---------- the tray marker in the lesson header ---------- */
.btn.startvm{gap:7px}
.btn.startvm.wait{cursor:progress;color:var(--ink-2)}

/* ---------- the machine's screen (docked beside the tasks and full view) ---------- */
.labbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);
  box-shadow:inset 0 2px 3px color-mix(in srgb,var(--tray-edge) 75%,transparent),0 1px 0 color-mix(in srgb,var(--alu-hi) 70%,transparent)}
.labbar .lv-name{padding-inline:6px;font:600 15px/1.3 var(--head);color:var(--ink)}
.labbar .grow{flex:1 1 0}
.labbar .lv-st{font:500 14px/1.3 var(--head);color:var(--ink-2)}
.labbar .lv-time{background:var(--sheet);border-color:var(--tray-edge);font-size:14px;padding-block:1px}
.labdock .labbar .lv-name{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.labdock .labbar .grow{display:none}
.labdock .labbar [data-lv=type] .hide-s{display:none}
.labbar .btn.sm,.lab-more .btn.sm,.lv-msg .btn.sm{height:40px}
.labbar .btn bdi{font:500 12.5px var(--mono)}
.lv-typebox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:4px 2px}
.lv-typebox .lv-text{flex:1 1 280px;font-family:var(--mono);font-size:15px}
.lv-typebox .lv-enter{margin-top:0}
.lv-typebox .chk{align-items:center;min-height:40px}
.lv-screen{--screen:var(--board-3);--screen-ink:var(--ink);--screen:light-dark(var(--ink),var(--board-2));--screen-ink:light-dark(var(--board),var(--ink));
  position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:220px;border-radius:6px;overflow:hidden;outline:none;direction:ltr;background:var(--screen);border:1px solid var(--rule);box-shadow:var(--lift)}
.lv-screen:focus-visible,.lv-screen:focus{box-shadow:0 0 0 3px var(--blue),var(--lift)}
.lv-screen canvas{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - var(--rail-h) - 190px);image-rendering:auto;cursor:default}
.lv-screen:fullscreen{align-items:center}
.lv-screen:fullscreen canvas{max-height:100vh}
.lv-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:20px;direction:rtl;text-align:center;
  background:color-mix(in srgb,var(--screen) 86%,transparent);color:var(--screen-ink);font:500 15.5px/1.5 var(--head)}
.lv-msg[hidden]{display:none}
.lv-msg .ic{color:currentColor}

/* ---------- the split view: the machine beside the tasks ---------- */
.labdock{display:none}
@media (min-width:1100px){
  .rlayout.split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"side side" "main dock";column-gap:var(--s7)}
  .rlayout.split > .rside{grid-area:side;position:static;max-height:none;overflow:visible;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s7)}
  .rlayout.split > .rside .rhead{flex:1 1 360px}
  .rlayout.split > .rside #rsidebody{flex:0 1 300px}
  .rlayout.split > .rside .progcard{margin-top:0}
  .rlayout.split .tlist,.rlayout.split .askcard,.rlayout.split .campside{display:none}
  .rlayout.split > .rmain{grid-area:main}
  .rlayout.split > .labdock{grid-area:dock;position:sticky;top:calc(var(--rail-h) + 16px);display:flex;flex-direction:column;gap:var(--s2);max-height:calc(100vh - var(--rail-h) - 32px)}
  .labdock .lv-screen{flex:1 1 auto;min-height:0}
  .labdock .lv-screen canvas{max-height:calc(100vh - var(--rail-h) - 150px)}
}

/* ---------- the full view lab.<id> ---------- */
.labview{display:flex;flex-direction:column;gap:var(--s3)}
.labview .lv-foot{justify-content:space-between}
.lv-hint{flex:1 1 320px;color:var(--ink-2);font-size:14.5px}
.lv-off{max-width:560px;margin:var(--s8) auto;text-align:center}
.lv-off h1{font:700 26px/1.3 var(--head)}
.lv-off p{margin:var(--s2) 0 var(--s6);color:var(--ink-2)}
@media (max-width:760px){
  .labline .lab-h{gap:2px var(--s3)}
  .labline .lab-h > .lab-quota{display:none}
  .labline .lab-quota-m{display:block}
  .labline .lab-quota-m .lab-quota{font-size:14.5px}
  .labline .lab-moreb{margin-inline-start:0}
  .labbar .lv-name{flex:1 1 100%;padding-inline:2px}
  .labbar .grow{display:none}
  .lab-more{margin-inline-start:0}
}

/* 30-exam.css */
/* ===================================================================== exams and flashcard review (pages-exam.js, pages-review.js)
   The list reads like a timetable written on the board; a running exam docks a tray under the rail with the timer in a
   white window; the question map is magnets; results are a big marker number, a sticky-note verdict and marker lines.
   The shared question components (.opts .optrow .opt .okey .qq .seq .seqi .match .mrowq .qrow .expl) belong to 20-room.css:
   everything here about them is scoped under .exq or .rv. */

/* ---------- shared bits: a track row (exam list and decks), the tray, headers with a meta line ---------- */
.exr-t h3,.dk-t h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;line-height:1.35}
.exr-t h3::before,.dk-t h3::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 22%,transparent)}
.exr-t p,.dk-t p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;padding-inline-start:20px;font-size:14px;color:var(--ink-3)}
.extray{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.exs-h,.exr-h{margin:var(--s2) 0 var(--s7)}
.exs-h h1,.exr-h h1{font-size:30px}
.exs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:var(--s2);font:500 15px var(--head);color:var(--ink-3)}
.exs-sec{margin-top:var(--s9)}
.exs-sec > h2,.exs-len > h2{font-size:21px;margin-bottom:var(--s3)}
.exs-lead{max-width:68ch;margin-bottom:var(--s4);color:var(--ink-2);font-size:16px}

/* ---------- #exam: the list ---------- */
.exlist-h{margin-bottom:var(--s6)}
.exlist-more{margin-top:var(--s3)}
.exgroup,.exhist{margin-top:var(--s8)}
.exg-h{margin-bottom:var(--s3)}
.exg-h h2{font-size:22px}
.exg-h p{margin-top:var(--s1);max-width:70ch;color:var(--ink-3);font-size:15.5px}
.exlist{list-style:none;max-width:1000px;margin:0;padding:0;border-top:2px solid var(--ink)}
.exrow{display:grid;grid-template-columns:minmax(0,1fr) auto 128px;align-items:center;gap:var(--s3) var(--s7);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.exr-n{display:flex;gap:var(--s7);margin:0}
.exr-n > div{min-width:118px}
.exr-n dt{font:500 13px var(--head);color:var(--ink-3)}
.exr-n dd{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:2px 0 0;font:600 16px var(--head);color:var(--ink)}
.exr-n dd .muted{font:400 14px var(--body)}
.exr-ok{display:inline-flex;align-items:center;gap:3px;font:500 13px var(--head);color:var(--green-ink)}
.exr-ok .ic{width:14px;height:14px}
.exr-no{font:500 13px var(--head);color:var(--ink-3)}
.exr-a{justify-self:end}
.exr-a .btn{min-width:112px}
.exhist .tablewrap{position:relative}   /* keeps the visually hidden caption and link texts inside the scroller */
.exhist .roster{font-size:14.5px}
.exh-sc{font:600 15.5px var(--head)}
.exhist .tag{vertical-align:1px}

/* ---------- exam.<path>: what it is, the rules, what it covers, your status ---------- */
.exs-grid{gap:var(--s9)}
.exs-grid > *,.exr-grid > *,.exlayout > *{min-width:0}
.exstart .crumbs,.exres .crumbs{margin-bottom:var(--s3)}
.exs-main > :first-child,.exr-main > :first-child{margin-top:0}
.exopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:var(--s3);max-width:760px}
.exopt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:104px;padding:14px 16px 14px;padding-inline-start:46px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--sheet);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.exopt::before{content:"";position:absolute;inset-inline-start:15px;top:17px;width:20px;height:20px;border-radius:50%;border:2px solid var(--rule-3)}
.exopt:hover{border-color:var(--ink-3)}
.exopt.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue),var(--lift)}
.exopt.on::before{border:0;background:radial-gradient(circle at 38% 32%,var(--blue-2),var(--blue) 60%);box-shadow:var(--magnet-shadow)}
.exopt b{font:600 16px/1.35 var(--head)}
.exo-n{font-size:14px;color:var(--ink-3)}
.exopt .tag{margin-top:auto}
.exs-tray{margin-top:var(--s5);max-width:760px;padding:12px;border:1px solid var(--tray-edge);border-radius:10px;background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.45)}
.exs-go{flex:1 1 260px;font-size:14.5px;line-height:1.5;color:var(--ink)}
#exerr{max-width:760px;margin-top:var(--s4)}
#exerr p{margin:0}
.exerr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s3)!important}
.exrules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4);max-width:68ch}
.exrules li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s3);align-items:start}
.exrules .ic{width:20px;height:20px;margin-top:4px;color:var(--ink-2)}
.exrules b{font-family:var(--head);font-weight:600}
.exs-more{margin-top:var(--s4)}
.exdoms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4);max-width:640px}
.exdoms li{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(90px,150px);gap:var(--s3) var(--s4);align-items:center}
.exdoms .mag.sm{width:26px;height:26px;font-size:12px}
.exd-t b{display:block;font:600 16px/1.4 var(--head)}
.exd-n{font-size:14px;color:var(--ink-3)}
.exs-side{position:sticky;top:calc(var(--rail-h) + var(--s6))}
.exs-side > h2{font-size:18px;margin-bottom:var(--s3)}
.exs-facts{margin-bottom:var(--s4)}
.exs-facts span{color:var(--ink-2)}
.exs-facts b{font:600 15px var(--head);text-align:end}
.exs-hint{margin-top:var(--s3);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.exs-note{margin-top:var(--s6);max-width:290px}

/* ---------- the running exam: a tray docked under the rail, the question, the map of magnets ---------- */
.exbar{position:sticky;top:var(--rail-h);z-index:30;display:flex;align-items:center;gap:var(--s4);margin:calc(-1 * var(--s7)) 0 var(--s7);padding:9px 12px 9px 16px;padding-inline:16px 12px;
  border:1px solid var(--tray-edge);border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));color:var(--ink);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.16),0 8px 16px -12px rgba(20,24,30,.45)}
.exb-t{display:flex;align-items:center;gap:8px;min-width:0;font:600 15px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exb-t::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--pc)}
.exb-n{font:500 14px var(--head);color:var(--ink);white-space:nowrap}
.exbar .pbar{flex:1 1 120px;max-width:240px;background:repeating-linear-gradient(90deg,var(--alu-edge) 0 6px,transparent 6px 10px)}
.extimer{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--plastic-edge);border-radius:7px;background:var(--sheet);color:var(--ink);box-shadow:inset 0 1px 2px rgba(0,0,0,.14);font:600 18px/1 var(--mono);white-space:nowrap}
.extimer .ic{width:18px;height:18px;color:var(--ink-2)}
.extimer .num{font-family:var(--mono);letter-spacing:.02em}
.extimer.low{color:var(--red-ink);border-color:var(--red)}
.extimer.low .ic{color:var(--red-ink)}
.exlow{padding-inline-start:8px;border-inline-start:1px solid var(--rule-2);font:600 13px var(--head)}
.exlayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s9);align-items:start}
.exq{max-width:720px}
.exmeta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s5)}
.exq-flag .ic{width:13px;height:13px}
.exqh{font:600 15px var(--head);color:var(--ink-2);margin-bottom:var(--s2)}
.exqh:focus{outline:none}
.exqh:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.exqh-of{color:var(--ink-3);font-weight:500}
.exq .qq{max-width:none;margin:0 0 var(--s6);font:500 19px/1.6 var(--body)}
.exbody{max-width:680px}
.exq-how{margin:calc(-1 * var(--s3)) 0 var(--s3);font-size:15px;color:var(--ink-3)}
/* answer options: the base look is 20-room.css; the exam only adds room to breathe and the state of a step already placed in order */
.exq .optrow{min-height:50px}
.exq .opt{font-size:16px}
.exq .optrow:has(> .opt[disabled].sel){border-color:var(--rule-2);background:var(--board-2);box-shadow:none}
.exq .opt[disabled].sel{color:var(--ink-2)}
.exq .opt[disabled].sel .okey{border-color:var(--ink-2);background:var(--ink-2);color:var(--sheet)}
.exq .qrow input{flex:1 1 280px;min-height:48px;font-size:17px}
.exq .seq{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;margin:0 0 var(--s4);padding:0}
.seq-empty{font-size:15px;color:var(--ink-3)}
.exq .seq + .opts{margin-bottom:var(--s3)}
.exq .mrowq{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.exnav{justify-content:space-between;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule)}
/* a flagged question: the button turns into a sticky note, so it takes the paper ink (dark notes are dimmed light paper) */
.exnav .exflag[aria-pressed=true]{--cap:var(--note-ink);border-color:var(--paper-plastic-edge);color:var(--note-ink);background:var(--note)}
.exnav .exflag[aria-pressed=true]:hover{background:var(--note)}
/* the map: one magnet per question; answered ones are filled ink, the current one blue, a flagged one carries a small sticky note */
.exmap{position:sticky;top:calc(var(--rail-h) + 80px);max-height:calc(100vh - var(--rail-h) - 100px);overflow:auto;padding:4px 6px 10px}
.exmap > h2{font-size:18px}
.exmap-n{margin:2px 0 var(--s4);font-size:14px;color:var(--ink-3)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:10px 6px;justify-items:center}
.qgrid .mag{width:40px;height:40px;padding:0;font-size:13px;cursor:pointer;transition:transform .12s,border-color .15s}
.qgrid .mag:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.qgrid .mag.ans:not(.cur),.legend .mag.ans{border:0;color:var(--board);background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--ink) 70%,var(--board)),var(--ink) 62%);box-shadow:var(--magnet-shadow)}
.qgrid .mag.cur{box-shadow:var(--magnet-shadow),0 0 0 3px var(--board),0 0 0 5px var(--blue)}
.qf{position:absolute;top:-5px;inset-inline-end:-6px;display:grid;place-items:center;width:17px;height:17px;border:1px solid var(--note-ink);border-radius:2px;background:var(--note);color:var(--note-ink);transform:rotate(8deg)}
.qf .ic{width:10px;height:10px;stroke-width:2.6}
.legend{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:var(--s6) 0 0;padding:0;font-size:13.5px;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:9px}
.legend .mag{width:24px;height:24px}
.legend .mag.cur{box-shadow:var(--magnet-shadow)}
.legend .qf{top:-6px;inset-inline-end:-7px;width:15px;height:15px}
.legend .mag.flag{margin-inline-end:5px}
.exmap-sub{width:100%;margin-top:var(--s6)}
.exrun [data-act=exsubmit][data-sure="1"]{height:auto;min-height:40px;padding-block:8px;white-space:normal;line-height:1.35;text-align:center}

/* ---------- examr.<id>: the result ---------- */
.exscore{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4) var(--s8);align-items:center;max-width:860px}
.score{display:flex;flex-direction:column;align-items:flex-start}
.score .big{margin:0;direction:ltr;unicode-bidi:isolate;font:700 88px/1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-2px;color:var(--ink)}
.score .big small{margin-inline-start:2px;font-size:34px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.exs-pts{margin-top:var(--s2);font-size:15px;color:var(--ink-3)}
.note.verdict{display:flex;align-items:flex-start;gap:10px;max-width:440px;padding:16px 18px 14px;font:500 18px/1.5 var(--body)}
.note.verdict .ic{flex:none;width:22px;height:22px;margin-top:3px}
.note.verdict.pass{background:linear-gradient(180deg,rgba(0,0,0,.03) 0 15px,transparent 15px),var(--note-green);color:var(--ink)}
.note.verdict.pass .ic{color:var(--green)}
.scale{grid-column:1 / -1;position:relative;height:10px;margin:var(--s8) 0 var(--s8);border-radius:5px;background:repeating-linear-gradient(90deg,var(--rule-2) 0 6px,transparent 6px 10px)}
.scale-f{position:absolute;inset-block:0;inset-inline-start:0;border-radius:5px;background:var(--blue)}
.scale i{position:absolute;top:-8px;width:3px;height:26px;margin-inline-start:-1.5px;border-radius:2px;background:var(--ink)}
.scale i.passm{background:var(--green-ink)}
.scale i.you{width:4px;margin-inline-start:-2px;background:var(--ink)}
/* labels sit centred on their tick; in a right-to-left page the box grows leftwards from inset-inline-start, so it moves back by half */
.scale em,.scale b{position:absolute;white-space:nowrap;font:600 13px var(--head);font-style:normal;transform:translateX(50%)}
.scale em:dir(ltr),.scale b:dir(ltr){transform:translateX(-50%)}
.scale em{bottom:calc(100% + 12px);color:var(--green-ink)}
.scale b{top:calc(100% + 12px);color:var(--ink)}
.exs-fine{grid-column:1 / -1;max-width:68ch;font-size:14.5px;color:var(--ink-3)}
.exr-tray{grid-column:1 / -1;margin-top:var(--s2)}
.exr-grid{margin-top:var(--s4)}
.exr-grid .exs-sec:first-child{margin-top:var(--s8)}
.dombreak{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4);max-width:760px}
.domrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,200px) 92px;gap:var(--s2) var(--s5);align-items:center}
.domr-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.domr-t b{font:600 15.5px/1.4 var(--head)}
.domr-p{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.domr-p > .num{font:600 16px var(--head)}
.domr-p small{font-size:12.5px;color:var(--ink-3)}
.exrv-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s5);margin-bottom:var(--s3)}
.exrv-h h2{font-size:21px}
.exrv-h .ultabs{margin:0;border:0}
.review{list-style:none;max-width:72ch;margin:0;padding:0;border-top:2px solid var(--ink)}
.review > .empty{list-style:none}
.rv{display:flex;flex-direction:column;gap:var(--s2);max-width:72ch;padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.rv-st{display:flex;align-items:center;gap:8px;font:600 14px var(--head);color:var(--ink-2)}
.rv.bad .rv-st{color:var(--red-ink)}
.rv.ok .rv-st{color:var(--green-ink)}
.rv.un .rv-st{color:var(--ink-2)}
.rv .mag.sm .ic{width:12px;height:12px}
.rv.bad .mag.sm{border-color:currentColor;color:inherit}
.rv-q{font:500 17px/1.6 var(--body);color:var(--ink);text-wrap:pretty}
.rv .ya,.rv .ca{font-size:15.5px;line-height:1.55}
.rv .ya > span:first-child{color:var(--ink-3)}
.rv .ca > span:first-child{font-weight:600;color:var(--green-ink)}
.rv .ya code,.rv .ca code{font-size:14px}
.rv-un{font-size:14.5px;color:var(--ink-3)}
.rv .expl{margin:2px 0 0;padding-inline-start:var(--s3);border-inline-start:1px solid var(--rule-3);font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.rvf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:var(--s1)}
.exr-side .askcard{margin-top:var(--s8)}
.exr-note{margin-top:var(--s7);max-width:300px}

/* ---------- #review: the decks ---------- */
.rv-h{margin-bottom:var(--s6)}
.rv-sum{margin-top:var(--s3);font-size:15.5px;color:var(--ink-2)}
.rv-sum b{font-family:var(--head);font-weight:600;color:var(--ink)}
.rvgroup{margin-top:var(--s8)}
.rvgroup > h2{font-size:21px;margin-bottom:var(--s3)}
.decks{list-style:none;max-width:1000px;margin:0;padding:0;border-top:2px solid var(--ink)}
.deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,210px) 150px 136px;gap:var(--s3) var(--s6);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.dk-p{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-3)}
.dk-due{font-size:14.5px;color:var(--ink-2)}
.dk-due b{font:600 14.5px var(--head);color:var(--ink)}
.dk-a{justify-self:end}
.dk-a .btn{min-width:124px}

/* ---------- review.<path>: one card at a time; the front is an index card, the back a sticky note ---------- */
.fcwrap{max-width:680px;margin-inline:auto}
.fchead{margin:var(--s2) 0 var(--s6)}
.fchead h1{font-size:26px}
.fcprog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);margin-top:var(--s3);font:500 14.5px var(--head);color:var(--ink-2)}
.fcscore{color:var(--ink-3)}
.fcard{display:block;width:100%;height:330px;margin:0;padding:0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;perspective:1400px}
.fc-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.fcard.flip .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:44px 36px 32px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fc-front{border-radius:3px;background:linear-gradient(180deg,transparent 46px,color-mix(in srgb,var(--blue) 40%,transparent) 46px 48px,transparent 48px),repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--rule) 65%,transparent) 31px 32px) 0 48px / 100% calc(100% - 64px) no-repeat,var(--sheet);box-shadow:var(--lift-2)}
.fc-back{border-radius:1px;background:linear-gradient(180deg,var(--note-edge) 0 18px,transparent 18px),var(--note);color:var(--note-ink);box-shadow:var(--note-shadow);transform:rotateY(180deg) rotate(.7deg)}
.fc-face small{position:absolute;top:14px;inset-inline:24px;font:500 13.5px/1.3 var(--head);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-back small{position:static;white-space:normal;color:var(--note-ink);opacity:.82}
/* the front asks: the key point's line as the question, then the term to recall */
.fc-q{display:block;max-width:44ch;margin-bottom:-4px;font:500 17px/1.5 var(--head);color:var(--ink-2);text-wrap:balance}
.fc-face b{font:700 clamp(24px,4.6vw,34px)/1.3 var(--head);color:var(--ink);unicode-bidi:plaintext;overflow-wrap:anywhere}
.fc-back b{color:var(--note-ink)}
.fc-face em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:14.5px;color:var(--ink-3)}
.fc-back em{max-width:52ch;color:var(--note-ink);line-height:1.5}
.fcard:hover .fc-front{box-shadow:var(--lift-2),0 0 0 1px var(--rule-2)}
.fcacts{display:flex;justify-content:center;gap:var(--s3);margin:var(--s6) 0 var(--s4)}
.fcacts .btn{flex:1 1 0;max-width:260px}
.fcmeta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;font-size:14px;color:var(--ink-3)}
.fcbox{display:inline-flex;align-items:center;gap:10px}
.fcbox-m{display:inline-flex;gap:4px}
.fcbox .mag.sm{width:12px;height:12px;border-width:1.5px}
.fckeys{margin-top:var(--s5);font-size:13.5px;line-height:1.9;color:var(--ink-3);text-align:center}
.fckeys kbd{display:inline-block;min-width:22px;padding:0 6px;border:1px solid var(--rule-3);border-radius:5px;background:var(--sheet);box-shadow:var(--key-shadow);font:500 12.5px/1.6 var(--head);color:var(--ink-2)}
.fcback{margin-top:var(--s4)}
.fcdone{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s7) 0;text-align:center}
.fcdone h1{font-size:28px}
.fcdone h1:focus{outline:none}
.fcd-bit{display:inline-flex;align-items:flex-end;gap:2px}
.fcd-bit .hand{margin-bottom:30px;transform:rotate(-5deg)}
.fcd-sum{max-width:52ch;color:var(--ink-2)}
.fcdone .pbar{width:min(320px,100%)}
.fctray{justify-content:center;display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
@media (hover:none){ .fckeys{display:none} }

/* ---------- narrower boards ---------- */
@media (max-width:1080px){
  .exlayout{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .exmap{position:static;max-height:none;overflow:visible;padding:0}
  .exs-side{position:static}
  .deck{grid-template-columns:minmax(0,1fr) minmax(130px,190px) 136px}
  .dk-due{grid-column:1;grid-row:2;padding-inline-start:20px}
}
@media (max-width:760px){
  .exs-h h1,.exr-h h1{font-size:25px}
  .exopt{min-height:0;padding-block:12px}
  .exrow{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4)}
  .exr-n{grid-column:1 / -1;grid-row:2;gap:var(--s6);padding-inline-start:20px}
  .exr-n > div{min-width:0}
  .exr-a .btn{min-width:0}
  .exbar{margin-top:calc(-1 * var(--s5));margin-inline:-16px;border-radius:0;border-inline:0;gap:var(--s3);padding:8px 16px}
  .exb-t{display:none}
  .exbar .pbar{display:none}
  .exq .qq{font-size:18px}
  .exnav{gap:var(--s2)}
  .exnav .btn{flex:1 1 auto}
  .exnav .exflag{order:3;flex-basis:100%}
  .exdoms li{grid-template-columns:28px minmax(0,1fr)}
  .exdoms .pbar{grid-column:2}
  .exscore{grid-template-columns:minmax(0,1fr)}
  .score .big{font-size:72px}
  .domrow{grid-template-columns:minmax(0,1fr) 80px}
  .domrow .pbar{grid-column:1;grid-row:2}
  .domr-p{grid-row:1 / span 2;grid-column:2}
  .exq .mrowq{grid-template-columns:minmax(0,1fr)}
  .deck{grid-template-columns:minmax(0,1fr) auto}
  .dk-p{grid-column:1 / -1;grid-row:2;padding-inline-start:20px}
  .dk-due{grid-column:1 / -1;grid-row:3}
  .dk-a{grid-column:2;grid-row:1}
  .dk-a .btn{min-width:0}
  .fcard{height:300px}
  .fc-face{padding:44px 20px 24px}
  .fc-q{font-size:16px}
  .fcprog{grid-template-columns:auto minmax(0,1fr)}
  .fcscore{grid-column:1 / -1}
}

/* 40-cert.css */
/* ===================================================================== certificates, verification and the trust page (pages-cert.js)
   The certificate is a formal document pinned to the board: white paper, a fine double frame, the seal from Art.medal and
   typographic hierarchy only. It keeps its own fixed light palette (the light-theme token values, repeated here on purpose)
   so it reads and prints the same in both themes. Its type scales with its own width (container units) like a page. */

/* ---------- the certificate ---------- */
.tcert{
  --c-paper:#FFFFFF; --c-ink:#1B1D21; --c-ink-2:#3A3F46; --c-ink-3:#565C64; --c-rule:#DADEE1; --c-rule-2:#C5CAD0; --c-rule-3:#A9AFB6;
  color-scheme:light;container-type:inline-size;position:relative;display:flex;flex-direction:column;width:100%;max-width:1060px;aspect-ratio:297 / 210;margin:0;
  background:var(--c-paper);color:var(--c-ink);border-radius:2px;box-shadow:var(--lift-2);overflow:hidden;font-family:var(--body);text-align:start;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.tcert::before,.tcert::after{content:"";position:absolute;pointer-events:none}
.tcert::before{inset:1.7cqi;border:1px solid var(--c-rule-3)}
.tcert::after{inset:2.2cqi;border:1px solid var(--c-rule)}
.tcert .tc-head{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2cqi;padding:4.6cqi 5.6cqi 0}
.tcert .tc-brand{display:flex;align-items:center;gap:1.2cqi}
.tcert .tc-brand .logo{width:max(28px,4cqi);height:max(28px,4cqi)}
.tcert .tc-brand b{display:block;font:700 max(14px,1.75cqi)/1.15 var(--head);color:var(--c-ink)}
.tcert .tc-brand small{display:block;margin-top:.2cqi;font:500 max(10px,1cqi)/1.2 var(--head);letter-spacing:.06em;color:var(--c-ink-3)}
/* the kind of certificate: the Hebrew label first, its English name under it (as the track's English name sits under the track), then the code */
.tcert .tc-kind{display:flex;flex-direction:column;align-items:flex-end;gap:.25cqi;text-align:end}
.tcert .tc-he{display:flex;align-items:center;gap:.8cqi;font:700 max(14px,1.8cqi)/1.2 var(--head);color:var(--c-ink)}
.tcert .tc-he::before{content:"";width:max(7px,.8cqi);height:max(7px,.8cqi);border-radius:50%;background:var(--pc)}
.tcert .tc-en{font:500 max(10px,1.05cqi)/1.25 var(--head);letter-spacing:.06em;color:var(--c-ink-3)}
.tcert .tc-kind small{margin-top:.35cqi;font:500 max(10px,1.15cqi)/1.2 var(--mono);letter-spacing:.08em;color:var(--c-ink-2)}
.tcert .tc-main{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45cqi;padding:1.5cqi 9cqi;text-align:center}
.tcert .tc-lead{font-size:max(13px,1.55cqi);line-height:1.4;color:var(--c-ink-2)}
.tcert .tc-name{max-width:100%;margin:.5cqi 0 1.3cqi;padding:0 3cqi 1cqi;border-bottom:2px solid var(--pc);font:700 max(24px,4.5cqi)/1.15 var(--head);letter-spacing:-.01em;color:var(--c-ink);overflow-wrap:anywhere}
.tcert .tc-track{font:700 max(17px,2.6cqi)/1.25 var(--head);color:var(--c-ink)}
.tcert .tc-entitle{font:500 max(10px,1.1cqi)/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}
.tcert .tc-detail{margin-top:.9cqi;font-size:max(12.5px,1.4cqi);color:var(--c-ink-2)}
.tcert .tc-skills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;max-width:70cqi;margin:.9cqi 0 0;padding:0;font-size:max(11px,1.15cqi);line-height:1.6;color:var(--c-ink-3)}
.tcert .tc-skills li + li::before{content:"·";margin:0 .9cqi;color:var(--c-rule-3)}
.tcert .tc-foot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:3cqi;padding:0 5.6cqi}
.tcert .tc-ids{display:flex;flex-direction:column;gap:.9cqi;margin:0}
.tcert .tc-ids dt{font:500 max(9.5px,1.05cqi)/1.3 var(--head);color:var(--c-ink-3)}
.tcert .tc-ids dd{margin:0;font:600 max(12px,1.4cqi)/1.3 var(--head);color:var(--c-ink)}
.tcert .tc-ids dd.mono{font-family:var(--mono);font-weight:500;letter-spacing:.08em}
.tcert .tc-medal{display:grid;place-items:center}
.tcert .tc-medal .medal{display:block;width:max(64px,10.5cqi);height:auto}
.tcert .tc-medals{display:flex;justify-content:center;gap:.4cqi}
.tcert .tc-medals .medal{width:max(40px,6cqi);height:auto}
.tcert .tc-sign{justify-self:end;min-width:min(100%,20cqi);text-align:center}
.tcert .tc-sig{display:block;padding:0 1cqi .7cqi;border-bottom:1px solid var(--c-ink-3);font:600 max(14px,1.8cqi)/1.2 var(--head);color:var(--c-ink)}
.tcert .tc-sign small{display:block;margin-top:.5cqi;font-size:max(10px,1.1cqi);color:var(--c-ink-3)}
.tcert .tc-verify{position:relative;display:flex;align-items:center;justify-content:center;gap:.7cqi;padding:1.8cqi 5.6cqi 4cqi;font-size:max(10px,1.05cqi);line-height:1.3;color:var(--c-ink-3)}
.tcert .tc-verify .ic{width:max(12px,1.3cqi);height:max(12px,1.3cqi);color:var(--c-ink-2)}
.tcert .tc-verify .mono{color:var(--c-ink-2);overflow-wrap:anywhere}
.tcert.small{max-width:860px}
/* a preview is marked as a sample across the paper, so it can never pass for the real one */
.tcert .tc-sample{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:700 17cqi/1 var(--head);color:var(--c-ink);opacity:.06;transform:rotate(-12deg);pointer-events:none;user-select:none}
@container (max-width:620px){
  .tcert .tc-head{padding:7cqi 7cqi 0}
  .tcert .tc-main{padding:5cqi 6cqi}
  .tcert .tc-foot{grid-template-columns:minmax(0,1fr) auto;padding:0 7cqi;gap:4cqi}
  .tcert .tc-medal{grid-column:2;grid-row:1 / span 2;align-self:center}
  .tcert .tc-sign{grid-column:1;justify-self:start;text-align:start}
  .tcert .tc-verify{padding:4cqi 7cqi 7cqi;justify-content:flex-start;text-align:start}
  .tcert .tc-skills{gap:1cqi 4cqi}
  .tcert .tc-skills li + li::before{content:none}
}
@media (max-width:760px){ .tcert{aspect-ratio:auto} }

/* ---------- cert.<id>: the page around it ---------- */
.cert-h{margin-bottom:var(--s7)}
.cert-h .sub{max-width:72ch}
.certbar{margin-top:var(--s5)}
.cb-acts{display:inline-flex;flex-wrap:wrap;gap:var(--s3);max-width:100%;padding:10px;border:1px solid var(--tray-edge);border-radius:10px;background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.45)}
.cb-url{margin-top:var(--s3);font-size:14px;color:var(--ink-3);overflow-wrap:anywhere}
.cb-url .mono{color:var(--ink-2)}
.cert-st > h2,.cert-prev h2{font-size:21px}
.cert-st > h2{margin-bottom:var(--s5)}
.csteps{list-style:none;margin:0;padding:0;max-width:720px}
.cstep{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s7)}
.cstep:not(:last-child)::before{content:"";position:absolute;inset-inline-start:14px;top:36px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--rule-3) 0 5px,transparent 5px 10px)}
.cstep .mag{width:30px;height:30px;font-size:13px}
.cs-b{min-width:0}
.cs-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding-top:2px}
.cs-t b{font:600 17px/1.4 var(--head)}
.cs-st{font:500 13px var(--head);color:var(--ink-3)}
.cstep.done .cs-st{color:var(--green-ink)}
.cstep.cur .cs-st{color:var(--blue)}
.cs-d{margin-top:2px;font-size:15.5px;color:var(--ink-2)}
.cstep .pbar{max-width:320px;margin-top:var(--s3)}
.cstep .btn,.cstep .lnk{margin-top:var(--s3)}
.cert-tray{display:flex;flex-wrap:wrap;gap:var(--s3)}
.cert-prev{margin-top:var(--s9)}

/* ---------- #verify ---------- */
.vf-top{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:var(--s8);align-items:start}
.vf-form label{display:block;margin-bottom:var(--s2);font:600 16px var(--head);color:var(--ink)}
.vf-form .qin input.vf-in{min-height:48px;font:500 20px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.vf-form .qin input.vf-in::placeholder{letter-spacing:.14em;color:var(--ink-3)}
.vf-form .qin .btn{height:48px}
.vf-hint{margin-top:var(--s2);font-size:14px;color:var(--ink-3)}
.vf-mean > h2{font-size:18px;margin-bottom:var(--s3)}
.vf-mean ul{max-width:60ch;margin:0 0 var(--s3);padding-inline-start:20px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.vf-mean li + li{margin-top:6px}
.vf-res{margin-top:var(--s8)}
.vf-res > .alert{max-width:720px}
.vf-res > .alert p{margin:0}
.vf-res > .alert p + p{margin-top:var(--s2)}
/* the valid result keeps the start edge of the heading and the form above it (status, facts, then the certificate) */
.vf-ok{max-width:860px;margin-block:0 var(--s7);margin-inline:0}
.vf-st{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.5}
.vf-st .mag{width:36px;height:36px}
.vf-st .mag .ic{width:17px;height:17px}
.vf-st b{margin-inline-end:8px;font:700 22px var(--head);color:var(--green-ink)}
.vf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4) var(--s6);margin:var(--s5) 0 var(--s4);padding:var(--s4) 0;border-block:1px solid var(--rule)}
.vf-facts dt{font:500 13.5px var(--head);color:var(--ink-3)}
.vf-facts dd{margin:2px 0 0;font:600 17px/1.4 var(--head);color:var(--ink)}
.vf-facts dd .mono{font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.vf-fine{max-width:72ch;font-size:14.5px;color:var(--ink-3)}

/* ---------- #trust: a document for hiring managers, with its contents on the inline-start side ---------- */
.trust .tr-h{margin-bottom:var(--s8)}
.tr-h .sub{max-width:68ch}
.tr-asof{margin-top:var(--s2);font-size:14px;color:var(--ink-3)}
.tr-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s9);align-items:start}
.tr-toc{position:sticky;top:calc(var(--rail-h) + var(--s6))}
.tr-toc-h{margin-bottom:var(--s2);font:600 14px var(--head);color:var(--ink-3)}
.tr-toc ol{list-style:none;margin:0;padding:0}
.tr-toc a{display:flex;align-items:center;min-height:40px;padding:4px 0;font:500 14.5px/1.35 var(--head);color:var(--ink-2)}
.tr-toc a:hover{color:var(--ink)}
.tr-toc a.on{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:3px;text-underline-offset:6px}
.tr-doc{max-width:72ch}
.tr-doc h2{margin:var(--s9) 0 var(--s3);font-size:23px;scroll-margin-top:calc(var(--rail-h) + var(--s5))}
.tr-doc h2:focus{outline:none}
.tr-sec:first-child h2{margin-top:0}
.tr-doc h3{margin:0 0 var(--s2);font-size:17px}
.tr-doc ul,.tr-doc ol{margin:0 0 var(--s4);padding-inline-start:22px}
.tr-doc li::marker{color:var(--ink-3)}
.tr-doc .tablewrap{position:relative}
.tr-tab{margin:var(--s2) 0 var(--s5);font-size:14.5px}
.tr-tab caption{margin-bottom:var(--s2);font:600 15px var(--head);text-align:start;color:var(--ink)}
.tr-tab tbody th{padding:10px 12px;border-bottom:1px solid var(--rule);font:500 14.5px/1.4 var(--body);color:var(--ink)}
.tr-pool tbody th{min-width:190px}
.tr-code{margin-inline-start:6px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.tr-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.tr-yes li::marker{color:var(--green)}
.tr-no li::marker{color:var(--ink-3)}
.tr-rec{max-width:54ch;margin-top:var(--s4)}
.tr-act{margin-top:var(--s5)}
@media (max-width:1080px){
  .tr-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .tr-toc{position:static;padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
  .tr-toc ol{columns:2;column-gap:var(--s6)}
  .tr-toc a{break-inside:avoid}
  .vf-top{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
}
@media (max-width:760px){
  .tr-cols{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .cb-acts{display:flex}
  .cb-acts .btn{flex:1 1 100%}
}

/* ---------- print: only the certificate, on one A4 landscape sheet ---------- */
@page cert{size:A4 landscape;margin:0}
@media print{
  html,body,#app{min-height:0!important;height:auto!important;background:#fff!important}
  main.wrap{max-width:none!important;padding:0!important}
  #view,#certbox,.vf,#vf-res{margin:0!important;padding:0!important}
  #certbox > *:not(.tcert),.vf > *:not(#vf-res),#vf-res > *:not(.tcert){display:none!important}
  .tcert{page:cert;width:297mm;height:209.5mm;max-width:none!important;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none;break-inside:avoid}
}

/* 50-market.css */
/* ===================================================================== market: the teachers marketplace (pages-market.js)
   #teachers, teacher.<slug>, #teach, #lessons, #inbox, #confirm, #reset, and App.emailCard on #me.
   The teachers read like a roster pinned on the board, the classes like a timetable, a teacher's booking panel is the one
   paper sheet on the page, and messages between teacher and student are sticky notes.
   Also the base of classes this area owns and others reuse: .tphoto .tc-top .stile .stiles .cv .bio .edu .frow (admin),
   and the helpers the studio (60) and the campus (70) share: .mk-ph .mk-acts .mk-tray .mk-flow .blist .brow. */

/* ---------- page head with its actions at the inline end ---------- */
.page-h.mk-ph{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s4) var(--s7)}
.page-h.mk-ph > div:first-child{flex:1 1 440px;min-width:0}
.mk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
/* the marker tray: the screen's main actions resting together on an aluminium ledge */
.mk-tray{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:7px 9px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 1px 0 var(--alu-hi)}
.mk-flow > .sec:first-child{margin-top:var(--s2)}
.mk-center{display:flex;justify-content:center;margin-top:var(--s2)}
.mk-none{padding-block:var(--s6)}
/* a count written beside its heading */
.mk-n{margin-inline-start:var(--s2);font:500 14px var(--head);font-variant-numeric:tabular-nums;color:var(--ink-3);vertical-align:2px;white-space:nowrap}
/* the foundation's .form label stacks its children; a checkbox label stays one line (scoped to this area's forms) */
.tch-form .form label.chk,.mk-narrow .form label.chk,.sp-form .form label.chk,.sp-submit .form label.chk,.sc-main .form label.chk,.addclass .form label.chk,.cset .form label.chk{flex-direction:row;align-items:flex-start;gap:9px;font:400 15.5px/1.5 var(--body);color:var(--ink)}
/* a positive action repeated on every row: a white marker with a blue cap, so the page keeps one blue body */
.brow .btn.yes,.ccard .btn.yes{--cap:var(--blue)}

/* ---------- people: a round photo pinned to the board ---------- */
.tphoto{display:block;flex:none;border-radius:50%;object-fit:cover;background:var(--board-3);box-shadow:0 0 0 3px var(--sheet),0 0 0 4px var(--rule-2),var(--lift)}
.tphoto.ph{display:inline-grid;place-items:center;color:var(--ink-2);font-family:var(--head);font-weight:600;line-height:1;user-select:none}
.tc-top{display:flex;align-items:center;gap:var(--s4);min-width:0}
.tc-top > div{min-width:0}
.tc-top h2,.tc-top h3{font-size:18px;font-weight:600;line-height:1.3}
.tc-top p{margin-top:2px;color:var(--ink-2);font-size:15px;line-height:1.45}

/* ---------- shared form row ---------- */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:end;gap:var(--s4)}

/* ---------- a tally written on the board (studio overview, admin teachers) ---------- */
.stiles{display:flex;flex-wrap:wrap;row-gap:var(--s5)}
.stile{display:flex;flex-direction:column;gap:2px;flex:1 1 130px;min-width:0;padding:2px var(--s5);border-inline-start:1px solid var(--rule);color:var(--ink);text-decoration:none}
.stile:first-child{border-inline-start:0;padding-inline-start:0}
.stile .ic{width:16px;height:16px;margin-bottom:var(--s1);color:var(--ink-3)}
.stile b{font:700 30px/1.15 var(--head);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.stile small{font-size:14px;line-height:1.4;color:var(--ink-3)}
a.stile:hover{text-decoration:none}
a.stile:hover small{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---------- a CV drawn as a thin line with marker dots ---------- */
.cv{list-style:none;margin:0;padding:0}
.cv li{position:relative;padding-inline-start:var(--s6);padding-bottom:var(--s5);line-height:1.5}
.cv li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.cv li::after{content:"";position:absolute;inset-inline-start:4.5px;top:22px;bottom:2px;width:1px;background:var(--rule-3)}
.cv li:last-child{padding-bottom:0}
.cv li:last-child::after{display:none}
.cv li.edu::before{background:var(--sheet);box-shadow:inset 0 0 0 2px var(--blue)}
.cv b{font:600 17px/1.45 var(--head);color:var(--ink)}
.cv li.edu b .ic{width:15px;height:15px;color:var(--blue);vertical-align:-2px}
.cv small{margin-inline-start:6px;font:500 13.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.cv p{margin-top:var(--s1);max-width:64ch;color:var(--ink-2);font-size:16px;line-height:1.65}
.bio{margin:0;max-width:66ch;font-size:17px;line-height:1.75;color:var(--ink);text-wrap:pretty}

/* ---------- #teachers: filters on the ledge, then the roster ---------- */
.mktf{margin-bottom:var(--s2);padding-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.mktf-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s4)}
.mktf-row > label{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:0;font:500 14px var(--head);color:var(--ink-2)}
.mktf-row > label.grow{flex:3 1 280px}
.mktf-row > label.chk{flex:0 0 auto;flex-direction:row;align-items:center;gap:9px;min-height:42px;font:400 15px var(--body);color:var(--ink)}
.mktf-row > label.chk input{margin-top:0}
.mktf-row select,.mktf-row input:not([type=checkbox]){width:100%}
.mk-qbox{position:relative;display:block}
.mk-qbox .ic{position:absolute;inset-block:0;inset-inline-start:12px;margin-block:auto;color:var(--ink-3);pointer-events:none}
.mk-qbox input{padding-inline-start:40px}
.mk-sec{--tg-cols:minmax(0,1.3fr) minmax(0,1fr) minmax(150px,auto)}
.mk-sec .sec-h small{font-size:14px}
.tg-h{display:grid;grid-template-columns:var(--tg-cols);gap:var(--s5);padding:0 var(--s3) var(--s2);border-bottom:2px solid var(--ink);font:600 14px var(--head);color:var(--ink-2)}
.tg-h span:last-child{text-align:end}
.tgrid{list-style:none;margin:0;padding:0}
.tgrid > li{border-bottom:1px solid var(--rule)}
.tcard{display:grid;grid-template-columns:var(--tg-cols);gap:var(--s3) var(--s5);align-items:center;padding:var(--s4) var(--s3);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;transition:background-color .15s}
.tcard:hover{text-decoration:none;background:var(--blue-wash)}
.tcard:hover h3{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tc-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.tc-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:end}
.tc-price b{font:700 20px/1.2 var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-price small{font-size:13.5px;color:var(--ink-3)}
.tc-go{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s1);font:500 14px var(--head);color:var(--blue)}
/* classes that open soon: a timetable led by the opening date */
.oboard{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ocard{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--s3) var(--s5);align-items:start;padding:var(--s5) var(--s3);border-bottom:1px solid var(--rule)}
.o-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:60px;border-radius:var(--r-paper);background:var(--sheet);box-shadow:var(--lift);color:var(--ink)}
.o-date b{font:700 23px/1 var(--head);font-variant-numeric:tabular-nums}
.o-date small{margin-top:3px;font:500 12.5px var(--head);color:var(--ink-3)}
.o-date.none{color:var(--ink-3)}
.oc-main{min-width:0}
.oc-main h3,.offer h3{font-size:18px}
.oc-main p,.offer p{margin-top:var(--s1);max-width:62ch;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.oc-main .tags,.offer .tags{margin-top:var(--s3)}
.oc-by{display:block;margin-top:var(--s2);color:var(--ink-3);font-size:14px}
.oc-side,.offer-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);flex:none}
.ocard .price,.offer .price{font:700 18px/1.3 var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- teacher.<slug>: the header on the board, the booking panel is the one sheet ---------- */
.tp-prev{margin-bottom:var(--s5)}
.tflash{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s6) var(--s9);margin:var(--s2) 0 var(--s9)}
.tf-main{display:flex;align-items:flex-start;gap:var(--s6);min-width:0}
.tf-main > div{min-width:0}
.tf-main > .tphoto{margin-top:4px}
.tf-main h1{font-size:34px;line-height:1.2}
.tf-head{margin-top:var(--s2);max-width:56ch;font-size:18px;line-height:1.5;color:var(--ink-2)}
.tf-main .tags{margin-top:var(--s4)}
.tf-stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:var(--s5) 0 0;padding:0;list-style:none;font-size:15px;color:var(--ink-3)}
.tf-stats b{margin-inline-end:5px;font:600 18px var(--head);font-variant-numeric:tabular-nums;color:var(--ink)}
.tf-side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);min-width:220px;padding-inline-start:var(--s6);border-inline-start:1px solid var(--rule)}
.tf-price b{display:block;font:700 34px/1.1 var(--head);font-variant-numeric:tabular-nums}
.tf-price small{display:block;margin-top:2px;font-size:14px;color:var(--ink-3)}
.tf-side .btn{margin-top:var(--s1)}
.tp-body{column-gap:var(--s9)}
.tp-main{min-width:0}
.tp-sec + .tp-sec{margin-top:var(--s9)}
.tp-sec > h2,.tp-sec > .sec-h{margin-bottom:var(--s4)}
.tp-sec h2:focus{outline:none}
.tp-langs{margin-top:var(--s4);font-size:15px;color:var(--ink-3)}
.tp-certs li{justify-content:flex-start;align-items:flex-start;gap:var(--s3)}
.tp-certs li > .ic{margin-top:3px;color:var(--ink-3)}
.tp-certs .tag{margin-inline-start:4px}
.offer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s6);padding-block:var(--s5);border-top:1px solid var(--rule)}
.tp-sec > h2 + .offer{border-top:2px solid var(--ink)}
.offer > div:first-child{min-width:0}
.tp-side{display:flex;flex-direction:column;gap:var(--s7);min-width:0}
#book{scroll-margin-top:calc(var(--rail-h) + 16px)}
#book .card-h{margin-bottom:var(--s3)}
#book h2{font-size:20px}
#book h2:focus{outline:none}
#book .ultabs{gap:var(--s4);margin-bottom:var(--s4)}
#book .alert{margin-bottom:var(--s4)}
#book .empty{padding-block:var(--s6)}
.slots{display:flex;flex-direction:column;max-height:430px;overflow-y:auto;margin-inline-end:-6px;padding-inline-end:6px;overscroll-behavior:contain}
.sday{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);align-items:start;padding-block:var(--s3);border-top:1px solid var(--rule)}
.sday:first-child{border-top:0;padding-top:0}
.sday > b{padding-top:6px;font:600 15px/1.3 var(--head)}
.sday > b small{display:block;font:500 13px var(--mono);color:var(--ink-3)}
.sday > div{display:flex;flex-wrap:wrap;gap:6px}
.slot{min-width:64px;height:40px;padding:0 10px;border:1px solid var(--rule-3);border-radius:var(--r-sm);background:var(--sheet);color:var(--ink);font:500 14px var(--mono);font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:var(--key-shadow);transition:border-color .15s,background-color .15s}
.slot:hover{border-color:var(--blue);color:var(--blue-ink)}
.slot.on,.slot[aria-pressed=true]{border:2px solid var(--blue);padding:0 9px;background:var(--blue-wash-2);color:var(--blue-ink);font-weight:600;box-shadow:none}
.bookbox{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule)}
.bk-sum{display:flex;flex-direction:column;gap:2px}
.bk-sum b{font:600 17px var(--head)}
.bk-sum span{font-size:14.5px;color:var(--ink-3)}
.bookbox label{display:flex;flex-direction:column;gap:6px;font:500 15px var(--head);color:var(--ink-2)}
.bookbox label small{font:400 13.5px var(--body);color:var(--ink-3)}
.bookbox .btn.pri{align-self:stretch}
.tp-mine .sec-h{margin-bottom:var(--s2)}
.tp-mine h3{font-size:16px}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s2);border-top:1px solid var(--rule);font-size:15px}
.mini-list li:first-child{border-top:0}

/* ---------- booking rows (#lessons and the studio): the date in marker, the rest written beside it ---------- */
.blist{display:flex;flex-direction:column}
.brow{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:var(--s3) var(--s5);align-items:start;padding-block:var(--s5);border-top:1px solid var(--rule)}
.blist > .brow:first-child{border-top:0;padding-top:var(--s2)}
.bwhen{display:flex;flex-direction:column;gap:2px;min-height:44px;padding-inline-end:var(--s4);border-inline-end:1px solid var(--rule)}
.bwhen small{font:500 13px/1.3 var(--head);color:var(--ink-3)}
.bwhen b{font:600 15px/1.3 var(--head);color:var(--ink);white-space:nowrap}
.bwhen span{font:500 15px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bwhen.none{justify-content:center;color:var(--ink-3)}
.bmain{min-width:0}
.bmain > b{font:600 17px/1.4 var(--head)}
.bmain > small{display:block;margin-top:2px;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.bmain > .muted.small{margin-top:var(--s2)}
.brow .bacts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2);max-width:380px}
/* a message between teacher and student is a sticky note */
.tnote,.snote{display:flex;align-items:flex-start;gap:var(--s2);width:fit-content;max-width:min(60ch,100%);margin-top:var(--s3);padding:9px 13px;border-radius:1px;font-size:15px;line-height:1.5;box-shadow:var(--note-shadow);transform:rotate(-.3deg)}
.tnote{background:var(--note);color:var(--note-ink)}
.snote{background:var(--note-blue);color:var(--ink);transform:rotate(.3deg)}
.tnote .ic,.snote .ic{flex:none;margin-top:3px;opacity:.75}
.ls-sec .alert{margin-bottom:var(--s4);max-width:760px}
/* a yellow note keeps its dark ink in the dim room too */
.ls-sec .alert.warn,.ls-sec .alert.warn .ic{color:var(--note-ink)}

/* ---------- #inbox: notifications written down the board ---------- */
.inbox{max-width:780px}
.nlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.nlist > li{border-bottom:1px solid var(--rule)}
.nitem{display:flex;align-items:flex-start;gap:var(--s3);min-height:48px;padding:var(--s4) var(--s3);border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-size:16px;line-height:1.5}
.nitem:hover{text-decoration:none;background:var(--blue-wash);color:var(--ink)}
.ni-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-top:-2px;border-radius:50%;color:var(--ink-3)}
.ni-t{min-width:0}
.ni-t small{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-3)}
.nitem.new{color:var(--ink);font-weight:500}
.nitem.new .ni-ic{color:var(--sheet);background:radial-gradient(circle at 38% 32%,var(--blue-2),var(--blue) 58%,var(--blue-cap));box-shadow:var(--magnet-shadow)}

/* ---------- #teach: the pitch, the steps as magnets, the needs on a note, the terms on a sheet ---------- */
.teachflash{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:var(--s8) var(--s10);align-items:start;margin-top:var(--s5)}
.tch-copy h1{max-width:16ch;font-size:clamp(30px,3.6vw,42px);line-height:1.15;letter-spacing:-.3px}
.tch-copy .lead{margin-top:var(--s5);max-width:56ch;font-size:18px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.tch-copy .mk-tray{margin-top:var(--s7)}
.tch-how h2{margin-bottom:var(--s5);font-size:20px}
/* static steps use the outline numbered magnet (as #pricing and studio.earnings do): a filled blue magnet means "current"
   everywhere on the site. The rule between magnets is drawn per step so it never shows through an open ring. */
.steps3{position:relative;display:flex;flex-direction:column;gap:var(--s6);margin:0;padding:0;list-style:none}
.steps3 li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s4)}
.steps3 li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:13px;top:32px;bottom:calc(4px - var(--s6));width:2px;border-radius:2px;background:var(--rule-2)}
.steps3 .mag{z-index:1}
.steps3 h3{font-size:18px;line-height:1.5}
.steps3 p{margin-top:2px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.tch-grid{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:var(--s8) var(--s9);align-items:start}
.tch-req{--tilt:-1deg;padding:var(--s6) var(--s5) var(--s5)}
.tch-req h2,.sc-tips h2{margin-bottom:var(--s3);font:600 18px var(--head);color:inherit}
.tch-req ul{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:0;list-style:none}
.tch-req li{display:flex;align-items:flex-start;gap:var(--s2);font-size:15.5px;line-height:1.5}
.tch-req li .ic{flex:none;margin-top:3px}
.tch-terms{max-width:760px}
.tch-terms h2{margin-bottom:var(--s4);font-size:20px}
.terms{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding-inline-start:var(--s5);font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.terms li::marker{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.tch-form{max-width:560px}
.tch-form h2{margin-bottom:var(--s4)}
.tch-form h2:focus{outline:none}

/* ---------- #confirm, #reset and the email card on #me ---------- */
.mk-narrow{margin-top:var(--s7)}
.mk-narrow h1{margin-bottom:var(--s3);font-size:26px}
.mk-narrow .form{margin-top:var(--s5)}
.mk-narrow .alert + .btn{margin-top:var(--s5)}
.emailcard .em-addr{margin-top:calc(-1 * var(--s2));font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.emailcard .em-note{margin-top:var(--s3);font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.emailcard .btn{margin-top:var(--s4)}

/* ---------- narrower boards ---------- */
/* link-buttons inside this area's rows keep a finger-sized target */
.steptools .lnk,.aday .lnk,.brow .bacts .lnk,.cr-acts .lnk,.campside .lnk,.tp-mine .lnk,.st-cols .lnk,.owned .lnk,.tp-certs .lnk,.mk-acts .lnk{min-height:40px}
.fg-row{margin-top:var(--s2)}
/* small markers grow to a finger-sized target on touch screens (scoped to this area's containers) */
@media (pointer:coarse){
  .brow .btn.sm,.orow .btn.sm,.ccard .btn.sm,.stepb .btn.sm,.steptools .btn.sm,.reprow .btn.sm,.rep + .btn.sm,.sbform .btn.sm,.offer-side .btn.sm,.oc-side .btn.sm,.tp-sec .btn.sm,
  .st-sec .btn.sm,.ctrack .btn.sm,.croster .btn.sm,.photo-edit .btn.sm,.sc-main .btn.sm,.cleave .btn.sm,.emailcard .btn.sm,.status .btn.sm,.codebox .btn.sm,.cr-acts .btn.sm{height:40px}
}
@media (max-width:1080px){
  .teachflash{grid-template-columns:1fr;gap:var(--s8)}
  .tflash{grid-template-columns:1fr;align-items:start;gap:var(--s6)}
  .tf-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);min-width:0;padding:var(--s5) 0 0;border-inline-start:0;border-top:1px solid var(--rule)}
  .tf-side .btn{margin:0;margin-inline-start:auto}
}
@media (max-width:860px){
  .tch-grid{grid-template-columns:1fr}
  .tch-req{max-width:420px}
}
@media (max-width:760px){
  .page-h.mk-ph{align-items:flex-start}
  .page-h.mk-ph > div:first-child{flex-basis:100%}
  .tg-h{display:none}
  .tgrid{border-top:2px solid var(--ink)}
  .tcard{grid-template-columns:1fr;gap:var(--s3);padding:var(--s4) var(--s1)}
  .tc-price{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);text-align:start}
  .tc-go{margin:0;margin-inline-start:auto}
  .ocard{grid-template-columns:56px minmax(0,1fr);padding-inline:0}
  .oc-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}
  .tf-main{flex-direction:column;gap:var(--s4)}
  .tf-main h1{font-size:28px}
  .tf-side .btn{margin-inline-start:0}
  .offer{grid-template-columns:1fr}
  .offer-side{flex-direction:row;align-items:center;justify-content:space-between}
  .sday{grid-template-columns:1fr;gap:var(--s2)}
  .sday > b{display:flex;align-items:baseline;gap:var(--s2);padding-top:0}
  .brow{grid-template-columns:72px minmax(0,1fr)}
  .bwhen{padding-inline-end:var(--s3)}
  .brow .bacts{grid-column:1 / -1;justify-content:flex-start;max-width:none}
  .stiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) 0}
  .stile{padding-inline:var(--s3)}
  .stile:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
  .stile b{font-size:22px}
  .stile small{font-size:13px}
}
@media (max-width:420px){
  .stiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stile:nth-child(3n+1){border-inline-start:1px solid var(--rule);padding-inline-start:var(--s3)}
  .stile:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}
  .mk-tray{display:flex}
  .mk-tray .btn{flex:1 1 auto}
}

/* 60-studio.css */
/* ===================================================================== studio: the teacher's own corner of the board (pages-studio.js)
   #studio (overview), studio.bookings, studio.classes, studio.calendar, studio.profile, studio.earnings.
   The application status is a short note held up by a magnet (the status sentence, a ready count and one action; the full
   checklist is in the profile's submit panel). The figures are a tally written on the board (.stiles, in 50) once any of
   them is above zero, and one quiet line (.st-quiet) until then. Entries of a repeater are index cards, inline forms are sheets laid over a row, and tips are a sticky note.
   Booking rows (.blist .brow .bwhen .bmain .bacts .tnote .snote) are shared with #lessons and live in 50-market.css. */

/* ---------- sections ---------- */
.st-sec{min-width:0}
.st-sec + .st-sec{margin-top:var(--s9)}
.st-sec .sec-h small{font-size:14px}
.st-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s9);align-items:start}
.st-cols > section{min-width:0}
.st-cols .brow{grid-template-columns:84px minmax(0,1fr) auto}
.st-tally{margin-top:var(--s2)}
.sp-help{margin:calc(-1 * var(--s2)) 0 var(--s4);max-width:64ch;font-size:15px;line-height:1.55;color:var(--ink-3)}

/* ---------- the application status: a note held up by a magnet ---------- */
.status{position:relative;max-width:600px;margin:var(--s3) 0 var(--s9);padding:var(--s6) var(--s6) var(--s5);border-radius:1px;
  background:linear-gradient(180deg,var(--note-edge) 0 18px,transparent 18px),var(--note);color:var(--note-ink);box-shadow:var(--note-shadow)}
.status::before{content:"";position:absolute;top:-10px;inset-inline-start:50%;width:22px;height:22px;margin-inline-start:-11px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--blue-2),var(--blue) 58%,var(--blue-cap));box-shadow:var(--magnet-shadow)}
.status.ok{background:var(--note-green);color:var(--ink)}
.status.bad{background:var(--note-pink);color:var(--ink)}
.status h2{display:flex;align-items:center;gap:var(--s2);font-size:22px;color:inherit}
.status > p{margin-top:var(--s2);max-width:62ch;font-size:16px;line-height:1.6}
.status-line{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3);max-width:64ch;font-size:15.5px;line-height:1.55}
.status-line .ic{flex:none;margin-top:3px}
.status > .status-count{margin-top:var(--s3);font-size:16px;line-height:1.5}
.status-count b{font-weight:600}
.status-count .num{font-family:var(--head);font-weight:700;font-variant-numeric:tabular-nums}
.status .mk-acts{margin-top:var(--s5)}
/* the staff's note can be long: it is read on the board under the sticky note, never written on it */
.st-staff{display:flex;align-items:flex-start;gap:var(--s2);max-width:64ch;margin:calc(-1 * var(--s5)) 0 var(--s9);font-size:16px;line-height:1.6;color:var(--ink-2)}
.st-staff .ic{flex:none;margin-top:4px;color:var(--blue)}
.st-staff b{font-weight:600;color:var(--ink)}
/* nothing to count yet: one quiet line between two hairlines instead of a row of zeros */
.st-quiet{max-width:64ch;margin:0 0 var(--s9);padding-block:var(--s4);border-block:1px solid var(--rule);font-size:16px;line-height:1.6;color:var(--ink-2)}
/* what is still missing (the profile page's submit panel): empty boxes drawn in marker */
.checklist{margin:var(--s4) 0 0;padding:0;list-style:none}
.checklist li{display:flex;align-items:flex-start;gap:var(--s2);padding-block:3px;font-size:15px;line-height:1.5}
.checklist .ck{flex:none;width:15px;height:15px;margin-top:4px;border:2px solid currentColor;border-radius:3px;opacity:.75}

/* ---------- profile ---------- */
.sp-grid,.sc-grid{column-gap:var(--s9)}
.sp-lock{margin-bottom:var(--s6);max-width:760px}
.sp-form{min-width:0}
.sp-sec{min-width:0}
.sp-sec + .sp-sec{margin-top:var(--s9)}
.sp-sec > h2{margin-bottom:var(--s4)}
.sp-sec > .form{max-width:740px}
.photo-edit{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s6)}
.photo-edit label.btn{cursor:pointer}
.photo-edit label.btn:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.photo-edit p{margin-top:var(--s2);max-width:40ch}
.pathpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:2px var(--s5)}
.pathpick .chk{align-items:center;min-height:40px;padding-block:4px}
.pathpick .chk input{margin-top:0}
.pathpick .chk small{margin-inline-start:4px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
/* a repeater entry is an index card pinned to the board */
.rep{display:flex;flex-direction:column;gap:var(--s4);max-width:740px;margin-bottom:var(--s4)}
.reprow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(120px,170px);gap:var(--s3);padding:var(--s4);border-radius:var(--r-paper);background:var(--sheet);box-shadow:var(--lift)}
[data-rep=certs] .reprow{grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1.3fr)}
.reprow input,.reprow textarea{width:100%;min-width:0}
.reprow textarea{grid-column:1 / -1;min-height:76px}
.reprow .tag{grid-column:1;align-self:center;justify-self:start}
.reprow .btn.danger{grid-column:-2 / -1;justify-self:end}
.sp-save{margin-top:var(--s8)}
.sp-submit h2{margin-bottom:var(--s4);font-size:20px}
.sp-submit .checklist{margin:0 0 var(--s5)}
.sp-submit .form{gap:var(--s4)}
.sp-ready{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5);font-weight:500;color:var(--green-ink)}
.sp-go{width:100%;margin:var(--s5) 0 var(--s3)}
.termsbox{padding-block:var(--s3);border-block:1px solid var(--rule)}
.termsbox summary{min-height:32px;font:500 15px/32px var(--head);color:var(--blue)}
.termsbox[open] summary{margin-bottom:var(--s3)}
.termsbox .terms{max-height:300px;overflow-y:auto;padding-inline-end:var(--s2);font-size:14.5px}

/* ---------- prices and availability: the week as a timetable ---------- */
.sc-main{min-width:0}
.sc-slug{flex-wrap:nowrap;align-items:center}
.sc-slug > span{flex:none;font-size:15px}
.sc-slug input{flex:1 1 160px;min-width:0}
.avail{display:flex;flex-direction:column;max-width:760px;border-top:2px solid var(--ink)}
.aday{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--s3);align-items:center;min-height:56px;padding-block:var(--s2);border-bottom:1px solid var(--rule)}
.aday > b{font:600 15px var(--head)}
.aranges{display:flex;flex-wrap:wrap;gap:var(--s2)}
.arange{display:inline-flex;align-items:center;gap:6px;padding-block:2px;padding-inline:10px 2px;border-radius:2px;background:var(--tape);color:var(--tape-ink);font:500 14px var(--head)}
.arange input{width:auto;min-height:36px;padding:3px 6px;font:500 14px var(--mono);font-variant-numeric:tabular-nums}
.arx,.tagx{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.arx:hover,.tagx:hover{background:color-mix(in srgb,var(--tape-ink) 12%,transparent)}
.sc-bq{max-width:420px}
.sc-blocked{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0;padding:0;list-style:none}
.sc-blocked .tag{min-height:40px;padding-block:0;padding-inline:10px 0;font-size:14px}
.sc-tips{--tilt:.8deg;max-width:340px;padding:var(--s5)}
.sc-tips ul{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding-inline-start:var(--s4)}
.sc-tips li{font-size:15px;line-height:1.5}

/* ---------- bookings: an inline form is a sheet laid over the row ---------- */
.st-tabs{margin-bottom:var(--s4)}
.st-tabs .ultab small{margin-inline-start:4px;font:500 12.5px var(--mono);color:var(--ink-3)}
.sbform{display:flex;flex-direction:column;gap:var(--s3);max-width:560px;margin-top:var(--s4);padding:var(--s5);border-radius:var(--r-paper);background:var(--sheet);box-shadow:var(--lift-2)}
.sbform label,.addclass label{display:flex;flex-direction:column;gap:6px;font:500 15px var(--head);color:var(--ink-2)}
.sbform label small{font:400 13.5px var(--body);color:var(--ink-3)}
.sbform .mk-acts{margin-top:var(--s1)}
.sb-note{display:flex;align-items:flex-start;gap:var(--s2);max-width:62ch;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.sb-note .ic{flex:none;margin-top:3px;color:var(--blue)}

/* ---------- classes ---------- */
.olist{max-width:900px;border-top:2px solid var(--ink)}
.orow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s3) var(--s5);align-items:center;padding-block:var(--s4);border-bottom:1px solid var(--rule)}
.orow > div:first-child{min-width:0}
.orow b{font:600 17px/1.4 var(--head)}
.orow small{display:block;margin-top:2px;font-size:14px;color:var(--ink-3)}
.orow .offerform{grid-column:1 / -1}
.offerform{max-width:740px;margin-top:var(--s3);padding:var(--s5);border-radius:var(--r-paper);background:var(--sheet);box-shadow:var(--lift-2)}
.newoffer{margin-top:var(--s5)}
.newoffer > summary{display:inline-flex;list-style:none}
.newoffer > summary::-webkit-details-marker{display:none}
.newoffer[open] > summary{margin-bottom:var(--s2)}
.addclass{max-width:560px;margin-top:var(--s6)}
.addclass h3{margin-bottom:var(--s4)}

/* ---------- earnings: the billing module fills it ---------- */
.earnbox{min-height:140px}

@media (max-width:1080px){
  .st-cols{grid-template-columns:1fr;gap:var(--s8)}
}
@media (max-width:760px){
  .status{padding:var(--s5) var(--s4) var(--s4)}
  .st-cols .brow{grid-template-columns:72px minmax(0,1fr)}
  .photo-edit{flex-direction:column;align-items:flex-start}
  .reprow,[data-rep=certs] .reprow{grid-template-columns:1fr}
  .reprow .tag,.reprow .btn.danger{grid-column:1}
  .aday{grid-template-columns:1fr auto;grid-template-areas:"day add" "ranges ranges"}
  .aday > b{grid-area:day}
  .aday > .aranges{grid-area:ranges}
  .aday > .btn{grid-area:add}
  .orow{grid-template-columns:minmax(0,1fr) auto}
  .orow > .mk-acts{grid-column:1 / -1}
}

/* 70-campus.css */
/* ===================================================================== campus: classes (pages-campus.js)
   #campus (my classes, open classes, join by code), campus.<key> and studio.class.<key> (the class page, student and teacher
   mode), App.campusSide (inside the lesson side column) and App.zoomCard.
   The class track is the signature system: a line of magnets, done green, the current one blue, the rest outlined; the
   current step is pinned out on paper like the lesson board's "you stopped here" flag. The join code is a strip of tape.
   The progress board reuses the social area's leaderboard (.lb .lbrow .rk .lbs) and only adds scoped tweaks. */

/* ---------- the list ---------- */
.camp-grid{column-gap:var(--s9)}
.camp-main,.camp-side{min-width:0}
.camp-sec + .camp-sec{margin-top:var(--s9)}
.camp-sec .sec-h small{font-size:14px}
.camp-none{padding-block:var(--s5);color:var(--ink-3)}
/* the next Zoom session: a blue note stuck at the top of the board */
.zoomcard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);max-width:760px;margin:var(--s1) 0 var(--s8);padding:var(--s5) var(--s6);
  border-radius:1px;background:var(--note-blue);color:var(--ink);box-shadow:var(--note-shadow);transform:rotate(-.4deg)}
.zoomcard > .ic{flex:none;color:var(--blue)}
.zc-t{flex:1 1 240px;min-width:0}
.zc-t h2{font-size:20px;color:inherit}
.zc-t p{margin-top:2px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cplist{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.ccard{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,200px) auto;gap:var(--s3) var(--s6);align-items:center;padding-block:var(--s5);border-bottom:1px solid var(--rule)}
.cc-main{min-width:0}
.cc-main h3{font-size:18px}
.cc-main p{margin-top:var(--s1);max-width:60ch;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cc-main p.cc-meta{margin-top:var(--s2);font-size:14px;color:var(--ink-3)}
.cc-prog{display:flex;flex-direction:column;gap:6px}
.cc-prog small{font-size:13.5px;color:var(--ink-3)}
.cjoin h2{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);font-size:18px}
.cjoin h2 .ic{color:var(--ink-3)}
.cjoin p{margin-bottom:var(--s4);font-size:15px;color:var(--ink-2)}
.cjoin .qin{flex-wrap:nowrap}
.cjoin .qin input{flex:1 1 auto;min-width:0}
.cj-code{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cj-code::placeholder{font-family:var(--body);letter-spacing:0;text-transform:none}
.owned{margin-top:var(--s8)}
.owned h2{margin-bottom:var(--s3);font-size:18px}
.owned ul{margin:0 0 var(--s3);padding:0;list-style:none;border-top:1px solid var(--rule)}
.owned li{padding-block:var(--s2);border-bottom:1px solid var(--rule)}
.owned li a{display:inline-flex;align-items:center;min-height:32px;font:500 15.5px var(--head)}

/* ---------- the class page ---------- */
.ch-note{margin-bottom:var(--s5);max-width:760px}
.chead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s5) var(--s8);margin:var(--s2) 0 var(--s6)}
.ch-main{min-width:0}
.ch-main h1{font-size:32px;line-height:1.2}
.ch-meta{margin-top:var(--s2);font-size:15px;color:var(--ink-3)}
.ch-desc{margin-top:var(--s3);max-width:62ch;font-size:17px;line-height:1.65;color:var(--ink-2)}
.ch-prog{max-width:440px;margin-top:var(--s4)}
/* the join code: a strip of masking tape with the code written on it */
.codebox{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s3) var(--s5) var(--s4);border-radius:2px;background:var(--tape);color:var(--tape-ink);box-shadow:0 1px 2px rgba(0,0,0,.12);transform:rotate(-1deg)}
.codebox small{font:500 13.5px var(--head)}
.codebox b{font:500 30px/1.1 var(--mono);letter-spacing:.14em}
.ctabs{margin-top:var(--s5)}
.ctrack{max-width:860px;margin-top:var(--s7);min-width:0}
.ctrack + .ctrack{margin-top:var(--s9)}
.ctrack .sec-h{margin-bottom:var(--s3)}
.ctrack .sec-h h2{font-size:20px}
p.ctrack{color:var(--ink-3)}
/* the track: a marker line through the magnets */
.timeline{position:relative;max-width:860px;margin:0;padding:0;list-style:none}
.timeline::before{content:"";position:absolute;inset-block:20px;inset-inline-start:13px;width:2px;border-radius:2px;background:var(--rule-2)}
.timeline .step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s4);align-items:start;padding-block:var(--s3)}
.timeline .tl-dot{z-index:1;margin-top:3px}
.timeline .tl-dot:not(.done):not(.cur){background:var(--board)}
.stepb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);min-width:0;min-height:34px}
.sb-t{display:flex;flex:1 1 260px;flex-direction:column;gap:3px;min-width:0}
.sb-t b{display:flex;align-items:flex-start;gap:var(--s2);font:600 16.5px/1.45 var(--head);color:var(--ink)}
.sb-t b .ic{flex:none;margin-top:3px;color:var(--ink-3)}
.sb-t small{font-size:14px;line-height:1.5;color:var(--ink-3)}
.sb-t .pbar{max-width:240px;margin-top:6px}
.stepbtns{display:flex;flex-wrap:wrap;gap:var(--s2)}
.timeline .step.done .sb-t b{font-weight:500;color:var(--ink-2)}
.timeline .step.cur .stepb{margin-inline-start:-8px;padding:var(--s3) var(--s4);border-radius:var(--r-paper);background:var(--sheet);box-shadow:var(--lift-2);transform:rotate(-.4deg)}
.steptools{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s2)}
.steptools .lnk[disabled]{color:var(--ink-3);cursor:not-allowed;text-decoration:none}
#recbox{margin-top:var(--s3);max-width:560px}
.addstep{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--s6);max-width:860px;margin-top:var(--s5)}
.addstep > div{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.addstep b{font:600 15.5px var(--head)}
.addstep select{min-width:0;flex:1 1 200px}
.addstep .btn{align-self:flex-start}
.cnew h2{margin-bottom:var(--s3);font-size:18px}
.cnew .qin{max-width:560px}
/* teacher tabs */
.croster{margin-top:var(--s6)}
.croster .roster td{vertical-align:top}
.cr-prog{display:flex;align-items:center;gap:var(--s2);min-width:130px}
.cr-prog .pbar{flex:1;min-width:60px}
.cr-acts{white-space:nowrap}
.cr-acts .lnk{margin-inline-end:var(--s2)}
.cr-temp{margin-top:var(--s4);max-width:640px}
.cset{max-width:640px;margin-top:var(--s6)}
.cset h2{margin-bottom:var(--s4);font-size:20px}
/* the progress board (social's leaderboard, scoped tweaks only) */
.cboard{max-width:720px;margin-top:var(--s5)}
.cboard .lbrow .rk{color:var(--ink-3)}
.cleave{margin-top:var(--s7)}

/* ---------- inside the lesson's side column: compact ---------- */
.campside h3{display:flex;align-items:center;gap:var(--s2);font-size:16px}
.campside h3 .ic{color:var(--ink-3)}
.campside > small{display:block;margin:2px 0 var(--s3);font-size:13.5px;color:var(--ink-3)}
.campside .mini{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.campside .ms{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:40px;padding:5px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font:500 14px/1.35 var(--head);text-align:start;cursor:pointer}
.campside button.ms:hover{background:var(--blue-wash);color:var(--ink)}
.campside .ms.cur{background:var(--blue-wash);color:var(--ink);font-weight:600}
.campside .ms.zoom{cursor:default}
.campside .ms > span:nth-child(2){flex:1;min-width:0}
.campside .ms small{display:block;font:400 12.5px var(--body);color:var(--ink-3)}
.campside .tn .ic{width:11px;height:11px}
.campside .mini + .lnk{margin-top:var(--s3)}
.campside .lb5 li{display:flex;align-items:center;gap:var(--s3);min-height:40px;padding-inline:4px}
.campside .lb5 li.me{background:var(--mark-wash);border-radius:var(--r-sm)}
.campside .lb5 .rk{width:20px;font-size:13px}
.campside .lb5 .person{flex:1;min-width:0}
.campside .lb5 small{font-size:13px;color:var(--ink-3);white-space:nowrap}

@media (max-width:1080px){
  .camp-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s7);align-items:start}
  .owned{margin-top:0}
}
@media (max-width:760px){
  .ccard{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4)}
  .cc-prog{grid-column:1 / -1;grid-row:2}
  .cc-prog:empty{display:none}
  .cc-act{grid-column:2;grid-row:1;align-self:start}
  .chead{grid-template-columns:1fr;align-items:start}
  .ch-main h1{font-size:27px}
  .codebox,.ch-act{justify-self:start}
  .timeline .step.cur .stepb{margin-inline-start:0;transform:none}
  .zoomcard{padding:var(--s4)}
}

/* 75-billing.css */
/* ===================================================================== billing: the price list, the pay sheet, my purchases, the console
   The price list is a T-chart someone drew on the board: what is free on one side, what is paid on the other, a marker line
   between them and a dotted leader to each price. A purchase is a sheet of paper taped to the board (the only box, because it is
   a form). Order states and how-it-works sequences are magnets on a line. Page actions sit together in the aluminium tray.
   Every class here is prefixed bl-; shared classes are only styled under bl- containers. */

/* ---------- numbers, codes, small type ---------- */
.bl-num{font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}
.bl-code{font:500 .86em/1.4 var(--mono);color:var(--ink-2);unicode-bidi:isolate;white-space:nowrap}
.bl-small{margin-top:var(--s2);max-width:72ch;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.bl-next{margin-top:var(--s4);max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.bl-next b,.bl-small b{color:var(--ink-2);font-weight:600}
.bl-load{display:flex;align-items:center;gap:var(--s3);padding:var(--s6) 0;color:var(--ink-3);font-size:15.5px}
.bl-h3{margin:var(--s6) 0 var(--s3);font:600 16.5px/1.35 var(--head);color:var(--ink)}
.bl-prose{max-width:68ch}
.bl-prose p + p{margin-top:var(--s3)}
.bl-big{font:700 34px/1.1 var(--head);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.bl-per{font:500 15px/1.4 var(--head);color:var(--ink-3)}
.bl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s5)}
.bl-cell{display:block;margin-top:2px;font:400 13.5px/1.5 var(--body);color:var(--ink-3)}
.bl-nw{white-space:nowrap}

/* ---------- lists with marker ticks ---------- */
.bl-inc,.bl-exc,.bl-ticks,.bl-ways{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bl-inc li,.bl-exc li,.bl-ticks li,.bl-ways li{display:flex;align-items:flex-start;gap:var(--s3);font-size:16px;line-height:1.55}
.bl-inc .ic,.bl-ticks .ic{flex:none;margin-top:3px;color:var(--green);stroke-width:2.6}
.bl-exc{margin-top:var(--s3)}
.bl-exc li{color:var(--ink-2)}
.bl-exc .ic,.bl-ways .ic{flex:none;margin-top:3px;color:var(--ink-3)}
.bl-inc b,.bl-ticks b,.bl-ways b{font-weight:600}

/* ---------- magnets on a line: sequences and order states ---------- */
.bl-steps{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-direction:column}
.bl-steps > li{position:relative;display:flex;align-items:flex-start;gap:var(--s4);padding-bottom:var(--s4);font-size:16px;line-height:1.5}
.bl-steps > li:last-child{padding-bottom:0}
.bl-steps > li > span:last-child{padding-top:1px}
.bl-steps > li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:13px;top:32px;bottom:3px;width:2px;border-radius:2px;background:var(--rule-2)}
.bl-steps b{font-weight:600}
.bl-steps small{display:block;font-size:14px;line-height:1.5;color:var(--ink-3)}
.bl-steps .mag.bl-mx{border-color:var(--rule-3);color:var(--ink-3)}
.bl-steps .bl-st-todo b{font-weight:500;color:var(--ink-2)}
.bl-mags{display:inline-flex;gap:6px;align-items:center}

/* ---------- the aluminium tray: a screen's actions, together ---------- */
.bl-tray{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);width:fit-content;max-width:100%;margin-top:var(--s6);padding:7px 9px;border-radius:9px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);
  box-shadow:inset 0 2px 3px color-mix(in srgb,var(--tray-edge) 75%,transparent),0 1px 0 var(--alu-hi)}

/* ---------- the sheet: paper taped to the board ---------- */
body.bl-lock{overflow:hidden}
.bl-ov{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--s6) var(--s4)}
.bl-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--tray-edge) 58%,transparent)}
.bl-sheet{position:relative;display:flex;width:min(580px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift-2);animation:bl-in .34s cubic-bezier(.16,1,.3,1)}
.bl-sheet::before{content:"";position:absolute;z-index:1;top:-13px;inset-inline:0;margin-inline:auto;width:112px;height:22px;border-radius:1px;background:var(--tape);opacity:.94;transform:rotate(-2.2deg);box-shadow:0 1px 1px color-mix(in srgb,var(--tape-ink) 16%,transparent);pointer-events:none}
.bl-sh-in{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;padding:var(--s7) var(--s7) var(--s6)}
.bl-sh-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.bl-sh-h h2{font-size:22px;line-height:1.3}
.bl-sh-h h2:focus,.bl-sec > h2[tabindex="-1"]:focus{outline:none}
.bl-x{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-block-start:-6px;margin-inline-end:-10px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.bl-x:hover{background:var(--board-2);color:var(--ink)}
@keyframes bl-in{from{transform:translateY(14px) rotate(-.3deg)}}
@keyframes bl-up{from{transform:translateY(48px)}}
.bl-why{margin-top:var(--s3);max-width:60ch;color:var(--ink-2)}
.bl-what{margin-top:var(--s4);font:600 16px/1.45 var(--head);color:var(--ink)}
.bl-pay,.bl-pp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);margin-top:var(--s4)}
.bl-pform{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)}
.bl-biz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.bl-consent{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s5) 0 0;padding:var(--s4) 0 0;border:0;border-top:1px solid var(--rule)}
.bl-consent a{text-decoration:underline}
.bl-instr{margin-top:var(--s2);padding:var(--s4);border-radius:var(--r-sm);background:var(--board-2);white-space:pre-wrap;font-size:15.5px;line-height:1.6}
.bl-ref{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.bl-ra{margin-top:var(--s5)}
:is(.bl-sheet,.bl-adm,.bl-cform,.bl-qcard) .form label.chk{flex-direction:row;align-items:flex-start;gap:9px;font:400 15px/1.5 var(--body);color:var(--ink)}
:is(.bl-sheet,.bl-adm,.bl-cform,.bl-qcard) .form label.chk input{margin-top:3px}
.bl-consent .chk{color:var(--ink)}
:is(.bl-sheet,.bl-adm,.bl-cform,.bl-qcard) .alert{margin-top:var(--s4)}

/* ---------- an inline paywall: a dashed marker box around what is locked ---------- */
.bl-wall{max-width:560px;padding:var(--s5) var(--s6);border:2px dashed var(--rule-3);border-radius:var(--r)}
.bl-wall-t{display:flex;align-items:center;gap:var(--s2);font:600 18px/1.35 var(--head);color:var(--ink)}
.bl-wall-t .ic{color:var(--ink-2)}
.bl-wall-w{margin-top:var(--s2);max-width:60ch;font-size:16px;color:var(--ink-2)}
.bl-wall-p{margin-top:var(--s3);font:700 22px/1.2 var(--head);font-variant-numeric:tabular-nums}
.bl-wall-p small{font:400 14px var(--body);color:var(--ink-3)}
.bl-wall-a{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s4)}

/* ---------- #pricing ---------- */
.bl-store{max-width:860px;margin:0 0 var(--s7);font-size:15px;color:var(--ink-2)}
.bl-main{min-width:0}
.bl-tchart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:var(--s4)}
.bl-tfh,.bl-tph{padding-bottom:var(--s3);border-bottom:3px solid var(--ink);font-size:24px}
.bl-tfh{grid-area:1/1;padding-inline-end:var(--s7)}
.bl-tph{grid-area:1/2;padding-inline-start:var(--s7)}
.bl-free{grid-area:2/1;padding:var(--s5) 0 0;padding-inline-end:var(--s7)}
.bl-paid{grid-area:2/2;padding:var(--s3) 0 0;padding-inline-start:var(--s7);border-inline-start:3px solid var(--ink)}
.bl-ticks{gap:var(--s3)}
.bl-ticks li{font-size:16.5px}
.bl-tnote{width:fit-content;max-width:34ch;margin-top:var(--s6)}
.bl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s6)}
.bl-cta small{color:var(--ink-3)}
.bl-plist{list-style:none;margin:0;padding:0}
.bl-pitem{display:flex;align-items:baseline;gap:var(--s2);width:100%;min-height:52px;padding:var(--s3) 0;border:0;background:none;color:var(--ink);font:500 17px/1.4 var(--head);text-align:start;cursor:pointer}
.bl-pitem:hover .bl-pn{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:5px}
.bl-pn{flex:0 1 auto}
.bl-dots{flex:1 1 24px;min-width:24px;border-bottom:2px dotted var(--rule-3);transform:translateY(-5px)}
.bl-from{flex:none;font:600 17px var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-from small{font:400 14.5px var(--body);color:var(--ink-3)}
.bl-paid .bl-small{margin-top:var(--s4)}
.bl-sec{scroll-margin-top:calc(var(--rail-h) + var(--s5))}
.bl-sec > h2{font-size:24px}
.bl-lede{margin-top:var(--s2);max-width:68ch;font-size:17px;color:var(--ink-2)}
.bl-sec > .bl-prose{margin-top:var(--s4)}
.bl-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 var(--s8)}
.bl-th{margin-top:var(--s7)}
.bl-ptable tbody th{padding:10px 12px;border-bottom:1px solid var(--rule);font:500 16px/1.4 var(--head);color:var(--ink);text-align:start;vertical-align:top}
.bl-ptable tbody td{vertical-align:top}
.bl-ptable tbody th small,.bl-ptable td small{display:block;margin-top:2px;font:400 14px/1.5 var(--body);color:var(--ink-3)}
.bl-ptable td.num{font:600 16px/1.4 var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-ptable .bl-band th{padding:var(--s6) 12px var(--s2);border-bottom:1px solid var(--rule-2);font:600 15px var(--head);color:var(--ink-2)}
.bl-ptable .bl-band small{display:inline;margin-inline-start:var(--s2);font-weight:400}
.bl-tn a{color:var(--ink)}
.bl-tn a:hover{color:var(--blue)}
.bl-buy{padding:8px 4px;margin-block:-8px;margin-inline-start:var(--s2);font-size:14px}
.bl-plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:var(--s5)}
.bl-plan{padding-inline:var(--s6)}
.bl-plan:first-child{padding-inline-start:0}
.bl-plan + .bl-plan{border-inline-start:2px solid var(--rule-2)}
.bl-plan h3{font-size:18px}
.bl-plan > p:not(.bl-pp){font-size:15.5px;color:var(--ink-2)}
.bl-plan .btn,.bl-plan .tag{margin-top:var(--s4)}
.bl-boots{list-style:none;margin:var(--s5) 0 0;padding:0}
.bl-boot{padding:var(--s5) 0;border-top:1px solid var(--rule)}
.bl-boot h3{font-size:20px;margin-bottom:var(--s2)}
.bl-boot .bl-inc{margin-top:var(--s3)}
.bl-boot .btn{margin-top:var(--s3)}
.bl-rules{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:0 var(--s6);max-width:900px;margin:var(--s5) 0 var(--s5)}
.bl-rules dt,.bl-rules dd{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.bl-rules dt{font:600 15.5px/1.55 var(--head);color:var(--ink)}
.bl-rules dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.bl-ways{margin-top:var(--s2)}
.bl-links{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4)}
.bl-side{position:sticky;top:calc(var(--rail-h) + var(--s6));display:flex;flex-direction:column;gap:var(--s8);min-width:0}
.bl-toc h2,.bl-seller h2{margin-bottom:var(--s3);font:600 15px var(--head);color:var(--ink-2)}
.bl-toc ul{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--rule)}
.bl-toc button{display:block;width:100%;min-height:40px;margin-inline-start:-2px;padding:var(--s2) var(--s4);border:0;border-inline-start:2px solid transparent;background:none;color:var(--ink-2);font:500 15px/1.4 var(--head);text-align:start;cursor:pointer}
.bl-toc button:hover{border-inline-start-color:var(--blue);color:var(--ink)}
.bl-seller .kv{font-size:14.5px}
.bl-seller .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.bl-seller .bl-small{margin-top:var(--s3)}

/* ---------- the public cancellation form ---------- */
.bl-cform h2,.bl-cside h2{margin-bottom:var(--s4);font-size:18px}
.bl-cside .bl-steps{margin-top:0}
.bl-cside p{margin-top:var(--s5)}

/* ---------- #orders and one order ---------- */
.bl-osec{margin-top:var(--s8)}
.bl-osec > h2{margin-bottom:var(--s3);font-size:20px}
.bl-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.bl-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s2) var(--s5);min-height:56px;padding:var(--s3) var(--s1);border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.bl-rlink:hover{background:color-mix(in srgb,var(--ink) 3%,transparent);text-decoration:none}
.bl-rlink:hover .bl-rmain b{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px}
.bl-rmain{min-width:0}
.bl-rmain b{font:500 16px/1.45 var(--head)}
.bl-rmain small{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.bl-rsum{font:600 16px/1.4 var(--head);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:end}
.bl-rsum small{display:block;font:400 13px var(--body);color:var(--ink-3)}
.bl-ract{justify-self:end;text-align:end}
.bl-rfull{grid-column:1/-1}
.bl-foot{margin-top:var(--s8);max-width:72ch;font-size:14.5px;color:var(--ink-3)}
.bl-pline{font-size:16.5px}
.bl-subc{margin-top:var(--s4)}
.bl-subc .alert{margin-top:0}
.bl-oh h1 small{font:500 16px var(--head);color:var(--ink-3)}
.bl-oh .sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.bl-osteps{margin-top:0}
.bl-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);margin-top:var(--s4);font:500 16px var(--head)}
.bl-total b{font:700 22px var(--head);font-variant-numeric:tabular-nums}
.bl-total small{font:400 14px var(--body);color:var(--ink-3)}
.bl-qcard{max-width:620px;margin-top:var(--s6)}
.bl-qcard h2{font-size:20px}
.bl-quote{display:grid;grid-template-columns:auto auto;justify-content:start;gap:var(--s2) 0;margin:var(--s4) 0 0;font-size:16px}
.bl-quote dd{padding-inline-start:var(--s8)}
.bl-quote dt{color:var(--ink-2)}
.bl-quote dd{margin:0;text-align:end;font-variant-numeric:tabular-nums}
.bl-quote .bl-qr{padding-top:var(--s2);border-top:2px solid var(--ink);font:700 18px var(--head);color:var(--ink)}
.bl-qform{margin-top:var(--s5)}
.bl-ret .page-h .sub .spin{margin-inline-end:var(--s2)}
.bl-ret .bl-steps{margin-top:0}
.bl-more{margin-top:var(--s3)}

/* ---------- teacher earnings ---------- */
.bl-earn > section:first-child h2,.bl-earn .bl-osec > h2{font-size:20px}
.bl-bal{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s9);margin:var(--s4) 0 0}
.bl-bal dt{font:500 14.5px var(--head);color:var(--ink-3)}
.bl-bal dd{margin:var(--s1) 0 0;font:700 26px/1.2 var(--head);font-variant-numeric:tabular-nums}
.bl-ledger td{vertical-align:top}
/* nothing earned or paid out yet: one line, not three ₪0 figures */
.bl-quiet{max-width:64ch;margin-top:var(--s3);padding-block:var(--s4);border-block:1px solid var(--rule);font-size:16px;line-height:1.6;color:var(--ink-2)}

/* ---------- the admin console ---------- */
.bl-anav{margin-bottom:var(--s6)}
.bl-ah{font-size:20px}
.bl-asub{margin-top:var(--s1);max-width:80ch;font-size:15px;color:var(--ink-3)}
.bl-asec{margin-top:var(--s7)}
.bl-abody > .bl-asec:first-of-type{margin-top:var(--s2)}
.bl-state{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bl-state li{display:flex;align-items:flex-start;gap:var(--s2);font-size:15.5px;line-height:1.5}
.bl-state .ic{flex:none;margin-top:2px}
.bl-state .is-ok .ic{color:var(--green)}
.bl-state .is-no{color:var(--ink-2)}
.bl-state .is-no .ic{color:var(--ink-3)}
/* "לטיפול": one ruled list carries every item and where to act on it. Configuration rows come first, a flag in place of
   the count; there are no warning banners above it. */
.bl-queue{max-width:760px;margin-top:var(--s3)}
.bl-queue .bl-row{grid-template-columns:auto minmax(0,1fr) auto}
.bl-qn{min-width:2.2em;font:700 20px var(--head)}
.bl-sys .bl-qn{display:flex;align-items:center;color:var(--ink-2)}
.bl-sys .bl-rmain{font-size:16px;line-height:1.5}
.bl-thr{max-width:520px;margin-top:var(--s5)}
.bl-thr .prow{font-size:15px;color:var(--ink-2)}
.bl-set{max-width:1000px}
.bl-fs{min-width:0;margin:var(--s7) 0 0;padding:0;border:0}
.bl-fs legend{margin-bottom:var(--s3);padding:0;font:600 18px var(--head);color:var(--ink)}
.bl-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s4) var(--s5);align-items:start}
.bl-fgrid .bl-wide{grid-column:1/-1}
.bl-fgrid textarea{min-height:64px}
.bl-pre,.bl-pstat{margin-bottom:var(--s4);padding:var(--s4);border-radius:var(--r-sm);background:var(--board-2)}
.bl-pre .bl-state{margin-top:0}
.bl-pstat p{margin:0}
.bl-flabel{margin-bottom:var(--s2);font:500 15px var(--head);color:var(--ink-2)}
.bl-bool b{display:block;font:500 15.5px var(--head)}
.bl-bool small{display:block;font:400 14px/1.5 var(--body);color:var(--ink-3)}
.bl-vrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s3)}
.bl-vrow label{flex:0 1 190px}
.form.bl-filters{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s4);margin:var(--s4) 0 var(--s5)}
.bl-filters label{flex:0 1 180px}
.bl-filters .bl-grow{flex:1 1 260px}
.bl-filters .btn{flex:none}
.bl-psub{margin-top:var(--s4)}
.bl-prods td{vertical-align:top}
.bl-prods .bl-in-num{width:96px}
.bl-prods .bl-in-wide{width:100%;min-width:220px}
.bl-hist{margin-top:var(--s1);font-size:14px}
.bl-hist ul{margin:var(--s1) 0 0;padding-inline-start:var(--s5)}
.bl-acols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8);align-items:start}
.bl-kv{margin-top:var(--s2)}
.bl-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.bl-aform{max-width:900px;margin-top:var(--s5)}
.bl-aform h3{margin-bottom:var(--s1);font-size:18px}
.bl-aform .form{margin-top:var(--s4)}
.bl-adm .roster tr.bl-detail td,.bl-adm .roster tr.bl-detail:hover td{padding:var(--s4) var(--s5);background:var(--board-2)}
.bl-adm .roster td{vertical-align:top}
/* a detail row inside a table that scrolls sideways on a phone stays inside the visible width */
.bl-adm .roster tr.bl-detail td > *{position:sticky;inset-inline-start:0;max-width:calc(100vw - 72px)}
.bl-inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.bl-inline input{min-width:180px}
.bl-aexp{max-width:760px}
.bl-aexp .form{margin-top:var(--s4)}
.bl-adm .crumbs{margin-bottom:var(--s3)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .bl-toc{display:none}
  .bl-side{position:static}
  .bl-acols{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:760px){
  .bl-tchart{grid-template-columns:minmax(0,1fr)}
  .bl-tfh,.bl-tph,.bl-free,.bl-paid{grid-area:auto;padding-inline:0}
  .bl-tph{margin-top:var(--s8)}
  .bl-paid{border-inline-start:0}
  .bl-cols{grid-template-columns:minmax(0,1fr)}
  .bl-plans{grid-template-columns:minmax(0,1fr)}
  .bl-plan{padding-inline:0}
  .bl-plan + .bl-plan{margin-top:var(--s5);padding-top:var(--s5);border-inline-start:0;border-top:1px solid var(--rule)}
  .bl-rules{grid-template-columns:minmax(0,1fr)}
  .bl-rules dt{padding-bottom:0;border-bottom:0}
  .bl-rules dd{padding-top:var(--s1)}
  .bl-ptable th,.bl-ptable td{padding-inline:8px}
  .bl-ptable tbody th,.bl-ptable td.num{font-size:15px}
  .bl-big{font-size:30px}
}
@media (max-width:560px){
  .bl-ov{align-items:flex-end;padding:var(--s6) 0 0}
  .bl-sheet{width:100%;max-height:92vh;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation-name:bl-up}
  .bl-sh-in{padding:var(--s6) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom,0px))}
  .bl-biz{grid-template-columns:minmax(0,1fr)}
  .bl-row{grid-template-columns:minmax(0,1fr) auto}
  .bl-row > .bl-ract{grid-column:1/-1;justify-self:start;text-align:start}
  .bl-queue .bl-row{grid-template-columns:auto minmax(0,1fr)}
  .bl-tray{width:100%}
  .bl-pitem{font-size:16px}
  .bl-acts .btn.lg{width:100%}
}
@media print{ .bl-ov{display:none!important} }
/* secondary actions are marker-written links (the foundation's .ghost is the erased-trace class, so .btn.ghost is not used here) */
.bl-lnk{min-height:40px;padding-inline:6px}
:is(.bl-sheet,.bl-adm,.bl-cform,.bl-qcard,.bl-osec) .chk input{flex:none}
.bl-how > p:first-child{max-width:68ch}
.bl-how > h2.bl-h3{margin-top:var(--s5);font-size:20px}

/* 80-social.css */
/* ===================================================================== community and the personal page (pages-social.js)
   feed, leaderboard, people, public profiles and #me. Base owner of the leaderboard (.lb .lbrow .rk .lbs, reused by campus)
   and of the people primitives (.av .av-i .person), which the foundation does not define.
   Lists are written straight on the board with hairlines; paper is used only for the composer form and certificates. */

/* ---------- people primitives: avatars and a person link ---------- */
.av{display:block;flex:none;border-radius:50%;object-fit:cover}
.av-i{display:inline-grid;place-items:center;color:#fff;font:600 15px/1 var(--head);text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.person{display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:40px;color:var(--ink);font:600 15.5px/1.3 var(--head);text-decoration:none}
.person:hover{text-decoration:none}
.person > span:not(.av){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.person:hover > span:not(.av){text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* markers in lists keep a 40px touch target */
.comgrid .btn.sm,.profpage .btn.sm,.mepage .btn.sm{height:40px}

/* ---------- community header: the page title, then the three pages as tabs ---------- */
.comh{margin-bottom:var(--s5)}
.comtabs{margin-bottom:var(--s8)}
.comtabs .ultab{display:inline-flex;align-items:center;min-height:44px}
.comgrid h2{font-size:20px}

/* ---------- feed ---------- */
.feedmain{display:flex;flex-direction:column;gap:var(--s9);min-width:0}
.composer .po-h .sub{margin-top:2px;color:var(--ink-3);font-size:15px}
.composer input:not([type=checkbox]),.composer textarea,.composer select{width:100%}
.po-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.composer label > span small,.mefrm label > span small{font:400 13.5px var(--body);color:var(--ink-3)}
.po-row select{width:100%}
.po-tray{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s1)}
.posts{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.posts > h2{margin-bottom:calc(var(--s1) * -1)}
.posts > .card + .card{margin-top:0}
.posts .pdel{align-self:flex-start;min-height:40px;margin-top:var(--s1);color:var(--red-ink);font-size:14px}
.posts .pdel[data-sure="1"]{font-weight:600}
.posts > .empty{text-align:start;padding:var(--s4) 0}

/* activity: a running list written down the side of the board */
.actside{min-width:0}
.acth{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s4);padding-bottom:2px;border-bottom:1px solid var(--rule)}
.acth h2{padding-bottom:var(--s2)}
.actf{display:flex;gap:var(--s4)}
.actf .ultab{min-height:40px}
.actlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.act{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5}
.act:last-child{border-bottom:0}
.act > .av{margin-top:2px}
.act-t{min-width:0;color:var(--ink-2);overflow-wrap:anywhere}
.act-t .act-who{color:var(--ink);font:600 15px var(--head)}
.act-t small{display:block;margin-top:2px;color:var(--ink-3);font-size:13px}
.act-ic{display:flex;margin-top:3px;color:var(--ink-3)}
.actlist > .empty{padding:var(--s6) 0;text-align:start}

/* ---------- leaderboard: ranks are plain numbers, the table is ruled like the roster ---------- */
.lbmain{min-width:0}
.lbscope{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.lbscope .btn{--cap:var(--rule-3)}
.lbscope .btn[aria-pressed=true]{--cap:var(--ink);border-color:var(--ink-3);font-weight:600}
.lb{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.lbrow{display:grid;grid-template-columns:3ch minmax(0,1fr) minmax(8.5rem,auto) 7.5rem;align-items:center;gap:var(--s2) var(--s4);min-height:60px;padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule)}
.lbrow:last-child{border-bottom:0}
.lbrow.me{background:var(--mark-wash)}
.lbrow.me .lbs small{color:var(--ink-2)}
.rk{font:500 15px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3);text-align:center}
.lbrow.me .rk{color:var(--ink);font-weight:600}
.lbp{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);min-width:0}
.lbp .person{max-width:100%}
.lbs{grid-column:3;display:flex;flex-direction:column;align-items:flex-end;text-align:end;line-height:1.3}
.lbrow > .fol{grid-column:4;justify-self:end}
.lbs b{font:500 17px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.lbs small{color:var(--ink-3);font-size:13px;white-space:nowrap}
.lbme{margin-top:var(--s3);border-top:1px dashed var(--rule-3)}
.lbside{display:flex;flex-direction:column;gap:var(--s6)}
.lbside .note{max-width:300px}
.lbpriv{display:flex;align-items:flex-start;gap:var(--s2);color:var(--ink-2);font-size:15px}
.lbpriv .ic{margin-top:4px;color:var(--ink-3)}

/* ---------- people ---------- */
.ppfind{min-width:0}
.ppfind h2,.ppside h2{margin-bottom:var(--s3)}
.ppside h2 .num,.mesec h3 .num{margin-inline-start:4px;color:var(--ink-3);font:500 15px var(--mono)}
.ppsearch{position:relative;display:flex;align-items:center;max-width:520px;margin-bottom:var(--s5)}
.ppsearch > .ic{position:absolute;inset-inline-start:13px;color:var(--ink-3);pointer-events:none}
.ppsearch input{width:100%;padding-inline-start:42px}
.ppside{display:flex;flex-direction:column;gap:var(--s8);min-width:0}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.plist .person{max-width:100%}
.plist .pmeta{color:var(--ink-3);font-size:14px;white-space:nowrap}
.ppside .pmeta{display:none}
.ppside .plist li{grid-template-columns:minmax(0,1fr) auto}
.ppfind .empty,.ppside .empty{text-align:start;padding:var(--s4) 0}

/* ---------- profile header (public profile and #me) ---------- */
.prof-h.meh{max-width:1016px;margin-bottom:var(--s9)}
.prof-self{margin-bottom:var(--s6);max-width:72ch}
.prof-self .lnk{padding-block:0}
.prof-h{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,300px);gap:var(--s4) var(--s6);align-items:start;margin:var(--s2) 0 var(--s8)}
.prof-h > .av{box-shadow:0 0 0 3px var(--board),0 0 0 4px var(--rule-2)}
.prof-id{min-width:0;padding-top:var(--s2)}
.prof-nm{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.prof-nm h1{font-size:32px;overflow-wrap:anywhere}
.prof-meta{margin-top:var(--s2);color:var(--ink-3);font-size:15.5px;line-height:1.6}
.prof-meta .lnk{padding-block:0;font-size:15px}
.prof-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.prof-bio{justify-self:end;max-width:300px;margin-top:var(--s2);overflow-wrap:anywhere}
.prof-bio a,.menear a{color:var(--note-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prof-back{margin-top:var(--s3);text-align:center}
/* counts in one quiet ruled line, not a row of big numbers */
.stats.prof-stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);margin:0 0 var(--s9);padding:var(--s3) 0;border-block:1px solid var(--rule)}
.stats.prof-stats > div{display:flex;align-items:baseline;gap:var(--s2)}
.stats.prof-stats > div b{display:inline;font:600 20px var(--head)}
.stats.prof-stats small{color:var(--ink-3);font-size:14.5px}
.profmain,.profside{display:flex;flex-direction:column;gap:var(--s9);min-width:0}
.profgrid h2{font-size:20px;margin-bottom:var(--s4)}
.profpage > .empty{padding-top:var(--s10)}

/* tracks with progress: the track name with its marker dot, then a marker line */
.trks{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.trk{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.trk-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.trk-n{display:inline-flex;align-items:center;gap:var(--s2);min-height:32px;margin-inline-end:var(--s1);color:var(--ink);font:600 17px var(--head)}
.trk-n::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--pc)}
.trk .prow{max-width:560px;margin-top:var(--s2)}
.trk-c{color:var(--ink-2);font-size:14px;white-space:nowrap}
.trk-c b{color:var(--ink);font-weight:600}
.trk-m{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s5);margin-top:var(--s2);color:var(--ink-3);font-size:14.5px}
.trk-m b{color:var(--ink-2);font-weight:600}
.trk-m .lnk{padding-block:2px;font-size:14.5px}

/* finished lessons: a quiet two-column list */
.plessons{list-style:none;margin:0;padding:0;columns:2 260px;column-gap:var(--s7)}
.plessons li{display:flex;flex-direction:column;break-inside:avoid;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.plessons a{display:inline-flex;align-items:baseline;gap:var(--s2);color:var(--ink-2);font:500 15px/1.45 var(--head)}
.plessons a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--pc);transform:translateY(-2px)}
.plessons a:hover{color:var(--ink)}
.plessons small{padding-inline-start:15px;color:var(--ink-3);font-size:13.5px}

/* badges: pieces of masking tape, earned ones only */
.pbadges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.pbadge{display:flex;align-items:flex-start;gap:8px;max-width:100%;padding:7px 14px 8px;background:var(--tape);color:var(--tape-ink);box-shadow:0 1px 1px rgba(0,0,0,.08);transform:rotate(var(--r,0deg));
  clip-path:polygon(0 6%,4px 0,100% 4%,calc(100% - 3px) 50%,100% 95%,calc(100% - 4px) 100%,0 97%,3px 50%)}
.pbadge:nth-child(3n+1){--tilt:-.7deg} .pbadge:nth-child(3n+2){--tilt:.5deg} .pbadge:nth-child(3n){--tilt:-.2deg}
.pbadge .ic{flex:none;margin-top:3px}
.pbadge b{display:block;font:600 14.5px/1.35 var(--head)}
.pbadge small{display:block;font-size:13px;line-height:1.4}
.profside .empty,.profmain .empty,.mesec .empty{padding:var(--s3) 0;text-align:start}

/* a folded list (finished lessons, password form, account deletion) */
.medet{margin-top:var(--s2)}
.medet > summary{min-height:40px;padding-block:10px;color:var(--blue);font:500 15px var(--head)}
.medet > summary .ic{margin-inline-end:4px}
.medet > summary:hover{text-decoration:underline;text-underline-offset:4px}
.medet[open] > summary{margin-bottom:var(--s3)}

/* ====================================================================== the personal page #me */
.melay{display:grid;grid-template-columns:200px minmax(0,760px);gap:var(--s9);align-items:start}
/* the section index: the section being read gets the marker underline */
.meidx{position:sticky;top:calc(var(--rail-h) + var(--s6))}
.meidx ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.meidx a{position:relative;display:flex;align-items:center;min-height:40px;color:var(--ink-2);font:500 15px var(--head);text-decoration:none}
.meidx a:hover{color:var(--ink);text-decoration:none}
.meidx a[aria-current]{color:var(--ink);font-weight:600}
/* drawn inside the link box, so the sideways scroller on phones (overflow hidden) never clips it */
.meidx a[aria-current]::after{content:"";position:absolute;inset-inline:0;bottom:3px;height:3px;border-radius:3px;background:var(--blue)}
.mebody{min-width:0}
.mesec{scroll-margin-top:calc(var(--rail-h) + var(--s5))}
.mesec + .mesec{margin-top:var(--s10)}
.mesec-h{margin-bottom:var(--s5)}
.mesec-h h2{font-size:24px}
.mesec-h .sub{margin-top:var(--s1);max-width:68ch;color:var(--ink-3);font-size:15.5px;text-wrap:pretty}
.mesec h3{margin:var(--s8) 0 var(--s3);font-size:17px}
.mesec-h + h3,.mecont + h3{margin-top:var(--s6)}
.mesub{margin-top:var(--s8)}
.mesec-h + .mesub,.mesec-h + .mefrm{margin-top:0}
.mesub > h3:first-child{margin-top:0}
.mesub p{max-width:68ch}
.meload{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) 0;color:var(--ink-3);font-size:15px}
.meempty{max-width:68ch;color:var(--ink-2)}
.memore{margin-top:var(--s3)}

/* what to do next: the one blue marker, resting in a tray, with Bit's note beside it */
.mecont{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4) var(--s7);padding-bottom:var(--s2)}
.mecont p{flex:1 1 260px;display:flex;flex-direction:column;min-width:0}
.mecont b{font:600 19px/1.35 var(--head);color:var(--ink)}
.mecont small{margin-top:2px;color:var(--ink-3);font-size:14.5px}
.mecont-a{display:flex;align-items:center;gap:var(--s4)}
.metray-alu{display:inline-flex;padding:5px 7px;border-radius:9px;border:1px solid var(--tray-edge);background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.5)}
.mehand{display:inline-flex;align-items:center;gap:6px;transform:rotate(-2deg)}
.mehand svg{width:26px;height:26px}
.mehand .hand{font-size:24px}

.mecls,.mebit{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mecls li,.mebit li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s3);min-height:48px;padding:var(--s1) 0;border-bottom:1px solid var(--rule)}
.mecls .ic,.mebit .ic{color:var(--ink-3)}
.mecls a,.mebit a{font:500 15.5px var(--head)}
.mebit small{margin-inline-start:auto;color:var(--ink-3);font-size:14px;white-space:nowrap}

/* certificates: small sheets taped to the board */
.mecerts{list-style:none;margin:0;padding:var(--s2) 0 0;display:flex;flex-direction:column;gap:var(--s6)}
.mecert{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);align-items:start;padding:var(--s5) var(--s5) var(--s3);background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift)}
.mecert::before{content:"";position:absolute;top:-9px;inset-inline-start:calc(50% - 38px);width:76px;height:20px;background:var(--tape);opacity:.92;transform:rotate(-2deg);box-shadow:0 1px 1px rgba(0,0,0,.06)}
.mecert-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--green);color:var(--green)}
.mecert-b{min-width:0}
.mecert-b b{font:600 17px var(--head);color:var(--ink)}
.mecert-b small{display:block;margin-top:2px;color:var(--ink-3);font-size:14px;overflow-wrap:anywhere}
.mecert-b code{font-size:13px}
.mecert-a{grid-column:2;display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.mecert-a .lnk{min-height:40px;font-size:14.5px}
.meready{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--rule)}
.meready li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.meready li > .ic{color:var(--green)}
.meready .btn{margin-inline-start:auto}
.menear{max-width:440px;margin-top:var(--s5)}

/* exam history */
.meexams td b{font:500 15px var(--mono);font-variant-numeric:tabular-nums}
.meexams td .tag{margin-inline-start:6px}
.meexams td:nth-child(3),.meexams td:nth-child(4){white-space:nowrap}
.meexams .lnk{padding-block:0;font-size:14.5px}

/* account, security and privacy */
.mefrm{max-width:560px}
.mefrm input:not([type=checkbox]),.mefrm select{width:100%}
.metray{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.meout{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s5);border-top:1px solid var(--rule)}
.meout p{color:var(--ink-2);font-size:15px}
.meout bdi{font-weight:500;color:var(--ink)}
.meemail .tag{white-space:nowrap}
.mesub .chk{margin-bottom:var(--s2)}
.meexp{max-width:68ch;margin-top:var(--s3)}
.medel .medet > summary{color:var(--red-ink)}
/* cards made by other pages (email status, two-factor) sit on the board here, without their paper */
.mesub > .card{padding:0;background:none;box-shadow:none;border-radius:0}
.mesub > .card .card-h{justify-content:flex-start;flex-wrap:wrap;margin-bottom:var(--s3)}
.mesub > .card .card-h h3{display:flex;align-items:center;gap:8px;margin:0;font-size:17px}
.mesub > .card .card-h h3 .ic{color:var(--ink-3)}
.mesub > .card p{max-width:68ch}
/* the page keeps one blue marker (continue learning); blue elsewhere becomes a blue cap */
.mesub .btn.pri{background:linear-gradient(180deg,var(--plastic-hi),var(--plastic-lo));color:var(--ink);border-color:var(--plastic-edge);--cap:var(--blue)}
.mesub .btn.pri:hover{background:var(--plastic-hi)}
.mesub .btn.pri[disabled]{background:var(--board-2);color:var(--ink-3);--cap:var(--rule-3)}
.devlist{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--rule)}
.devlist li{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.devlist li > .ic{margin-top:3px;color:var(--ink-3)}
.devlist bdi{font:500 15.5px var(--head);color:var(--ink)}
.devlist small{display:block;color:var(--ink-3);font-size:13.5px}

@media (max-width:1000px){
  .melay{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .meidx{position:static;padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
  .meidx ol{flex-direction:row;flex-wrap:wrap;gap:0 var(--s5)}
}
@media (max-width:760px){
  /* one row that scrolls sideways (.hscroll); mark() brings the current section into view */
  .meidx ol{flex-wrap:nowrap}
  .prof-h{grid-template-columns:auto minmax(0,1fr);gap:var(--s4)}
  .prof-nm h1{font-size:26px}
  .prof-bio{grid-column:1 / -1;justify-self:start;max-width:min(100%,360px);margin-top:0}
  .stats.prof-stats{gap:var(--s2) var(--s6);margin-bottom:var(--s8)}
  .mesec + .mesec{margin-top:var(--s9)}
  .mesec-h h2{font-size:22px}
  .mehand{display:none}
  .mecert{padding:var(--s5) var(--s4) var(--s3)}
}
@media (max-width:560px){
  .lbrow{grid-template-columns:2.5ch minmax(0,1fr) auto;gap:2px var(--s3);padding-inline:var(--s2)}
  .composer{padding:var(--s5) var(--s4)}
  .lbrow .rk{grid-row:1 / span 2}
  .lbrow .lbs{grid-column:2;grid-row:2;flex-direction:row;align-items:baseline;gap:6px;text-align:start}
  .lbrow .lbs b{font-size:15px}
  .lbrow .fol{grid-column:3;grid-row:1 / span 2;padding-inline:10px 20px}
  .lbrow .fol .fol-t,.plist .fol .fol-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .plist .fol{padding-inline:10px 20px}
  .plist .pmeta{display:none}
  .mecert{grid-template-columns:minmax(0,1fr)}
  .mecert-ic{display:none}
  .mecert-a{grid-column:1}
  .meready .btn{margin-inline-start:0}
}

/* 85-auth.css */
/* ===================================================================== auth: the visitor's board, the sign-in sheet, onboarding, help and terms
   (pages-auth.js). The landing is the board a visitor walks in on: one statement in marker, how learning goes as magnets,
   two sticky notes and Bit's handwriting, and a paper sheet taped to the board for signing in. Light and dark come from the tokens. */

/* ---------- the landing board ---------- */
.auth{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);grid-template-areas:"say sheet" "how sheet";grid-template-rows:auto 1fr;
  column-gap:var(--s9);row-gap:var(--s9);align-items:start;margin-top:var(--s4)}
.auth-say{grid-area:say;position:relative;z-index:1;max-width:40rem;padding-top:var(--s4)}
.auth-say h1{font-size:clamp(34px,1.6rem + 1.6vw,50px);line-height:1.14;letter-spacing:-.4px}
/* one word underlined in blue marker, a little uneven like a real stroke */
.mk-u{position:relative;white-space:nowrap}
.mk-u::after{content:"";position:absolute;inset-inline:-3px;bottom:-.12em;height:.3em;background:var(--blue);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C46 6 104 4 197 7' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C46 6 104 4 197 7' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.auth-lede{margin-top:var(--s5);max-width:54ch;font-size:18.5px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
/* the marker tray: the two ways in, shown when the sheet is below the fold */
.auth-tray{display:none;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);padding:6px 8px;border-radius:10px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.5)}

/* how learning goes: magnets down the board, joined by a dashed marker line */
.auth-art{grid-area:how;position:relative;z-index:1}
.auth-art > h2{font-size:21px;margin-bottom:var(--s5)}
.auth-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,250px);gap:var(--s7);align-items:start}
.auth-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.auth-pts li{position:relative;display:flex;align-items:flex-start;gap:var(--s4);padding-bottom:var(--s5)}
.auth-pts li:last-child{padding-bottom:0}
.auth-pts li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:13px;top:34px;bottom:6px;width:2px;border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--rule-3) 0 6px,transparent 6px 11px)}
.auth-pts .mag{margin-top:1px}
.auth-pts li > div{min-width:0}
.auth-pts b{display:block;font:600 17px/1.4 var(--head);color:var(--ink)}
.auth-pts li > div > span{display:block;margin-top:2px;max-width:46ch;font-size:15.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.auth-notes{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);padding-top:var(--s1)}
.auth-notes .note{margin:0;max-width:250px;font-size:15px}
.auth-notes .note:nth-child(1){--tilt:-1.1deg}
.auth-notes .note:nth-child(2){--tilt:.8deg;background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note-blue);color:var(--ink)}
.auth-bit{display:flex;align-items:center;gap:var(--s2);margin:0}
.auth-bit .bit{flex:none}
.auth-bit .hand{font-size:27px}
.auth-teach{margin-top:var(--s8);font-size:15.5px;color:var(--ink-2)}
.auth-teach .lnk{font-size:15.5px;min-height:40px}
/* an earlier drawing, wiped but still faintly on the board, under the sheet (decorative) */
.auth-ghost{position:absolute;inset-inline-end:var(--s4);bottom:0;z-index:0;width:360px;color:var(--ink);pointer-events:none}
.auth-ghost svg{display:block;width:100%;height:auto}

/* ---------- the sheet: paper taped to the board ---------- */
.auth-card{grid-area:sheet;position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s7);scroll-margin-top:calc(var(--rail-h) + 20px)}
.auth-card::before,.auth-card::after,.tos::before,.tos::after{content:"";position:absolute;top:-11px;width:92px;height:24px;background:var(--tape);opacity:.9;
  box-shadow:0 1px 2px rgba(0,0,0,.1);pointer-events:none}
.auth-card::before,.tos::before{inset-inline-start:30px;transform:rotate(-3deg)}
.auth-card::after,.tos::after{inset-inline-end:30px;transform:rotate(2.4deg)}
.auth-card > .alert{margin:0}
.auth-tabs{margin:0 0 var(--s1);gap:var(--s6)}
.auth-tabs .ultab{min-height:44px;font-size:16.5px}
.auth .form label.chk,.tfcard .form label.chk{flex-direction:row;align-items:flex-start;font:400 15px/1.5 var(--body);color:var(--ink-2)}
.auth .chk input{flex:none}
.auth .pwt{width:40px;height:40px;inset-inline-end:1px}
.auth-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s1)}
.auth-acts .lnk{min-height:40px}
.auth-card #forgot-msg,.auth-card #mfa-help{max-width:52ch;line-height:1.6}
.auth-switch{margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
.auth-switch .lnk{font-size:15px;min-height:40px}
.auth-card .caps{text-transform:uppercase;font-family:var(--mono);letter-spacing:.06em}
.otp{max-width:16rem;font:500 22px/1.2 var(--mono);letter-spacing:.24em;text-align:center}
.tfcard .otp,.tf-form .otp{max-width:100%;font-size:19px}
.spin-s{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:wb-spin .8s linear infinite;vertical-align:-2px}

/* one sheet in the middle of the board: a new password, or turning on 2FA before going on */
.auth.one{grid-template-columns:minmax(0,560px);grid-template-areas:"sheet";justify-content:center;margin-top:var(--s7)}
.auth-brand{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);margin-bottom:var(--s1);border-bottom:1px solid var(--rule)}
.auth-brand .logo{flex:none}
.auth-brand h1{font-size:24px;line-height:1.3}
.auth-brand small{display:block;margin-top:2px;color:var(--ink-3);font-size:14px}
.auth-intro{color:var(--ink-2);text-wrap:pretty}
.auth-out{margin:var(--s2) 0 0}
.auth-out .lnk{min-height:40px}

/* ---------- two-factor authentication (the forced setup sheet, and the card on the personal page) ---------- */
#tfbox{display:flex;flex-direction:column;gap:var(--s4)}
#tfbox > .alert{margin:0}
.tf-p,.tf-on{font-size:15.5px;line-height:1.6;text-wrap:pretty}
.tf-on{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}
.tfsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.tfsteps li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:15.5px;line-height:1.6}
.tfsteps .mag{margin-top:3px}
.tfsteps .lnk{display:inline-flex;min-height:40px;padding-inline:0;font-size:14px}
.tfsteps bdi,.tfsteps b[dir]{white-space:nowrap}
.tfkey{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0 var(--s2);padding:var(--s3) var(--s4);background:var(--board-2);border:1px dashed var(--rule-3);border-radius:var(--r-sm)}
.tfkey code{background:none;padding:0;font:600 16px/1.45 var(--mono);letter-spacing:.06em;user-select:all;overflow-wrap:anywhere;color:var(--ink)}
.rcodes{list-style:none;margin:0;padding:var(--s3) var(--s4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s5);
  background:var(--board-2);border:1px dashed var(--rule-3);border-radius:var(--r-sm);font:500 15px/1.5 var(--mono);color:var(--ink);user-select:all}
.tf-form{gap:var(--s3)}
.tf-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:var(--s3)}
.tfcard .card-h h3{display:flex;align-items:center;gap:var(--s2)}
.tfcard .card-h .ic{color:var(--ink-3)}

/* ---------- onboarding: choose a target ---------- */
.wl-h{margin-bottom:var(--s8)}
.wl-start{max-width:920px}
.wl-start-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s6);margin-bottom:var(--s4)}
.wl-start-h h2{font-size:22px}
.wl-bit{display:flex;align-items:center;gap:var(--s2);margin:0}
.wl-bit .hand{font-size:27px}
.wl-ways{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.wl-ways li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3) var(--s6);padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.wl-ways li > div{flex:1 1 300px;min-width:0}
.wl-ways b{display:block;font:600 17px/1.4 var(--head);color:var(--ink)}
.wl-ways li > div > span{display:block;margin-top:2px;max-width:60ch;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.wl-pick{display:flex;flex-wrap:wrap;gap:var(--s2)}
.wl-all{margin-top:var(--s10)}
.wl-all > h2{font-size:24px}
.wl-group{margin-top:var(--s7)}
.wl-group .sec-h{flex-wrap:wrap}
.wl-group .sec-h h3{font-size:19px}

/* ---------- help: a document on the board, with its contents at the side and key points as notes in the margin ---------- */
.help{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s9);align-items:start}
.help-side{position:sticky;top:calc(var(--rail-h) + 24px);display:flex;flex-direction:column;gap:var(--s7)}
.help-toc h2{font:600 15px/1.4 var(--head);color:var(--ink-2);margin-bottom:var(--s2)}
.help-toc ul{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--rule)}
.help-toc .lnk{display:flex;width:100%;min-height:40px;padding:6px var(--s4);margin-inline-start:-2px;border-inline-start:2px solid transparent;color:var(--ink-2);text-align:start;font-weight:500}
.help-toc .lnk:hover{color:var(--ink);border-inline-start-color:var(--blue);text-decoration:none}
.help-join{margin:0;font-size:15px;--tilt:-.8deg}
.help-join .lnk{min-height:40px;padding:0;font-size:15px;color:var(--note-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.help-body{display:flex;flex-direction:column;gap:var(--s9);min-width:0}
.help-sec{display:grid;grid-template-columns:minmax(0,66ch) minmax(170px,210px);gap:var(--s8);align-items:start}
.help-sec h2{display:flex;align-items:center;gap:var(--s3);font-size:23px;margin-bottom:var(--s4);scroll-margin-top:calc(var(--rail-h) + 24px)}
.help-sec h2 .ic{color:var(--ink-3)}
.help-txt ul{margin:0;padding-inline-start:1.15em}
.help-txt li{margin-bottom:var(--s3);line-height:1.7;text-wrap:pretty}
.help-txt li::marker{color:var(--ink-3)}
.help-txt code{font-size:.84em}
.help-sec .note{margin:var(--s9) 0 0;font-size:15px}
.help-sec:nth-child(odd) .note{--tilt:-1deg}
.help-sec:nth-child(even) .note{--tilt:.9deg;background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note-green);color:var(--ink)}

/* ---------- terms: one printed sheet taped to the board, at a reading measure ---------- */
.tos.card{position:relative;max-width:calc(68ch + 2 * var(--s9));margin:var(--s5) auto 0;padding:var(--s9) var(--s9) var(--s8)}
.tos h1{font-size:30px}
.tos-meta{margin-top:var(--s2);color:var(--ink-3);font-size:15px}
.tos h2{font-size:20px;margin:var(--s8) 0 var(--s3)}
.tos p,.tos li{text-wrap:pretty}
.tos ul{padding-inline-start:1.15em;margin:0 0 var(--s3)}
.tos li::marker{color:var(--ink-3)}
.prose.tos .tos-back{margin:var(--s8) 0 0}

/* ---------- narrower boards ---------- */
@media (max-width:1180px){
  .help-sec{grid-template-columns:minmax(0,1fr)}
  .help-sec .note{margin:0;max-width:22rem;justify-self:start}
}
@media (max-width:980px){
  .auth{grid-template-columns:minmax(0,1fr);grid-template-areas:"say" "sheet" "how";grid-template-rows:none;row-gap:var(--s8);max-width:640px;margin-inline:auto}
  .auth-say{max-width:none;padding-top:0}
  .auth-tray{display:inline-flex}
  .auth-ghost{display:none}
}
@media (max-width:860px){
  .help{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .help-side{position:static}
  .help-toc ul{display:flex;flex-wrap:wrap;gap:0 var(--s5);border:0}
  .help-toc .lnk{width:auto;padding-inline:0;margin:0;border:0;color:var(--blue)}
  .help-toc .lnk:hover{text-decoration:underline}
  .help-side .askcard,.help-join{max-width:30rem}
}
@media (max-width:640px){
  .auth-how{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .auth-notes{flex-direction:row;flex-wrap:wrap;align-items:center}
  .auth-notes .note{max-width:min(100%,300px)}
  .auth-card{padding:var(--s6) var(--s5)}
  .auth-lede{font-size:17.5px}
  .tos.card{padding:var(--s8) var(--s5) var(--s7)}
  .tos h1{font-size:26px}
  .wl-ways li > .btn,.wl-pick{flex:1 1 100%}
  .rcodes{gap:var(--s2) var(--s4);font-size:14px}
}
@media (max-width:420px){
  .auth-tray{display:flex}
  .auth-tray .btn{flex:1 1 0;padding-inline:12px 26px}
}
@media (max-width:760px){
  .tfcard .btn.sm,.auth .btn.sm{height:40px}
}

/* 90-admin.css */
/* ===================================================================== admin console (pages-admin.js, pages-admin-market.js)
   An operate-mode tool on the same board: dense but calm. Sections are separated by space and a marker rule, tables are written
   on the board with ruled headers, forms sit on paper sheets, and red appears only on destructive actions and failures. */

.adm .page-h{margin-bottom:var(--s7)}
.adm .kv dd{margin:0}
.adm .kv dt{white-space:nowrap}
.adm-p{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:72ch;text-wrap:pretty}
.adm-p + .adm-p{margin-top:var(--s2)}
.adm-note{margin-top:var(--s3);color:var(--ink-3);font-size:14px;line-height:1.55;max-width:80ch}
.adm-sec{min-width:0}
.adm-sec > .sec-h h2,.adm-sec > h3{display:flex;align-items:center;gap:var(--s2)}
.adm-sec > .sec-h h2{font-size:19px}
.adm-sec > .sec-h .ic,.adm-sec > h3 .ic,.adm-form > h2 .ic,.adm-form legend .ic{color:var(--ink-3)}
.adm-sec > .sec-h small{font-size:14px}
.adm-sec > .sec-h > .tag{margin-inline-end:auto}
.adm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--s8) var(--s9);align-items:start}
.adm .form label.chk{flex-direction:row;align-items:flex-start;font:400 15.5px/1.5 var(--body);color:var(--ink)}
.adm .chk input{flex:none}
.adm .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--s4);align-items:end}
.adm .lnk.danger{color:var(--red-ink)}
.adm code{overflow-wrap:anywhere}

/* ---------- overview: the numbers, grouped and ruled like a table header ---------- */
.adm-glance{display:grid;grid-template-columns:3fr 3fr 4fr;gap:var(--s8)}
.adm-grp h2{font:600 15px/1.4 var(--head);color:var(--ink-2);padding-bottom:var(--s2);margin-bottom:var(--s4);border-bottom:2px solid var(--ink)}
.adm-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s4) var(--s5);margin:0}
.adm-nums > div{display:flex;flex-direction:column-reverse;gap:2px;min-width:0}
.adm-nums dd{margin:0;font:700 30px/1.1 var(--head);font-variant-numeric:tabular-nums;color:var(--ink)}
.adm-nums dt{font-size:14px;line-height:1.4;color:var(--ink-3)}
.adm-files{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.adm-files li{display:flex;align-items:center;gap:var(--s2);font-size:14px}
.adm-files .ic{color:var(--green)}
.adm-ver{margin-top:var(--s4);color:var(--ink-3);font-size:13.5px}

/* ---------- search over a table ---------- */
.adm-bar{flex-wrap:wrap;align-items:center}
.adm-q{position:relative;display:flex;align-items:center;flex:0 1 300px;min-width:0}
.adm-q .ic{position:absolute;inset-inline-start:12px;color:var(--ink-3);pointer-events:none}
.adm-q input{width:100%;padding-inline-start:38px}

/* ---------- tables ---------- */
.adm .tablewrap{position:relative}
.adm .roster td small{color:var(--ink-3)}
.adm .roster td{vertical-align:top}
.adm .roster td.num,.adm .roster th.num{white-space:nowrap}
.adm .roster .tags{margin-top:var(--s1)}
.adm .roster select{min-height:36px;padding-block:5px;font-size:15px}
.adm-mail{display:block;width:fit-content;max-width:100%;font-size:13.5px;color:var(--ink-3);overflow-wrap:anywhere}
.adm-users td:first-child,.adm-tch td:first-child{min-width:210px}
.adm-acts{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.adm-acts .lnk{min-height:40px;font-size:14px;white-space:nowrap}
.adm .roster tr.is-off td,.adm .roster tr.is-off b{color:var(--ink-3)}
.adm-temp{margin-bottom:var(--s4)}
.adm-temp code{font-size:15px;font-weight:600}
.adm-q-t{max-width:56ch;line-height:1.55}
.adm-codes{font-family:var(--mono);font-size:12.5px}
.tcell{display:flex;align-items:center;gap:var(--s3)}
.tcell > span{min-width:0}
/* the audit log: failed attempts carry a flag and a red wash */
.adm .roster tr.aubad td{background:var(--red-wash)}
.adm .roster tr.aubad td .ic{color:var(--red);margin-inline-end:6px;vertical-align:-2px}
.adm-audit code{background:none;padding:0;font-size:13px;color:var(--ink-2)}
/* mono data and short labels read intact: the time, the action and the address never split; the details column takes
   whatever width is left */
.adm-audit .au-t,.adm-audit .au-a,.adm-audit .au-ip{white-space:nowrap}
.adm-audit .au-t small{font-variant-numeric:tabular-nums}
.adm-audit .au-d{width:100%;min-width:180px}
.adm-audit .au-d small{overflow-wrap:anywhere}

/* ---------- content report: one ruled row per track, opened for its lessons ---------- */
.adm-paths{border-top:2px solid var(--ink)}
.adm-path{border-bottom:1px solid var(--rule)}
.adm-path summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);min-height:48px;padding:var(--s2) var(--s1);list-style:none;font-family:var(--body);font-weight:400}
.adm-path summary::-webkit-details-marker{display:none}
.adm-path summary::after{content:"";flex:none;width:8px;height:8px;margin-inline-start:auto;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.adm-path[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.adm-path summary:hover b{color:var(--blue)}
.adm-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 1px var(--rule-2)}
.adm-path summary b{font:600 16px/1.4 var(--head);color:var(--ink)}
.adm-sum{color:var(--ink-3);font-size:14px}
.adm-path[open] summary{border-bottom:1px solid var(--rule)}
.adm-path .tablewrap{padding:var(--s2) 0 var(--s5)}
.adm-path .roster th{border-bottom-width:1px}

/* ---------- security checks: a failing one becomes a pink sticky note ---------- */
.seclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.seclist li{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.6}
.seclist li:last-child{border-bottom:0}
.seclist li > .ic{flex:none;margin-top:4px}
.seclist .chk-ok > .ic{color:var(--green)}
.seclist .chk-bad > .ic{color:var(--red)}
.seclist .chk-info > .ic{color:var(--ink-3)}
.seclist .chk-bad{margin-block:var(--s2);padding-inline:var(--s3);border-bottom:0;border-radius:2px;background:var(--note-pink);color:var(--ink);box-shadow:var(--note-shadow)}
.seclist .chk-bad .tag{margin-inline-end:4px}
.adm-list{margin:0;padding-inline-start:1.15em;display:flex;flex-direction:column;gap:var(--s3);font-size:15px;line-height:1.6;color:var(--ink-2)}
.adm-list li::marker{color:var(--ink-3)}

/* ---------- forms on paper ---------- */
.adm-form{max-width:820px}
.adm-form > h2{display:flex;align-items:center;gap:var(--s2);font-size:20px;margin-bottom:var(--s5)}
.adm-form .form{gap:var(--s6)}
.adm-form fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--s4)}
.adm-form fieldset + fieldset > legend{width:100%;padding-top:var(--s6);border-top:1px solid var(--rule)}
.adm-form legend{display:flex;align-items:center;gap:var(--s2);padding:0;margin-bottom:var(--s4);font:600 17px/1.4 var(--head);color:var(--ink)}
.adm-new{max-width:none}
.adm-new .adm-p{margin-bottom:var(--s4)}
.adm-save{display:flex;flex-wrap:wrap;gap:var(--s3)}
.adm-caps{text-transform:uppercase;font-family:var(--mono);letter-spacing:.05em}

/* ---------- mail ---------- */
.adm-mailsec{max-width:820px}
.adm-mailsec > .adm-p{margin-bottom:var(--s4)}
.adm-sub{font-size:16px;margin:var(--s7) 0 var(--s3)}
.adm-sent{list-style:none;margin:0;padding:0}
.adm-sent li{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.55}
.adm-sent .ic{flex:none;margin-top:4px;color:var(--green)}
.adm-sent li.is-bad .ic{color:var(--red)}
.outbox{border-top:1px solid var(--rule)}
.outbox details{border-bottom:1px solid var(--rule)}
.outbox summary{display:block;padding:var(--s2) 0;min-height:40px;font:400 14.5px/1.55 var(--body);color:var(--ink)}
.outbox summary small{color:var(--ink-3)}
.outbox pre{white-space:pre-wrap;margin:0 0 var(--s3);padding:var(--s3) var(--s4);background:var(--board-2);border-radius:var(--r-sm);font:14px/1.6 var(--body);color:var(--ink-2);overflow-wrap:anywhere}

/* ---------- a teacher's application ---------- */
.adm-tiles{margin-bottom:var(--s2)}
.adm-main{display:flex;flex-direction:column;gap:var(--s8);min-width:0}
.adm-teacher h3{font-size:17px;margin:var(--s6) 0 var(--s2)}
.adm-main .adm-sec > h3:first-child{margin-top:0}
.adm-teacher .kv{margin-top:var(--s5)}
.adm-certs{list-style:none;margin:var(--s3) 0 var(--s4);padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.adm-side{display:flex;flex-direction:column;gap:var(--s7);min-width:0}
.adm-decide > h2{font-size:19px;margin-bottom:var(--s2)}
.adm-decide .seclist li{font-size:14.5px;padding-block:var(--s2)}
.adm-decide .alert{margin-top:var(--s3)}
.adm-decide .form{margin-top:var(--s5)}
.adm-tray{display:flex;flex-wrap:wrap;gap:var(--s2)}
.adm-decide .lnk{align-self:flex-start;min-height:40px}
.adm-side .adm-sec > h3{margin-top:0}
.adm-hist{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.5}
.adm-hist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.adm-hist small{color:var(--ink-3);white-space:nowrap}

/* ---------- payments (drawn by the billing module) ---------- */
.adm-billing{min-height:160px}

@media (max-width:1080px){
  .adm-glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-glance > :last-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .adm-glance{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .adm-nums dd{font-size:26px}
  .adm-q{flex:1 1 100%}
  .adm-tch td:first-child{min-width:150px}
  /* users on a phone: each row becomes a short block, its actions on a line of their own */
  .adm-users thead{display:none}
  .adm-users,.adm-users tbody{display:block}
  .adm-users tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s2) var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
  .adm-users td{display:block;padding:0;border:0}
  .adm-users td.hide-s{display:none}
  .adm-users td:first-child{min-width:0}
  .adm-users td:last-child{grid-column:1 / -1}
  .adm-users td:last-child:empty{display:none}
  .adm .roster.adm-users tr:hover td{background:none}
  .adm .card.adm-form{padding:var(--s5) var(--s4)}
}
/* touch: every control at least 40px tall on a phone */
@media (max-width:760px){
  .adm .btn.sm{height:40px}
  .adm .roster select{min-height:40px}
  .adm .roster .lnk,.adm .crumbs a{min-height:40px}
}

/* 92-bit.css */
/* ===================================================================== Bit: the magnet, its notes, its pocket board, the ask-Bit corner
   Bit is a round magnet stuck at the corner of the board. What it says in passing arrives as a sticky note beside it.
   The chat is a small whiteboard of its own: an aluminium rail on top, a masking-tape label saying what Bit knows,
   answers written straight on the board in ink, the student's questions pinned on as blue paper slips, ready-made
   questions as pieces of tape, and the field and send marker lying in the tray at the bottom edge.
   Bit's handwriting (--hand) appears only in two-to-five-word annotations: the greeting and the ask-Bit corner. */

/* ---------- Bit itself: it blinks and its antenna glows only where it is "present" (this magnet, the tutor ring) ---------- */
.bit-fab .bit-eyes,.tu-ring .bit-eyes{transform-box:fill-box;transform-origin:center;animation:bit-blink 5.5s infinite}
.bit-fab .bit-led{animation:bit-led 2.4s ease-in-out infinite}
@keyframes bit-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes bit-led{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- the magnet ---------- */
.bit-fab{position:fixed;z-index:60;inset-inline-end:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:64px;height:64px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--plastic-edge);background:radial-gradient(circle at 36% 28%,var(--plastic-hi),var(--plastic-lo) 72%);
  box-shadow:0 2px 3px rgba(0,0,0,.22),0 14px 26px -14px rgba(20,24,30,.5),inset 0 -2px 3px rgba(0,0,0,.08),inset 0 2px 2px rgba(255,255,255,.5);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}
.bit-fab .bit{width:50px;height:50px;overflow:visible}
.bit-fab:hover{transform:translateY(-2px) rotate(-4deg);box-shadow:0 3px 4px rgba(0,0,0,.2),0 18px 30px -14px rgba(20,24,30,.5),inset 0 -2px 3px rgba(0,0,0,.08),inset 0 2px 2px rgba(255,255,255,.5)}
.bit-fab:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:50%}
/* open: pressed flat against the board */
.bit-fab.open{transform:translateY(1px) scale(.94);box-shadow:0 1px 1px rgba(0,0,0,.24),inset 0 1px 3px rgba(0,0,0,.18)}
.bit-fab .dot{position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--board)}
.bit-fab.offline .dot{background:var(--rule-3)}

/* ---------- a note stuck beside the magnet ---------- */
.bit-bubble{position:fixed;z-index:61;inset-inline-end:calc(max(20px,env(safe-area-inset-left,0px)) + 80px);bottom:calc(30px + env(safe-area-inset-bottom,0px));
  width:max-content;max-width:min(300px,calc(100vw - 124px));padding:16px 18px 14px;padding-inline-end:44px;
  background:linear-gradient(180deg,var(--note-edge) 0 16px,transparent 16px),var(--note);color:var(--note-ink);border-radius:1px;box-shadow:var(--note-shadow);
  transform:rotate(-.6deg);font:400 15px/1.55 var(--body);animation:bit-stick .4s cubic-bezier(.16,1,.3,1)}
.bit-bubble b{display:block;margin-bottom:4px;font:600 16px/1.35 var(--head);color:var(--note-ink)}
.bit-bubble p{color:var(--note-ink)}
.bit-bubble .bx{position:absolute;top:2px;inset-inline-end:2px;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:none;color:var(--note-ink);display:grid;place-items:center;cursor:pointer;opacity:.75}
.bit-bubble .bx:hover{opacity:1;background:rgba(0,0,0,.06)}
.bit-bubble .bacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;max-width:none;justify-content:flex-start}
.bit-bubble .bacts .btn{height:40px}
.bit-bubble .bacts .lnk{min-height:40px;padding:0 8px;border-radius:6px;color:var(--note-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.bit-bubble .bacts .lnk:hover{background:rgba(0,0,0,.06)}
@keyframes bit-stick{from{opacity:0;transform:translateY(10px) rotate(-3deg)}}

/* ---------- the pocket board ---------- */
.bit-panel{position:fixed;z-index:62;inset-inline-end:max(20px,env(safe-area-inset-left,0px));bottom:calc(100px + env(safe-area-inset-bottom,0px));
  width:min(400px,calc(100vw - 32px));height:min(660px,calc(100vh - 124px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--board);border:1px solid var(--alu-edge);border-radius:10px;box-shadow:inset 0 0 0 3px var(--alu-hi),var(--lift-2);
  animation:bit-open .26s cubic-bezier(.16,1,.3,1)}
.bit-panel:focus{outline:none}
.bit-panel:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@keyframes bit-open{from{opacity:0;transform:translateY(14px)}}
/* the rail */
.bp-h{flex:none;display:flex;align-items:center;gap:10px;min-height:60px;padding-block:8px;padding-inline:14px 8px;
  background:var(--alu-grain),linear-gradient(180deg,var(--alu-hi),var(--alu) 55%,var(--alu-lo));
  border-bottom:1px solid var(--alu-edge);box-shadow:inset 0 1px 0 var(--alu-shine)}
.bp-h .bit{flex:none;width:40px;height:40px}
.bp-h div{flex:1;min-width:0}
.bp-h b{display:block;font:700 16px/1.25 var(--head);color:var(--ink)}
.bp-h small{display:flex;align-items:center;gap:6px;margin-top:2px;font:500 13px/1.3 var(--head);color:var(--ink-2)}
.bp-h small i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.bp-h small i.off{background:var(--rule-3)}
.bp-h button{flex:none;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:background-color .15s,border-color .15s}
.bp-h button:hover{background:var(--alu-hover);border-color:var(--alu-edge);color:var(--ink)}
/* the tape label: what Bit knows right now */
.bp-ctx{flex:none;align-self:flex-start;display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);margin:14px 16px 2px;padding:3px 10px;
  background:var(--tape);color:var(--tape-ink);border-radius:2px;transform:rotate(-.6deg);box-shadow:0 1px 1px rgba(0,0,0,.06);font:500 13px/1.5 var(--head)}
.bp-ctx .ic{flex:none;width:14px;height:14px;color:var(--pc)}
.bp-ctx span{flex:none}
.bp-ctx b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* the conversation, written on the board */
.bp-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;padding:16px 18px 14px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 18px);mask-image:linear-gradient(to bottom,transparent,black 18px)}
.bm{max-width:100%;font-size:15.5px;line-height:1.65;overflow-wrap:anywhere;text-wrap:pretty}
.bm > * + *{margin-top:8px}
.bm.ai{align-self:stretch;color:var(--ink)}
.bm.ai b{font-weight:600}
.bm .bm-h{font:600 15.5px/1.4 var(--head);margin-top:14px}
.bm ul,.bm ol{margin-block:6px 0;padding-inline-start:20px}
.bm li + li{margin-top:4px}
.bm li::marker{color:var(--ink-3)}
.bm code{font-size:.86em;background:color-mix(in srgb,var(--ink) 6%,transparent);padding:1px 5px;border-radius:4px}
.bm pre{margin-top:10px;padding:10px 12px;direction:ltr;text-align:left;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-sm);background:color-mix(in srgb,var(--ink) 3%,var(--board));font:400 13px/1.6 var(--mono);color:var(--ink);white-space:pre}
.bm pre code{background:none;padding:0;font-size:inherit}
.bm .muted{font-size:14.5px}
/* the greeting: two words in Bit's hand */
.bm.hello .hand{font-size:32px;line-height:1.05;margin-bottom:2px}
/* the student's question: a blue slip pinned at the far edge */
.bm.user{align-self:flex-end;max-width:86%;padding:9px 14px 10px;background:var(--note-blue);color:var(--ink);border-radius:1px;box-shadow:0 5px 8px -6px rgba(20,24,30,.4),0 1px 1px rgba(20,24,30,.08);white-space:pre-wrap}
.bm.user code{background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* where the answer comes from: lesson tasks, ruled lightly */
.bm .srcs{display:flex;flex-direction:column;margin-top:12px;border-bottom:1px solid var(--rule)}
.bm .src{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:14px;line-height:1.5;text-decoration:none}
.bm .src .ic{flex:none;margin-top:2px;color:var(--pc)}
.bm .src b{display:block;margin-bottom:2px;font:500 14.5px/1.4 var(--head);color:var(--blue)}
.bm .src:hover b{text-decoration:underline;text-underline-offset:4px}
/* Bit is writing: three marker dots */
.bm.typing{display:flex;align-items:center;gap:5px;height:24px}
.bm.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:bit-dots 1.2s infinite}
.bm.typing i:nth-of-type(2){animation-delay:.15s} .bm.typing i:nth-of-type(3){animation-delay:.3s}
@keyframes bit-dots{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* ready-made questions: pieces of masking tape (the tape is 30px, the target 40px) */
.bp-quick{flex:none;display:flex;flex-wrap:wrap;gap:2px 8px;padding:4px 14px 8px}
.chipb{min-height:40px;padding:0 12px;border:0;border-radius:2px;cursor:pointer;color:var(--tape-ink);font:500 14px/1.2 var(--head);white-space:nowrap;
  background:linear-gradient(var(--tape),var(--tape)) center/100% 30px no-repeat;transform:rotate(-.5deg);transition:filter .15s}
.chipb:nth-child(2n){transform:rotate(.6deg)} .chipb:nth-child(3n){transform:rotate(-.2deg)}
.chipb:hover{filter:brightness(.95)}
/* the tray: field and send marker lying at the bottom edge */
.bp-in{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border-top:1px solid var(--tray-edge);box-shadow:inset 0 2px 3px rgba(0,0,0,.16)}
.bp-in textarea{flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;padding-block:10px;border-color:var(--plastic-edge);border-radius:8px;line-height:1.45}
.bp-in .btn{height:44px;flex:none}
.bp-in #bpsend{width:56px;padding-inline:10px 22px}
.bp-in #bpsend .ic{transform:scaleX(-1)}
.bit-panel .btn.pri{color:var(--sheet)}
.bp-note{flex:none;padding:0 14px calc(8px + env(safe-area-inset-bottom,0px));background:var(--tray-hi);color:var(--ink-2);font:400 12.5px/1.5 var(--body)}

/* ---------- the ask-Bit corner (side columns across the site): Bit stuck on the board with a line in its hand ---------- */
.askcard{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s3);align-items:start;
  padding:var(--s5) 0 0;background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--rule);color:var(--ink)}
.askcard > .bit{grid-row:1 / span 2;width:46px;height:46px;margin-top:2px}
.askcard > div{min-width:0}
.askcard b{display:block;margin-bottom:6px;font:700 30px/1.05 var(--hand);color:var(--ink);letter-spacing:.2px}
.askcard p{max-width:36ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.askcard > .btn{grid-column:2;justify-self:start;height:40px}
/* one primary action per page belongs to the page: the corner's marker has a blue cap, not a blue body */
.askcard .btn.pri{background:linear-gradient(180deg,var(--plastic-hi),var(--plastic-lo));color:var(--ink);border-color:var(--plastic-edge);--cap:var(--blue)}
.askcard .btn.pri:hover{background:var(--plastic-hi)}

/* ---------- phones: the magnet clears the bottom bar; the pocket board takes the whole screen ---------- */
@media (max-width:760px){
  .bit-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px));inset-inline-end:16px;width:56px;height:56px}
  .bit-fab .bit{width:44px;height:44px}
  .bit-bubble{bottom:calc(84px + env(safe-area-inset-bottom,0px));inset-inline-end:84px;max-width:calc(100vw - 108px)}
  .bit-panel{inset:0;width:auto;height:auto;bottom:0;z-index:70;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px)}
  .bp-quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media (prefers-reduced-motion:reduce){ .bit-fab:hover{transform:none} .chipb,.chipb:nth-child(n){transform:none} }
@media print{ #bithost{display:none!important} }

/* 94-tutor.css */
/* ===================================================================== ביט בקול: the voice tutor as a whiteboard session
   The classroom is the meeting-room board while Bit explains: the session's own aluminium rail on top with the timer and
   "end" in a recessed tray; the lesson's checkpoints as magnets at the start side (as on the lesson page); the
   conversation column in the middle, where the transcript rises and the sentence Bit is saying now is the largest thing on
   the page, its current word underlined in blue marker; and the board column at the end side, where what Bit writes
   appears in marker, the newest note crisp and the earlier ones smaller, half erased. The controls lie in the marker
   tray along the bottom edge, with the microphone as the one big magnet. Under 1024px the board notes move into the
   transcript, drawn inside a marker frame.
   States: [data-st=speaking|thinking|listening|idle|ending|ended] on every [data-tc-root]; [data-size=l|xl] for captions. */

/* ---------- the session takes the whole room: no site rail, footer or Bit magnet ---------- */
body.tutor-live .top,body.tutor-live .foot,body.tutor-live #announce,body.tutor-live #bithost{display:none!important}
body.tutor-live #view{max-width:none;padding:0;margin:0}
.tcls{height:100vh;height:100dvh;display:flex;flex-direction:column}

/* ---------- the session rail ---------- */
.tu-top{flex:none;position:relative;z-index:3;height:calc(var(--rail-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 24px 0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  background:var(--alu-grain),linear-gradient(180deg,var(--alu-hi),var(--alu) 55%,var(--alu-lo));
  border-bottom:1px solid var(--alu-edge);box-shadow:inset 0 1px 0 var(--alu-shine),0 2px 5px rgba(20,24,30,.08)}
.tu-s{display:flex;align-items:center;gap:12px;min-width:0}
.tu-brand{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--ink);font:700 17px var(--head);text-decoration:none;white-space:nowrap}
.tu-brand:hover{text-decoration:none}
.tu-brand .logo{width:30px;height:30px;flex:none}
.tu-sep{width:1px;height:24px;background:var(--alu-edge)}
.tu-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid transparent;border-radius:7px;color:var(--ink-2);font:500 15px var(--head);text-decoration:none;white-space:nowrap}
.tu-back:hover{background:color-mix(in srgb,var(--sheet) 45%,transparent);border-color:var(--alu-edge);color:var(--ink);text-decoration:none}
.tu-top h1{min-width:0;font:600 16px/1.3 var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* timer and end sit in a recessed tray, like the lesson rail's marker tray */
.tu-e{justify-self:end;display:flex;align-items:center;gap:12px;padding:4px;padding-inline-start:14px;border-radius:9px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 var(--alu-shine)}
.tu-timer{display:flex;align-items:center;gap:10px;font:500 14px var(--mono);color:var(--ink);white-space:nowrap}
.tu-timer .num{font-family:var(--mono)}
.tu-timer .of{color:var(--ink-2)}
.tu-bar{width:84px;height:6px;border-radius:3px;overflow:hidden;background:repeating-linear-gradient(90deg,var(--alu-edge) 0 5px,transparent 5px 9px)}
.tu-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--blue);transition:width .8s linear}
.tu-e .tu-end{height:40px}

/* ---------- the room: magnets | conversation | board ---------- */
.tu-main{flex:1;min-height:0;position:relative;display:grid;justify-content:center;padding:0 32px;
  grid-template-columns:minmax(196px,236px) minmax(0,660px) minmax(300px,440px);grid-template-areas:"agenda col wall";column-gap:clamp(32px,3.4vw,56px)}
.tu-col{grid-area:col;min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px 0 14px}

/* who is in the room */
.tu-who{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.tu-p{display:flex;align-items:center;gap:14px;min-width:0}
.tu-p.me > div{text-align:end;min-width:0}
.tu-p b{display:block;font:600 18px/1.3 var(--head);color:var(--ink)}
.tu-st{font-size:15px;line-height:1.45;color:var(--ink-2)}
/* Bit on the board; while it speaks a blue marker circle is drawn round it, while it thinks the circle is dashed */
.tu-ring{position:relative;flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center}
.tu-ring .bit{overflow:visible}
.tu-ring::after{content:"";position:absolute;inset:-4px -7px -5px -5px;border:2px solid var(--blue);border-top-color:color-mix(in srgb,var(--blue) 55%,transparent);border-radius:50%;
  opacity:0;transform:rotate(-14deg);transition:opacity .25s,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
[data-st="speaking"] .tu-ring::after{opacity:1;transform:rotate(-4deg)}
[data-st="thinking"] .tu-ring::after{opacity:1;border-style:dashed;border-color:var(--ink-3);animation:tu-spin 7s linear infinite}
[data-st="speaking"] .tu-ring .bit-led,[data-st="thinking"] .tu-ring .bit-led{animation:tu-led 1s ease-in-out infinite}
.tu-ring.sm{width:40px;height:40px}
.tu-ring.lg{width:104px;height:104px}
@keyframes tu-spin{to{transform:rotate(360deg)}}
@keyframes tu-led{0%,100%{opacity:1}50%{opacity:.3}}
/* the student: initial on a plastic puck; a green marker circle while the microphone listens */
.tu-av{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--plastic-edge);
  background:radial-gradient(circle at 36% 28%,var(--plastic-hi),var(--plastic-lo) 72%);color:var(--ink);font:600 18px var(--head);box-shadow:0 1px 2px rgba(0,0,0,.16)}
.tu-av::after{content:"";position:absolute;inset:-6px -5px -7px -6px;border:2px solid var(--green);border-radius:50%;opacity:0;transform:rotate(10deg);transition:opacity .2s}
[data-st="listening"] .tu-av::after{opacity:1}
.tu-mes{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:14px;color:var(--ink-3)}
.tu-lvl{display:inline-flex;align-items:flex-end;gap:3px;height:18px;direction:ltr}
.tu-lvl i{width:4px;border-radius:2px;background:var(--rule-2);transition:background-color .08s}
.tu-lvl i:nth-child(1){height:5px} .tu-lvl i:nth-child(2){height:8px} .tu-lvl i:nth-child(3){height:11px} .tu-lvl i:nth-child(4){height:14px} .tu-lvl i:nth-child(5){height:18px}
.tu-lvl i.on{background:var(--green)}
.tu-lvl.lg{height:24px} .tu-lvl.lg i{width:6px}

/* the transcript rises from the bottom; what scrolls off the top is erased away */
.tu-stream{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;padding:18px 4px 10px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 56px);mask-image:linear-gradient(to bottom,transparent,black 56px)}
.tu-stream > :first-child{margin-top:auto}
.tu-stream:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.tu-turn{flex:none;max-width:88%}
.tu-turn .nm,.tu-live .nm{display:flex;align-items:center;gap:8px;margin-bottom:3px;font:500 13px/1.4 var(--head);color:var(--ink-3)}
.tu-turn time,.tu-board time{font:500 12px var(--mono);font-variant-numeric:tabular-nums}
.tu-turn p{font-size:17px;line-height:1.62;color:var(--ink);text-wrap:pretty}
.tu-turn.old p{font-size:15.5px;color:var(--ink-2)}
/* the student's turn: a blue slip pinned at the far edge; a "?" from the lesson: a piece of tape */
.tu-turn.me{align-self:flex-end}
.tu-turn.me .nm{justify-content:flex-end}
.tu-turn.me p{padding:9px 14px 10px;background:var(--note-blue);color:var(--ink);border-radius:1px;box-shadow:0 5px 8px -6px rgba(20,24,30,.4),0 1px 1px rgba(20,24,30,.08)}
.tu-turn.f p{display:inline-block;padding:3px 12px;background:var(--tape);color:var(--tape-ink);font:500 15px/1.6 var(--head);box-shadow:0 1px 1px rgba(0,0,0,.06);transform:rotate(-.6deg)}
/* a passing remark from the room (no microphone, no answer): a small sticky note */
.tu-note{flex:none;align-self:center;display:flex;align-items:flex-start;gap:8px;max-width:92%;padding:8px 14px 9px;background:var(--note);color:var(--note-ink);border-radius:1px;
  box-shadow:var(--note-shadow);font:500 14.5px/1.5 var(--body);transform:rotate(-.4deg)}
.tu-note .ic{flex:none;margin-top:2px}
.tu-empty{color:var(--ink-3);text-align:center}

/* ---------- what Bit writes: marker on the board ---------- */
.tu-board{flex:none;width:100%}
.tu-frame{display:none}
.tu-board header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tu-board h3{display:flex;align-items:center;gap:8px;font:500 14px/1.4 var(--head);color:var(--ink-2)}
.tu-board h3 .ic{width:16px;height:16px;color:var(--ink-3)}
.tu-board h3 time{color:var(--ink-3)}
.tu-board header .lnk{font-size:14px;min-height:40px}
.tu-board p{margin:0 0 8px;font:600 19px/1.5 var(--head);color:var(--ink);text-wrap:pretty}
.tu-cmd{direction:ltr;text-align:left;margin:4px 0 10px;font:500 15px/1.6 var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.tu-board p:last-child,.tu-board .tu-cmd:last-child{margin-bottom:0}
/* on wide screens the notes live on the board column, not in the transcript */
.tu-stream .tu-board{display:none}

/* the board column */
.tu-wb{grid-area:wall;min-width:0;min-height:0;overflow-y:auto;padding:24px 4px 24px}
.tu-wb > h2{margin-bottom:var(--s5);font:700 20px/1.3 var(--head)}
.tu-wb .tu-board p{font-size:22px;line-height:1.45}
.tu-wb .tu-cmd{font-size:16px;margin-block:6px 12px}
.tu-erased{position:relative;margin-top:var(--s8);padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s6)}
.tu-erased::before{content:"";position:absolute;inset:-8px -14px -14px;pointer-events:none;border-radius:40%;
  background:radial-gradient(ellipse 70% 34% at 40% 18%,color-mix(in srgb,var(--ink) 4.5%,transparent),transparent 72%),radial-gradient(ellipse 60% 30% at 62% 64%,color-mix(in srgb,var(--ink) 3.5%,transparent),transparent 70%)}
.tu-board.old{position:relative}
.tu-board.old header{margin-bottom:4px}
.tu-board.old h3{font-size:13px;color:var(--ink-3)}
.tu-wb .tu-board.old p{font:500 15px/1.5 var(--head);color:var(--ink-3);margin-bottom:4px}
.tu-wb .tu-board.old .tu-cmd{font-size:13.5px;color:var(--ink-3);margin-block:2px 6px}
.tu-wb-empty .hand{font-size:34px;color:var(--ink-3);transform:rotate(-2deg);transform-origin:right center;margin-bottom:var(--s2)}
.tu-wb-empty p:not(.hand){max-width:34ch;font-size:15px;line-height:1.55;color:var(--ink-3)}
.tu-wb-empty .btn{margin-top:var(--s5);height:40px}

/* ---------- the caption: the sentence Bit is saying now ---------- */
.tu-live{flex:none;padding:16px 0 4px}
.tu-live .nm{color:var(--ink-2);font-size:14px}
.tu-live .nm i{width:8px;height:8px;border-radius:50%;background:var(--rule-3)}
[data-st="speaking"] .tu-live .nm i{background:var(--blue)}
[data-st="thinking"] .tu-live .nm i{background:var(--blue);animation:tu-pulse 1.1s ease-in-out infinite}
.tu-cap{margin-top:4px;min-height:1.42em;font:600 32px/1.42 var(--head);color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere}
[data-size="l"] .tu-cap{font-size:38px} [data-size="xl"] .tu-cap{font-size:46px}
.tu-cap .now{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:4px;text-underline-offset:10px;text-decoration-skip-ink:none}
.tu-cap .next{color:var(--ink-3)}
.tu-live.off .tu-cap,.tu-live.off .nm{display:none}
[data-st="thinking"] .tu-cap:empty::after{content:"";display:inline-block;width:56px;height:8px;border-radius:4px;background:var(--rule-2);animation:tu-pulse 1.1s ease-in-out infinite}
@keyframes tu-pulse{50%{opacity:.35}}
.tu-heard{margin-top:8px;font:500 18px/1.5 var(--body);color:var(--ink-2)}
.tu-over{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;color:var(--warn);font:600 15px var(--head)}
.tu-type{flex:none;display:flex;gap:8px;margin-top:12px}
.tu-type input{flex:1;min-width:0;min-height:44px}
.tu-type .btn{height:44px;flex:none;--cap:var(--blue)}

/* ---------- the marker tray along the bottom edge ---------- */
.tu-dock{flex:none;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:22px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border:1px solid var(--tray-edge);box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 1px 0 var(--alu-hi)}
.tu-dock .g1{justify-self:end;display:flex;align-items:center;gap:8px}
.tu-dock .g2{justify-self:start;display:flex;align-items:center;gap:8px}
.tu-dock .btn{height:42px;padding-inline:12px 24px}
.tu-dock .btn .num{font:500 13px var(--mono)}
.tu-dock .btn[aria-pressed="true"],.tu-dock .btn[aria-expanded="true"]{--cap:var(--blue);background:var(--board-3);box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.tu-dock .btn[aria-pressed="false"]{--cap:var(--rule-3);color:var(--ink-2)}
.tu-seg{display:inline-flex;gap:2px;padding:3px;border-radius:8px;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
.tu-seg button{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink-2);font:500 14.5px var(--head);cursor:pointer}
.tu-seg button:hover{color:var(--ink)}
.tu-seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--plastic-hi),var(--plastic-lo));border-color:var(--plastic-edge);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.16)}
/* the column is about 600px: output mode, captions and speed show as icons (names stay for screen readers, tooltips for the
   mouse); stop and typing keep their words */
.tu-seg button{width:42px;padding:0;justify-content:center}
.tu-seg .tu-lbl,.tu-dock [data-act="tutorcc"] .tu-lbl,.tu-dock [data-act="tutorrate"] .tu-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tu-dock [data-act="tutorcc"]{width:50px;padding-inline:8px 20px}
.tu-dock [data-act="tutorrate"]{padding-inline:10px 22px}
/* the microphone: the one big magnet. Blue = press to talk, green = listening (with a widening marker ring), white = muted */
.tu-mic{position:relative;flex:none;width:76px;height:76px;margin-block:-22px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--sheet);
  background:radial-gradient(circle at 36% 30%,var(--blue-2),var(--blue) 56%,var(--blue-cap));
  box-shadow:0 3px 4px rgba(0,0,0,.28),0 12px 22px -10px rgba(20,24,30,.55),inset 0 -3px 4px rgba(0,0,0,.22),inset 0 2px 3px rgba(255,255,255,.35);transition:transform .12s,box-shadow .2s}
.tu-mic .ic{width:30px;height:30px}
.tu-mic:hover{transform:translateY(-1px)}
.tu-mic:active{transform:translateY(1px) scale(.98)}
.tu-mic:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.tu-mic[aria-pressed="true"]{background:radial-gradient(circle at 36% 30%,var(--green-2),var(--green) 56%,var(--green-ink))}
.tu-mic::after{content:"";position:absolute;inset:-7px;border:2px solid var(--green);border-radius:50%;opacity:0;pointer-events:none}
.tu-mic[aria-pressed="true"]::after{animation:tu-ring 1.9s cubic-bezier(.16,1,.3,1) infinite}
@keyframes tu-ring{0%{opacity:.9;transform:scale(.94)}100%{opacity:0;transform:scale(1.2)}}
.tu-mic.is-muted{color:var(--ink-2);border:1px solid var(--plastic-edge);background:radial-gradient(circle at 36% 28%,var(--plastic-hi),var(--plastic-lo) 72%)}
.tu-mic.sm{width:52px;height:52px;margin-block:0}
.tu-mic.sm .ic{width:22px;height:22px}
.tu-mic.sm::after{inset:-5px}
.tu-foot{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 20px;margin-top:10px;font-size:14px;color:var(--ink-3)}
.tu-foot > span,.tu-foot .lnk{display:inline-flex;align-items:center;gap:7px}
.tu-foot .lnk{min-height:40px;font-size:14px}
.tu-foot .dot{width:8px;height:8px;border-radius:50%;background:var(--rule-3)}
.tu-foot .dot.on{background:var(--green)}
.tu-keys{font-size:13px}
.tcls kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border:1px solid var(--rule-3);border-radius:5px;background:var(--sheet);box-shadow:var(--key-shadow);font:500 12px var(--head);color:var(--ink-2)}
/* voice settings: a sheet of paper, because the controls belong together */
.tu-settings{flex:none;margin-top:12px;max-height:40vh;overflow:auto;padding:18px 20px;background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift)}
.tu-settings h3{margin-bottom:12px;font:600 16px var(--head)}
.tu-sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px;align-items:start}
.tu-set{display:flex;flex-direction:column;gap:6px;font:500 14px var(--head);color:var(--ink-2)}
.tu-set select{width:100%;min-height:42px}
.tu-sets .chk small,.tl-start .chk small{display:block;font:400 13.5px/1.45 var(--body);color:var(--ink-3)}

/* ---------- the lesson's checkpoints as magnets (start side) ---------- */
.tu-agenda{grid-area:agenda;min-width:0;min-height:0;overflow-y:auto;padding:26px 0 20px}
.tu-agenda h2{font:700 18px/1.3 var(--head)}
.tu-agenda .lesson{margin-top:4px;font:500 15px/1.45 var(--body);color:var(--ink-2)}
.tu-agenda .track{display:flex;align-items:center;gap:7px;margin:4px 0 24px;font-size:13.5px;color:var(--ink-3)}
.tu-agenda .track i{flex:none;width:8px;height:8px;border-radius:50%}
.tu-course{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tu-course li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.tu-course .cp{flex:none}
.tu-course b{display:block;padding-top:3px;font:500 15px/1.4 var(--head);color:var(--ink-2)}
.tu-course li.done b{color:var(--ink-3)}
.tu-course small{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
/* the current checkpoint carries a paper flag, as "כאן עצרתם" does on the lesson page */
.tu-course li.cur > div{padding:8px 12px 10px;background:var(--sheet);border:1px solid var(--rule);border-radius:3px;box-shadow:0 4px 8px -4px rgba(0,0,0,.28);transform:rotate(-.8deg)}
.tu-course li.cur b{padding-top:0;color:var(--ink);font-weight:600}
.tu-course .tu-task{display:block;margin:4px 0 0;padding:6px 0;border:0;background:none;color:var(--blue);font:500 14px/1.45 var(--body);text-align:start;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tu-course .tu-task:hover{text-decoration-thickness:2px}
.ticks{display:flex;align-items:center;gap:3px;margin:4px 0 6px}
.ticks i{flex:1;max-width:14px;height:4px;border-radius:2px;background:var(--rule-2)}
.ticks i.done{background:var(--green)}
.ticks i.cur{height:8px;background:var(--blue)}

/* ---------- the full board of the task (opens over the board column) ---------- */
.tu-drawer{grid-area:wall;z-index:2;min-width:0;min-height:0;overflow-y:auto;padding:24px 4px;background:var(--board)}
.tu-dh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tu-dh h2{font:700 20px/1.3 var(--head)}
.tu-dmeta{margin-top:4px;font-size:14px;color:var(--ink-3)}
.tcm-i{flex:none;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.tcm-i:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.tu-dnav{display:flex;gap:8px;margin:14px 0 18px}
.tu-dnav .btn{height:40px}
.tu-dscene{margin-bottom:var(--s5)}
.tu-dscene svg{display:block;width:100%;height:auto}
.tu-dscene pre{margin:0;direction:ltr;text-align:left;overflow-x:auto;font:400 13px/1.65 var(--mono);color:var(--ink)}
.tu-dscene table{width:100%;border-collapse:collapse;font-size:14px}
.tu-dscene th,.tu-dscene td{padding:6px 8px;border-bottom:1px solid var(--rule);text-align:start}
.tu-drawer .ttext{max-width:62ch;margin-bottom:var(--s4);font-size:16px;line-height:1.7;color:var(--ink)}
.tu-drawer .chips{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px}
.tu-drawer .chips li{max-width:190px;padding:13px 12px 11px;background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note);color:var(--note-ink);border-radius:1px;box-shadow:var(--note-shadow);font:500 14.5px/1.5 var(--body);transform:rotate(-1deg)}
.tu-drawer .chips li:nth-child(2n){transform:rotate(.7deg)} .tu-drawer .chips li:nth-child(3n){transform:rotate(-.3deg)}
.tu-drawer .chips li.w{background:linear-gradient(180deg,var(--note-edge) 0 15px,transparent 15px),var(--note-pink);color:var(--ink)}

/* ---------- 1024 to 1279: the checkpoints become a strip over the conversation and the board ---------- */
@media (max-width:1279px){
  .tu-main{grid-template-columns:minmax(0,640px) minmax(280px,400px);grid-template-areas:"agenda agenda" "col wall";grid-template-rows:auto minmax(0,1fr);column-gap:40px}
  .tu-agenda{display:flex;align-items:center;gap:16px;overflow:visible;padding:12px 0 0}
  .tu-agenda h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tu-agenda .track,.tu-agenda .ticks,.tu-course small{display:none}
  .tu-agenda .lesson{flex:none;max-width:32%;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--ink)}
  .tu-course{flex:1;min-width:0;flex-direction:row;align-items:center;gap:8px}
  .tu-course li{display:flex;align-items:center;gap:10px;min-width:0}
  .tu-course li:not(.cur) > div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tu-course li.cur{flex:1}
  .tu-course li.cur > div{display:flex;align-items:center;gap:10px;min-width:0;padding:0;background:none;border:0;box-shadow:none;transform:none}
  .tu-course li.cur b{flex:none;white-space:nowrap}
  .tu-course .tu-task{margin:0;padding:8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .tu-col,.tu-wb,.tu-drawer{padding-top:14px}
}
/* ---------- under 1024: one column; the board notes go back into the transcript, inside a marker frame ---------- */
@media (max-width:1023px){
  .tu-main{display:flex;flex-direction:column;align-items:center;padding:0 24px}
  .tu-agenda,.tu-col{width:min(760px,100%)}
  .tu-agenda{order:-1}
  .tu-col{flex:1}
  .tu-wb{display:none}
  .tu-stream .tu-board{position:relative;display:block;width:min(560px,100%);padding:14px 18px 16px}
  .tu-stream .tu-board .tu-frame{display:block;position:absolute;inset:-3px -2px -4px -3px;width:calc(100% + 5px);height:calc(100% + 7px);overflow:visible;pointer-events:none;
    fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .tu-stream .tu-board .tu-frame path{vector-effect:non-scaling-stroke}
  .tu-drawer{position:absolute;inset-block:12px;inset-inline-start:16px;width:min(440px,calc(100% - 32px));z-index:5;padding:18px 20px;background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift-2)}
}
/* ---------- phones ---------- */
@media (max-width:640px){
  .tu-top{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding-inline:8px}
  .tu-top .tu-lbl,.tu-dock .tu-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tu-s{gap:2px}
  .tu-sep,.tu-bar,.tu-timer .of,.tu-foot .tu-keys{display:none}
  .tu-back{padding:0 8px}
  .tu-top h1{font-size:14.5px;text-align:start}
  .tu-e{gap:8px;padding:3px;padding-inline-start:10px}
  .tu-e .tu-end{padding-inline:10px 22px;font-size:14px}
  .tu-main{padding:0 16px}
  .tu-agenda .lesson,.tu-course li.cur b{display:none}
  .tu-col{padding-bottom:10px}
  .tu-ring{width:48px;height:48px} .tu-who .tu-ring .bit{width:38px;height:38px}
  .tu-p.me b,.tu-mes [data-tc="mestate"]{display:none}
  .tu-turn{max-width:94%}
  .tu-cap{font-size:24px} [data-size="l"] .tu-cap{font-size:29px} [data-size="xl"] .tu-cap{font-size:34px}
  .tu-cap .now{text-decoration-thickness:3px;text-underline-offset:7px}
  .tu-dock{grid-template-columns:auto auto auto;justify-content:center;gap:8px;padding:8px;margin-top:18px}
  .tu-dock .btn{width:46px;padding-inline:8px 18px}
  .tu-dock .btn::after{width:10px}
  .tu-dock [data-act="tutorrate"]{display:none}
  .tu-seg button{width:40px}
  .tu-mic{width:64px;height:64px;margin-block:-16px}
  .tu-foot{gap:0 14px}
}

/* ---------- the call window inside a lesson: a pocket board like Bit's chat, rail on top, tray at the bottom ---------- */
#tutormini{position:fixed;inset-inline-end:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:60;width:min(380px,calc(100vw - 32px))}
.tcm{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 120px);overflow:auto;background:var(--board);border:1px solid var(--alu-edge);border-radius:10px;
  box-shadow:inset 0 0 0 3px var(--alu-hi),var(--lift-2);animation:tu-open .26s cubic-bezier(.16,1,.3,1)}
@keyframes tu-open{from{opacity:0;transform:translateY(14px)}}
.tcm > :not(.tcm-h):not(.tcm-ctl){margin-inline:16px}
.tcm-h{flex:none;display:flex;align-items:center;gap:10px;padding:8px 6px;padding-inline-start:12px;
  background:var(--alu-grain),linear-gradient(180deg,var(--alu-hi),var(--alu) 55%,var(--alu-lo));
  border-bottom:1px solid var(--alu-edge);box-shadow:inset 0 1px 0 var(--alu-shine)}
.tcm-h .tu-ring.sm::after{inset:-3px -5px -4px -4px}
.tcm-t{flex:1;min-width:0}
.tcm-t b{display:block;font:700 15px/1.3 var(--head);color:var(--ink)}
.tcm-t .tu-st{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcm .tu-timer{font-size:12.5px;color:var(--ink-2)}
.tcm-h .tcm-i:hover{background:color-mix(in srgb,var(--sheet) 45%,transparent);border-color:var(--alu-edge)}
.tcm-about{margin-top:2px}
.tu-live.sm{padding:0}
.tu-live.sm .tu-cap{margin:0;font-size:20px;line-height:1.45;min-height:1.45em;max-height:34vh;overflow:auto}
[data-size="l"] .tu-live.sm .tu-cap{font-size:24px} [data-size="xl"] .tu-live.sm .tu-cap{font-size:28px}
.tu-live.sm .tu-cap .now{text-decoration-thickness:3px;text-underline-offset:7px}
.tu-live.sm .tu-heard{font-size:15px}
.tcm-board{padding-top:10px;border-top:1px dashed var(--rule-3)}
.tcm-board .tu-board p{font-size:16px}
.tcm-board .tu-cmd{font-size:13.5px}
.tcm .tu-type input{min-height:40px}
.tcm .tu-type .btn{height:40px}
.tcm-recap{font-size:15px;line-height:1.6;color:var(--ink-2)}
.tcm-ctl{flex:none;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin-top:2px;padding:10px 12px;
  background:linear-gradient(180deg,var(--tray-lo),var(--tray-hi));border-top:1px solid var(--tray-edge);box-shadow:inset 0 2px 3px rgba(0,0,0,.16)}
.tcm-ctl .btn{height:40px;gap:6px;padding-inline:10px 20px}
.tcm-ctl .btn::after{width:10px}
.tcm-ctl .btn[aria-pressed="true"],.tcm-ctl .btn[aria-expanded="true"]{--cap:var(--blue);background:var(--board-3);box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.tcm-ctl [data-act="tutormode"]{flex:none;width:46px;padding-inline:8px 18px}
.tcm-ctl [data-act="tutormode"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tcm.done .tcm-ctl{flex-wrap:wrap}
.tcm .btn.pri,.tu-consent .btn.pri,.tlob .btn.pri,.tsum .btn.pri{color:var(--sheet)}
@media (max-width:760px){
  #tutormini{inset-inline:8px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  body.tutor-call .bit-fab,body.tutor-call #bitbub{display:none}
  .tcm{max-height:calc(100vh - 150px)}
}

/* ---------- consent: a sheet taped to the board ---------- */
.tu-modal{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow-y:auto;padding:28px 16px;background:rgb(20 24 30 / .5)}
.tu-consent{position:relative;margin:auto;width:min(540px,100%);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px;padding:32px 28px 24px;background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift-2)}
.tu-consent > :not(.tu-ring):not(h2){grid-column:1 / -1}
.tu-consent::before{content:"";position:absolute;top:-11px;inset-inline-start:calc(50% - 56px);width:112px;height:24px;background:var(--tape);opacity:.94;transform:rotate(-2deg);box-shadow:0 1px 1px rgba(0,0,0,.08)}
.tu-consent .tu-ring{width:56px;height:56px}
.tu-consent h2{font:700 21px/1.3 var(--head)}
.tu-consent p{max-width:62ch;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.tu-cbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* ---------- the lobby ---------- */
.tlob{max-width:1080px;margin-inline:auto;padding-top:var(--s2)}
.tl-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s7);margin-bottom:var(--s8)}
.tl-intro h1{font-size:34px;line-height:1.2}
.tl-intro p{margin-top:var(--s3);max-width:62ch;font-size:17px;line-height:1.68;color:var(--ink-2);text-wrap:pretty}
.tl-left{margin-top:var(--s4)}
.tl-left .tag .ic{width:14px;height:14px}
.tl-bit{display:flex;flex-direction:column;align-items:center;gap:10px;padding-inline:var(--s6)}
.tl-bit .tu-ring::after{opacity:1;transform:rotate(-4deg)}
.tl-bit .hand{font-size:30px;white-space:nowrap;transform:rotate(-3deg)}
.tl-block,.tl-pay{margin-bottom:var(--s7)}
.tl-block{max-width:72ch}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s8);align-items:start}
.tlob h2{font:700 20px/1.3 var(--head)}
/* starting a lesson is a form, so it gets the one sheet of paper on this page */
.tl-start{display:flex;flex-direction:column;gap:var(--s5);padding:var(--s6) var(--s7) var(--s7);background:var(--sheet);border-radius:var(--r-paper);box-shadow:var(--lift)}
.tl-start fieldset{min-width:0;margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:8px}
.tl-start legend{padding:0;margin-bottom:8px;font:500 15px var(--head);color:var(--ink-2)}
.tl-kinds label,.tl-mode label{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:11px 14px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--sheet);cursor:pointer;transition:border-color .15s,background-color .15s}
.tl-kinds label:hover,.tl-mode label:hover{border-color:var(--rule-3)}
.tl-kinds label:has(input:checked),.tl-mode label:has(input:checked){border-color:var(--blue);background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue)}
.tl-kinds label:has(input:focus-visible),.tl-mode label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.tl-kinds input,.tl-mode input{flex:none;margin-top:4px}
.tl-kinds b,.tl-mode span{display:block;font:600 15.5px/1.4 var(--head);color:var(--ink)}
.tl-kinds small,.tl-mode small{display:block;margin-top:2px;font:400 14px/1.45 var(--body);color:var(--ink-3)}
.tl-mode .ic{flex:none;margin-top:3px;color:var(--ink-2)}
.tl-start .btn.lg{align-self:flex-start;margin-top:var(--s2)}
/* the device check is written on the board: a small magnet per item */
.tl-dev{padding-top:var(--s5)}
.tl-check{list-style:none;margin:var(--s5) 0 var(--s5);padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.tl-check li{display:flex;align-items:flex-start;gap:12px}
.tl-check li .ic{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;margin-top:1px}
.tl-check li.ok .ic{color:var(--sheet);background:var(--green);box-shadow:var(--magnet-shadow)}
.tl-check li.no .ic{color:var(--warn);border:2px solid var(--warn);padding:2px}
.tl-check b{display:block;font:600 15px/1.4 var(--head)}
.tl-check span{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}
.tl-tests{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--s3)}
.tl-dev > .lnk{min-height:40px}
.tl-hist{margin-top:var(--s9)}
.tl-hist ul{list-style:none;max-width:820px;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--rule)}
.tl-hist li a{display:flex;flex-direction:column;gap:2px;padding:12px 4px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.tl-hist li a:hover b{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.tl-hist b{font:600 16px/1.4 var(--head)}
.tl-hist span{font-size:14px;line-height:1.5;color:var(--ink-3)}
.tl-hist > p{margin-top:var(--s3);color:var(--ink-3)}
.tl-priv{display:flex;align-items:flex-start;gap:8px;max-width:80ch;margin-top:var(--s7);font-size:14px;line-height:1.55;color:var(--ink-3)}
.tl-priv .ic{flex:none;margin-top:2px}
@media (max-width:860px){
  .tl-grid{grid-template-columns:1fr;gap:var(--s7)}
  .tl-hero{grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s7)}
  .tl-bit{order:-1;flex-direction:row;justify-content:flex-start;padding:0;gap:14px}
  .tl-bit .tu-ring.lg{width:72px;height:72px} .tl-bit .tu-ring .bit{width:58px;height:58px}
  .tl-intro h1{font-size:27px}
  .tl-start{padding:var(--s5) var(--s5) var(--s6)}
  .tl-start .btn.lg{align-self:stretch}
}

/* ---------- the summary ---------- */
.tsum{max-width:780px;margin-inline:auto;padding-top:var(--s2)}
.ts-h{display:flex;align-items:center;gap:var(--s5)}
.ts-h .tu-ring{width:68px;height:68px}
.ts-h h1{font-size:30px}
.ts-title{margin-top:4px;font:500 17px/1.4 var(--head);color:var(--ink-2)}
.ts-meta{margin-top:2px;font-size:14px;color:var(--ink-3)}
.ts-recap{margin-top:var(--s7);max-width:64ch;font:400 19px/1.7 var(--body);color:var(--ink);text-wrap:pretty}
.ts-topics{margin:var(--s5) 0 0;padding:0;list-style:none}
.ts-topics code,.tcm-about code{padding:0;background:none;font-size:.95em}
.tsum h2{font:700 20px/1.3 var(--head)}
.ts-notes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s6);margin-top:var(--s8)}
.ts-note{flex:1 1 260px;max-width:360px;padding:16px 18px 18px;border-radius:1px;box-shadow:var(--note-shadow);transform:rotate(-.8deg);
  background:linear-gradient(180deg,var(--note-edge) 0 18px,transparent 18px),var(--note);color:var(--note-ink)}
.ts-note.good{background:linear-gradient(180deg,var(--note-edge) 0 18px,transparent 18px),var(--note-green);color:var(--ink)}
.ts-note + .ts-note{transform:rotate(.6deg)}
.tsum .ts-note h2{margin-bottom:8px;font:600 16px/1.3 var(--head);color:inherit}
.ts-note ul{margin:0;padding-inline-start:18px}
.ts-note li{font:500 15px/1.5 var(--body)}
.ts-note li + li{margin-top:6px}
.ts-next{margin-top:var(--s9)}
.ts-next ol{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.ts-next li{display:flex;align-items:flex-start;gap:var(--s3);max-width:64ch;font-size:16.5px;line-height:1.55}
.ts-links{margin-top:var(--s8)}
.ts-links ul{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--rule)}
.ts-link{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.ts-link:hover{text-decoration:none}
.ts-link .ic{flex:none;color:var(--ink-3)}
.ts-link b{display:block;font:600 15.5px/1.4 var(--head);color:var(--blue)}
.ts-link:hover b{text-decoration:underline;text-underline-offset:4px}
.ts-link small{display:block;font-size:13.5px;color:var(--ink-3)}
.ts-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule)}
.ts-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ts-del{margin-inline-start:auto}
.ts-log{margin-top:var(--s7)}
.ts-log summary{padding-block:8px;font:600 15.5px var(--head)}
.ts-log p{max-width:68ch;margin:10px 0;font-size:15px;line-height:1.65;color:var(--ink-2)}
.ts-log p.b b{color:var(--ink)}
.ts-nolog{margin-top:var(--s5);font-size:14px;color:var(--ink-3)}
@media (max-width:640px){
  .ts-h h1{font-size:25px}
  .ts-recap{font-size:17.5px}
  .ts-note{max-width:none}
  .ts-acts{flex-direction:column;align-items:flex-start;gap:0}
  .ts-del{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px dashed var(--rule-2);align-self:stretch}
}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion:reduce){
  .tu-mic[aria-pressed="true"]::after{animation:none;opacity:1;transform:none}
  [data-st="thinking"] .tu-ring::after{animation:none}
  .tu-mic:hover,.tu-mic:active{transform:none}
}
@media print{ #tutorhost,#tutormini{display:none!important} }