:root{
  --bg:#EAF1F6;--surface:#FFFFFF;--ink:#13293D;--muted:#566879;--blue:#1B6CA8;--green:#4F8A2A;--sun:#F2B33D;--bad:#C2413B;--line:#CBD8E3;--edge:#7D8FA0;--green-ink:#427826;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1D2B;--surface:#172A3D;--ink:#E8F0F6;--muted:#9AB0C2;--blue:#5BA7E0;--green:#8DC15A;--sun:#F5C35E;--bad:#EF6F68;--line:#2A4258;--edge:#64819A;--green-ink:#8DC15A;}}
:root[data-theme="dark"]{--bg:#0F1D2B;--surface:#172A3D;--ink:#E8F0F6;--muted:#9AB0C2;--blue:#5BA7E0;--green:#8DC15A;--sun:#F5C35E;--bad:#EF6F68;--line:#2A4258;--edge:#64819A;--green-ink:#8DC15A;}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
/* v354: Rubik (the English and interface font) is served from the site's own fonts/ folder (SIL OFL, fonts/OFL-Rubik.txt) instead of Google Fonts:
   one variable file per script covers weights 300-900, so it loads with the page, works offline and in the Android app on a poor connection */
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
/* v355: the certificate's Cinzel and Cormorant Garamond are served from fonts/ too (variable fonts, SIL OFL), so nothing loads from Google Fonts. A browser downloads them only when a certificate shows them. */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/cinzel-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/cinzel-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-garamond-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-garamond-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-garamond-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-garamond-latin-ext-wght-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ---- v194: Hebrew type. One stack for all Hebrew. "IvritHe" covers only the Hebrew letters and points (the Latin text stays in Rubik): it is Hadassah Friedlaender when
   the device has it (it ships with Microsoft Office), and otherwise the Frank Ruhl Libre that comes with the site (fonts/, SIL OFL), so it also works offline. ---- */
@font-face{font-family:"IvritHe";font-style:normal;font-weight:300 600;font-display:swap;src:local("Hadassah Friedlaender"),local("HadassahFriedlaender"),local("Hadassah Friedlaender Regular"),local("HadassahFriedlaender-Regular"),url(../fonts/frank-ruhl-libre-hebrew.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"IvritHe";font-style:normal;font-weight:700 900;font-display:swap;src:local("Hadassah Friedlaender Bold"),local("HadassahFriedlaender-Bold"),local("Hadassah Friedlaender"),url(../fonts/frank-ruhl-libre-hebrew.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/frank-ruhl-libre-hebrew.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/frank-ruhl-libre-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font-he:"Hadassah Friedlaender","IvritHe","Frank Ruhl Libre","David","Times New Roman",serif}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:1rem/1.5 "IvritHe",Rubik,"Segoe UI",Arial,sans-serif}
.he{font-family:var(--font-he);direction:rtl}
button,select{font:inherit;color:inherit}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
select{background-color:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
option,optgroup{background-color:var(--surface);color:var(--ink)}
html[data-ts="l"]{font-size:112.5%}html[data-ts="xl"]{font-size:125%}html[data-ts="xxl"]{font-size:150%}html[data-ts="max"]{font-size:200%}
.goalring{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;margin:0;border:0;background:none;cursor:pointer;color:var(--ink);line-height:1;flex:none;vertical-align:middle}
.goalring>*{grid-area:1/1}
.goalring svg{display:block;width:40px;height:40px;transform:rotate(-90deg)}
.goalring circle{fill:none;stroke-width:3}.goalring .gbg{stroke:var(--line)}
.goalring .gfg{stroke:var(--sun);stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;transition:stroke-dashoffset .5s}
.goalring.goalmet .gfg{stroke:var(--green)}
.goalring span{display:block;font-size:.72rem;font-weight:700;line-height:1;text-align:center;letter-spacing:-.03em;white-space:nowrap}
.goalring.goalmet span{font-size:.85rem;color:var(--green-ink)}
.goalring[hidden]{display:none}
.kbdhint{display:none;font-size:.78rem;color:var(--muted);text-align:center;margin:6px 0 0}
@media (hover:hover) and (pointer:fine){.kbdhint{display:block}}
.mineform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 12px;align-items:end}
.minerow{grid-template-columns:minmax(90px,1.2fr) 1fr 1.5fr auto}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.wrap{max-width:880px;margin:0 auto;padding:20px 18px 48px}

.hero{padding:8px 0 16px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.05rem}
.brand span{color:var(--muted);font-weight:400}
.stats{display:flex;gap:16px;font-size:.92rem;color:var(--muted)}
.stats b{color:var(--ink)}
/* v193: the level header is a title (number, "of 12", name in English and Hebrew) and four labelled boxes in the style of the XP and Rank cards.
   Phone: the title on one line, the boxes 2 × 2 below it. From 800 px (a landscape phone, a tablet, a desktop): the title on the left, the four boxes in one row beside it. */
.yearline{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:22px 0 4px}
.lvlhead{align-self:stretch;display:flex;flex-direction:column;gap:14px}
.lvltitle{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.lvlnum{display:flex;align-items:baseline;gap:6px;flex:none}
.yearbig{font-size:4rem;font-weight:900;line-height:1;color:var(--blue)}
.lvlof{font-size:1rem;color:var(--muted)}
.lvlname{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;min-width:0}
.lvlname b{font-size:1.6rem;font-weight:700;line-height:1.2}
.lvlname .he{font-size:1.5rem;font-weight:500}
.lvltiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.lvltile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.lvltile dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.lvltile dd{margin:0}
.lvltile dd b{display:block;font-size:1.15rem;font-weight:700;line-height:1.2;color:var(--ink)}
.lvltile dd small{display:block;font-size:.8rem;line-height:1.35;color:var(--muted)}
.lvltile dd small:empty{display:none}
.lvltile dd small span{display:block}
.lvltile dd small svg{width:1em;height:1em;vertical-align:-.15em;stroke:var(--blue)}
.yearaway{margin:0;font-size:.95rem;color:var(--muted)}
.sronly{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lvltile dd b{overflow-wrap:anywhere}
@media (max-width:360px){.lvltile{padding:10px}}
@media (min-width:800px){.lvlhead{flex-direction:row;align-items:center;gap:20px}.lvltitle{flex:0 1 auto;max-width:190px;flex-direction:column;align-items:flex-start;gap:2px}.lvlname b{font-size:1.45rem}.lvlname .he{font-size:1.4rem}
  .lvltiles{flex:1;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr))}.lvltile{padding:10px 12px}.lvltile dd b{font-size:clamp(1rem,1.9vw,1.15rem)}}
.track{position:relative;margin-top:22px}
/* the level tiles carry the levels' full names (Foundations, Survival, Daily life…), so they sit six to a row, four on a phone */
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.lvl{border:0;border-radius:6px;padding:6px 3px 5px;background:var(--line);color:var(--muted);font-size:.72rem;line-height:1.2;text-align:center;min-width:0}
.lvl b{display:block;font-weight:500;overflow-wrap:break-word;hyphens:none}
.lvl span{font-size:.72rem;opacity:.85}
.lvl.on{background:var(--blue);color:#fff}
.lvl.cur{background:var(--sun);color:#13293D}
.lvl.cur b{font-weight:700}
@media (max-width:780px){.levels{grid-template-columns:repeat(4,1fr)}}
@media (max-width:400px){.lvl{font-size:.75rem}}
input[type=range]{width:100%;margin:12px 0 0;accent-color:var(--blue);height:28px}
.ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}

.groups{display:flex;gap:6px;margin:24px 0 0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.groups::-webkit-scrollbar{display:none}
.groups button{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 16px;font-weight:600;cursor:pointer}
.groups button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.groups{gap:4px}.groups::before,.groups::after{content:"";margin:auto}
.groups .gmore{border-style:dashed;padding:6px 12px;color:var(--muted)}
.groups button{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 4px;font-size:.9rem}
.gicn{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.18),transparent 52%),linear-gradient(150deg,var(--c1),var(--c2));box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 3px 8px -4px var(--c2)}
.gicn svg{width:16px;height:16px;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.22));transition:transform .3s cubic-bezier(.34,1.7,.5,1)}
.groups button:hover .gicn svg,.groups button:focus-visible .gicn svg{transform:rotate(-10deg) scale(1.1)}
.groups button[aria-selected=true] .gicn{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 8px -4px var(--c2)}
.modes{display:flex;gap:0;flex-wrap:wrap;margin:8px 0 0;border-bottom:2px solid var(--line)}
.modes button{flex:1 1 auto;white-space:nowrap;text-align:center}
.modes[hidden]{display:none}
.coursebar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:14px 0 0;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;background:color-mix(in srgb,var(--blue) 8%,var(--surface));font-size:.9rem}
.coursebar[hidden]{display:none}.coursebar b{color:var(--ink)}.coursebar .steps{display:inline-flex;gap:4px;margin-left:4px}
.coursebar .steps i{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--blue);font-style:normal}
.coursebar .steps i.on{background:var(--green);border-color:var(--green)}.coursebar .steps i.cur{background:var(--blue)}
.coursebar .plan{display:inline-flex;flex-wrap:wrap;gap:6px}.coursebar .plan span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.82rem;color:var(--muted)}
.coursebar .plan span.on{border-color:var(--green);color:var(--green-ink)}.coursebar .plan span.cur{border-color:var(--blue);color:var(--ink);font-weight:600}
.sstart{border-radius:16px;padding:18px 20px;margin:8px 0 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 18%,var(--surface)),color-mix(in srgb,var(--sun) 14%,var(--surface)));border:1px solid var(--line)}
.sstart .greet{font-size:1.8rem;line-height:1.2;margin:0;text-align:left}.sstart .greet small{display:block;font-size:.85rem;color:var(--muted);font-family:Rubik,"Segoe UI",Arial,sans-serif;direction:ltr;margin-top:2px}
.sstart .streak{display:inline-block;margin:10px 0 2px;padding:4px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600}
.sstart h2{margin:12px 0 2px;font-size:1.3rem}.sstart .what{margin:0;font-size:1.05rem}.sstart .also{margin:4px 0 0;color:var(--muted)}
.sstart .go{margin:14px 0 10px;font-size:1.15rem;padding:14px 28px;letter-spacing:.5px;width:100%}
.sstart .goal{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:.9rem;color:var(--muted)}.sstart .goal .bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}.sstart .goal .bar i{display:block;height:100%;background:var(--sun)}
.done .snext{margin-bottom:10px}
.ccard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0;background:var(--surface);display:flex;flex-direction:column}
.ccard.active{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 30%,transparent)}
.ccard .btn{align-self:flex-start;margin-top:auto}
.cicon{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;margin:0 0 10px;border-radius:16px;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.38),transparent 46%),linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 8px 18px -8px var(--c2),inset 0 -3px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.4)}
.cicon svg{width:38px;height:38px;overflow:visible;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.18));transition:transform .35s cubic-bezier(.34,1.7,.5,1)}
.ccard.has-icon:hover .cicon svg,.ccard.has-icon:focus-within .cicon svg{transform:rotate(-8deg) scale(1.12)}
.cicon .cbadge{position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;display:grid;place-items:center;font-size:14px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--green)}
.cicon.sm{display:inline-grid;width:24px;height:24px;border-radius:7px;margin:0 6px 0 0;vertical-align:-6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}.cicon.sm svg{width:18px;height:18px;filter:none}
.cicon.lg{display:inline-grid;width:44px;height:44px;border-radius:13px;margin:0 10px 0 0;vertical-align:middle}.cicon.lg svg{width:30px;height:30px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:6px 0 4px}
.standing{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:color-mix(in srgb,var(--blue) 6%,var(--surface));margin:8px 0 4px}
.standline{margin:0 0 8px;color:var(--muted)}.standline b{color:var(--ink)}
.standing .sgrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.standing .sbox b small{font-size:.8rem;color:var(--muted);font-weight:500}
.lvlbar{display:grid;grid-template-columns:1fr;gap:4px;margin:10px 0 4px;font-size:.9rem}.lvlbar .bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}.lvlbar .bar i{display:block;height:100%;background:var(--green)}
.standhead{margin:10px 0 2px;font-weight:600}.cans{margin:0;padding-left:20px}.cans li{margin:2px 0}
.ccard h3{margin:0 0 4px}.ccard .bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:8px 0 6px}.ccard .bar i{display:block;height:100%;background:var(--green)}
.lesson{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.lesson .st{font-size:1.2rem;text-align:center}.lesson small{display:block;color:var(--muted)}
.lesson .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.lesson .chips span{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted)}.lesson .chips span.on{border-color:var(--green);color:var(--green-ink)}.lesson .chips button{font:inherit;font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted);background:transparent;cursor:pointer}.lesson .chips button.on{border-color:var(--green);color:var(--green-ink)}.lesson .chips button.known{border-style:dashed}.lesson .chips button:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}.lesson .chips button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.celeb{text-align:center}.celeb .big{font-size:3.4rem;line-height:1.1;margin:4px 0}.celeb .can{font-size:1.15rem;margin:10px 0}.celeb .stats{color:var(--muted);margin:6px 0 14px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:10px;height:14px;border-radius:2px;opacity:.95;animation:cfall 3s linear forwards}
@keyframes cfall{to{transform:translateY(calc(108vh / var(--z))) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
.modes button{background:none;border:0;padding:10px 9px;margin-bottom:-2px;border-bottom:3px solid transparent;color:var(--muted);font-weight:500}
.modes button[aria-selected=true]{color:var(--ink);border-color:var(--blue)}
.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:12px 0 14px;font-size:.88rem;color:var(--muted)}
.controls select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px}
.controls label{display:flex;align-items:center;gap:8px}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.88rem;margin-bottom:12px;gap:10px}
.combo{color:var(--green-ink);font-weight:700}
.timer{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:14px}
.timer i{display:block;height:100%;width:100%;background:var(--sun)}

.card>span{display:block}
/* v193: the word's speaker and slow buttons sit inside the card, at the bottom (space is kept for them); a tap between them still flips the card.
   The two buttons under a revealed card share one line; on a very narrow screen their text wraps inside them */
.cardbox{position:relative}.cardbox .card{padding-bottom:70px}
.cardsay{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;pointer-events:none}.cardsay .btn{pointer-events:auto}
.row.cardacts{flex-wrap:nowrap;justify-content:flex-start}.row.cardacts .btn{flex:0 1 auto;min-width:0;white-space:normal}
@media (max-width:400px){.row.cardacts{gap:8px}.row.cardacts .btn{padding-left:12px;padding-right:12px}}
.card{border:2px dashed var(--line);border-radius:12px;padding:30px 18px;text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:10px;background:none;width:100%}
.word{font-size:clamp(2.2rem,8vw,3.8rem);font-weight:700;line-height:1.2}
.word.long{font-size:clamp(1.6rem,5.5vw,2.6rem)}
.tr{color:var(--muted);font-style:italic}
.en{font-size:1.25rem;font-weight:500}
.tag{display:inline-block;font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:1px 10px}
.hint{color:var(--muted);font-size:.85rem}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{border:2px solid var(--line);background:var(--surface);border-radius:10px;padding:11px 18px;font-weight:500}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn.speak{padding:8px 12px}
.opts{display:grid;gap:10px;margin-top:18px}
@media (min-width:640px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{text-align:start;border:2px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 16px;font-size:1.05rem;transition:transform .12s}
.opt.he{text-align:right;font-size:1.35rem}
.opt:not(:disabled):hover{border-color:var(--blue)}
.opt.right{border-color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--surface))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
/* v187: right and wrong are marked by a sign as well as by colour */
.opt.right,.opt.wrong{position:relative}
.opt.right::after,.opt.wrong::after{position:absolute;top:-9px;inset-inline-end:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 .75rem/1 Rubik,system-ui,sans-serif;color:var(--surface);direction:ltr;pointer-events:none}
.opt.right::after{content:"✓";background:var(--green)}.opt.wrong::after{content:"✗";background:var(--bad)}
.opt small{display:block;font-family:Rubik,sans-serif;font-size:.85rem;color:var(--muted)}
.opt.he small{direction:ltr;text-align:right}
.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.04)}}
.prompt{text-align:center;padding:6px 0 2px}
.prompt .en{font-size:1.5rem}
.bubble{display:inline-block;background:color-mix(in srgb,var(--blue) 12%,var(--surface));border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:14px 20px;font-size:1.6rem}
.ctx{color:var(--muted);margin:0 0 12px}
.ctx b{color:var(--ink)}
.answer{min-height:64px;border-bottom:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;direction:rtl}
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;direction:rtl}
.tile{border:2px solid var(--line);background:var(--bg);border-radius:8px;padding:8px 14px;font-size:1.4rem}
.tile:disabled{opacity:.25}
.feedback{min-height:1.6em;margin-top:14px;font-weight:500;display:flow-root}
.feedback.good{color:var(--green-ink)}.feedback.bad{color:var(--bad)}
.feedback .reportlink{float:right;margin-left:14px;white-space:nowrap}
.done{text-align:center;padding:30px 0}
.done .score{font-size:4rem;font-weight:900;color:var(--blue);line-height:1}
.note{font-size:.85rem;color:var(--muted);margin-top:10px}
.voicehelp{margin:0 0 12px}
a.site{color:inherit;text-decoration:none;font-weight:600}
a.site:hover{text-decoration:underline}
.placelink{margin:8px 0 0;font-size:.9rem;text-align:center}
.placelink span{color:var(--muted)}
.placelink .linkbtn{font-weight:600}
.acctbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:500;cursor:pointer}
.acct{margin:0 0 14px;max-width:520px}
.acct h2{margin:0 0 6px;font-size:1.15rem}
.acct .tabs2{display:flex;gap:8px;margin:0 0 10px}
.acct .tabs2 button{flex:1}
.acct .tabs2 button[aria-pressed="true"]{font-weight:600}
.field{display:block;margin:8px 0;font-size:.9rem}
.field input,.field select{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.acct .linkbtn{font-size:.85rem}
/* v212: the dialog's close button is just a big bold ✕ (the word "Close" is gone; the aria-label still says it) */
#aClose{font-size:1.7rem;font-weight:900;line-height:1;text-decoration:none;color:var(--ink);width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin:-17px -17px -17px 0}
/* the ✕ is centred in a 44px touch box, so it sits about 10px from the dialog's top and right edges; the negative margins cancel the panel padding (18px) and keep the space it takes small */
@media (min-width:1100px){.acct.wide #aClose,.acct.acctwide #aClose{margin:-25px -33px -17px 0}}   /* only the wide dialogs pad 26px 34px; the normal ones (Before you start, sign-in) keep the 18px margins above */
.installbtn{border:1px solid var(--sun);background:color-mix(in srgb,var(--sun) 16%,var(--surface));color:var(--ink);border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:600;cursor:pointer}
.steps{padding-left:22px;line-height:1.6}.steps li{margin:6px 0}
.reportlink{font-size:.8rem;color:var(--muted)}
.repword{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0 12px}
.repword .he{font-size:1.5rem;display:block}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;border:0;padding:0}
.chips legend{font-size:.9rem;margin-bottom:6px;padding:0}
.chips label{border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.85rem;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips input:checked+span{color:var(--blue);font-weight:600}
.chips label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,transparent)}
.chips label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.field textarea{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;min-height:80px;resize:vertical}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0 6px}
.sbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sbox b{display:block;font-size:1.5rem;line-height:1.2}
.sbox span{font-size:.8rem;color:var(--muted)}
.hbars{margin:6px 0}.hbar{display:grid;grid-template-columns:110px 1fr 36px;gap:8px;align-items:center;font-size:.82rem;margin:3px 0}
.hbar i{display:block;height:10px;border-radius:5px;background:var(--blue);min-width:2px}
.acctover .acct.wide{max-width:min(1240px,96vw)}
.tablewrap{overflow-x:auto;margin:6px 0;scrollbar-width:thin;
  background:linear-gradient(to right,var(--surface) 30%,transparent),linear-gradient(to left,var(--surface) 30%,transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgb(0 0 0 / .14),transparent),radial-gradient(farthest-side at 100% 50%,rgb(0 0 0 / .14),transparent) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
table.lrn{width:100%;border-collapse:collapse;font-size:.82rem}
table.lrn th,table.lrn td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.lrn th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--surface)}
table.lrn td.num,table.lrn th.num{text-align:right}
table.lrn td.ell{max-width:20ch;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){table.lrn td.ell{max-width:28ch}}
table.lrn tr.lrnrow{cursor:pointer}
table.lrn tr.lrnrow:hover,table.lrn tr.lrnrow.open{background:color-mix(in srgb,var(--blue) 9%,transparent)}
table.lrn tr.lrndet td{white-space:normal;background:color-mix(in srgb,var(--blue) 5%,transparent)}
.dgrid{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:.9rem;align-items:baseline}
.dgrid b{color:var(--muted);font-weight:600}
.dgrid span{overflow-wrap:anywhere}
.delwrap{margin-top:12px}
.delwrap .feedback{min-height:0;margin-top:8px;font-size:.9rem}
/* Gveret Levin handwriting font (subset). Copyright 2024 The Gveret Levin Project Authors (https://github.com/AlefAlefAlef/gveret-levin) Licensed under the SIL Open Font License 1.1: https://openfontlicense.org */
@font-face{font-family:"GveretLevin";src:url(data:font/woff2;base64,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) format("woff2");font-display:swap}
.cursive{font-family:"GveretLevin",cursive}
.cursive.big{font-size:5.2rem;line-height:1.25;text-align:center;margin:4px 0}
.note-card{word-spacing:.2em;background:#fffdf3;color:#1d2a38;border:1px solid #e6dfc2;border-radius:6px;padding:16px 22px;font-size:1.75rem;line-height:1.55;box-shadow:0 2px 10px rgba(0,0,0,.14);transform:rotate(-1deg);margin:10px auto 12px;max-width:520px;text-align:right}
.gapsent{font-size:1.45rem;line-height:1.9;text-align:center;margin:6px 0}
.gapblank{display:inline-block;min-width:4.2em;border-bottom:3px solid var(--blue);margin:0 .15em}
.ptask{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0;background:color-mix(in srgb,var(--blue) 8%,transparent)}
.keypad{display:grid;grid-template-columns:repeat(3,64px);gap:10px;justify-content:center;margin:16px 0}
.pkey{height:60px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.45rem;font-weight:600;cursor:pointer}
.pkey:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pkey.right{border-color:var(--green);background:color-mix(in srgb,var(--green) 22%,var(--surface))}
.pkey.step{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 20%,var(--surface))}
.pkey.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--surface))}
.ptrans{margin-top:8px}.ptrans p{margin:6px 0}
.abbrw{font-size:3rem}
.opt small{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.segbar{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:6px 0 4px}
.badge{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;gap:9px;align-items:center}
.badge i{font-style:normal;font-size:1.6rem}
.badge.locked{opacity:.45}.badge.locked i{filter:grayscale(1)}
.badge b{display:block;font-size:.88rem}.badge span{font-size:.74rem;color:var(--muted)}
.mwrow{display:grid;grid-template-columns:minmax(90px,1.2fr) 1fr 1.5fr 74px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.mwrow .he{font-size:1.15rem}.mwrow .tr{color:var(--muted)}.dots{letter-spacing:1px;color:var(--blue);font-size:.78rem;white-space:nowrap}
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%) translateY(-30px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;opacity:0;transition:opacity .3s,transform .3s;z-index:200;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#printArea{display:none}
@media print{body:not(.cert-print)>*:not(#printArea){display:none!important}body:not(.cert-print) #printArea{display:block!important;color:#000;background:#fff;font:11pt/1.4 "IvritHe",Arial,sans-serif}
#printArea h1{font-size:16pt;margin:0 0 2px}#printArea p{margin:0 0 10px;color:#555}#printArea table{width:100%;border-collapse:collapse}
#printArea th,#printArea td{border-bottom:1px solid #ccc;padding:4px 6px;text-align:left;vertical-align:baseline}   /* v374: the number, the Hebrew, the transliteration and the meaning all sit on one baseline */#printArea td.he{font-size:14pt;line-height:1;text-align:right;white-space:nowrap}   /* v375: line-height 1: with 1.4 the bigger Hebrew sat 3pt lower than the other columns in the printed page */
#printArea .psent{font-size:9.5pt;color:#444;margin-top:2px}#printArea tr{break-inside:avoid}
#printArea .plogo{margin:0 0 10px;line-height:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}#printArea .plogo .brandsvg{display:block;height:11mm;width:auto}}
.acctwrap{position:relative;display:inline-block}
.acctmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;max-width:min(320px,90vw);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgb(0 0 0 / .18);padding:6px;z-index:50;text-align:left}
.acctmenu .mhead{font-size:.8rem;color:var(--muted);padding:6px 10px 4px}
.acctmenu .mrow{display:flex;align-items:center}
.acctmenu .mitem{flex:1;display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;font:inherit;font-size:.92rem;color:inherit;cursor:pointer}
.acctmenu .mitem:hover,.acctmenu .mitem:focus-visible{background:color-mix(in srgb,var(--blue) 12%,transparent);outline:none}
.acctmenu .mx{background:none;border:0;color:var(--muted);font-size:1.1rem;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer}
.acctmenu .mx:hover{color:var(--bad,#C2413B)}
.acctmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.acctover{position:fixed;inset:0;z-index:100;background:rgb(10 20 30 / .55);display:flex;align-items:flex-start;justify-content:center;
  padding:calc(max(6vh,env(safe-area-inset-top,0px)) + 8px) 14px calc(14px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.acctover[hidden]{display:none}
.acctover .acct{margin:0;width:100%;max-width:520px;box-shadow:0 18px 50px rgb(0 0 0 / .35)}
html.modal-open{overflow:hidden}
.ulist{margin:6px 0}
.urow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.urow small{color:var(--muted)}
.gbtn{width:100%;font-weight:600;margin:2px 0;display:flex;align-items:center;justify-content:center;gap:10px;padding-left:12px}
.glogo{width:18px;height:18px;flex:none;display:block}
.ordiv{display:flex;align-items:center;gap:10px;margin:12px 0 4px;color:var(--muted);font-size:.8rem}
.ordiv::before,.ordiv::after{content:"";flex:1;border-top:1px solid var(--line)}
.stats{flex-wrap:wrap;align-items:center}
.rankwrap{display:inline-flex;align-items:center;gap:6px}
.rankbar{display:inline-block;width:72px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.rankbar i{display:block;height:100%;width:0;background:var(--sun);transition:width .4s}
#rankNext{font-size:.78rem}#rankNext small{font-size:.75rem}
.duebtn{border:1px solid var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--surface));color:var(--blue);border-radius:999px;padding:3px 11px;font-size:.82rem;font-weight:500}
.season{margin:0 0 12px;padding:8px 14px;border-radius:10px;background:color-mix(in srgb,var(--sun) 18%,var(--surface));border:1px solid var(--line);font-size:.92rem}
.chart30{display:flex;align-items:flex-end;gap:3px;height:90px;border-bottom:1px solid var(--line);margin-top:6px}
.c30{flex:1;height:100%;display:flex;align-items:flex-end}
.c30 i{display:block;width:100%;min-height:2px;background:var(--blue);border-radius:3px 3px 0 0}
.c30.rest i{background:var(--muted);opacity:.55}
.c30lab{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:4px}
.fsel{display:block;text-align:left;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.lookin{margin-bottom:8px}
.lres{margin-top:8px}
.lrow{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:9px 0;flex-wrap:wrap}   /* v286: the English at the left, the Hebrew at the right */
.lhe{display:flex;direction:ltr;align-items:center;gap:6px}   /* v288: the word, then its play buttons at the right edge of the row, so the buttons line up in a column down the list */
.lhe .he{font-size:1.35rem}
.lmeta{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.lmeta span{font-size:.8rem;color:var(--muted)}
.convo{max-width:540px;margin:12px auto 0}
.cline{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.cline .who{grid-row:span 2;font-size:.78rem;color:var(--muted);padding-top:6px;min-width:70px}
.cline .he{font-size:1.2rem;text-align:right}
.cline small{color:var(--muted);text-align:right}
.ctxs{border-top:1px dashed var(--line);margin:12px 0 0;padding:10px 4px 0;text-align:center}
.ctxs .he{font-size:1.3rem}
.bak textarea{width:100%;min-height:90px;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg);color:var(--ink);margin-top:8px}
.doc{max-width:460px;margin:0 auto 14px;direction:rtl;text-align:right;line-height:1.65;border-radius:12px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 10px rgb(0 0 0 / .07);font-size:1.08rem}
.doc .from{font-size:.82rem;color:var(--muted);margin-bottom:6px;font-weight:500}
.doc p{margin:2px 0}
.doc.sms,.doc.chat{border-radius:18px 18px 18px 4px;background:color-mix(in srgb,var(--green) 13%,var(--surface))}
.doc.receipt{font-family:"IvritHe",ui-monospace,Menlo,Consolas,monospace;max-width:330px;border-style:dashed;font-size:.98rem}
.doc.sign{background:#13293D;color:#F2F6FA;border-color:#13293D}
.doc.sign .from{color:#F2B33D}
.doc.label{border:2px solid var(--blue)}
.doc.bill .from,.doc.letter .from,.doc.ticket .from{font-size:.9rem;color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:6px}
.doc.ticket{border-top:6px solid var(--sun)}
.doc.notice{background:color-mix(in srgb,var(--sun) 15%,var(--surface))}
.doc .w{cursor:pointer;border-radius:4px}
.doc .w:hover,.doc .w.sel{background:color-mix(in srgb,var(--sun) 40%,transparent)}
.dq{margin-top:14px}
.dq p{margin:12px 0 6px}
.numtext{font-size:1.35rem;margin-top:10px}
.voicehelp details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:.92rem}.voicehelp details[open]{padding-bottom:8px}
.voicehelp summary{cursor:pointer;font-weight:500;padding:11px 0}
.voicehelp ul{margin:8px 0 4px;padding-left:20px}
.voicehelp li{margin:5px 0}
details.ref{margin-bottom:16px;border:1px solid var(--line);border-radius:10px;padding:8px 14px}
details.ref summary{cursor:pointer;font-weight:500}
.reftable{overflow-x:auto;margin-top:10px}
.reftable table{border-collapse:collapse;width:100%;font-size:.88rem}
.reftable td,.reftable th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.reftable td.he{font-size:1.15rem;text-align:right}
/* v230: the verb tables: Hebrew is right-aligned in its cell, so the heading is too (it sat at the left edge, one column off), and the table is only as wide as it needs to be */
.vpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.vpick select{max-width:100%;font-size:1.05rem}
.reftable table.conj{width:auto;min-width:min(100%,460px)}
.reftable table.conj th{text-align:right;font-weight:600}
.reftable table.conj th,.reftable table.conj td{padding:6px 14px}
.reftable table.conj td:first-child{white-space:nowrap;text-align:left}
.reftable .nw{white-space:nowrap}
/* v230: on a desktop the verb table uses the width: full width, larger Hebrew, roomy rows, columns of equal weight with their text centred under the heading */
@media(min-width:900px){
  .vpick{font-size:1.05rem;margin-top:14px}.vpick select{min-width:340px;padding:7px 10px}
  .reftable table.conj{width:100%;min-width:0;table-layout:fixed;font-size:1rem;margin-top:6px}
  .reftable table.conj th,.reftable table.conj td{padding:14px 10px}
  .reftable table.conj th{text-align:center;font-size:1.05rem;border-bottom:2px solid var(--line)}
  .reftable table.conj td.he{text-align:center;font-size:1.5rem;line-height:1.5}
  .reftable table.conj td:first-child{font-size:1rem;width:11%;padding-left:16px}
  .reftable table.conj td:first-child small{font-size:1rem}
  .reftable table.conj th:nth-child(2),.reftable table.conj td:nth-child(2){width:12%}
  .reftable table.conj td:nth-child(2){color:var(--muted,inherit)}
  .reftable table.conj th:nth-child(1){width:12%}
  .reftable table.conj th:nth-child(3),.reftable table.conj th:nth-child(5){width:19%}
  .reftable table.conj th:nth-child(4){width:38%}   /* the present holds two forms in the I, we and they rows */
  .reftable table.conj tr:nth-child(even) td{background:rgba(127,127,127,.06)}
  .reftable table.conj tr:nth-child(1) th{padding-top:8px}
  .reftable>p{font-size:1.15rem;margin:18px 0 8px}
}
@media(min-width:1500px){.reftable table.conj td.he{font-size:1.8rem}.reftable table.conj th{font-size:1.15rem}.reftable table.conj th,.reftable table.conj td{padding:16px 14px}}
@media(max-width:600px){.reftable table.conj{min-width:0;width:100%}.reftable table.conj th,.reftable table.conj td{padding:5px 4px}.reftable table.conj td.he{font-size:1.02rem}.reftable table.conj td:first-child{font-size:.74rem;padding-right:2px}}
/* v232: the conjugation table with its heading and text at 6/8 (75%) of its size, on every screen */
.reftable:has(table.conj){zoom:.75}
.root{font-size:1.6rem;letter-spacing:.08em}
footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:.85rem;color:var(--muted)}
footer a{color:var(--blue)}
[hidden]{display:none!important}
.meta select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 8px;max-width:60vw}
.typein{width:100%;font-size:1.6rem;padding:10px 14px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);margin-top:14px;text-align:right}
/* Hebrew keyboard laid out like a PC keyboard on a quarter-key grid: 46 columns = 11.5 keys. Row 1 ends with Backspace (1.5 keys, at the right end as on a PC),
   rows 2 and 3 are staggered by 1/4 and 3/4 of a key, and the space bar is one wide key under the five keys from ב (C) to צ (M). */
.kb{--ku:46px;margin:12px auto 0;display:grid;gap:6px;max-width:calc(var(--ku) * 11.5);direction:ltr}
.kbrow{display:grid;grid-template-columns:repeat(46,minmax(0,1fr))}
.key{grid-column:span 4;margin:0 2.5px;min-width:0;padding:6px 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:1.25rem;line-height:1.1}
.key.back{grid-column:span 6;font-size:1.3rem;font-family:Rubik,sans-serif;padding:10px 0}
.key.space{grid-column:12 / span 20;font-size:.9rem;font-family:Rubik,sans-serif;padding:11px 0}
.kbrow.r2>.key:first-child{grid-column:2 / span 4}
.kbrow.r3>.key:first-child{grid-column:4 / span 4}
.key .he{display:block;direction:rtl}
.key small{display:block;font-size:.75rem;color:var(--muted);font-family:Rubik,sans-serif;margin-top:2px}
/* bigger keyboard (touch screens, by choice): taller, wider keys and larger letters */
.kb.big{--ku:96px;gap:10px}.kb.big .key{min-height:68px;padding:10px 0 8px;border-radius:12px;margin:0 4px}.kb.big .key .he{font-size:1.9rem}.kb.big .key small{font-size:.85rem}.kb.big .key.back,.kb.big .key.space{font-size:1.1rem;padding:18px 0}
@media (max-width:520px){.kb.big{gap:8px}.kb.big .key{min-height:60px;padding:8px 0 6px;margin:0 1.5px}.kb.big .key .he{font-size:1.5rem}.kb.big .key.back,.kb.big .key.space{padding:16px 0}}
.kboffer{margin:8px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
.passage{font-size:1.5rem;line-height:2}.plpass{font-size:1.25rem;line-height:1.9;text-align:right;max-height:calc(42vh / var(--z));overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.sent{margin:0 0 6px}
.tok{cursor:pointer;border-radius:4px;padding:0 1px}
.tok:hover,.tok.sel{background:color-mix(in srgb,var(--sun) 35%,transparent)}
.gloss{margin-top:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;min-height:3em}
.gloss .he{font-size:1.3rem}
.ptitle{font-size:1.05rem;margin:22px 0 8px}
.ptrans p{margin:4px 0;color:var(--muted)}
.pq{margin-top:20px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.stat{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.stat b{display:block;font-size:1.8rem;color:var(--blue);line-height:1.2}
.stat span{font-size:.8rem;color:var(--muted)}
.catrow{display:grid;grid-template-columns:minmax(110px,1fr) 2fr 44px;gap:10px;align-items:center;font-size:.88rem;margin:6px 0}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green)}
.weak{display:grid;gap:2px}
.weakrow{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0;font-size:.9rem}
.weakrow .he{font-size:1.2rem}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);text-decoration:underline;font-size:inherit}
.panel{max-width:560px;margin:16px auto 0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.panel h2{font-size:1.05rem;margin:0 0 4px}
.panel label{display:block;font-size:.85rem;color:var(--muted);margin-top:12px}
.panel input,.panel textarea{width:100%;margin-top:4px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--bg);color:var(--ink);font:inherit}
.panel textarea{min-height:120px;resize:vertical}
.msg{border-top:1px solid var(--line);padding:12px 0}
.msg:first-of-type{border-top:0}
.msg .who{font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.msg p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
/* ---- Games ---- */
.cicon.xl{width:88px;height:88px;border-radius:26px;margin:0 auto 12px}.cicon.xl svg{width:58px;height:58px}
.gintro{text-align:center;max-width:520px;margin:0 auto;padding:6px 0}
.gintro h2{margin:0;font-size:1.6rem}.gintro .gsub{font-size:1.3rem;color:var(--muted);margin:2px 0 14px}
.ghow{text-align:left;margin:0 auto 16px;padding-left:20px;max-width:440px}.ghow li{margin:7px 0}
.gbest{color:var(--muted);margin:0 0 12px}.gbest b{color:var(--ink)}
.ggo{font-size:1.15rem;padding:13px 36px}
.gstat{margin:0 0 10px;font-size:.85rem;font-weight:600;color:var(--blue)}
.ghud{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:.9rem;color:var(--muted)}
.ghud b{color:var(--ink);font-size:1.15rem}
.glives{font-size:1.05rem;letter-spacing:2px;white-space:nowrap}
.rr-caught{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:16px auto 0;max-width:620px;font-size:.9rem;color:var(--muted)}
.rr-caught b{font-size:1.2rem;color:var(--ink);font-weight:600}
/* shuk */
.stall{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:34px 16px 14px;text-align:center;background:color-mix(in srgb,var(--sun) 12%,var(--surface))}
.stall::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:repeating-linear-gradient(90deg,#D3362A 0 26px,#FFF4E2 26px 52px)}
.stall::after{content:"";position:absolute;left:0;right:0;top:16px;height:12px;background:radial-gradient(circle at 13px 0,#D3362A 12px,transparent 12.5px) 0 0/52px 12px repeat-x,radial-gradient(circle at 13px 0,#FFF4E2 12px,transparent 12.5px) 26px 0/52px 12px repeat-x}
.gitem{display:flex;align-items:center;justify-content:center;gap:14px}
.gemoji{font-size:3.6rem;line-height:1}.gemoji .goodimg{display:block;width:3.6rem;height:3.6rem}
.gitem .he{font-size:1.7rem;font-weight:700}.gitem small{color:var(--muted)}
.shout{min-height:2.4em;margin:10px 0 4px;font-size:1.35rem;display:flex;align-items:center;justify-content:center;gap:10px}
.waves{display:inline-flex;gap:4px;align-items:center;height:24px}
.waves i{display:block;width:5px;height:8px;border-radius:3px;background:var(--bad)}
.shout.live .waves i{animation:wave .7s ease-in-out infinite}.shout.live .waves i:nth-child(2){animation-delay:.15s}.shout.live .waves i:nth-child(3){animation-delay:.3s}
@keyframes wave{50%{height:24px}}
/* bus */
.bus-dest{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:color-mix(in srgb,var(--green) 10%,var(--surface))}
.bus-dest .he{font-size:1.75rem;font-weight:700}
.bus-panel{display:flex;gap:10px;align-items:stretch;margin:14px 0 6px}
.bus-led{flex:1;background:#171A16;color:#FFB61E;border-radius:8px;padding:9px 14px;text-align:center;font-size:1.25rem;font-weight:700;direction:rtl;text-shadow:0 0 8px rgba(255,182,30,.55);min-height:2.4em;display:flex;align-items:center;justify-content:center}
.bus-led.dim{opacity:.6;letter-spacing:2px}
.bus-stoplight{flex:none;display:grid;place-items:center;border-radius:8px;padding:0 12px;font-size:.78rem;font-weight:800;background:#171A16;color:#4A2622}
.bus-stoplight.on{color:#fff;background:#C8261E;box-shadow:0 0 16px rgba(220,40,30,.7)}
.bus-road{position:relative;height:74px;margin:6px 16px 0}
.bus-line{position:absolute;left:0;right:0;top:50px;height:6px;border-radius:3px;background:var(--line)}
.bus-dot{position:absolute;top:44px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--surface);border:3px solid var(--muted)}
.bus-dot.passed{border-color:var(--green);background:var(--green)}
.bus-icon{position:absolute;top:6px;font-size:2.2rem;line-height:1;margin-left:-20px}
.bus-bell{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:16px auto 0;width:128px;height:128px;border-radius:50%;border:6px solid color-mix(in srgb,var(--bad) 35%,var(--surface));background:var(--bad);color:#fff;font-weight:800;font-size:1.2rem;line-height:1.1;box-shadow:0 7px 0 color-mix(in srgb,var(--bad) 55%,#000);touch-action:manipulation}
.bus-bell span{font-size:2rem}.bus-bell small{font-weight:500;font-size:.85rem;opacity:.9}
.bus-bell:active,.bus-bell.on{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--bad) 55%,#000)}
.bus-bell.on{background:color-mix(in srgb,var(--bad) 80%,#fff)}
.bus-bell:disabled{opacity:.55}
.bus-passed{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px;direction:rtl}
.bus-passed span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:1rem;color:var(--muted)}
/* root rain */
.rr-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:8px}
.rr-root{font-size:2.3rem;font-weight:700;line-height:1.1;color:var(--blue);letter-spacing:.06em}
.rr-prog{display:flex;gap:5px}.rr-prog i{width:12px;height:12px;border-radius:50%;border:2px solid var(--blue)}.rr-prog i.on{background:var(--blue)}
.rr-field{position:relative;height:min(calc(58vh / var(--z)),440px);border-radius:14px;overflow:hidden;border:1px solid var(--line);touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 16%,var(--surface)),var(--surface) 75%)}
.rr-field.ouch{animation:rrouch .4s}@keyframes rrouch{30%{box-shadow:inset 0 0 0 4px var(--bad)}}
.rr-ground{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--green)}
.rr-w{position:absolute;top:-52px;padding:6px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.5rem;line-height:1.25;white-space:normal;text-align:center;will-change:transform;box-shadow:0 6px 12px -8px rgba(19,41,61,.5);transition:opacity .25s}
.rr-w.hit{border-color:var(--green);background:color-mix(in srgb,var(--green) 30%,var(--surface));opacity:0}
.rr-w.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 22%,var(--surface));opacity:0}
.rr-w.fade{opacity:0}
.rr-banner{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:color-mix(in srgb,var(--surface) 72%,transparent);opacity:0;pointer-events:none;transition:opacity .3s}
.rr-banner.show{opacity:1}.rr-banner small{color:var(--muted)}.rr-banner .he{font-size:3.4rem;font-weight:700;color:var(--blue)}
@media (max-width:420px){.rr-w{font-size:1.3rem;padding:5px 9px}}
.rr-log{min-height:1.8em;margin-top:8px;text-align:center}.rr-log.good{color:var(--green-ink)}.rr-log.bad{color:var(--bad)}.rr-log .he{font-size:1.2rem}
/* forge */
.forge{display:grid;gap:14px}
.fire{text-align:center;padding:16px 10px 6px;border-radius:14px;background:radial-gradient(ellipse at 50% 100%,rgba(245,120,20,.28),transparent 70%)}
.ingot{display:inline-block;touch-action:none;cursor:grab;padding:12px 26px;border-radius:12px 12px 22px 22px;background:linear-gradient(180deg,#FFE0A3,#F5861F 55%,#B9460C);color:#3A1600;font-size:2.1rem;font-weight:800;line-height:1.2;box-shadow:0 0 26px rgba(245,140,30,.6),inset 0 2px 0 rgba(255,255,255,.6);user-select:none;-webkit-user-select:none}
.ingot.spent{filter:grayscale(1);opacity:.5;cursor:default}
.ingot.ghost{position:fixed;z-index:400;pointer-events:none;margin:0;transform:translate(-50%,-50%) rotate(-5deg);opacity:.92}
.molds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mold{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:126px;padding:12px 6px;border:2px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,var(--surface));color:var(--ink)}
.mold .mpat{font-size:1.45rem}.mold .mname{font-size:.82rem;color:var(--muted)}
.mold .mout{margin-top:auto;min-height:1.6em}.mold .mout b{font-size:1.45rem}.mold .mout small{display:block;font-size:.8rem;color:var(--muted)}
.mold.over{border-color:#F5861F;background:color-mix(in srgb,#F5861F 14%,var(--surface))}
.mold.pouring{border-style:solid;border-color:#F5861F;background:linear-gradient(0deg,rgba(245,134,31,.4),transparent);animation:pour .5s ease}
@keyframes pour{from{background-size:100% 0}to{background-size:100% 100%}}
.mold.filled{border-style:solid}.mold.ok{border-color:var(--green)}.mold.bad{border-color:var(--bad)}
.mold:disabled{opacity:1;cursor:default}
.forged{text-align:center}
.fword{font-size:clamp(2.4rem,9vw,3.6rem);font-weight:800;line-height:1.2;color:#E8650F;color:color-mix(in srgb,#F26A0F calc(var(--heat,1)*100%),var(--muted));text-shadow:0 0 calc(var(--heat,1)*18px) rgba(245,120,20,.55)}
.coolbar{height:8px;max-width:360px;margin:8px auto 4px;border-radius:4px;background:var(--line);overflow:hidden}
.coolbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#94A3B8,#F59E0B 45%,#EF4444)}
@media (max-width:420px){.mold .mpat{font-size:1.2rem}.mold .mout b{font-size:1.2rem}}
/* sprint */
.sprint-word{font-size:clamp(3rem,13vw,5.2rem);font-weight:700;text-align:center;line-height:1.25;margin:10px 0 0}
.sprint-clock{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.35rem;color:var(--ink)}
/* daily word */
.wd-head{text-align:center}.wd-head h2{margin:0;font-size:2rem}
.wgrid{display:grid;gap:6px;justify-content:center;margin:12px 0 6px}
.wrow{display:grid;grid-template-columns:repeat(5,54px);gap:6px;direction:rtl}
.wt{height:54px;display:grid;place-items:center;border:2px solid var(--line);border-radius:8px;font-family:var(--font-he);font-size:2rem;font-weight:700;line-height:1}
.wt.f{border-color:var(--muted)}
.wt.g{background:var(--green);border-color:var(--green);color:#0E2208}
.wt.y{background:var(--sun);border-color:var(--sun);color:#13293D}
.wt.x{background:#5A6B7D;border-color:transparent;color:#fff}
.wt.rev{animation:wflip .45s ease both}@keyframes wflip{0%{transform:rotateX(90deg)}100%{transform:none}}
.wrow.shake{animation:wshake .4s}@keyframes wshake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.wmsg{min-height:1.5em;text-align:center;font-weight:600}
.wkb{display:grid;gap:6px;margin-top:8px}.wkr{display:flex;gap:5px;justify-content:center}
.wk{flex:1 1 0;max-width:46px;min-width:0;height:54px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--font-he);font-size:1.4rem;font-weight:700}
.wk.wide{max-width:76px;flex:1.7 1 0;font-family:Rubik,sans-serif;font-size:.85rem;font-weight:600}
.wk.g{background:var(--green);border-color:var(--green);color:#fff}.wk.y{background:var(--sun);border-color:var(--sun);color:#13293D}.wk.x{background:color-mix(in srgb,var(--muted) 45%,var(--surface));color:var(--surface);border-color:transparent}
.whints{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px 0 0;text-align:center}
.whbtn{padding:7px 14px;font-size:.92rem}.whcost{font-size:.78rem;color:var(--muted)}
.whmean{font-size:1rem}.whmean small{display:block;color:var(--muted);font-size:.8rem}
.wstrip{display:inline-grid;grid-template-columns:repeat(5,26px);gap:4px;direction:rtl;vertical-align:middle;margin-left:6px}
.wstrip i{height:26px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:5px;font-style:normal;font-family:var(--font-he);font-weight:700;font-size:1.05rem}
.wstrip i.g{background:var(--green);border-color:var(--green);color:#fff}
.wres{text-align:center;margin-top:6px}.wbig{font-size:1.5rem;font-weight:800;margin:4px 0}
.wans .he{font-size:2.2rem;font-weight:700}.wans .en{font-size:1.15rem}
.wdist{max-width:360px;margin:10px auto 0;text-align:left}.wdist .hbar{grid-template-columns:18px 1fr 30px}.wdist .hbar i{background:var(--muted)}.wdist .hbar i.me{background:var(--green)}
@media (max-width:400px){.wrow{grid-template-columns:repeat(5,48px)}.wt{height:48px;font-size:1.75rem}.wk{height:50px}}
/* bosses */
.bhead{display:flex;align-items:center;gap:12px}.bhead h3{margin:0;font-size:1.02rem}.bhead .he{color:var(--muted)}
.boss-av{position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;font-size:2rem;line-height:1;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.42),transparent 50%),linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 6px 14px -6px var(--c2),inset 0 -3px 0 rgba(0,0,0,.14)}
.boss-av.lg{width:96px;height:96px;font-size:3.2rem;margin:0 auto}.boss-top .boss-av.lg{margin:0}.boss-av.sm{width:44px;height:44px;font-size:1.45rem}
.boss-av .cbadge{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;display:grid;place-items:center;font-size:13px;font-weight:800;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 0 0 2px var(--surface)}
.boss-av.hit{animation:bhit .45s}@keyframes bhit{20%{transform:translateX(-7px) rotate(-7deg)}45%{transform:translateX(7px) rotate(6deg)}70%{transform:translateX(-3px)}}
.dmg{position:absolute;top:-8px;right:-14px;font-size:1.4rem;font-weight:900;color:var(--bad);text-shadow:0 1px 0 var(--surface);animation:dmg .9s ease-out forwards;pointer-events:none}
@keyframes dmg{to{transform:translateY(-34px);opacity:0}}
.boss-top{display:flex;align-items:center;gap:14px}
.boss-info{flex:1;min-width:0}.boss-info b{display:block;font-size:1.1rem}.boss-info .he{display:block;color:var(--muted)}.boss-info small{color:var(--muted)}
.hpbar{height:14px;margin-top:6px;border-radius:7px;background:var(--line);overflow:hidden}
.hpbar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--bad),#F97316);transition:width .45s cubic-bezier(.3,1.4,.5,1)}
.boss-say{margin:14px 0 10px;padding:12px 16px;border-radius:16px 16px 16px 4px;border:1px solid var(--line);background:color-mix(in srgb,var(--c2,#888) 12%,var(--surface));text-align:right}
.boss-say .he{display:block;font-size:1.4rem}.boss-say small{display:block;color:var(--muted);text-align:left}
.arena{border-radius:14px;padding:4px}.arena.ouch{animation:ouch .45s}@keyframes ouch{30%{box-shadow:inset 0 0 0 4px var(--bad)}}
.stamp{display:inline-block;margin:16px auto 8px;padding:8px 24px;border:5px solid var(--bad);border-radius:12px;color:var(--bad);font-size:2.4rem;font-weight:900;line-height:1.2;transform:rotate(-8deg);animation:stamp .55s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes stamp{0%{transform:scale(2.6) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.bwin .boss-say{max-width:420px;margin:12px auto}
.boss-info .bscene{display:block;font-size:.82rem;font-weight:600;color:var(--sun);margin:1px 0}
.bossband{display:flex;align-items:center;gap:12px;margin:12px 0 6px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bad) 7%,var(--surface))}
.bossband div{flex:1;min-width:0}.bossband small{display:block;color:var(--muted)}
/* challenge a friend */
.dname{max-width:320px;margin:0 auto 14px;text-align:left}
.dch{display:inline-flex;align-items:baseline;gap:10px;margin:8px 0 4px}.dch b{font-size:2.6rem;color:var(--blue);line-height:1}.dch span{color:var(--muted)}
.dvs{text-align:center;margin:-4px 0 8px}
.duel-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;max-width:440px;margin:6px auto 12px}
.duel-vs .side{border:2px solid var(--line);border-radius:14px;padding:12px 8px;overflow:hidden}
.duel-vs .side span{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duel-vs .side b{display:block;font-size:2.6rem;line-height:1.1}.duel-vs .side small{color:var(--muted)}
.duel-vs .side.win{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--surface))}
.duel-vs .vs{font-weight:800;color:var(--muted)}
.dshare{max-width:440px;margin:10px auto 0;text-align:left}.dshare .btn{width:100%}
.dshare input{font-size:.85rem}
/* ---- Full-page game stage ---- */
html.gf-open{overflow:hidden}
.gfull{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow:hidden;background:#0b1220;outline:none;
  --bg:#0F1D2B;--surface:#172A3D;--ink:#E8F0F6;--muted:#A4B8C9;--blue:#6AB4EA;--green:#8DC15A;--green-ink:#8DC15A;--sun:#F5C35E;--bad:#EF6F68;--line:#33506A;color:var(--ink);color-scheme:dark}
.gfull[hidden]{display:none}
.gfbg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gfbar{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 14px) 8px calc(env(safe-area-inset-left,0px) + 14px)}
.gft{flex:1;min-width:0;font-weight:700;font-size:1.05rem;text-shadow:0 1px 8px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfbtn{flex:none;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(8,14,24,.55);color:#fff;font-size:1.1rem;line-height:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gfbtn:hover{background:rgba(8,14,24,.8)}
.gfbody{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:4px calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 14px) calc(env(safe-area-inset-left,0px) + 12px)}
.gfull .stage{width:100%;max-width:760px;min-height:0;flex:none;background:rgba(9,18,32,.64);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px;
  -webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);box-shadow:0 22px 60px rgba(0,0,0,.5)}
.gf-shuk .stage,.gf-bus .stage,.gf-boss .stage,.gf-forge .stage{margin-top:auto}
.gf-sprint .stage,.gf-wordle .stage,.gf-duel .stage{margin:auto 0}
.gfull .opt{background:rgba(20,36,54,.86)}
.gfull .opt.right{background:color-mix(in srgb,var(--green) 26%,rgba(20,36,54,.9))}.gfull .opt.wrong{background:color-mix(in srgb,var(--bad) 24%,rgba(20,36,54,.9))}
.gfull .btn{background:rgba(20,36,54,.86)}.gfull .btn.primary{background:var(--blue);border-color:var(--blue);color:#06121f;font-weight:700}
.gfull .done .score{color:var(--sun);text-shadow:0 4px 24px rgba(245,195,94,.35)}
.gfull .timer{background:rgba(255,255,255,.12)}
.gfcount{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;font-size:min(32vw,210px);font-weight:900;color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.6);opacity:0}
.gfcount.show{opacity:1}.gfcount.pop{animation:gfpop .65s ease-out both}.gfcount.go{color:var(--sun)}.gfcount.fight{color:#ff6b5e;font-size:min(20vw,150px)}
@keyframes gfpop{0%{transform:scale(1.9);opacity:0}25%{opacity:1}100%{transform:scale(.92);opacity:.15}}
/* per game */
.gf-shuk .gemoji{display:none}.gf-shuk .stall{background:transparent;border:0;padding:0}.gf-shuk .stall::before,.gf-shuk .stall::after{display:none}
.gf-bus .bus-road{display:none}.gf-bus .bus-dest{background:rgba(141,193,90,.14)}.gf-bus .bus-bell{width:112px;height:112px;margin-top:10px}
.gf-boss .boss-av.lg{display:none}.gf-boss .boss-say{background:rgba(255,255,255,.07)}.gf-boss .arena{padding:0}
.gf-boss .bcard{background:rgba(20,36,54,.8)}
.gf-forge .fire{background:none;padding-top:4px}
.gf-rootrain .stage{flex:1;display:flex;flex-direction:column;max-width:980px;padding:0;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.gf-rootrain .rr-field{flex:1;height:auto;min-height:260px;background:transparent;border:0;border-radius:0}
.gf-rootrain .rr-ground{display:none}
.gf-rootrain .gintro,.gf-rootrain .done{margin:auto 0;padding:22px;border-radius:20px;background:rgba(9,18,32,.7);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gf-rootrain .ghud,.gf-rootrain .rr-top{padding:0 8px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.gf-rootrain .rr-root{color:#9fd0ff;text-shadow:0 0 18px rgba(120,180,255,.6)}.gf-rootrain .rr-prog i{border-color:#9fd0ff}.gf-rootrain .rr-prog i.on{background:#9fd0ff}
.gf-rootrain .rr-w{background:rgba(10,22,48,.8);color:#EAF2FF;border-color:rgba(150,195,255,.55);box-shadow:0 0 22px rgba(90,160,255,.4)}
.gf-rootrain .rr-banner{background:rgba(5,10,25,.5)}.gf-rootrain .rr-banner .he{color:#9fd0ff}
.gf-rootrain .rr-log{align-self:center;max-width:94%;margin:6px 0 2px;padding:4px 12px;border-radius:12px;background:rgba(5,10,25,.6)}
.gf-wordle .wt:not(.g):not(.y):not(.x){background:rgba(9,18,32,.45)}
@media (max-width:560px){.gfull .stage{padding:14px 12px;border-radius:16px}.gfbtn{width:38px;height:38px}}
@media (min-width:1000px){.gf-boss .gfbody:has(.arena,.done),.gf-shuk .gfbody:has(.stall){align-items:flex-end;justify-content:center}
 .gf-boss .stage:has(.arena,.done),.gf-shuk .stage:has(.stall){max-width:500px;margin:auto 0}}
@media (min-width:640px){.gf-shuk .opts{grid-template-columns:1fr 1fr}}
.gf-rootrain .rr-field.ouch{animation:none}
@media (max-width:560px){.gf-boss .gfbody:has(.arena){padding-top:110px}.gf-boss .boss-say{margin:8px 0;padding:8px 12px}.gf-boss .boss-say .he{font-size:1.1rem}
 .gf-boss .boss-info .he,.gf-boss .kbdhint{display:none}.gf-boss .opt{padding:9px 14px}.gf-boss #bq .word{font-size:2rem}.gf-boss #bq .prompt .en{font-size:1.25rem}}
/* ---- Settings, report, update banner, Today, Passport ---- */
.gfpop{position:absolute;z-index:6;right:calc(env(safe-area-inset-right,0px) + 14px);top:calc(env(safe-area-inset-top,0px) + 62px);width:min(330px,calc(100vw / var(--z) - 28px));padding:12px 14px;border-radius:16px;background:rgba(9,18,32,.97);border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 50px rgba(0,0,0,.55);display:grid;gap:10px}
.gfpop[hidden],.gfrep[hidden]{display:none}
.gfrow{display:flex;align-items:center;gap:10px;font-size:.95rem;cursor:pointer}
.gfrow input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--blue)}
.gfrow small{display:block;color:var(--muted);font-size:.78rem}
.gfrow small[hidden]{display:none}
#navDeskNote{margin-top:2px;font-weight:600}
.gfrow select{margin-left:auto;flex:1 1 120px;min-width:0;max-width:100%;width:auto;background:#14283c;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit}
.gfrow>span{min-width:0}.gfpop{box-sizing:border-box;max-width:calc(100vw / var(--z) - 28px);grid-template-columns:minmax(0,1fr)}.gfpop>*{min-width:0;max-width:100%}
.gfrep{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:16px;background:rgba(3,8,16,.72)}
.gfrepbox{width:min(520px,100%);max-height:100%;overflow:auto;padding:18px;border-radius:18px;background:#0f1d2b;border:1px solid rgba(255,255,255,.2)}
.gfrepbox h3{margin:0 0 6px}
.gfull textarea{width:100%;min-height:90px;background:#14283c;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;resize:vertical}
.gfrepbox #gfRepFrom{box-sizing:border-box;width:100%;background:#14283c;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;margin-bottom:6px}
.gfrepctx{margin:8px 0}.gfrepctx summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.gfrepctx pre{white-space:pre-wrap;font:12px/1.45 ui-monospace,Menlo,monospace;max-height:150px;overflow:auto;margin:6px 0 0;padding:8px;background:rgba(255,255,255,.05);border-radius:8px}
html.gf-lite .gfull .stage{background:rgba(9,18,32,.9);-webkit-backdrop-filter:none;backdrop-filter:none}
html.gf-lite .gfbtn,html.gf-lite .gf-rootrain .gintro,html.gf-lite .gf-rootrain .done{-webkit-backdrop-filter:none;backdrop-filter:none}
html.gf-lite .gf-rootrain .gintro,html.gf-lite .gf-rootrain .done{background:rgba(9,18,32,.92)}
.updbar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw / var(--z) - 24px);padding:10px 16px;border-radius:999px;background:#0f1d2b;color:#e8f0f6;border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 36px rgba(0,0,0,.5)}
.updbar .btn{padding:6px 14px}.updbar .linkbtn{color:#a4b8c9}
.hubrel{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:.92rem;color:var(--muted)}.hubrel input{width:18px;height:18px}
.pstamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:8px 0 18px}
.pstamps.small{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pstamp{--sc:var(--c2,#b3261e);border:3px double var(--sc);color:var(--sc);border-radius:14px;padding:12px 8px;text-align:center;transform:rotate(var(--rot,0deg));background:color-mix(in srgb,var(--sc) 6%,var(--surface));display:flex;flex-direction:column;gap:2px;min-height:96px;justify-content:center}
.pstamp b{font-size:1.25rem;line-height:1.2}.pstamp small{font-weight:600;opacity:.9}.pstamp i{font-style:normal;font-size:.75rem;opacity:.8}
.pstamp.day{--sc:#1d4ea0;border-radius:50%;aspect-ratio:1;min-height:0;padding:10px}.pstamp.day b{font-size:.88rem}
.pstamp.locked{--sc:var(--muted);border-style:dashed;opacity:.55;transform:none}.pstamp.locked b{font-size:1.8rem}
.gmic{margin-top:6px}
.boss-av img{width:100%;height:100%;border-radius:50%;display:block;object-fit:cover}
.brecap{margin:10px auto 0;max-width:460px;text-align:left}.brecap h4{margin:0 0 4px;font-size:.95rem}
.brecap div{padding:6px 10px;border:1px solid var(--line);border-radius:10px;margin:4px 0}.brecap .he{display:block;font-size:1.1rem}.brecap small{color:var(--muted)}


/* ---- Why you were wrong, skills, guided flow ---- */
.why{margin-top:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--blue) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--blue) 25%,var(--line));text-align:left;font-size:.95rem;color:var(--ink);font-weight:400}
.why>b{color:var(--blue)}.whylist{margin:4px 0 0;padding-left:18px}.whylist li{margin:3px 0}
.why mark{background:color-mix(in srgb,var(--sun) 55%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.whytip{margin-top:8px}.whytip summary{cursor:pointer;color:var(--blue);font-weight:600}.whytip p{margin:6px 0 0}
.skevent{margin-top:8px;font-size:.92rem;text-align:left;font-weight:400}
.gonext{margin-top:12px}
.rulebox{text-align:left;margin:10px auto 14px;max-width:520px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--sun) 12%,var(--surface));border:1px solid var(--line)}
.dock{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw / var(--z) - 20px);padding:10px 16px;border-radius:18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.plan{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0 12px;counter-reset:p}
.plan li{counter-increment:p;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--blue) 10%,var(--surface));border:1px solid var(--line);font-size:.88rem}
.plan li::before{content:counter(p) "  ";font-weight:800;color:var(--blue)}
.skpanel{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0;background:var(--surface)}
.skrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.skrow>div:first-child{flex:1;min-width:0}
.skb{font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;white-space:nowrap}
.skb.weak{background:color-mix(in srgb,var(--bad) 20%,var(--surface));color:var(--bad)}.skb.rec{background:color-mix(in srgb,var(--sun) 28%,var(--surface))}.skb.ok{background:color-mix(in srgb,var(--green) 20%,var(--surface));color:var(--green-ink)}
.skbar{height:6px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}.skbar i{display:block;height:100%;background:var(--blue)}
.skacc{font-variant-numeric:tabular-nums;color:var(--muted);width:44px;text-align:right}.conflist{margin:0;padding-left:18px}.conflist small{color:var(--muted)}
.sdl{text-align:left;max-width:460px;margin:8px auto}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}#delBox{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.slen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px;font-size:.88rem;color:var(--muted)}.slen .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 12px;font:inherit;font-weight:600;cursor:pointer}.slen .chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .slen .chip.on{color:#06121F}}:root[data-theme="dark"] .slen .chip.on{color:#06121F}
.lvlnudge{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:color-mix(in srgb,var(--green) 12%,var(--surface))}.lvlnudge.down{background:color-mix(in srgb,var(--sun) 14%,var(--surface))}.lvlnudge p{margin:0 0 6px}
.weekcard{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:10px 0;background:color-mix(in srgb,var(--blue) 8%,var(--surface))}.weekcard span{flex:1;min-width:200px}
.wkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;margin:6px 0 12px}.wkgrid div{border:1px solid var(--line);border-radius:10px;padding:8px 10px}.wkgrid b{font-size:1.3rem;display:block}.wkgrid small{color:var(--muted)}
.wkbars{display:flex;gap:6px;align-items:flex-end;height:90px;padding-top:4px}.wkbars div{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:4px}.wkbars i{display:block;width:100%;max-width:34px;min-height:3px;border-radius:6px 6px 2px 2px;background:var(--blue)}.wkbars span{font-size:.75rem;color:var(--muted)}
.typed{margin:12px 0}.typein.right{border-color:var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 30%,transparent)}.typein.wrong{border-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 30%,transparent)}
.dok{color:var(--green-ink);font-weight:600}.dno{color:var(--bad);text-decoration:underline wavy;font-weight:600}
.audpanel{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0;background:var(--surface)}
/* Settings tabs: they wrap onto a second line on a phone rather than scroll, so no tab is ever hidden off-screen */
.settabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.settabs .btn{padding:7px 14px;font-size:.95rem;border-radius:999px}
.settabs .btn[aria-selected="true"]{border-color:var(--blue);color:var(--blue);font-weight:600;background:color-mix(in srgb,var(--blue) 10%,var(--surface))}
.settabs .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.setcat>.audpanel:first-child{margin-top:8px}
/* a tab holding a single box (Sound, About) is already named by its tab, so the box's own heading would repeat it */
.setcat>.audpanel:only-child>h3.ptitle:first-child{display:none}
.fxbox{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.fxbox summary{cursor:pointer;font-weight:600}.fxbox .row{margin:8px 0}.fxbox input{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:1.1rem}.fxlist{margin:6px 0;padding-left:18px}
.audpanel .row{align-items:flex-end;gap:12px}.audpanel .field{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}.audpanel select{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}


/* ---- contrast: text on tinted or dimmed surfaces now meets WCAG AA ---- */
.lvl{color:color-mix(in srgb,var(--ink) 92%,var(--line))}.lvl span{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#06121F}}
:root[data-theme="dark"] .btn.primary{color:#06121F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .groups button[aria-selected=true]{color:#06121F}}
:root[data-theme="dark"] .groups button[aria-selected=true]{color:#06121F}
.badge.locked{opacity:1;border-style:dashed}.badge.locked i{filter:grayscale(1);opacity:.5}.badge.locked b,.badge.locked span{color:var(--muted)}
.pstamp.locked{opacity:1;background:transparent}.pstamp.locked i,.pstamp.locked small{opacity:1}
.skb.weak{color:color-mix(in srgb,var(--bad) 55%,var(--ink))}
@media (max-width:480px){nav.groups{gap:3px}nav.groups button{padding:4px 8px 4px 4px;font-size:.85rem}nav.groups .gicn{width:22px;height:22px}nav.groups .gmore{padding:6px 9px}}
@media (max-width:380px){nav.groups button{padding:3px 7px 3px 3px;font-size:.8rem;gap:4px}nav.groups .gicn{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:560px){.stage{padding:20px 14px}}
/* v43: newspaper, court ruling and book/academic page documents */
.doc.news{font-family:"IvritHe",Georgia,"Times New Roman",serif;border-top:4px double var(--line)}
.doc.news .from{font-size:.85rem;letter-spacing:.04em;color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:6px}
.doc.news p:first-of-type{font-weight:700;font-size:1.12em}
.doc.ruling{border-inline-start:6px solid var(--blue)}
.doc.ruling .from{font-size:.9rem;font-weight:700;color:var(--blue);text-align:center;border-bottom:1px solid var(--line);padding-bottom:6px}
.doc.page{font-family:"IvritHe",Georgia,"Times New Roman",serif;background:color-mix(in srgb,var(--sun) 6%,var(--surface));line-height:1.75}
.doc.page .from{font-size:.85rem;font-style:italic;color:var(--blue)}
/* phone call: a drawn smartphone with the call screen, keypad and call button */
.pphone{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 6px}
.phone{width:min(300px,86vw);background:#0B0F14;color:#F2F5F8;border:10px solid #1C232B;border-radius:44px;padding:10px 18px 22px;box-shadow:0 0 0 2px #3A4652,0 14px 34px rgba(0,0,0,.28)}
.ph-bar{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;padding:2px 10px 0;opacity:.9}
.ph-notch{width:11px;height:11px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #1C232B}
.ph-who{text-align:center;padding:14px 0 6px}
.ph-pic{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(160deg,#6B7A8A,#3E4A57)}
.ph-name{font-size:1.45rem;font-weight:600;line-height:1.25}
.ph-en{font-size:.85rem;color:#A9B6C3;margin-top:2px}
.ph-status{font-size:.9rem;color:#C9D3DC;margin-top:8px;min-height:1.3em}
.ph-timer{font-variant-numeric:tabular-nums;font-size:.9rem;color:#8FD49F;min-height:1.2em}
.phone .keypad{grid-template-columns:repeat(3,62px);gap:12px 18px;margin:8px 0 14px}
.phone .pkey{height:62px;background:#2A323B;border:0;color:#fff;font-size:1.6rem;font-weight:500}
.phone .pkey:active{background:#4A5562}
.phone .pkey.right{background:#2E7D46}.phone .pkey.wrong{background:#A3332D}.phone .pkey.step{background:#2D5F8F}
.ph-call{display:flex;justify-content:center}
.pcall{width:68px;height:68px;border-radius:50%;border:0;background:#2FBF5F;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s,filter .2s}
.pcall:hover{filter:brightness(1.08);transform:scale(1.05)}.pcall:focus-visible{outline:3px solid #8EC5FF;outline-offset:3px}
.pcall .pcall-ic{width:32px;height:32px;transition:transform .2s}
.pcall.end{background:#E5483F}.pcall.end .pcall-ic{transform:rotate(135deg)}
.pcall.ring{animation:pring 1s ease-in-out infinite}
.pcall:disabled{opacity:.5;cursor:default;transform:none;filter:none}
#pagain{display:inline-flex;align-items:center;gap:8px}.pagain-ic{display:inline-grid;place-items:center;width:1.65em;height:1.65em;border-radius:50%;background:#2FBF5F;color:#fff;flex:none}.pagain-ic svg{width:60%;height:60%}
.pcall.nudge{animation:pnudge .35s ease-in-out 2}
@keyframes pring{0%,100%{box-shadow:0 0 0 0 rgba(229,72,63,.5)}50%{box-shadow:0 0 0 14px rgba(229,72,63,0)}}
@keyframes pnudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.pcall.ring,.pcall.nudge{animation:none}}
.pslow{font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
@media (max-width:380px){.phone .keypad{grid-template-columns:repeat(3,56px);gap:10px 14px}.phone .pkey{height:56px}}
/* reader: paste any Hebrew */
.rdin{width:100%;min-height:120px;resize:vertical;font-size:1.15rem;line-height:1.6}
.rdstats{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:12px 0 6px;color:var(--muted)}
.rdstats b{color:var(--ink)}
.rdtext{line-height:2.1}
.rdline{margin:0 0 .4em}
.rdw{font:inherit;border:0;background:transparent;color:inherit;padding:0 2px;border-radius:6px;cursor:pointer;border-bottom:2px solid transparent}
.rdw.known{border-bottom-color:color-mix(in srgb,var(--green) 55%,transparent)}
.rdw.new{border-bottom-color:color-mix(in srgb,var(--blue) 60%,transparent)}
.rdw.unknown{border-bottom-color:color-mix(in srgb,var(--sun) 80%,transparent);border-bottom-style:dotted}
.rdw.sel{background:color-mix(in srgb,var(--blue) 18%,transparent)}
.rdw.sample{cursor:default;font-size:.95em}
.rdgloss{margin-top:10px}.rdhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}.rdhead .big{font-size:1.5rem}
/* keyboard trainer */
.kbtarget{text-align:center;margin:10px 0 6px}.kbtarget .big{font-size:2rem}.kbtarget .en{color:var(--muted)}
.kbtyped{min-height:2.4em;font-size:1.6rem;text-align:center;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface)}
.kbtyped .caret{display:inline-block;width:2px;height:1.2em;background:var(--blue);vertical-align:-.2em;margin-right:2px;animation:blink 1s step-end infinite}
.kbtyped.shake{animation:pnudge .3s ease-in-out 1}
@keyframes blink{50%{opacity:0}}
#kb .key.hint{outline:3px solid var(--blue);outline-offset:-3px;background:color-mix(in srgb,var(--blue) 18%,var(--surface))}#kb .key.hint,#kb .key.hint *{color:var(--ink)}
#kb .key.bad{background:color-mix(in srgb,var(--bad) 30%,var(--surface))}
@media (prefers-reduced-motion:reduce){.kbtyped .caret{animation:none}.kbtyped.shake{animation:none}}
/* certificates */
.certgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0}
.certcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:center;font:inherit}
.certcard:disabled{opacity:.6;cursor:default}.certcard.earned{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 14%,var(--surface))}
.certcard small{color:var(--muted);font-size:.78rem}
.certhe{font-size:1.8rem;font-weight:700;color:var(--blue);line-height:1}
/* ---- Certificate: a diploma. Parchment, a double gold frame with corner flourishes, Cinzel for the inscriptional lines,
   Cormorant Garamond for the text, Frank Ruhl Libre for the Hebrew. Sizes are in cqw so the whole thing scales with its width
   (older browsers get the px fallbacks). The colours are fixed: it is a printed document, not part of the dark theme. ---- */
.cert{container-type:inline-size;position:relative;aspect-ratio:1.4142;max-width:880px;margin:10px auto;color:#1F2A37;
  background:#FBF6EA;background-image:repeating-linear-gradient(45deg,rgba(184,145,46,.07) 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,rgba(184,145,46,.07) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 50% 42%,#FFFCF3 0%,#FBF5E6 55%,#F1E6CC 100%);border:2px solid #B8912E;
  box-shadow:inset 0 0 0 4px #FBF6EA,inset 0 0 0 5px #B8912E,0 10px 30px rgba(31,42,55,.18);font-family:"Cormorant Garamond","IvritHe","Frank Ruhl Libre",Georgia,"Times New Roman",serif;overflow:hidden}
.cert-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4.6cqw 8cqw 4cqw}
.cert-corner{width:52px;height:52px;width:8cqw;height:8cqw;display:block}
.cert-corner-tl,.cert-corner-tr,.cert-corner-bl,.cert-corner-br{position:absolute;line-height:0;top:1.6cqw;left:1.6cqw}
.cert-corner-tr{left:auto;right:1.6cqw;transform:scaleX(-1)}.cert-corner-bl{top:auto;bottom:1.6cqw;transform:scaleY(-1)}.cert-corner-br{top:auto;left:auto;right:1.6cqw;bottom:1.6cqw;transform:scale(-1)}
/* v203: the logo on the certificate (fixed brand colours, so it looks the same in light and dark mode and on paper) and a faint ayin behind the text */
.cert-logo{line-height:0}.cert-logo .brandsvg{display:block;width:23cqw;height:auto}
.cert-wm{position:absolute;left:50%;top:50%;width:44cqw;height:44cqw;transform:translate(-50%,-46%);opacity:.045;pointer-events:none;line-height:0}.cert-wm .brandsvg{width:100%;height:100%;display:block}
.cert-in>*:not(.cert-wm):not([class*="cert-corner"]){position:relative}
.cert-sub{font-style:italic;font-size:12px;font-size:1.65cqw;color:#7A6329;margin-top:1cqw;letter-spacing:.04em}
.cert-title{font-family:Cinzel,"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:30px;font-size:4.5cqw;line-height:1.15;color:#1F2A37;margin-top:1.9cqw;letter-spacing:.04em}
.cert-title-he{font-family:var(--font-he);font-weight:700;font-size:17px;font-size:2.5cqw;color:#A07F2A;margin-top:.4cqw}
.cert-lead{font-style:italic;font-size:13px;font-size:1.95cqw;color:#4A5563;margin-top:1.9cqw}
.cert-name{font-weight:600;font-size:34px;font-size:5cqw;line-height:1.2;letter-spacing:.02em;padding:.3cqw 3cqw .6cqw;margin-top:.6cqw;min-width:38%;border-bottom:1px solid #B8912E;position:relative}
.cert-name:lang(he),.cert-name[dir="auto"]{font-family:"Cormorant Garamond","IvritHe","Frank Ruhl Libre",Georgia,serif}
.cert-name::after{content:"";position:absolute;left:12%;right:12%;bottom:-4px;height:1px;background:#B8912E;opacity:.55}
.cert-text{font-size:13px;font-size:1.95cqw;line-height:1.55;margin-top:1.7cqw;color:#2A3441;max-width:84%}
.cert-text b{font-family:Cinzel,"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:.92em;letter-spacing:.06em;color:#1F2A37}
.cert-text [lang="he"]{font-family:var(--font-he);font-weight:500;unicode-bidi:isolate}
.cert-he{font-family:var(--font-he);font-weight:700;font-size:16px;font-size:2.4cqw;color:#A07F2A;margin-top:1.4cqw}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin-top:1.5cqw;gap:2cqw}
.cert-sig{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5cqw;font-size:12px;font-size:1.75cqw;color:#2A3441;min-width:0}
.cert-sig small{font-size:10px;font-size:1.45cqw;color:#7A6329;letter-spacing:.06em;font-family:"Cormorant Garamond","IvritHe","Frank Ruhl Libre",Georgia,serif}
.cert-line{display:block;width:100%;padding:0 .5cqw .5cqw;border-bottom:1px solid #B8912E;font-style:italic;white-space:normal;line-height:1.25;text-align:center}
.cert-script{font-family:Cinzel,"Cormorant Garamond",Georgia,serif;font-style:normal;font-weight:700;letter-spacing:.2em;color:#7A6329;font-size:.95em}
.cert-seal{width:96px;height:96px;width:15cqw;height:15cqw;flex:none;filter:drop-shadow(0 2px 3px rgba(90,70,20,.35))}
.cert-seal .cs-text{font-family:Cinzel,"Cormorant Garamond",Georgia,serif}
/* Printing a certificate: everything but the certificate is removed from the page (display:none, not visibility:hidden, so the
   hidden page keeps no height and the diploma comes out on one page), and the diploma sits in the normal flow rather than
   fixed, since a fixed element is printed again on every page. 272mm fits A4 landscape and Letter landscape with the 8mm margins. */
@media print{body.cert-print{background:#fff!important;margin:0}body.cert-print>*:not(.wrap),body.cert-print .wrap>*:not(#stage),body.cert-print #stage>*:not(#certView),body.cert-print #certView>*:not(.cert){display:none!important}
body.cert-print .wrap{max-width:none;padding:0;margin:0}body.cert-print #stage{padding:0;border:0;background:none;min-height:0;border-radius:0}
body.cert-print .cert{position:relative;width:min(100%,272mm);max-width:none;height:auto;margin:0 auto;box-shadow:inset 0 0 0 4px #FBF6EA,inset 0 0 0 5px #B8912E;break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* classes and question stats */
.itemtab{width:100%;border-collapse:collapse;font-size:.92rem;margin:6px 0}.itemtab th,.itemtab td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}.itemtab th{color:var(--muted);font-weight:600}
.clslist{padding-left:18px;margin:6px 0}.clslist li{margin:4px 0}
.clscard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;background:color-mix(in srgb,var(--blue) 6%,var(--surface))}
.clscode{font-size:1.1rem;letter-spacing:.12em;font-weight:700;color:var(--blue)}
.clsassign{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px;margin:8px 0}.clsassign label{font-size:.9rem}
.invbox summary,.clscard details summary{cursor:pointer;font-weight:600;margin:6px 0}
.invslots{display:flex;flex-direction:column;gap:6px;margin:6px 0}.invslot{gap:6px;align-items:center;flex-wrap:nowrap}.invslot .invmail{flex:1;min-width:0}
.invslot .linkbtn{flex:none;padding:4px 8px;color:var(--muted)}
.invres{list-style:none;padding:0;margin:8px 0;font-size:.92rem}.invres li{padding:2px 0}.invres .good{color:var(--green-ink)}.invres .bad{color:var(--bad)}
.cfbox{margin:6px 0 10px;min-height:66px}
.encline{display:block;margin-top:5px;font-size:1.02rem;font-family:var(--font-he);font-weight:500}.encline.encen{font-family:inherit;font-weight:400;font-size:.82rem;color:var(--muted);direction:ltr;margin-top:1px}
.invtab{margin-top:8px}.invtab td{word-break:break-all}.invact{white-space:nowrap}
/* teacher's class report and assignments */
.reptab tr.lrnrow{cursor:pointer}.reptab tr.lrnrow:hover,.reptab tr.lrnrow[aria-expanded="true"]{background:color-mix(in srgb,var(--blue) 9%,transparent)}.reptab tr.lrndet td{white-space:normal;background:color-mix(in srgb,var(--blue) 5%,transparent)}
.reptab th small{font-weight:400;display:block;font-size:.75rem}
.lrnpanel{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:4px 0}.lrnpanel h4{margin:0 0 4px;font-size:.9rem;color:var(--muted);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}.wchip{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.9rem}.wchip .he{font-size:1.05rem}.wchip small{color:var(--muted)}.wchip .wn{white-space:nowrap}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:2px 0}
.due{color:var(--muted)}.due.soon{color:#B36B00;font-weight:600}.due.overdue{color:var(--bad);font-weight:600}.due.done{color:var(--green-ink);font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .due.soon{color:#F2B33D}}:root[data-theme="dark"] .due.soon{color:#F2B33D}
.asglist{list-style:none;padding:0 0 0 18px;margin:2px 0 4px;font-size:.92rem}.asglist li{margin:2px 0}
.clsassign{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 16px}
.clsassign .asghead{grid-column:1/-1;font-weight:600;font-size:.88rem;margin:10px 0 0;padding-bottom:3px;border-bottom:2px solid var(--line)}.clsassign .asghead:first-child{margin-top:0}.clsassign .asghead small{font-weight:400;color:var(--muted)}
.clsassign .asgrow{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:start;padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.clsassign .asgrow input[type="checkbox"]{margin-top:3px}.clsassign .asgname{min-width:0;line-height:1.3}
/* Teacher's class list: each class folds to one line (name, learners, code); the course levels inside "Assign courses" fold too */
details.clscard>summary.clssum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-weight:400;padding:2px 0}
details.clscard>summary.clssum::-webkit-details-marker{display:none}
details.clscard>summary.clssum::before{content:"\25B8";color:var(--muted);display:inline-block;width:1em}
details.clscard[open]>summary.clssum::before{content:"\25BE"}
.clssum b{font-size:1.02rem}.clssub{color:var(--muted);font-size:.88rem}
.clssumcode{margin-inline-start:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;letter-spacing:.06em;color:var(--muted)}
.clsfind{grid-column:1/-1;margin:6px 0 2px}
.clscard[hidden]{display:none}
.clsassign{display:block}
.clsassign .asgrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 16px;margin:6px 0 12px}
.clsassign .asglevel{margin:0 0 2px}
.clsassign summary.asghead{cursor:pointer;margin:8px 0 0}
.clsassign .asgdue{grid-column:2;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}
.clsassign .asgdue input[type="date"]{font:inherit;font-size:.82rem;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:150px;max-width:100%}
.btn.small{padding:6px 10px;font-size:.9rem}
/* scoreboard */
.boardbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.boardbtn:hover{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 14%,var(--surface))}
.boardtabs{display:flex;gap:8px;margin:8px 0 10px}.boardtabs button{flex:0 0 auto}.boardtabs button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.boardjoin{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0;background:color-mix(in srgb,var(--sun) 10%,var(--surface))}.boardjoin p{margin:0}
.boardjoin.on{background:color-mix(in srgb,var(--green) 10%,var(--surface))}
.boardtab{width:100%;border-collapse:collapse;margin:6px 0}.boardtab th,.boardtab td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}.boardtab th{color:var(--muted);font-weight:600;font-size:.9rem}
.boardtab .bplace{width:2.4em;font-weight:700;text-align:center}.boardtab tr.me td{background:color-mix(in srgb,var(--blue) 12%,transparent);font-weight:600}
@media (max-width:520px){.boardtab th:nth-child(4),.boardtab td:nth-child(4){display:none}.boardtab th,.boardtab td{padding:7px 5px}}
/* review mistakes, announcements, forms, holiday pack */
.doc.mini{font-size:.95rem;max-width:520px;margin:6px 0}.convo.mini p{margin:4px 0}
.annbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}.annbox details{flex:1;min-width:200px}.annbox .he{font-size:1.15rem}
.fform{border:1px solid var(--line);border-radius:12px;background:#FFFDF7;color:#1F2A37;padding:12px 16px;margin:10px 0}
.ffhead{font-weight:700;font-size:1.05rem;border-bottom:2px solid #B8912E;padding-bottom:6px;margin-bottom:10px}
.ffrow{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:8px 12px;align-items:center;padding:6px 0;border-bottom:1px dotted #D9C27A}
.fflab{font-weight:600}.fflab small{display:block;font-weight:400;color:#6B7280;font-size:.8rem}
.ffin{font:inherit;padding:7px 9px;border:1px solid #C9B77A;border-radius:6px;background:#fff;color:#1F2A37;width:100%;box-sizing:border-box}
.ffmark{min-width:1.5em;font-size:.9rem}.ffmark.good{color:var(--green-ink)}.ffmark.bad{color:var(--bad)}
@media (max-width:560px){.ffrow{grid-template-columns:1fr;gap:4px}}
.greetings{display:grid;gap:8px}.greet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface)}.greet .big{font-size:1.3rem}.greet small{color:var(--muted);flex-basis:100%}
/* v289: Holiday pack: each greeting has its Hebrew right-aligned with the translation under it, and the play buttons to the right of the Hebrew, at the right edge of the card, so they line up in a column down the list */
.greetings .greet{flex-direction:row;flex-wrap:nowrap;justify-content:space-between}
.greetings .greet .gt{flex:1;min-width:0;text-align:right}
.greetings .greet .gt .he{display:block;text-align:right}
.greetings .greet .gt small{display:block;flex-basis:auto;text-align:right}
.greet .gbtns{display:inline-flex;gap:6px;flex:none}
.chagwords .tag{font-size:1rem}
#ptalk .opts{margin-top:8px}#ptalk .opt small{display:block;font-size:.8rem;color:var(--muted);direction:ltr}
/* buttons inside the paper-style form keep paper colours in dark mode too */
.fform .btn:not(.primary){background:#fff;color:#1F2A37;border-color:#C9B77A}
.fform .btn.primary{color:#fff}
/* course categories */
.ccats{display:flex;gap:8px;margin:14px 0 6px;flex-wrap:wrap}.ccats button{flex:0 0 auto}.ccats button small{opacity:.7;margin-left:4px}
.ccats button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pcats{margin:2px 0 12px}.pcats button{min-height:40px}
/* Hebrew runs read right to left even inside English text, so a full stop or question mark lands at the END of the Hebrew (its left),
   not on the right where an English paragraph would put it. Elements with an explicit dir="…" keep it. */
[lang="he"]:not([dir]){direction:rtl;unicode-bidi:isolate}
/* why this? on the plan, the review card, the skill profile */
.plan li{margin-bottom:4px}.whyplan{font-size:.82rem;margin-left:4px}.planwhy{display:block;color:var(--muted);margin:2px 0 4px;font-size:.85rem}
.planheavy{margin:6px 0 4px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--sun) 16%,var(--surface));font-size:.92rem}
.duecard{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--blue) 10%,var(--surface))}
.duecard span{flex:1 1 220px;color:var(--muted);font-size:.9rem}
.profgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;margin:6px 0 10px}
.prow{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}.prow span:first-child{flex:1;font-weight:600}.prow small{color:var(--muted);font-size:.78rem}
.skb.strong{background:color-mix(in srgb,var(--green) 20%,transparent);color:var(--green-ink)}.skb.good{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}.skb.dev{background:color-mix(in srgb,var(--sun) 24%,transparent)}.skb.none{opacity:.6}
/* reader pre-teaching */
.rdpre{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0;background:color-mix(in srgb,var(--sun) 12%,var(--surface))}.rdpre p{margin:0 0 8px}
.rdprecard{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0;background:var(--surface)}.rdprecard .big{font-size:1.6rem}
/* display settings on the Settings page; the cog */
.setrows{display:grid;gap:10px;margin:6px 0 10px}.setrows label{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}.setrows label small{grid-column:1/-1;color:var(--muted);font-size:.82rem}
.cogbtn{font-size:1.05rem;padding:4px 10px;line-height:1}
/* the account corner: name with the cog beside it, the due reviews underneath */
.acctcol{display:flex;align-items:center;gap:8px;margin-left:auto;justify-content:flex-end}

@media (max-width:520px){.acctcol{flex:1 0 100%}}
.acctrow{display:flex;align-items:center;gap:8px}
.acctcol .duebtn{display:none}
/* the Level page */
.lvlcard{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:6px 0 10px;background:color-mix(in srgb,var(--blue) 8%,var(--surface))}.lvlcard>div:first-child{margin-bottom:6px}
.phead[hidden]+.ptitle,.phead[hidden]+.lvlcard,.phead[hidden]+.skpanel{margin-top:0}
.top>.stats{flex:1 1 auto;min-width:0}
.fxbox input,.fxbox .field{box-sizing:border-box;width:100%;max-width:100%;min-width:0}

/* "Who is joining the class?": one button per person remembered on this browser */
.wholist{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.whobtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px}
.whobtn small{color:var(--muted);font-weight:400}
/* assigned courses in the class list: the title and the button both open the course */
.studylink{color:var(--ink);text-decoration:none;font-weight:600}.studylink:hover{text-decoration:underline}
.clslist .asglist li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
/* Join a class / Teach a class: a short box, just wide enough for a code or a name, and matching buttons */
.clsform{align-items:flex-end;margin-top:6px;flex-wrap:nowrap}.clsform .field{flex:0 1 13em;min-width:8em;margin:8px 0}.clsform .field input{width:100%;height:40px;box-sizing:border-box}
.clsform>.btn{flex:0 0 auto;min-width:6.5em;height:40px;padding:0 16px;margin-bottom:8px}
.mergebox{margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}

/* the level block folded into a chip while practising */
.yearchip{display:flex;align-self:stretch;width:100%;box-sizing:border-box;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.95rem;cursor:pointer}
.yearchip:hover{border-color:var(--blue)}.yearchip .chev{color:var(--muted)}
.hero.compact .yearline{margin:10px 0 0}.hero.compact .lvlhead,.hero.compact .yearaway,.hero.compact .sronly,.hero.compact .track{display:none}

/* ==== Learner-experience fixes, 2026-10-09 ==== */
/* UX9: on a phone the section tabs wrap onto a second row instead of scrolling off the side */
@media (max-width:600px){.groups{flex-wrap:wrap;overflow:visible;justify-content:center;row-gap:6px}.groups::before,.groups::after{display:none}}
/* UX12 + UX11: words you can tap look tappable, and the tap area is at least 40px tall (the padding sits in the line's leading, so
   lines don't move); one small speaker per line of a reading passage */
.tok,.doc .w{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,var(--blue) 70%,transparent);text-underline-offset:.2em;text-decoration-thickness:1px}
.tok{padding:8px 3px}
.sent .speak.mini{padding:0 10px;min-width:40px;min-height:40px;font-size:1rem;line-height:1;vertical-align:middle;margin-inline-start:6px;border-width:1px}
.psay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 2px;font-size:.9rem;color:var(--muted)}
@media (max-width:600px){.doc{line-height:2.35}.doc .w{padding:11px 2px}}
/* UX11: 40px tap targets on phones: keyboard keys, the header buttons, the selects, the small link buttons */
@media (max-width:600px){
  .kb{margin-left:-8px;margin-right:-8px}.key{min-height:44px;border-radius:6px;margin:0 1.5px}.key .he{font-size:1.2rem}
  .acctbtn{min-height:40px;padding:6px 14px}.cogbtn{min-width:40px;min-height:40px;padding:4px 10px}.boardbtn,.installbtn{min-height:40px}
  .meta select,.controls select{min-height:40px;padding:8px 10px}
  .whyplan,.reportlink,.feedback .linkbtn,.gonext+.linkbtn,.annbox .linkbtn,.lmeta .linkbtn{display:inline-block;padding:10px 8px;min-height:40px;box-sizing:border-box;vertical-align:middle}
  .plan li{padding:2px 10px}.feedback .reportlink{margin-top:-4px}
  .groups button{min-height:40px}.slen .chip{min-height:40px}.fsel select{min-height:40px;padding:8px 10px}#stage .note .linkbtn,#stage .ctx .linkbtn,#ffHints,.annbox summary{display:inline-block;padding:9px 6px;min-height:40px;box-sizing:border-box;vertical-align:middle}
}
@media (max-width:560px){.gfbtn{width:40px;height:40px}}
/* UX21: the game's title fits beside the buttons on a phone: the full-screen button goes (the game already fills the screen) and the title may wrap */
@media (max-width:560px){#gfF{display:none}.gft{font-size:.95rem;white-space:normal;line-height:1.15;max-height:2.3em;overflow:hidden;text-overflow:clip}}
/* UX24: "How long have you got?" sits above its chips on a phone */
@media (max-width:560px){.slen>span:first-child{flex-basis:100%}}
/* UX13: in a boss battle the question stays under the taunt after a wrong reply */
.boss-say .bsay-was{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}.boss-say .bsay-was>small:first-child{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.boss-say .bsay-was .he{font-size:1.15rem}
/* UX15: the daily word's one-line how-to */
.whow{max-width:560px;margin:8px auto 0;text-align:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 70%,transparent)}.whow p{margin:8px 0;font-size:.92rem;color:var(--muted)}
.wlegend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.9rem;direction:ltr}.wlegend span{display:inline-flex;align-items:center;gap:6px}.wlegend i.wt{width:30px;height:30px;font-size:1.15rem;font-style:normal;border-width:1.5px;border-radius:6px}
.wgoal{text-align:center;margin:8px 0 0}.wd-head h2{display:flex;justify-content:center;gap:8px;align-items:baseline;flex-wrap:wrap}.wd-head h2 .he{font-size:1.25rem;font-weight:500;color:var(--muted)}
/* UX25: holiday words with their meaning under each one */
.chagwords{gap:8px}.chagwords .cw{display:inline-flex;flex-direction:column;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.chagwords .cw .he{font-size:1.25rem;line-height:1.3}.chagwords .cw small{color:var(--muted);font-size:.78rem;direction:ltr;text-align:center}
/* the class word list editor (v149) */
.clslisttxt{display:block;width:100%;box-sizing:border-box;margin:4px 0 6px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;line-height:1.6;resize:vertical;min-height:120px}

/* detailed error reports on the App stats page (v164) */
.errlog{display:flex;flex-direction:column;gap:4px;margin-top:4px}.errrow{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.88rem}.errrow summary{cursor:pointer;line-height:1.35}.errwhen{color:var(--muted)}.errstack{white-space:pre-wrap;word-break:break-word;font-size:.78rem;background:var(--bg);padding:8px;border-radius:6px;margin:6px 0 0;max-height:220px;overflow:auto}

/* App stats sub-tabs (v165) */
.stabs{margin:4px 0 10px}.stabs button{padding:9px 11px;font-size:.92rem}.spane[hidden]{display:none}

.evline{background:color-mix(in srgb,var(--sun) 40%,transparent);border-radius:6px}
.deeper{margin-top:14px}
.lvl.spec{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(127,127,127,.12) 6px 12px)}
.opt.heq{text-align:right}.opt.heq small{display:block}

/* v177: header in two rows: the title with the buttons, then three stat cards (XP and the daily goal, Rank, progress to the next rank) */
.hctl{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.stats.scards{display:grid;grid-template-columns:auto auto 1fr;gap:10px;margin-top:12px;font-size:.92rem}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;min-width:0}
.slab{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.sbig{display:block;font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.15}
.sbig small{font-weight:400;font-size:.8rem;color:var(--muted)}
.scard.sprog{flex-direction:column;align-items:stretch;justify-content:center;gap:8px}
.srow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:.85rem}
.srow .he{color:var(--ink);font-weight:700}
.sprog .rankbar{width:100%;height:8px;border-radius:4px}
.sprog .rankbar i{border-radius:4px}
@media (max-width:520px){.stats.scards{grid-template-columns:1fr 1fr}.scard.sprog{grid-column:1/-1}.hctl{flex:1 0 100%}}
.hctl .acctbtn,.hctl .cogbtn{min-height:30px;box-sizing:border-box}.hctl .cogbtn{min-width:30px}@media (max-width:520px){.hctl .acctbtn,.hctl .cogbtn{min-height:40px}.hctl .cogbtn{min-width:40px}}
/* v181: on a phone the header buttons keep to one row, starting at the left, so the settings button stays beside them */
@media (max-width:520px){.hctl{flex-wrap:nowrap;justify-content:flex-start;gap:6px;margin-left:0;min-width:0}
  .hctl .ilong{display:none}
  .hctl .acctbtn,.hctl .installbtn{padding:6px 11px;white-space:nowrap}
  .hctl .acctwrap{min-width:0;flex:0 1 auto}
  .hctl #acctBtn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .hctl .cogbtn{margin-left:auto;flex:none}}

/* v182: on a phone the account menu opens under the button row, from its left edge, so it never runs off the screen */
@media (max-width:520px){.hctl{position:relative}.hctl .acctwrap{position:static}.hctl .acctmenu{left:0;right:auto;max-width:100%}}
/* v184: when a phone is too narrow, the header row gives way one step at a time and never drops a word:
   tighter buttons, then the install and scoreboard icons go, then smaller text, and only then is a long name shortened with "…" */
@media (max-width:520px){.hctl #installBtn,.hctl #boardBtn{flex:none}
  .hctl.c1{gap:4px}.hctl.c1 .acctbtn,.hctl.c1 .installbtn{padding:6px 8px}
  .hctl.c2 .ico{display:none}
  .hctl.c3 .acctbtn,.hctl.c3 .installbtn{font-size:.78rem;padding:6px 7px}}
.boardtab .bstreak{white-space:nowrap}

/* ==== v188: fixes from the GUI audit (phone and desktop) ==== */
/* Interactive edges: answer buttons, inputs, keys and selects get a border of at least 3:1 (--edge), in both themes */
.opt,.typein,.key,.wk,select,.ccats button,.settabs .btn{border-color:var(--edge)}
.opt:not(.good):not(.bad):hover{border-color:var(--blue)}

/* Short answers side by side on a wide screen */
@media (min-width:640px){.opts.short{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* Two selected styles only: a filled pill for choices (main nav, course filters, Settings sections), an underline for the sub-tab bar */
.settabs .btn[aria-selected="true"],.tabs2 button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .settabs .btn[aria-selected="true"],:root:not([data-theme="light"]) .tabs2 button[aria-pressed="true"],:root:not([data-theme="light"]) .ccats button[aria-pressed="true"]{color:#06121F}}
:root[data-theme="dark"] .settabs .btn[aria-selected="true"],:root[data-theme="dark"] .tabs2 button[aria-pressed="true"],:root[data-theme="dark"] .ccats button[aria-pressed="true"]{color:#06121F}

/* Comfortable desktop targets: header buttons 38 px, main nav 40 px (phones already had 40) */
@media (min-width:521px){.hctl .acctbtn,.hctl .installbtn,.hctl .cogbtn{min-height:38px}.hctl .cogbtn{min-width:38px}}
nav.groups button{min-height:40px}

/* Small links get a 24 px+ hit area without changing how they look */
footer a,footer .linkbtn,.linkbtn.whyplan,.placelink .linkbtn{display:inline-block;padding:4px 2px;min-height:28px;line-height:20px}

/* Labels sit right beside their picker (Documents, Conversations, Phone menus) */
.meta .dpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta .dpick select{max-width:100%}

/* Course cards: progress and button pinned to the bottom so rows line up */
.ccard>.bar{margin-top:auto}
.ccard>.bar~.note{min-height:2.6em}
/* Courses far from the learner's level fold away until asked for */
.cgrid.folded .cfar{display:none}
.cmorerow{justify-content:center;margin:4px 0 0}

/* Welcome: the three choices stay on one row on a wide screen */
#welcomeOver .acct{max-width:760px}
@media (min-width:640px){#welcomeOver .row{flex-wrap:nowrap}}
/* v212: the welcome box holds the three "Before you start" choices: side by side from 640px, stacked on a phone */
#welcomeOver .wintro{margin:0 0 6px}
#welcomeOver .wabouttop{display:none}
#welcomeOver .wchoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px;margin:6px 0 4px}
#welcomeOver .wchoices .field{margin:6px 0}
#welcomeOver .wchoices small{display:block;margin-top:5px;color:var(--muted);font-size:.8rem;line-height:1.35}
#welcomeOver .wstart{margin:14px 0 8px}
#welcomeOver .wplace{margin:8px 0 0}
@media (max-width:639px){#welcomeOver .wchoices{grid-template-columns:1fr}#welcomeOver .wchoices .field{margin:4px 0}#welcomeOver .wabouttop{display:block;margin:0 0 8px}#welcomeOver #wAboutP{display:none}   /* a phone: the hints stay (short), and "What is Ivrit Road?" moves up under the title */}

/* The on-screen keyboard switch */
.kbswap{display:block;margin:6px auto 0}

/* Daily word: a shape as well as a colour for each tile (right place ●, elsewhere ○) */
.wt{position:relative}
.wt.g::after,.wt.y::after{position:absolute;top:2px;right:4px;font:700 .6rem/1 Rubik,sans-serif;opacity:.9}
.wt.g::after{content:"●"}.wt.y::after{content:"○"}
.wstrip i{position:relative}

/* Phone */
@media (max-width:520px){
  /* header: brand on one line, XP beside a joined rank card and its progress */
  .brand .brandtag{display:none}
  .stats.scards{grid-template-columns:1fr 1fr;gap:8px}
  .stats.scards>.scard.sprog{grid-column:1/-1;padding:8px 12px;gap:6px}
  .stats.scards #rankNext small{display:none}
  /* sub-tabs (v210): they stack in rows instead of one strip that scrolls sideways. Two to a row on a narrow phone, three on a wide one,
     and a lone last button stretches across */
  .modes{position:relative;flex-wrap:wrap;gap:6px;overflow:visible;border-bottom:0;padding-bottom:2px;-webkit-mask-image:none;mask-image:none}
  .modes button{flex:1 1 140px;white-space:normal;min-height:44px;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);line-height:1.2}
  .modes button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff}
  /* course filters: three equal segments on one row */
  .ccats:not(.pcats){flex-wrap:nowrap;gap:6px}.ccats:not(.pcats) button{flex:1 1 0;padding-left:6px;padding-right:6px;white-space:nowrap}
  /* course cards: icon beside the title, less height per card */
  .ccard.has-icon{display:grid;grid-template-columns:56px 1fr;column-gap:12px;padding:12px 14px}
  .ccard.has-icon>.cicon{grid-row:1/3;align-self:start;margin:0}
  .ccard.has-icon>*:not(.cicon){grid-column:2}
  .ccard.has-icon>h3{margin:0 0 2px}
  /* Daily word keyboard: tighter gaps so the 11-key bottom row gets wider letters */
  .wkr{gap:3px}.wk.wide{flex:1.25 1 0}
}
.modes{position:relative}
/* v188: with the level slider folded, the header needs less space below it before the main nav */
.hero.compact{padding-bottom:4px}
.hero.compact+nav.groups{margin-top:12px}
@media (max-width:520px){.sstart{padding:14px 14px}.sstart .greet{font-size:1.5rem}.sstart .go{margin:10px 0 8px}}
/* v189: the home screen keeps the Nikud control (review179: Nikud is reachable on every page); on a phone it sits tighter */
@media (max-width:520px){.wrap:has(#stage>.sstart) .controls{margin:4px 0 6px}}
/* on a phone the no-voice notice is one line until opened */
@media (max-width:520px){.voicehelp summary{white-space:normal}.voicehelp details[open] summary{white-space:normal}}
/* v188: on a phone the greeting and its transliteration share one line */
@media (max-width:520px){.sstart .greet{flex-wrap:nowrap;justify-content:space-between;align-items:baseline;padding:6px 12px;font-size:1.35rem}
  .sstart .greet small{flex-basis:auto;order:-1;margin:0;white-space:nowrap}}
@media (max-width:400px){.stage:has(>.sstart){padding-top:10px}}
/* v188: Daily word on a short phone screen: smaller tiles and keys so the board and the keyboard fit together */
@media (max-width:520px) and (max-height:720px){
  .wd-head h2{font-size:1.5rem}.wd-head .hint{display:none}
  .wrow{grid-template-columns:repeat(5,40px);gap:5px}.wt{height:40px;font-size:1.45rem}
  .wk{height:42px}.wkb{gap:4px}}
@media (max-width:520px) and (max-height:720px){
  .wgoal{font-size:.9rem;margin:4px 0}.whints{margin-top:4px}.whbtn{padding:5px 12px}
  .gf-wordle .gfull .stage,.gfull.gf-wordle .stage,.gf-wordle .stage{padding-top:8px;padding-bottom:8px}
  .wmsg{min-height:1.2em;margin:2px 0}}
@media (max-width:520px) and (max-height:720px){.wk{height:40px}}

/* v189: the slogan sits on the brand line as plain text (it had picked up the .tag pill style) */
.brand .brandtag{margin-left:.6em;font-size:.75em;font-weight:400}

/* v189: above phone width the header is one row (fitted by fitHeader() in 16d-scoreboard.js) */
@media (min-width:521px){.top{flex-wrap:nowrap}.top .brand{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden}.top .hctl{flex:0 0 auto;flex-wrap:nowrap}
  .top.notag .brandtag{display:none}.hctl.d1 .ilong{display:none}.hctl.d2 .ico{display:none}
  .top.wrap2{flex-wrap:wrap}.top.wrap2 .hctl{flex-wrap:wrap}}
/* v189: narrow phones (400 px and under). START stays on screen at 360 × 640 even with the no-voice notice showing;
   the course filters fit at 320 px */
@media (max-width:400px){
  .sstart .plan{margin:6px 0 4px}.sstart .plan li{font-size:.8rem;padding:3px 9px;margin-bottom:0}.sstart .plan .whyplan{font-size:.76rem;min-height:24px;padding:2px;line-height:20px}
  .wrap:has(#stage>.sstart) .voicehelp{margin-bottom:6px}.voicehelp details{padding:6px 12px}
  .wrap:has(#stage>.sstart) .stage{padding-top:8px}.sstart{margin-top:4px}.sstart .greet{padding:4px 12px}
  .ccats:not(.pcats) button{font-size:.88rem;padding-left:4px;padding-right:4px}.ccats:not(.pcats) button small{margin-left:3px}}
@media (max-width:340px){.ccats:not(.pcats) button small{display:none}}

/* ==== v191: lesson focus (src/20-lesson-focus.js). While a lesson step is open (on a phone, any activity: v192), status and
   navigation fold behind the menu button ==== */
.focusbar,.fbvoice{display:none}
body.focus .focusbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;position:sticky;top:0;z-index:30;
  margin:-20px -18px 6px;padding:8px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.focusbar .fbtitle{text-align:center;font-size:1.1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbbtn{width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer}
.fbbtn.fbback{border-color:transparent;background:none}
body.focus.focus-menu #fbMenu{background:var(--blue);border-color:var(--blue);color:#fff}
body.focus:not(.focus-menu) .hero,body.focus:not(.focus-menu) #groups,body.focus:not(.focus-menu) #modes{display:none}
/* v193: ‹ in an activity brings back only the sub-tabs, under the bar */
body.focus.focus-subs:not(.focus-menu) #modes:not([hidden]){display:flex;margin-top:4px;padding-bottom:0;margin-bottom:6px}   /* v212: 6px under the last row, the same as the gap between the buttons (it was 2px, so the card sat too close) */
body.focus:not(.focus-voice) #voiceHelp,body.focus #season{display:none}
body.focus.focus-menu .hero{padding-top:0}
/* v192: anything scrolled into view (the stage, a field, a feedback line) lands below the sticky bar, not under it. On the page
   rather than as scroll-padding, so focusing the menu button itself (inside that band) never scrolls the page. */
body.focus .wrap>:not(.focusbar),body.focus .wrap>:not(.focusbar) *{scroll-margin-top:72px}
/* the lesson strip as the lesson's heading (a live lesson step only: a paused course keeps its strip in free practice) */
body.focus-step .coursebar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin:6px 0 12px;padding:0;border:0;background:none;font-size:.95rem}
body.focus-step .coursebar .cbhead .cicon,body.focus-step .coursebar .cbsep,body.focus-step .coursebar .cbn{display:none}
body.focus-step .coursebar .cbhead,body.focus-step .coursebar .cbstep{grid-column:1/-1}
body.focus-step .coursebar>.note{font-size:.85rem}
body.focus-step .coursebar #cexit{justify-self:end}
body.focus-step .coursebar .cbc{display:block;font-weight:400;color:var(--muted);font-size:.9rem}
body.focus-step .coursebar .cbl{display:block;font-size:1.45rem;font-weight:700;color:var(--ink);line-height:1.2;margin-top:2px}
body.focus-step .coursebar .cbstep{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;color:var(--muted)}
body.focus-step .coursebar .cbst{min-width:0}
body.focus-step .coursebar .steps{flex:none}
body.focus-step .coursebar .cbstep b{font-weight:500;color:var(--muted)}
body.focus-step .coursebar .steps{gap:6px}
body.focus-step .coursebar .steps i{width:10px;height:10px;border-radius:5px;border:0;background:var(--line)}
body.focus-step .coursebar .steps i.on{background:var(--green)}
body.focus-step .coursebar .steps i.cur{width:34px;background:var(--blue)}
/* Category, Nikud and the voice notice move under the card */
body.focus .wrap{display:flex;flex-direction:column}
body.focus .wrap>.controls,body.focus .wrap>#voiceHelp{order:2}
body.focus .wrap>.controls{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);justify-content:space-between}
body.focus .wrap>footer{order:3}
body.focus.novoice .fbvoice{display:inline-flex;align-items:center;gap:4px}

/* ==== v193: boxes that sit in a row or a grid are all the same size ==== */
/* Phone header: the XP card is as tall as the Rank card and its progress bar together (it was centred and shorter) */
/* (v195: the phone header no longer joins the Rank card to its progress bar, so the XP card needs no stretching) */
/* Section buttons on a phone: a grid of equal buttons, two across, all the same height (they were centred rows of 3, 2 and 2, from 87 to 167 px wide) */
@media (max-width:600px){
  nav.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:6px;justify-content:stretch;overflow:visible}
  nav.groups button{width:100%;min-width:0;justify-content:flex-start;text-align:left}
  nav.groups .gmore{grid-column:1/-1;justify-content:center}
  /* a new learner has three to five sections and "Explore all": they sit three across (the full seven sit two across), so the nav stays two or three buttons tall and START stays on the first screen (v189) */
  nav.groups[data-n="3"],nav.groups[data-n="4"],nav.groups[data-n="5"],nav.groups[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:420px){nav.groups button{font-size:.8rem;gap:5px}}
/* Level boxes: every box as tall as the tallest, three across on a phone (12 = 3 × 4) so a name like Lexicographer fits on one line */
.levels{grid-auto-rows:1fr}
@media (max-width:480px){.levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:340px){.lvl,.lvl span{font-size:.68rem}}
/* The four header boxes: the same height in every row */
.lvltiles{grid-auto-rows:1fr}
/* Phone menus topics: a grid of equal buttons, two across on a phone and four from 640 px, the label over the count */
.pcats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.pcats button{flex:none;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 8px;line-height:1.25;text-align:center}
.pcats button small{margin:0}
@media (min-width:640px){.pcats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- v194: wide screens. From 1100px the page is two columns: the header and the section list stay in a sidebar while the lesson fills the rest ---- */
@media (min-width:1100px){
  .wrap{max-width:1720px;padding:24px 36px 56px;display:grid;grid-template-columns:clamp(290px,21vw,350px) minmax(0,1fr);grid-template-rows:repeat(10,auto) 1fr;column-gap:36px;align-items:start}
  .wrap>*{grid-column:2;min-width:0}
  .wrap>.side{grid-column:1;grid-row:1/-1;position:sticky;top:20px;max-height:calc(100vh / var(--z) - 40px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:0 6px 12px 6px;margin:0 -6px}
  .side .hero{padding:0 0 4px}
  .side .top{flex-direction:column;align-items:stretch;gap:12px}
  .side .brand{font-size:1.25rem}.side .brandtag{display:block;font-size:.85rem;font-weight:400}
  .side .hctl{margin-left:0;flex-wrap:wrap}
  .side .stats.scards{grid-template-columns:1fr 1fr;margin-top:14px}.side .scard.sprog{grid-column:1/-1}
  .side .yearline{margin:16px 0 0}
  .side .lvlhead{flex-direction:column;align-items:stretch;gap:12px}
  .side .lvltitle{max-width:none;flex-direction:row;align-items:baseline;gap:6px 14px}
  .side .lvltiles{grid-template-columns:1fr 1fr}
  .side .levels{grid-template-columns:repeat(4,1fr)}
  .side .groups{flex-direction:column;align-items:stretch;overflow:visible;gap:5px;margin:18px 0 0;padding:0}
  .side .groups::before,.side .groups::after{display:none}
  .side .groups button{width:100%;justify-content:flex-start;border-radius:12px;padding:6px 14px 6px 6px;font-size:.98rem;min-height:46px;text-align:left}
  .side .hero.compact+nav.groups{margin-top:16px}
  .stage{padding:34px 40px}
  .modes{margin-top:0}
}
/* v205: big screens. No zoom and no scaling: one CSS pixel is one screen pixel at every resolution. From 1500px the page fills the whole window,
   and the lesson area uses the extra width with more columns instead of empty margins (see the rules below). */
@media (min-width:1500px){.wrap{max-width:none}}
/* "Fit to screen" (src/21-fit-screen.js): the learner's choice of 1080p / 2K / 4K zooms the whole page; --z is that factor. Viewport units ignore zoom, so
   the few sizes in vh/vw divide by it. At 1 (the default) nothing changes. */
:root{--z:1}
.fitbox{margin:14px 0 4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.fithead{margin:0 0 8px;font-size:.95rem}
.fitrow{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted);margin:0 0 8px}
.fitrow select{font:inherit;color:var(--ink);padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.fitnote{margin:0;font-size:.78rem;color:var(--muted);line-height:1.4}
/* shown from 2200px wide (2K and up); on a smaller window only while a 2K/4K choice is active, so it can always be undone; never in the stacked phone layout */
@media (max-width:2199px){.fitbox{display:none}html[data-fit="on"] .fitbox{display:block}}
@media (max-width:1099px){.fitbox,html[data-fit="on"] .fitbox{display:none}}
/* From 1921px (2K, 4K) the course list is wide enough to show every course at once, so the "Show all" fold goes away instead of leaving a mostly empty row */
@media (min-width:1921px){
  .cgrid.folded .cfar{display:flex}
  .cmorerow{display:none}
}

/* v194: inside the lesson area, from 1500px the pieces of a screen sit side by side instead of in one long column */
@media (min-width:1500px){
  /* courses: the Start card beside "Where you stand"; the course cards fill the width */
  .stage:has(>.sstart){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:24px;align-items:stretch}
  .stage:has(>.sstart)>*{grid-column:1/-1}
  .stage:has(>.sstart)>.sstart{grid-column:1;grid-row:1;margin:0}
  .stage:has(>.sstart)>.standing{grid-column:2;grid-row:1;margin:0}
  .stage:has(>.sstart):not(:has(>.standing))>.sstart{grid-column:1/-1}
  .stage:has(>.sstart)>.meta{grid-row:2}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
  /* phone calls: the phone stays in view on the right, the task, transcript and feedback on the left */
  .stage:has(>.pphone){display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:repeat(12,auto) 1fr;column-gap:40px;align-content:start}
  .stage:has(>.pphone)>*{grid-column:1}
  .stage:has(>.pphone)>.pphone{grid-column:2;grid-row:1/-1;position:sticky;top:20px;align-self:start;margin:0}
  /* quiz, listening, verbs: the question on the left, the answers on the right */
  .stage:has(>.prompt+.opts){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:40px;align-items:center}
  .stage:has(>.prompt+.opts)>*{grid-column:1/-1}
  .stage:has(>.prompt+.opts)>.prompt{grid-column:1}
  .stage:has(>.prompt+.opts)>.opts{grid-column:2;margin-top:0;grid-template-columns:minmax(0,1fr)}
  /* reading, documents, conversations: the text stays beside its questions */
  .stage:has(>.pq),.stage:has(>.dq){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto repeat(7,auto) 1fr;column-gap:44px;align-items:start}
  .stage:has(>.pq)>*,.stage:has(>.dq)>*{grid-column:1}
  .stage:has(>.pq)>.meta,.stage:has(>.dq)>.meta{grid-column:1/-1}
  .stage>.pq,.stage>.dq{grid-column:2;grid-row:2/-1;margin-top:0;position:sticky;top:20px}
}

/* ---- v194: icons. Every picture-like mark is a drawn glyph on a solid tile (src/00-icons.js); there are no emoji in the interface ---- */
.tic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.5em;height:1.5em;border-radius:.42em;background:var(--tc,#185FA5);color:#fff!important;font-size:inherit;vertical-align:-.34em;line-height:1}
.tic svg{width:68%;height:68%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tic.sm{width:1.25em;height:1.25em;border-radius:.36em;vertical-align:-.25em}
.tic.lg{width:40px;height:40px;border-radius:11px;vertical-align:middle}
.tic.xl{width:64px;height:64px;border-radius:16px;vertical-align:middle}
.btn .tic,.linkbtn .tic{margin-right:0}   /* v310: no extra space after the icon at all: an icon-only button (play, slow, microphone, the pause ring) must be centred, and a word after the icon already has the space typed before it */
.btn.speak .tic{vertical-align:middle}
.gly{display:inline-flex;width:1.2em;height:1.2em;vertical-align:-.22em;color:inherit}
.gly svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hearts{display:inline-flex;gap:3px;vertical-align:middle}.hearts .gly{width:1.15em;height:1.15em}
.hearts .gly.on{color:#E5484D}.hearts .gly.on svg{fill:currentColor}.hearts .gly.off{color:currentColor;opacity:.4}
.gfbtn .gly{width:20px;height:20px;vertical-align:middle}.bus-bell .gly{width:2.1rem;height:2.1rem}
.ph-pic{background:none;border-radius:0}.ph-pic .tic{vertical-align:top}
.ph-sys{display:inline-flex;gap:6px;align-items:center}.ph-sys .gly{width:15px;height:15px;vertical-align:middle}
.rank{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:.45em;color:#fff;font-weight:700;font-size:.9rem}
.rank.r1{background:#8F6B0A}.rank.r2{background:#5F6670}.rank.r3{background:#8A4F26}
.badge i .tic{vertical-align:middle}.cbadge .tic{vertical-align:middle}
.done .score .tic,.celeb .big .tic{vertical-align:middle}
.hctl .ico .tic{vertical-align:-.3em}.cogbtn .tic{vertical-align:middle}
.pcl .tic{vertical-align:-.28em}

/* ---- v194: the logo (brand/, tools/brand/build_brand.py) and one-line header buttons ---- */
:root{--logo-tile:#0C2340;--logo-fg:#F7F1E3;--logo-gold:#E2AE45}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo-tile:#F7F1E3;--logo-fg:#0C2340;--logo-gold:#C98F1F}}
:root[data-theme="dark"]{--logo-tile:#F7F1E3;--logo-fg:#0C2340;--logo-gold:#C98F1F}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-weight:400;font-size:1rem}
.brand .logo{display:block;color:inherit;text-decoration:none;border-radius:10px}
.brand .logo:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.logo-svg{display:block;height:38px;width:auto;overflow:visible}
.lg-t{fill:var(--logo-tile)}.lg-f{fill:var(--logo-fg)}.lg-g{fill:var(--logo-gold)}.lg-w{fill:var(--ink)}
.brand .brandtag{display:block;margin-left:0;font-size:.78rem;color:var(--muted);font-weight:400}
@media (max-width:520px){.logo-svg{height:34px}}
@media (min-width:1100px){
  .side .brand .logo-svg{height:46px}.side .brand .brandtag{font-size:.82rem;margin-left:0}
  .side .hctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;margin:0;width:100%}
  .side .hctl .blab{display:none}
  .side .hctl>button .ico{display:grid!important;place-items:center}
  .side .hctl .installbtn,.side .hctl #boardBtn,.side .hctl .cogbtn{flex:none;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;background:none;border-radius:12px;display:grid;place-items:center;line-height:1}
  .side .hctl .installbtn[hidden]{display:none}
  .side .hctl>button .tic{width:40px;height:40px;border-radius:12px;vertical-align:top}
  .side .hctl>button .tic svg{width:62%;height:62%}
  .side .hctl>.installbtn .tic{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--sun)}
  .side .hctl>button:hover .tic{filter:brightness(1.14)}
  .side .hctl>button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .side .hctl .acctwrap{flex:1 1 0;min-width:0;display:block}
  .side .hctl #acctBtn{display:block;width:100%;min-height:40px;padding:6px 14px;border-radius:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side .hctl .duebtn{order:9;flex:1 0 100%}
}

/* v194: the level tiles never split a word ("Lexicographe/r"). 12 levels, so 2, 3, 4 or 6 to a row, never a ragged last row */
.levels{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:340px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:560px){.levels{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.levels{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1100px){.side .levels{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v194: the level chip reads "Level 12 Lexicographer   Specialist track" with no colon or bullet; each part stays whole and the second wraps under the first */
.yearchip{flex-wrap:wrap;row-gap:0;column-gap:8px;text-align:left}
.yearchip #chipYear,.yearchip #chipTier{white-space:nowrap}
.yearchip #chipTier{color:var(--muted)}
.yearchip .chev{margin-left:auto}

/* ---- v194: Account and reminders, Classes and App stats on wide screens (the narrow layout is one column, as before) ---- */
@media (min-width:1100px){
  .acctover .acct.acctwide{max-width:1060px;padding:26px 34px 32px}
  .acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .acc-id{grid-column:1;grid-row:1}
  .acc-more{grid-column:1;grid-row:2}
  .acc-rem{margin-top:34px;grid-column:2;grid-row:1/span 2;background:color-mix(in srgb,var(--blue) 5%,var(--surface));border:1px solid var(--line);border-radius:14px;padding:2px 24px 22px}
  .acctover .acct.wide{max-width:min(1320px,94vw);padding:26px 34px 32px}
  .cls-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);column-gap:44px;align-items:start}
  .cls-side{padding-right:4px}
  .cls-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-items:start}
  .cls-cards .clscard{margin:0}
  .cls-cards .clscard[open]{grid-column:1/-1}
  .cls-cards:empty::before{content:"Classes you teach will appear here.";color:var(--muted);font-size:.95rem;padding:14px 0}
  .sover{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .sover .sgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .sover .hbar{grid-template-columns:150px 1fr 40px}
  .acc-rem .row .field{flex:1 1 210px!important}
  .sover-b>.ptitle:first-child{margin-top:6px}
  .stabs{margin-bottom:14px}
}

/* v195 GUI audit · touch screens: every control at least 44 px tall, form fields at 16 px so an iPhone doesn't zoom the page in when one is
   tapped, and bigger check boxes and radio buttons */
@media (pointer:coarse){
  input,select,textarea{font-size:max(16px,1em)}
  .field input,.field select,.field textarea,.panel input,.panel select,.panel textarea{font-size:max(16px,1em)}
  .dshare input,.clsassign .asgdue input[type="date"]{font-size:16px}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px;flex:none}
  body.focus.novoice .fbvoice{min-height:44px}
  #aClose{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ==== v195: uniform boxes ==== */
/* Header: the XP card and the Rank card are the same size on every screen (equal columns, one row, same padding), each with a small label over
   one line of value. The meaning of the rank ("new immigrant") is kept for screen readers and shown in Where you stand. */
.stats.scards{align-items:stretch;grid-template-columns:1fr 1fr}
.stats.scards>.scard.sprog{grid-column:1/-1}
.stats.scards>.scard:nth-child(-n+2){min-height:62px;padding:10px 14px}
.stats.scards #rankEn{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stats.scards .sbig{white-space:nowrap}
.stats.scards #rank{font-size:1.05rem}
/* Where you stand: six boxes, all the same size: three across, or six across once the panel is wide enough, two across on a phone. Every box has
   its number or rank on a line of the same height and its caption starting at the same place. */
.standing{container-type:inline-size}
.standing .sgrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
@container (min-width:740px){.standing .sgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@container (max-width:420px){.standing .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.standing .sbox{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px;min-width:0}
.standing .sbox b{display:flex;align-items:center;height:2rem;font-size:1.5rem;line-height:1;white-space:nowrap}
.standing .sbox b.he{font-size:1.15rem}
.standing .sbox span{display:block;margin-top:6px;font-size:.8rem;line-height:1.35}

/* ==== About: the introduction above the version ==== */
.aboutintro .aboutlead{margin:0 0 4px;font-size:1.02rem;line-height:1.5}
.aboutintro .aboutsub{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.abouttiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.abouttiles li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.abouttiles li .tic{flex:none}
.abouttiles li div{min-width:0}
.abouttiles li b{display:block;font-size:.95rem;line-height:1.3;color:var(--ink)}
.abouttiles li span:not(.tic){display:block;font-size:.85rem;line-height:1.4;color:var(--muted);margin-top:2px}
.aboutintro .aboutfoot{margin:14px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}

/* the slogan under the logo is a button that opens Settings → About */
button.brandtag{background:none;border:0;padding:0;font-family:inherit;text-align:inherit;cursor:pointer}
button.brandtag:hover{color:var(--blue);text-decoration:underline}
button.brandtag:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

/* the three welcome choices are one size: equal columns side by side, one full-width column on a phone */
#welcomeOver .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
#welcomeOver .row .btn{width:100%;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
@media (max-width:639px){#welcomeOver .row{grid-template-columns:1fr}}

/* About opened from the welcome dialog: Continue carries on into the first-visit flow */
.aboutcontrow{margin:12px 0 0}
.aboutcont{width:100%;max-width:340px}
/* v203: the logo in the welcome dialog and the About panel (the same theme variables as the header logo) */
.wlogo,.aboutlogo{line-height:0;margin:0 0 12px}.wlogo .brandsvg,.aboutlogo .brandsvg{display:block;height:40px;width:auto}.aboutlogo .brandsvg{height:44px}.brandsvg .lg-w{fill:var(--ink)}
/* My words: the search box on its own line, then the print button at the far left and Sort at the far right */
#mywords>.row{justify-content:space-between;align-items:center}
#mywords>.row>input{order:-2}
#mywords>.row>.btn{order:-1;margin-right:auto}
#mywords>.row>label{order:1;margin-left:auto}
/* v210: selected stacked sub-tab text on the lighter dark-mode blue, as the section buttons do */
@media (max-width:520px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .modes button[aria-selected=true]{color:#06121F}}
@media (max-width:520px){:root[data-theme="dark"] .modes button[aria-selected=true]{color:#06121F}}

/* v212: the half-hour "Keep your progress safe" pop-up: both buttons the same width, side by side where there is room */
#saveOver .acct{max-width:480px}
#saveOver .row{display:flex;flex-wrap:wrap;gap:10px}
#saveOver .row .btn{flex:1 1 200px;text-align:center}

/* v212: the welcome box's reminder card (B): one row until ticked, then How often / Time / How. Three across from 640px, stacked on a phone */
#welcomeOver .wremind{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--blue) 5%,var(--surface))}
#welcomeOver .wremind.on{border-color:var(--blue)}
#welcomeOver .wrtick{display:flex;gap:12px;align-items:center;cursor:pointer;margin:0}   /* margin:0: a general label rule added 12px above, so the card looked bottom-heavy */   /* the two lines of text and the tick box share one centre line */
#welcomeOver .wrtick input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--blue)}
#welcomeOver .wrtick>span{display:block;line-height:1.35}
#welcomeOver .wrtick b{display:block;font-weight:600}
#welcomeOver .wrtick small{display:block;margin-top:2px;font-size:.82rem;line-height:1.4;color:var(--muted)}
#welcomeOver .wrfields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px 14px;margin:10px 0 0 34px}
#welcomeOver .wrfields .field{margin:4px 0}
#welcomeOver .wrfields[hidden],#welcomeOver .wrnote[hidden]{display:none}
#welcomeOver .wrnote{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0 34px;font-size:.82rem;line-height:1.45;color:var(--muted)}
#welcomeOver .wrnote svg{flex:none;margin-top:2px}
@media (max-width:639px){#welcomeOver .wrfields{grid-template-columns:1fr 1fr;margin-left:0}#welcomeOver .wrfields .wrfreq{grid-column:1/-1}#welcomeOver .wrnote{margin-left:0}}
/* v236: the loading bar inside Settings → Sound → Use offline (src/15-audio.js, offView / offPaint): the theme's line colour for the track, its blue for the fill */
.offbar{height:34px;border-radius:999px;background:var(--line);overflow:hidden}
.offfill{height:100%;min-width:46px;box-sizing:border-box;border-radius:999px;background:var(--blue);display:flex;align-items:center;justify-content:flex-end;padding:0 14px 0 0;font-weight:700;font-size:.875rem;color:#fff;transition:width .3s ease}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .offfill{color:#06121F}}
:root[data-theme="dark"] .offfill{color:#06121F}
#offDel{color:var(--bad)}
@media (prefers-reduced-motion:reduce){.offfill{transition:none}}

/* v241: the Numbers table as tiles (details.numref inside a question, and Level 1's intro card): four across, five on a wide page, three on a phone,
   filled from the right like Hebrew; a tap on a tile says the number. */
.numgrid{direction:rtl;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:6px 0 12px}
.numtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;padding:8px 6px;position:relative;font:inherit}
.numtile .n{font-size:.8rem;color:var(--muted);direction:ltr;line-height:1.2}
.numtile .he{font-size:1.1rem;line-height:1.3;text-align:center;white-space:normal}
.numtile .nsp{position:absolute;top:5px;left:6px;line-height:0}
details.numref[open] summary{margin-bottom:6px}
@media (min-width:900px){.numgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:520px){.numgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
/* v242: the Masculine | Feminine switch above the number tiles (the .tabs2 look, outside the account box) */
.numsw{display:flex;gap:8px;margin:2px 0 8px}
.numsw button{flex:1;max-width:200px}

/* v245: key numbers on the Build word tiles and the Root rain words (computers only) */
@media (hover:hover) and (pointer:fine){
  .tiles .tile[data-n]{position:relative}
  /* v293: the key number is a bigger blue badge on the corner (30px, bold number, a ring in the page colour), easier to see than the small white one */
  .tiles .tile[data-n]::after,.rr-w[data-lane]::after{content:attr(data-n);position:absolute;top:-13px;left:-13px;width:30px;height:30px;padding:0;box-sizing:border-box;border-radius:50%;background:var(--blue);color:var(--surface);border:2px solid var(--bg);font:600 18px/26px system-ui,sans-serif;text-align:center;direction:ltr}
  .tiles{gap:20px 12px;margin-top:22px}
  .rr-w[data-lane]::after{content:attr(data-lane)}
  .forge .hint .kbdhint{display:inline;margin-left:6px}
}

/* v246: in a settings list, every dropdown box is as wide as the widest one needs to be (one shared column, so they line up and match) */
.setrows:has(>label select){grid-template-columns:minmax(0,1fr) minmax(0,max-content)}
.setrows>label:has(select){grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.setrows>label[hidden]{display:none}
.setrows>label select{width:100%;min-width:0;box-sizing:border-box}

/* v248: the Sound tab as cards: a header bar, the settings, and an action bar at the bottom */
.sndc{padding:0;overflow:hidden;margin:0 0 12px}
.sndh{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.sndh h3{margin:0;font-size:1rem}.sndh p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.sndb{padding:14px 16px}
.sndg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px 16px}.sndg .field{margin:0}
.sndf{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;padding:12px 16px;background:var(--bg);border-top:1px solid var(--line)}
.sndf .note{margin:0 auto 0 0}
.sndtools{padding:4px 16px 10px}.sndtools .fxbox{margin-top:6px}.sndtools details{margin:6px 0}
.sndtools:not(:has(*)){display:none}
.sndb:has(>.setrows:only-child){padding:0}
.sndb>.setrows:only-child{margin:0;gap:0}
.sndb>.setrows:only-child>label{padding:12px 16px;border-top:1px solid var(--line)}
.sndb>.setrows:only-child>label:first-child{border-top:0}

/* v249: Hear buttons as play/pause buttons: labelled (icon + word) or, where space is tight, a round icon with a ring that fills as the clip plays */
.btn.speak.playing,.btn.speak.paused,button[data-say].playing,button[data-say].paused,button[data-aud].playing,button[data-aud].paused{border-color:var(--blue);color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--surface))}
button[data-say].paused,button[data-aud].paused{border-color:var(--muted);color:var(--ink)}
button[data-say].ring,button[data-aud].ring{position:relative;width:46px;min-width:46px;height:46px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
button[data-say] .arc,button[data-aud] .arc{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);transform:rotate(-90deg);pointer-events:none}
.arct{fill:none;stroke:var(--line);stroke-width:2}
.arcp{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:104;stroke-dashoffset:104}
.arcp.go{animation:arcrun linear forwards}
button[data-say].paused .arcp,button[data-aud].paused .arcp{animation-play-state:paused}
@keyframes arcrun{to{stroke-dashoffset:0}}
/* v252: the games' toolbar play/pause button is tinted while a line is playing or paused */
.gfbtn#gfM.on{border-color:var(--blue);background:rgba(91,167,224,.28)}
/* v254: a paused game stands still: held CSS animations (heat shake, pulses, floating words) */
.gf-paused .gfbody,.gf-paused .gfbody *,.gf-paused .gfbody *::before,.gf-paused .gfbody *::after{animation-play-state:paused!important}
/* v256: the "Paused" panel over a paused game; the toolbar button is tinted while paused */
.gfpause{position:absolute;inset:60px 0 0 0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(8,14,24,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gfpause[hidden]{display:none}
.gfpause>div{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:20px 26px;text-align:center;max-width:min(88vw,340px)}
.gfpause b{font-size:1.2rem}.gfpause p{margin:6px 0 14px;font-size:.9rem;color:var(--muted)}
/* v258: tappable words on a handwritten note */
.note-card .w{cursor:pointer;border-radius:4px}
.note-card .w:hover,.note-card .w.sel{background:rgba(245,195,94,.5)}
.note-card .w:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media (max-width:600px){.note-card .w{padding:6px 1px}}
/* v267: the WhatsApp logo on the invite button */
.walogo{vertical-align:-3px;margin-right:6px;flex:none}
/* v270: the "You can now" list scrolls in a box no taller than its six newest items (canFit in 09-courses.js sets the height); the "and N more" line fades while scrolled */
.canscroll{overflow-y:auto;overscroll-behavior:contain;padding-right:8px}
.canhint{transition:opacity .25s}.canhint.gone{opacity:0}

/* v275: the question above the answers, at twice the size (qAbove in 04-core.js moves it; Reading and Documents keep theirs where they are and get the bigger size) */
.qline{font-size:1.7rem;line-height:1.3;color:var(--ink);margin:18px 0 18px;text-align:center}   /* v276: 18px under it, the same gap Conversations has between its question and its boxes */
.pq>p:not(.note),.pq>.pqen,.dq>p{font-size:1.7rem;line-height:1.3;color:var(--ink);text-align:center}   /* v279/v283: the same look as .qline; the small "Optional extra practice" note (a p.note) keeps its own size */
.pq>p:not(.note) b,.dq>p b{font-weight:400}
.pq>p:not(.note){margin:0 0 6px}.pq>p:has(+.opts){margin-bottom:0}.pq>.pqen{margin:0}

@media (min-width:1500px){
  .stage:has(>.prompt+.qline+.opts){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:40px;align-items:center}
  .stage:has(>.prompt+.qline+.opts)>*{grid-column:1/-1}
  .stage:has(>.prompt+.qline+.opts)>.prompt{grid-column:1;grid-row:span 2}
  .stage:has(>.prompt+.qline+.opts)>.qline{grid-column:2;margin:0 0 18px;align-self:end}   /* v276: the same 18px gap as everywhere else (it was 4px on a wide screen, which crowded the boxes) */
  .stage:has(>.prompt+.qline+.opts)>.opts{grid-column:2;margin-top:0;grid-template-columns:minmax(0,1fr);align-self:start}   /* v279: with a tall prompt (a handwritten note) the two rows it spans are tall, and each used to centre its own item, so the question floated far above the boxes */
}
/* v278: the recorded phone message's question is above its boxes too: the same size and gap */
#ptalk>.q{font-size:1.7rem;line-height:1.3;color:var(--ink);margin:18px 0;text-align:center}
/* v280: Documents has several questions one under another: more room between one question's answer boxes and the next question */
.dq>.opts+p{margin-top:40px}
/* v281: Reading's follow-up questions (the optional extra question, and "Go deeper" with its two parts) stack under the main one like Documents' questions: the same 40px before each */
.pq2{margin-top:40px}
.deeper{margin-top:40px}
.deeper>.dsent~p:not(.note){margin-top:40px}
/* v283: the extra Reading question and "Go deeper" sit inside the main question's block, so on a wide screen they are in the right-hand column, under it, with the 40px of room; a block that tall must not stay pinned to the top of the window or its lower part could not be reached */
@media (min-width:1500px){.stage>.pq:has(.pq2),.stage>.pq:has(.deeper){position:static}}
.pq>.pq2{margin-top:40px}.pq>.deeper{margin-top:40px}
/* v285: Hebrew on the right in Practice > Review: the speech bubble (a mission's or a boss's line) sits at the right edge, and each line of a conversation has its speaker's name at the left and the Hebrew at the right */
.stage>.bubble{display:block;width:fit-content;max-width:100%;margin:0 0 0 auto}
.convo.mini p{display:flex;gap:8px;align-items:baseline}.convo.mini p .he{flex:1;text-align:right}
/* v287: in Review the English under a Hebrew bubble sits at the right, under the Hebrew */
.stage>.bubble+.note{text-align:right}
/* v292: the Binyanim table's columns are not the Verb table's fixed five: a Meaning column at the end, and Present and Future only for checked roots */
.reftable table.bconj th,.reftable table.bconj td{width:auto}
.reftable table.bconj td:last-child{text-align:left;font-size:.85rem;white-space:normal}
.reftable table.bconj th:last-child{text-align:left}
/* v295: on smaller screens (under 900px, where the desktop layout starts) the conjugation and Binyanim tables are full size, not the 75% zoom (v232) with 1.02rem Hebrew (v230's phone rule) that
   made them tiny: no zoom, Hebrew at 1.4rem, roomy cells, and the table keeps a width its five or six columns need and scrolls sideways inside its box on a narrow phone */
@media (max-width:899px){
  .reftable:has(table.conj){zoom:1}
  .reftable table.conj{font-size:1rem;min-width:540px}
  .reftable table.conj.bconj{min-width:660px}
  .reftable table.conj th{font-size:1rem;text-align:center}
  .reftable table.conj td.he{font-size:1.4rem;line-height:1.45}
  .reftable table.conj td:first-child{font-size:.95rem;padding-right:6px}
  .reftable table.conj th,.reftable table.conj td{padding:10px 8px}
  .reftable table.bconj td:last-child{font-size:.95rem}
  .reftable>p{font-size:1.2rem;margin:14px 0 8px}
  .reftable{-webkit-overflow-scrolling:touch}
}

/* v302: the admin-only "new recording" button beside each play button (added by script, only for admins) */
/* the admin's microphone button is the play button's twin: same box, same icon, the icon centred inside the dashed border (v308) */
.btn.recx{padding:8px 12px;border-style:dashed}
.btn.recx .tic{vertical-align:middle}
.sent .recx{padding:0 10px;min-width:40px;min-height:40px;font-size:1rem;line-height:1;margin-inline-start:6px;border-width:1px;vertical-align:middle}   /* v310: the same font size as .sent .speak.mini, so the microphone is the same size as the play button in a passage (its icon was 36px beside a 24px one) */

/* v305: App stats → Reports */
.repcard{border:1px solid var(--line,#d8dee6);border-radius:12px;padding:12px 14px;margin:10px 0}
.repcard .rephead{margin-bottom:6px}
.repnotes{margin:6px 0 8px;padding-inline-start:18px}
.repnotes li{margin:4px 0}
.reprow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line,#d8dee6)}
/* v306: Hebrew large and on the right, the rest on the left; the New recording buttons line up on the left */
.repcard .rephead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.repcard .repinfo{flex:1;min-width:0}
.repcard .reptitle{font-size:2rem;line-height:1.3;text-align:right}
.reprow .replineh{flex:1;min-width:0;text-align:right;font-size:1.5rem;line-height:1.4}
.reprow{flex-wrap:nowrap}
.repcard .rephead.repgame{display:block}
/* v307: Listen buttons (woman, man) beside New recording */
.repcard .btn{padding:8px 14px;min-height:40px}
.reprow{flex-wrap:wrap}
.reprow .repbtns{display:flex;gap:8px;flex-wrap:wrap}
.reprow .replineh{min-width:140px}
/* v309: the play, slow (hourglass) and microphone buttons hold one icon: it is centred in the box, both ways. The .15em the icon keeps on its right is only for an icon followed by words. */
.btn.speak .tic:only-child,.btn.recx .tic:only-child{margin:0}
.btn.speak:has(> .tic:only-child),.btn.recx:has(> .tic:only-child){display:inline-flex;align-items:center;justify-content:center;gap:.42em}   /* v310: a flex button drops the space typed between its icon and its word, so the gap is set here; an icon-only button has one item and so no gap */

/* v310: more icon-only buttons centred. The play/pause ring buttons (an icon beside the progress ring) and the passage's play and microphone buttons now drop the .15em the icon keeps for a following word without relying on :has() (older iPhones lack it). */
button[data-say].ring .tic,button[data-aud].ring .tic,.sent .speak.mini .tic,.sent .recx .tic,.btn.recx .tic:only-child{margin:0}

/* v312: in a row of buttons the microphone box is as tall as its neighbours (it was the height of its icon alone, so it sat high beside "Play again" and "Slowly"). Beside a sentence, where there is no row, this changes nothing. */
.btn.recx{align-self:stretch}

/* v312: in the Sentences / Listen question the microphone sits between "Play again" and "Slowly" in a line of text, not in a flex row. There it is built like its neighbours (an inline icon in a line box, the same padding) so it is exactly as tall and sits on the same line, and its left gap equals the space that follows it on the right (it was 0 on the left). */
.prompt>.btn.recx,.prompt>.btn.recx:has(> .tic:only-child){display:inline-block;padding:11.55px 12px;min-height:0;min-width:0;margin-inline-start:.28em;align-self:auto;position:relative;top:.8px}

/* v313: the flag beside each play button: the same box as the microphone's, solid border, icon only */
.btn.flagx{padding:8px 12px}
.btn.flagx .tic{vertical-align:middle}
.btn.flagx .tic:only-child{margin:0}
.btn.flagx:has(> .tic:only-child){display:inline-flex;align-items:center;justify-content:center;gap:.42em}
.btn.flagx{align-self:stretch}
.sent .flagx{padding:0 10px;min-width:40px;min-height:40px;font-size:1rem;line-height:1;margin-inline-start:6px;border-width:1px;vertical-align:middle}
.sent .flagx .tic{margin:0}
.prompt>.btn.flagx,.prompt>.btn.flagx:has(> .tic:only-child){display:inline-block;padding:11.55px 12px;min-height:0;min-width:0;margin-inline-start:.28em;align-self:auto;position:relative;top:.8px}

/* v317: question progress bar (Quiz and the other multiple-choice rounds) */
.qprog{height:8px;border-radius:99px;background:var(--line);margin:-4px 0 12px;overflow:hidden}
.qprog i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .25s}
@media (prefers-reduced-motion:reduce){.qprog i{transition:none}}
/* v317: "Where you stand" for a brand-new learner: one line of real progress instead of six zero tiles */
.d0{margin:10px 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.d0 .d0row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.d0 .d0row b{font-size:1.05rem}.d0 .d0row span{color:var(--muted);font-size:.9rem}
.d0 .lvlbar{margin:10px 0 8px}
.d0 p{margin:0;color:var(--muted);font-size:.9rem}

/* v318: the toolbar stays on one row (src/22-equal-selects.js sizes the dropdowns); its labels never wrap */
.controls label{white-space:nowrap}
.controls select{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
/* v318: on a phone, and wherever the toolbar can't fit on one row, it is a two-column grid: the label above, every dropdown the same width */
.controls.ctlgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:end}
.controls.ctlgrid>label:has(select){flex-direction:column;align-items:stretch;gap:4px;font-size:.82rem}
.controls.ctlgrid>label:has(input[type=checkbox]){grid-column:1/-1;order:9}
.controls.ctlgrid>:not(label){grid-column:1/-1}
.controls.ctlgrid select{width:100%;min-width:0;max-width:none}
@media (max-width:520px){
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:end}
.controls>label:has(select){flex-direction:column;align-items:stretch;gap:4px;font-size:.82rem}
.controls>label:has(input[type=checkbox]){grid-column:1/-1;order:9}
.controls>:not(label){grid-column:1/-1}
.controls select{width:100%;min-width:0;max-width:none}
}
/* v318: Awards: locked badges step back (their text stays readable), earned ones get a green frame */
.badge.locked i{opacity:.4}
.badge.locked b{color:var(--muted)}
.badge:not(.locked){border-color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 16%,transparent)}
/* v318: empty pages (Skills, Words): an icon, one sentence and a button to start */
.emptyst{text-align:center;padding:20px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.emptyst h3{margin:6px 0 0;font-size:1.1rem}
.emptyst p{margin:0;max-width:46ch;color:var(--muted)}
.emptyst .btn{margin-top:6px}

/* v319: the Verbs intro table: English on the left, the verb, then the pronoun on the far right (right to left: pronoun, verb) */
.reftable table.vintro td{vertical-align:baseline}
.reftable table.vintro td.en{text-align:left;color:var(--muted)}
.reftable table.vintro td.pron{font-weight:600;padding-left:28px}
/* v319: Look up: the box follows what is typed (English from the left, Hebrew from the right) */
.lookin{text-align:start}
.lookin::placeholder{text-align:left}
/* v319: end of a round: XP earned, a dot per question, the missed words */
.done .score .xpc{display:inline-block;margin-left:10px;vertical-align:.9em;background:var(--green);color:#fff;border-radius:99px;padding:3px 12px;font-size:.9rem;font-weight:600;line-height:1.4}
.rdots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 10px}
.rdots i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.rdots i.ok{background:#3f9a46}.rdots i.no{background:#c2410c}
.missl{max-width:560px;margin:14px auto 16px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface)}
.missl h4{margin:0 0 6px;font-size:.95rem}
.missl .mgrid{display:grid;grid-template-columns:1fr auto auto;column-gap:0;align-items:stretch}
.missl .mhe,.missl .mbtn{padding-left:14px!important}
.missl .mgrid>span{display:flex;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.missl .mhe{justify-content:flex-end}
.missl .men{color:var(--muted)}
.missl .mhe{font-size:1.25rem;text-align:right}
.missl .mbtn{display:flex;gap:4px;justify-content:flex-end;align-items:center}
.missl small{display:block;margin-top:6px;color:var(--muted)}
/* v319: Level card: the four move-up conditions as a checklist */
.lvck-wrap{flex:1 1 100%}
.lvhd{margin:8px 0 0}
.lvck{list-style:none;margin:8px 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}
@media (max-width:520px){.lvck{grid-template-columns:1fr}}
.lvck li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:4px 8px}
.lvck .ck{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);box-sizing:border-box}
.lvck li.ok .ck{background:var(--green);border-color:var(--green)}
.lvck .val{font-weight:600}.lvck .val small{font-weight:400;color:var(--muted)}
.lvck .lbar{grid-column:2/-1;height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.lvck .lbar i{display:block;height:100%;background:var(--blue)}
.lvmore{margin-top:8px;font-size:.9rem}
.lvmore summary{cursor:pointer;color:var(--blue)}

/* v320: the Binyanim tables fit their box with no sideways scroll, and their small text is legible. Before, the Meaning column had no width of its own
   (the Verb table's five widths already added up to 100%), so it was squeezed to a word per line at about 8px and pushed the table past its box.
   Desktop (900px and up, still at the 75% size of v232): six columns with set shares (Present and Future only for checked roots), the binyan's name may wrap,
   and the meaning, the names and the line of binyan notes are about 14px on screen. */
.reftable:has(table.bconj){overflow-x:visible}
@media (min-width:900px){
.reftable table.conj.bconj{width:100%;min-width:0;table-layout:fixed}
.reftable table.conj.bconj th:nth-child(1){width:13%}
.reftable table.conj.bconj th:nth-child(2){width:10%}
.reftable table.conj.bconj th:nth-child(3),.reftable table.conj.bconj th:nth-child(4),.reftable table.conj.bconj th:nth-child(5){width:15%}
.reftable table.conj.bconj th:last-child{width:32%}
/* v324: Future to Meaning is the same distance as Present to Future (Future is centred, so Meaning starts half a column, 7.5%, past its right edge) */
.reftable table.conj.bconj th:last-child,.reftable table.conj.bconj td:last-child{padding-left:7.5%}
.reftable table.conj.bconj td{vertical-align:middle}
.reftable table.conj.bconj td:first-child{white-space:normal;overflow-wrap:anywhere}
.reftable table.conj.bconj td:first-child small{font-size:1.15rem;line-height:1.3}
.reftable table.conj.bconj td:last-child{font-size:1.2rem;line-height:1.35;overflow-wrap:anywhere}
.reftable table.conj.bconj td:last-child small{font-size:1em}
.reftable .bnote{font-size:1.15rem;line-height:1.45;margin:10px 0 0}
}
/* Phones and small tablets (under 900px, full size): each binyan is two lines, the Hebrew forms on the first (pattern, past, present, future) and the
   binyan's name with the meaning on the second, so it fits a phone without scrolling */
@media (max-width:899px){
  .reftable table.conj.bconj{display:block;width:100%;min-width:0}
  .reftable table.bconj tbody{display:block}
  .reftable table.bconj tr{display:grid;align-items:center;column-gap:2px;padding:6px 0;border-bottom:1px solid var(--line)}
  .reftable table.bconj.b5 tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .reftable table.bconj.b3 tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reftable table.bconj th,.reftable table.bconj td{border:0;padding:2px 4px;width:auto;background:none}
  .reftable table.bconj th:first-child,.reftable table.bconj th:last-child{display:none}
  .reftable table.bconj th{text-align:center;font-size:.9rem}
  .reftable table.bconj td.he{font-size:1.2rem;text-align:center}
  .reftable table.bconj td:first-child{grid-row:2;text-align:left;white-space:normal}
  .reftable table.bconj td:first-child small{font-size:.9rem}
  .reftable table.bconj td:last-child{grid-row:2;text-align:left;font-size:.9rem;line-height:1.3}
  .reftable table.bconj.b5 td:first-child{grid-column:1/3}.reftable table.bconj.b5 td:last-child{grid-column:3/5}
  .reftable table.bconj.b3 td:first-child{grid-column:1/2}.reftable table.bconj.b3 td:last-child{grid-column:2/3}
  .reftable .bnote{font-size:.9rem;line-height:1.45;margin:10px 0 0}
  .reftable table.bconj td:last-child small{font-size:1em}
}

/* v321: the 12 boss stamps split evenly at every width: six across from 1280px, four from 1100px (five left the last two alone on a row).
   Narrower screens already split them evenly and keep their grid. Daily stamps (.small) are unchanged. */
@media (min-width:1100px) and (max-width:1279px){.pstamps:not(.small){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.pstamps:not(.small){grid-template-columns:repeat(6,minmax(0,1fr))}}
/* v321: Settings: the radio buttons and tick boxes are 20px, the small notes 13px, and the whole line is the button (a finger hits it on a phone) */
.setcat label.note{display:flex!important;align-items:center;gap:10px;padding:9px 8px!important;margin-left:-8px;margin-right:-8px;border-radius:8px;min-height:44px;cursor:pointer;font-size:1rem}
.setcat label.note:hover{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.setcat input[type=radio],.setcat input[type=checkbox]{width:20px;height:20px;flex:none;margin:0;accent-color:var(--blue)}
.setcat label small{font-size:.85rem}
/* v321: Reader: the hear buttons sit on their own row above the text they play, not in the word-count row */
.rdhear{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.rdhear .rdhl{font-weight:600;color:var(--ink);margin-inline-end:4px}
.rdhear .btn.speak{min-width:44px;min-height:44px}

/* v322: Settings → Sound → Spoken encouragement: the Language note sits under its dropdown, so "How often" and "Language" line up on one row */
.sndg .field .fhint{display:block;margin-top:6px;font-size:.85rem;color:var(--muted)}

/* v323: the dark/light button sits between Sign in and Settings, the same size as Settings; on a phone the pair sits at the right end of the row */
.hctl .themebtn .tic{vertical-align:middle}
@media (max-width:520px){.hctl .themebtn{margin-left:auto;flex:none}.hctl .themebtn+.cogbtn{margin-left:0}}

/* v326: Settings → Display on a phone or narrow window: each title sits above its dropdown (full width), then the note, instead of the title squeezed beside the box */
@media (max-width:639px){
  #setDisplay>label:has(select){display:block}
  #setDisplay>label select{display:block;width:100%;margin-top:6px}
  #setDisplay>label small{display:block;margin-top:6px}
}

/* v329: an armed press-twice link (Remove learner, Delete class) turns red */
.linkbtn.danger{color:var(--bad)}
/* v330: word chips in the class report. A pill (999px corners) that wraps onto two or three lines became an ellipse and the
   words spilled past its curved edges. The chip is now a rounded box that wraps cleanly: Hebrew first, the meaning beside it
   or under it, and the ✗/✓ counts moving to their own line rather than squeezing the meaning into a narrow column. */
.wchip{border-radius:12px;flex-wrap:wrap;row-gap:2px;max-width:100%;box-sizing:border-box;padding:4px 10px;line-height:1.35}
.wchip small{min-width:0;overflow-wrap:anywhere}
/* v331: no text pill turns into an ellipse anywhere. These all had 999px corners, which round a one-line pill nicely but squash
   a pill that wraps onto two or more lines into an ellipse, with the words spilling past its curved edges. The corners are now
   about half the height of ONE line of text: a one-line pill looks exactly as before (a radius bigger than half the height is
   capped, so the ends stay fully round), and a wrapped one becomes a rounded box the text fits inside. Dots, progress bars,
   round icons and round keys keep their shapes (they hold no wrapping text). New text pills should use the same rule. */
.acctbtn,.boardbtn,.chips label,.coursebar .plan span,.done .score .xpc,.duebtn,.installbtn,.lesson .chips button,.lesson .chips span,
.plan li,.skb,.slen .chip,.sstart .streak,.tag,.wchip{border-radius:calc(.8em + 6px);overflow-wrap:anywhere}
.groups button,.settabs .btn,.yearchip,.toast,.updbar{border-radius:calc(.8em + 12px);overflow-wrap:anywhere}
.toast{max-width:calc(100vw - 32px);box-sizing:border-box;text-align:center}
/* v333: the yellow time-out bar sits under the answers (it was at the top, right under the progress bar, and looked like a
   second progress bar) */
.timer{margin:14px 0 4px}
/* v334: the countdown is a ring with the seconds in it (29-timer-ring.js); the old bar's <i> stays as the timers' clock, hidden */
.timer{position:relative;width:44px;height:44px;margin:12px auto 0;background:none;border-radius:0;overflow:visible;flex:none}
.timer>i{position:absolute;left:0;top:0;height:0;width:100%;visibility:hidden}
.tring{display:block;width:44px;height:44px}
.tring .tr-bg{fill:none;stroke:var(--line);stroke-width:4}
.tring .tr-fg{fill:none;stroke:var(--sun);stroke-width:4;stroke-linecap:round}
.tring .tr-n{font-size:13px;font-weight:700;fill:var(--ink);font-family:inherit}
.timer.hot .tr-fg{stroke:var(--bad)}
.timer.hot .tr-n{fill:var(--bad)}
.gfull .timer{background:none}
.gfull .tring .tr-bg{stroke:rgba(255,255,255,.18)}
.gfull .tring .tr-n{fill:#fff}
.hasring{position:relative;padding-left:52px;padding-right:52px}
.hasring>.timer{position:absolute;top:0;right:0;margin:0}
/* v335: in question rounds the ring sits at the top right of the box, at the end of the Question n of N row */
.meta.hasring-top{display:flex;align-items:center;justify-content:flex-start;gap:10px}
.meta.hasring-top>.combo{margin-left:auto}
.meta.hasring-top>.timer{margin:0;margin-left:auto}
.meta.hasring-top>.combo+.timer{margin-left:0}
/* v336: the ring sits above the answer boxes at their right edge, with a clear gap (6px + the grid's 10px) before the first box */
.timer.over-opts{grid-column:1/-1;justify-self:end;margin:0 0 6px auto}
#stage>.timer.over-opts{margin:12px 0 16px auto}
/* v337: keys you can press instead of clicking look like keys on a keyboard */
kbd.kk{display:inline-block;min-width:1.7em;box-sizing:border-box;padding:.1em .45em;margin:0 .08em;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:.92em;font-weight:600;line-height:1.35;text-align:center;vertical-align:.05em;white-space:nowrap}
.gfull kbd.kk{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.kbdhint{line-height:1.9}
/* v339: the keycaps a third bigger (.92em to 1.22em of the hint text), so small keys like * and # are easy to read */
kbd.kk{font-size:1.22em;min-width:1.75em;padding:.08em .42em;border-radius:7px}
.kbdhint{line-height:2.3}
/* v340: the Last week card's calendar icon was caught by ".weekcard span" (meant for the text) and stretched into a long
   green bar; it is a normal square icon tile again, like the others, and the text wraps beside it */
.weekcard span .icn,.weekcard span [class*="icn"]{flex:none;min-width:0}
.weekcard span span{flex:none;min-width:0}
/* v342: the update bar's buttons are easy to hit with a thumb (44px tall) */
.updbar .btn,.updbar .linkbtn{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:6px 16px}
/* v346: Look up on narrow screens (under 1024px). The buttons (play, slowly, microphone, flag) sit in .lbtns, which on a wide screen is invisible to the
   layout (display:contents), so a wide screen is exactly as before.
   PHONE (under 640px): two lines. The Hebrew word at the far right with its buttons in a run to its left; under it the English meaning and the small print
   at the far left.
   TABLET (640 to 1023px): the Hebrew word alone at the far right on the first line; under it, on one line, the English meaning and small print at the far
   left and the buttons at the far right (the play button nearest the right edge, under the Hebrew word). */
.lbtns{display:contents}
@media (max-width:639px){
  /* v348: two lines. First line: the button boxes at the far left and the Hebrew word at the far right. A Hebrew phrase too long to share the line with the
     buttons drops the buttons to a line of their own (still at the left). Under that, with a small gap, the English meaning and small print at the far left. */
  .lrow{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px}
  .lhe{display:flex;flex-direction:row-reverse;direction:ltr;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:8px 10px}
  .lhe>.he{direction:rtl;text-align:right;min-width:0;flex:0 1 auto}
  .lbtns{display:flex;align-items:center;gap:8px;direction:ltr;margin-right:auto}
  .lmeta{direction:ltr;align-self:flex-start;align-items:flex-start;text-align:left}
}
@media (min-width:640px) and (max-width:1023px){
  /* v350: first line: the button boxes centred. Second line: the English meaning at the far left and the Hebrew word at the far right, level with each
     other and nothing else. Third line: the small print (sound, level, category) under the English, at the far left. */
  .lrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"btns btns" "en he" "small small";align-items:center;gap:2px 14px}
  .lhe{display:contents}
  .lhe>.he{grid-area:he;justify-self:end;align-self:center;direction:rtl;text-align:right;max-width:min(60vw,380px)}
  .lbtns{display:flex;grid-area:btns;justify-self:center;direction:ltr;align-items:center;gap:8px;margin-bottom:6px}
  .lmeta{display:contents}
  .lmeta>b{grid-area:en;justify-self:start;text-align:left;direction:ltr}
  .lmeta>span{grid-area:small;justify-self:start;text-align:left;direction:ltr}
}

/* v351: the key number sits in a shaded strip inside each answer box (design C), on computers only (where the number keys work).
   The strip is on the left of a row box and across the top of a Binyan forge mould; numbering restarts in each group of answers, 1-9. */
@media (hover:hover) and (pointer:fine){
  #stage .opts,#stage .molds{counter-reset:okn}
  #stage .opt:nth-of-type(-n+9):not(#x){position:relative;padding-left:58px}
  #stage .opt:nth-of-type(-n+9)::before{counter-increment:okn;content:counter(okn);position:absolute;top:0;bottom:0;left:0;width:44px;display:grid;place-items:center;border-right:1px solid var(--line);border-radius:8px 0 0 8px;background:color-mix(in srgb,var(--blue) 8%,var(--surface));color:var(--blue);font:600 1.05rem/1 Rubik,system-ui,sans-serif;direction:ltr;pointer-events:none}
  #stage .opt.right::before{background:color-mix(in srgb,var(--green) 22%,var(--surface));color:var(--green-ink);border-right-color:var(--green)}
  #stage .opt.wrong::before{background:color-mix(in srgb,var(--bad) 18%,var(--surface));color:var(--bad);border-right-color:var(--bad)}
  #stage .opt:disabled:not(.right):not(.wrong)::before{opacity:.6}
  .gfull #stage .opt::before{background:rgba(255,255,255,.08);border-right-color:rgba(255,255,255,.22)}
  #stage .mold:nth-of-type(-n+9):not(#x){position:relative;padding-top:40px}
  #stage .mold:nth-of-type(-n+9)::before{counter-increment:okn;content:counter(okn);position:absolute;top:0;left:0;right:0;height:30px;display:grid;place-items:center;border-bottom:1px dashed var(--line);border-radius:12px 12px 0 0;background:color-mix(in srgb,var(--blue) 8%,var(--surface));color:var(--blue);font:600 1rem/1 Rubik,system-ui,sans-serif;direction:ltr;pointer-events:none}
}

/* v352: the Build word tiles use the same key strip as the answer boxes (design C) instead of the round corner badge (v293).
   The tenth tile keeps 0. Root rain keeps its badge. */
@media (hover:hover) and (pointer:fine){
  .tiles{gap:12px}
  .tiles .tile[data-n]:not(#x){padding-left:46px;overflow:hidden}
  .tiles .tile[data-n]::after{top:0;bottom:0;left:0;width:32px;height:auto;display:grid;place-items:center;border:0;border-right:1px solid var(--line);border-radius:6px 0 0 6px;background:color-mix(in srgb,var(--blue) 10%,var(--bg));color:var(--blue);font:600 1rem/1 Rubik,system-ui,sans-serif}
}

/* v354: Continue shows the Enter key on computers, the arrow elsewhere */
.gonext .gnkey{display:none}
@media (hover:hover) and (pointer:fine){
  .gonext .gnar{display:none}
  .gonext .gnkey{display:inline}
  .gonext .gnkey kbd.kk,.gfull .gonext .gnkey kbd.kk{margin-left:6px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff;font-size:.8em}
}
/* v354: Root rain words show their lane number in the same strip as the answer boxes and Build tiles (design C) instead of the corner badge */
@media (hover:hover) and (pointer:fine){
  .rr-w[data-lane]:not(#x){padding-left:42px;overflow:hidden}
  .rr-w[data-lane]::after{top:0;bottom:0;left:0;width:30px;height:auto;display:grid;place-items:center;border:0;border-right:1px solid var(--line);border-radius:10px 0 0 10px;background:color-mix(in srgb,var(--blue) 10%,var(--surface));color:var(--blue);font:600 1rem/1 Rubik,system-ui,sans-serif}
  .gf-rootrain .rr-w[data-lane]::after{background:rgba(150,195,255,.16);border-right-color:rgba(150,195,255,.45);color:#9FD0FF}
}

/* v356: Awards badges are all exactly the same size on every screen: a fixed 180×112 tile in a left-aligned grid
   (more or fewer per row as the screen allows, never stretched). Long titles/descriptions wrap inside and are
   clipped to 2 + 3 lines rather than making a tile taller. */
.badges{grid-template-columns:repeat(auto-fill,180px);grid-auto-rows:112px;justify-content:start}
.badge{box-sizing:border-box;width:180px;height:112px;overflow:hidden;padding:10px 11px;gap:10px}
.badge>i{flex:none;display:flex}
.badge>div{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.badge b{font-size:.88rem;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.badge>div>span{font-size:.74rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:break-word}

/* v357 (1/4): phones: a compact header so the lesson shows on the first screen. Logo and the header buttons share
   one row (Scoreboard becomes an icon, the tagline goes), XP, rank and the next-rank bar share one strip, and the
   seven sections sit in one 4-across grid of small icon tiles. Desktop and tablets are unchanged. */
@media (max-width:560px){
  html body .hero .top{flex-wrap:nowrap;align-items:center;gap:8px;min-height:0}
  html body .hero .brand{flex:none;display:flex;align-items:center}
  html body .hero .brandtag{display:none}
  html body .hero .logo-svg{height:28px;width:auto;max-width:none;flex:none}
  html body .hero .hctl{margin-left:auto;flex-wrap:nowrap;gap:6px;flex:0 1 auto;min-width:0;align-items:center}
  html body .hero .hctl>*{flex:none}
  html body .hero .hctl>.acctwrap{flex:0 1 auto;min-width:0;display:flex}
  html body .hero .hctl>*,html body .hero .hctl .acctbtn,html body .hero .hctl .boardbtn{min-height:36px;height:36px}
  html body .hero #boardBtn{width:36px;padding:0;justify-content:center}
  html body .hero #boardBtn .blab{display:none}
  html body .hero #boardBtn .ico,html body .hero .hctl.c2 #boardBtn .ico,html body .hero .hctl.d2 #boardBtn .ico{display:inline-flex!important;align-items:center;justify-content:center;margin:0}
  html body .hero .hctl .boardbtn{width:36px;padding:0}
  html body .hero #acctBtn{padding:0 10px;font-size:.82rem;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  html body .stats.scards{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:4px 12px;margin-top:10px;
    border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:7px 12px}
  html body .stats.scards>.scard{border:0;background:none;box-shadow:none;padding:0;min-height:0!important;border-radius:0}
  html body .stats.scards>.scard:nth-child(-n+2){padding:0}
  html body .stats.scards .slab{display:none}
  html body .stats.scards .sbig{font-size:1rem;line-height:1.2}
  html body .stats.scards #xp::after{content:" XP";font-weight:500;font-size:.78rem;color:var(--muted)}
  html body .stats.scards .goalring{width:38px;height:38px;flex:none;margin:0 6px 0 0;align-self:center}
  html body .stats.scards .goalring svg{width:100%;height:100%}
  html body .stats.scards .goalring span{font-size:.66rem}
  html body .stats.scards>.scard:first-child{align-self:stretch}
  html body .stats.scards>.scard:first-child{display:flex;align-items:center;gap:8px}
  html body .stats.scards .goalring+div{margin-left:2px}
  html body .stats.scards>.scard.sprog{grid-column:auto;padding:0;gap:3px;min-width:0}
  html body .stats.scards .sprog .srow{font-size:.7rem;gap:6px;white-space:nowrap;overflow:hidden}
  html body .stats.scards .sprog #rankNext{overflow:hidden;text-overflow:ellipsis;min-width:0}
  html body .stats.scards .rankbar{height:5px}
  html body .yearline{margin-top:8px}
  html body .yearline .yearchip{min-height:34px;padding:4px 12px;font-size:.84rem}
  html body nav.groups{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px;margin-top:8px!important}
  html body nav.groups button{flex-direction:column;justify-content:center!important;align-items:center;text-align:center!important;
    gap:3px;min-height:56px;padding:6px 2px;border-radius:12px;font-size:.7rem;line-height:1.15;overflow-wrap:normal}
  html body nav.groups button .gicn{margin:0;width:24px;height:24px}
  html body nav.groups .gmore{grid-column:auto}
  html body .controls{margin-top:8px;gap:6px 10px}
  html body .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:8px 12px}
  html body .controls>label:has(select){display:flex;flex-direction:column;align-items:stretch;gap:3px;font-size:.78rem;white-space:nowrap;min-width:0;margin:0}
  html body .controls>label:has(select) select{width:100%!important;min-width:0!important;max-width:none;min-height:38px;height:38px;padding-top:0;padding-bottom:0;box-sizing:border-box}
}

/* v357 (3/4): Games hub: equal tiles, 2 across on phones, 3 on tablets, 4 on computers; the whole tile is the Play button.
   Relaxed mode is a switch. */
.hubrel{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer}
.hubrel .hubreltxt{flex:1;min-width:0;font-weight:600;font-size:.92rem}
.hubrel .hubreltxt small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.hubrel input.hubsw{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;margin:0;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .2s}
.hubrel input.hubsw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.hubrel input.hubsw:checked{background:var(--blue)}
.hubrel input.hubsw:checked::after{transform:translateX(18px)}
.hubrel input.hubsw:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 4px}
@media (min-width:600px){.gtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.gtiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gtile{box-sizing:border-box;height:150px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;margin:0;padding:12px 12px 10px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .1s}
.gtile:hover,.gtile:focus-visible{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 25%,transparent)}
.gtile:focus-visible{outline:none}
.gtile:active{transform:scale(.98)}
.gtile .cicon{width:44px;height:44px;border-radius:13px;margin:0 0 6px}
.gtile .cicon svg{width:30px;height:30px}
.gtile:hover .cicon svg,.gtile:focus-visible .cicon svg{transform:rotate(-8deg) scale(1.12)}
.gtile .gtname{font-size:.95rem;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none}
.gtile .gtline{flex:none}
.gtile .gtline{font-size:.78rem;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.gtile .gtstat{margin-top:auto;font-size:.74rem;line-height:1.25;font-weight:600;color:var(--blue);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.gtile .gtstat.fresh{color:var(--muted);font-weight:500}
@media (max-width:560px){.gtiles{gap:8px}.gtile{height:136px;padding:10px 10px 9px}.gtile .cicon{width:36px;height:36px;border-radius:11px;margin-bottom:5px}.gtile .cicon svg{width:25px;height:25px}
  .gtile .gtname{font-size:.9rem}.gtile .gtline{font-size:.74rem}.gtile .gtstat{font-size:.7rem}}

/* v357 (2/4): Awards: badges grouped (Almost there, Earned, Still to come) and each locked badge shows its progress */
.bsum{margin:0 0 4px}
.bgroup{margin:12px 0 4px;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:none}
.badge.hasprog>div>span{-webkit-line-clamp:2}
.badge .bprog{display:flex!important;align-items:center;gap:6px;margin-top:5px;-webkit-line-clamp:unset}
.badge .bbar{flex:1;min-width:0;height:5px;border-radius:3px;background:var(--line);overflow:hidden;display:block}
.badge .bbar .bfill{display:block;height:100%;border-radius:3px;background:var(--blue)}
.badge .bprog small{flex:none;font-size:.7rem;font-weight:600;color:var(--blue);white-space:nowrap}
.badge .bgo{display:block;margin-top:5px;padding:0;font-size:.74rem;font-weight:600;text-align:left}

/* v357 (4/4): phones: after an answer the feedback and Continue sit in a coloured bar pinned to the bottom of the screen,
   in thumb reach however long the question is. Computers and tablets keep the feedback under the answers. */
@media (max-width:560px){
  #fb[data-bar].good,#fb[data-bar].bad{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;max-height:55vh;overflow:auto;box-sizing:border-box;
    padding:14px 18px calc(76px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;font-size:.95rem;line-height:1.4;
    box-shadow:0 -6px 20px rgba(0,0,0,.14);animation:fbup .22s ease-out}
  #fb[data-bar].good{background:color-mix(in srgb,var(--green) 16%,var(--surface));border-top:2px solid var(--green)}
  #fb[data-bar].bad{background:color-mix(in srgb,var(--bad) 13%,var(--surface));border-top:2px solid var(--bad)}
  #fb[data-bar].good~#gonext,#fb[data-bar].bad~#gonext{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:61;
    margin:0;width:auto;min-height:50px;font-size:1rem;animation:fbup .22s ease-out}
  #fb[data-bar].good~#gonext{background:var(--green);border-color:var(--green);color:#fff}
  #fb[data-bar].bad~#gonext{background:var(--bad);border-color:var(--bad);color:#fff}
  #fb[data-bar] .reportlink{float:right;margin:-4px -6px 0 8px}
  body:has(#fb[data-bar].good),body:has(#fb[data-bar].bad){padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))}
  @keyframes fbup{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){#fb[data-bar].good,#fb[data-bar].bad,#fb[data-bar]~#gonext{animation:none}}
}

/* v358: badge icons are centred in their square and fill it (the v356 text clamp had also caught the square, a span) */
.badge>i .tic{display:inline-flex;align-items:center;justify-content:center}
.badge>i .tic svg{width:74%;height:74%}

/* v360: very narrow phones (360px and under): the header row tightens (smaller logo height, 32px buttons, smaller gaps) so the
   whole logo and name still show and "Sign in" (or the start of the account name) always fits. */
@media (max-width:360px){
  html body .hero .top{gap:6px}
  html body .hero .logo-svg{height:24px}
  html body .hero .hctl{gap:4px}
  html body .hero .hctl>*,html body .hero .hctl .acctbtn,html body .hero .hctl .boardbtn{min-height:32px;height:32px}
  html body .hero #boardBtn,html body .hero .hctl .boardbtn{width:32px;min-width:32px}
  html body .hero #acctBtn{padding:0 8px;font-size:.76rem;min-width:58px}
  html body .stats.scards{gap:4px 8px;padding:7px 10px}
  html body .stats.scards .goalring{width:34px;height:34px;margin-right:4px}
  html body .stats.scards .sprog #rankNext{display:none}
  html body .stats.scards .sprog .srow{justify-content:flex-end;font-size:.66rem}
  html body .stats.scards #rank{font-size:.9rem}
  html body .stats.scards .sbig{font-size:.92rem}
}

/* v362: example sentences (Cards): the Hebrew is right-justified with the play / slowly / flag buttons directly underneath it (right edge) on a phone or tablet;
   on a desktop (1024px and up) the English meaning sits directly opposite the Hebrew (left of it) and the buttons stay underneath the Hebrew. */
.ctxs{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;text-align:left}
.ctxs .ctxhe{direction:rtl;text-align:right;min-width:0}
.ctxs .ctxbtns{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:6px}
.ctxs .note{text-align:left;margin:0}
@media (min-width:1024px){   /* v363: English directly opposite the Hebrew (same row, on the left), the buttons underneath the Hebrew */
  .ctxs{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:center;column-gap:28px;row-gap:8px}
  .ctxs .note{grid-column:1;grid-row:1;align-self:baseline}
  .ctxs .ctxhe{grid-column:2;grid-row:1;align-self:baseline}
  .ctxs .ctxbtns{grid-column:2;grid-row:2;justify-content:flex-end}
}

/* v365: play / slowly / flag (and the owner's mic) always sit together on one row by themselves and never wrap. .sayrun is added by sayGroup (26-flags.js). Where the buttons already have a
   place of their own beside a word (lookup rows, the card, the example sentence) the group stays there as one unit. */
.sayrun{display:flex;flex:0 0 100%;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:6px;width:100%;max-width:100%;box-sizing:border-box;margin:4px 0}
.sayrun[data-ta="c"]{justify-content:center}
.sayrun[data-ta="r"]{justify-content:flex-end}
.sayrun>.btn{flex:0 1 auto;min-width:0;margin:0;white-space:nowrap}
.sayrun>.btn:not(.speak):not(.flagx):not(.recx){padding-left:12px;padding-right:12px}
:is(.lbtns,.ctxbtns,.cardsay,.sentbtns,.rdhead,.lhe,td,th,.greet,.gt)>.sayrun{display:inline-flex;flex:none;width:auto;margin:0}
@media (max-width:360px){.sayrun{gap:4px}.sayrun>.btn:not(.speak):not(.flagx):not(.recx){padding-left:8px;padding-right:8px;font-size:.9rem}}

/* v366: the icon and label of "Play again" / "Slowly" are centred in their button both ways (flex, equal gap), and the buttons keep their natural width so
   nothing is pushed off-centre. The small flag link ("Report a mistake") is hidden on any screen that already has the proper flag button beside a play button. */
.sayrun>.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;flex:0 0 auto;line-height:1.2;text-align:center}
.sayrun>.btn>.tic{flex:none;margin:0;vertical-align:baseline}
body:has(.flagx) .reportlink{display:none!important}
@media (max-width:340px){.sayrun>.btn:not(.speak):not(.flagx):not(.recx){padding-left:6px;padding-right:6px;font-size:.84rem;gap:.35em}.sayrun{gap:3px}.sayrun>.flagx{padding-left:8px;padding-right:8px}}

/* v367: Look up. Tablet and desktop (600px and up): list on the left, detail panel on the right. Phones: a card per word with the English and Hebrew on one row and the buttons under the Hebrew. */
.lsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;margin-top:10px;min-height:340px}
.llist{border-right:1px solid var(--line);max-height:560px;overflow:auto;padding:4px 0}
.llist .li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;box-sizing:border-box;padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.llist .li:last-child{border-bottom:0}
.llist .li:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
.llist .li.sel{background:color-mix(in srgb,var(--blue) 15%,transparent);box-shadow:inset 3px 0 0 var(--blue)}
.llist .li:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.llist .li .lien{font-size:.92rem;min-width:0}
.llist .li .he{font-size:1.2rem;direction:rtl;flex:none}
.ldet{padding:22px 26px;display:flex;flex-direction:column;gap:12px;align-content:start;min-width:0}
.ldet .dtop{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ldet .dl{display:flex;flex-direction:column;gap:2px;min-width:0}
.ldet .dl b{font-size:1.1rem}
.ldet .dl span{font-size:.82rem;color:var(--muted)}
.ldet .dhe{font-size:2.6rem;line-height:1.1;direction:rtl}
.ldet .dbtns{display:flex;justify-content:flex-end}
.ldet .dex{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px dashed var(--line);padding-top:14px;margin-top:6px}
.ldet .dex .dexen{font-size:.88rem;color:var(--muted);min-width:0}
.ldet .dex .he{font-size:1.3rem;direction:rtl;text-align:right}
@media (max-width:760px){.lsplit{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.ldet{padding:16px 16px}.ldet .dhe{font-size:2.1rem}.llist .li{padding:10px 12px}}
.lcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"en he" "meta btns";align-items:baseline;gap:6px 12px;padding:11px 0;border-bottom:1px solid var(--line)}
.lcard .lcen{grid-area:en;font-weight:600;min-width:0;text-align:left}
.lcard .lche{grid-area:he;font-size:1.4rem;direction:rtl;text-align:right;justify-self:end;max-width:60vw}
.lcard .lcmeta{grid-area:meta;font-size:.8rem;color:var(--muted);text-align:left;min-width:0;align-self:center}
.lcard .lcbtns{grid-area:btns;justify-self:end;display:flex;justify-content:flex-end;align-self:center}
:is(.lcbtns,.dbtns)>.sayrun{display:inline-flex;flex:none;width:auto;margin:0}
@media (max-width:360px){.lcard{grid-template-areas:"en he" "meta meta" "btns btns";gap:4px 12px}.lcard .lcmeta{align-self:start}}

/* v368: Read: under every sentence, right-aligned under the Hebrew, one row: play, slowly, flag (and the owner's mic). The groups always run left to right (the passage is
   right-to-left, which had put them at the left edge in reverse order). */
.sayrun{direction:ltr}
.passage .sent{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.passage .sent:last-child{border-bottom:0}
.passage .sent .sayrun{justify-content:flex-end;margin:8px 0 0}
.passage .sent .sayrun>.btn{margin:0}
.passage .sent .speak.mini,.passage .sent .flagx,.passage .sent .recx{margin-inline-start:0}

/* v368: the passage picker never runs wider than its card: the long passage names are cut inside the box instead */
.meta .dpick{display:flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.meta .dpick select{min-width:0;max-width:100%;flex:0 1 auto;text-overflow:ellipsis}

/* v369: Holiday pack greetings: the play / mic / slowly / flag buttons sit at the far left of each greeting; the Hebrew and its English stay right-justified on the right */
html body .greetings .greet{flex-direction:row-reverse;align-items:center;gap:14px}
html body .greetings .greet .gbtns{flex:none;justify-content:flex-start}

/* v370: Holiday pack greetings on phones (under 600px): the Hebrew and its English on top, right-justified, the buttons underneath them, left-aligned. Tablets and desktops keep the buttons at the far left of the card. */
@media (max-width:599px){
  html body .greetings .greet{flex-direction:column;align-items:stretch;gap:8px}
  html body .greetings .greet .gbtns{display:flex;width:100%;justify-content:flex-start}
}

/* v372: Read, on every screen size: the play / slowly / flag buttons under each sentence are left-aligned */
html body .passage .sent .sayrun{justify-content:flex-start}

/* v373: the PDF dialog (installed iPad / iPhone app) */
#pdfOver{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,12,20,.6)}
#pdfOver .pdfbox{width:100%;max-width:380px;box-sizing:border-box;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.35)}
#pdfOver h2{margin:0 0 8px;font-size:1.15rem}
#pdfOver .note{margin:0 0 12px;min-height:1.3em}
#pdfOver .pdfbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:14px}
#pdfOver .pdfbar>span{display:block;height:100%;width:0;background:var(--blue);transition:width .2s}
#pdfOver .pdfacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#pdfOver .pdfacts .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
#pdfOver .pdfacts a.btn:not(.primary){color:var(--ink)}

/* v376: accessibility — small labels no smaller than .8rem (they were .72–.75rem), the section-tab icon tiles darkened in index.html so their white glyphs
   reach 3:1; who each course is for; goal chips; glosses of Israeli words; the starter path for a new learner; the "Can't listen?" text alternative */
.lvltile dt,.slab{font-size:.8rem}
.lvl{font-size:.8rem}
.cfor{margin:2px 0 4px;font-size:.85rem;font-weight:600;color:var(--blue)}
.gloss{font-size:.85em;color:var(--muted);white-space:normal}
.cgoals{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}.cgoals>span{font-size:.9rem;color:var(--muted);margin-right:4px}
.cgoals .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:.9rem;cursor:pointer;min-height:40px}
.cgoals .chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.starter{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--surface)}.starter ol{margin:6px 0 4px;padding-left:1.3em}
.starter li{margin:3px 0}.starter li small{color:var(--muted);margin-left:4px}.starter .note{margin:6px 0 0}
details.textalt{margin:8px 0 0}details.textalt summary{cursor:pointer;color:var(--blue);font-size:.92rem;min-height:32px}details.textalt .gapsent{margin:6px 0 0;text-align:right}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cgoals .chip.on{color:#06121F}}:root[data-theme="dark"] .cgoals .chip.on{color:#06121F}

/* v377: the level-and-words mismatch note on Where you stand; Next course pointer */
.lvlfit{border:1px solid var(--sun);border-radius:12px;padding:10px 12px;margin:10px 0 4px;background:color-mix(in srgb,var(--sun) 12%,var(--surface))}.lvlfit p{margin:0 0 8px}
.lvlfit .row{gap:8px;flex-wrap:wrap;align-items:center}
.cnext{margin-top:14px;align-items:center;gap:8px;flex-wrap:wrap}

/* v378: text for screen readers only */
.srt{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* v390: Settings → Categories */
.catbody .cathead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}
.catbody .catacts{display:flex;gap:8px}
.catgrp{border-top:1px solid var(--line);padding:6px 0}
.catgrp>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px;cursor:pointer;list-style:none}
.catgrp>summary::-webkit-details-marker{display:none}
.catgrp>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);flex:none;margin:0 4px}
.catgrp[open]>summary::before{transform:rotate(45deg)}
.catgt{font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.catgp{font-size:.82rem;color:var(--muted);flex:1}
.catgbtn{font-size:.82rem;white-space:nowrap}
.catchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;padding:4px 0 10px}
.catchip{display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;padding:8px 12px;border-radius:10px;border:1px dashed var(--edge);background:var(--surface);color:var(--muted);cursor:pointer;white-space:nowrap}
.catchip.on{border:1px solid var(--blue);color:var(--ink);background:color-mix(in srgb,var(--blue) 12%,var(--surface))}
.catchip:not(.on) .catname{text-decoration:line-through}
.catchip input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--blue)}
.catname{flex:1;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.catn{font-size:.82rem;color:var(--muted);flex:none}
@media (max-width:520px){.catchips{grid-template-columns:1fr}.catchip{min-height:48px}}

/* v392: the Text size, Nikud and Talking to dropdowns (src/32-fancy-selects.js): a button instead of the native box, a card of tiles on a tablet or desktop, a bottom sheet on a phone */
.fsel-native{position:fixed!important;left:0!important;top:0!important;width:1px!important;height:1px!important;min-width:0!important;margin:-1px!important;padding:0!important;border:0!important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.fsel-btn{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.fsel-btn[aria-expanded="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--surface))}
.fsel-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.fsel-lab{font-size:.72rem;color:var(--muted)}
.fsel-val{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.fsel-plain{min-height:40px}.fsel-plain .fsel-lab{display:none}
.field .fsel-btn{width:100%}
.fsel-card{position:fixed;z-index:1200;box-sizing:border-box;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.28);padding:12px;display:flex;flex-direction:column;gap:10px}
.fsel-h{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.fsel-grid{display:grid;gap:8px}
.fsel-tile{display:flex;flex-direction:column;gap:6px;min-width:0;border:2px solid var(--line);border-radius:12px;padding:6px;background:var(--surface)}
.fsel-tile.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--surface))}
.fsel-pick{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:6px 2px;min-height:84px;min-width:0}
.fsel-samp{line-height:1.1;white-space:nowrap}
.fsel-name{font-size:.82rem;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fsel-cap{font-size:.72rem;color:var(--muted);white-space:nowrap;min-height:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fsel-hear{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border:1px solid var(--blue);border-radius:8px;background:var(--surface);color:var(--blue);font:inherit;font-size:.82rem;cursor:pointer}
.fsel-back{position:fixed;inset:0;z-index:1190;background:rgba(10,20,30,.5)}
.fsel-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1200;box-sizing:border-box;max-height:92vh;overflow:auto;background:var(--surface);color:var(--ink);border-radius:20px 20px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.3);padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.fsel-grabzone{margin:-10px -18px -2px;padding:14px 0 12px;display:flex;justify-content:center;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.fsel-grabzone:active{cursor:grabbing}
.fsel-grab{width:40px;height:4px;border-radius:2px;background:var(--edge);align-self:center}
.fsel-sheet{overscroll-behavior:contain}
.fsel-title{font-size:1.1rem;font-weight:600}
.fsel-prev{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:84px;padding:10px 16px;border-radius:12px;background:var(--bg)}
.fsel-prevl{font-size:.75rem;color:var(--muted)}
.fsel-prevs{flex:1;display:flex;justify-content:flex-end;min-width:0}
.fsel-rows{display:flex;flex-direction:column}
.fsel-row{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line)}
.fsel-row.on{background:color-mix(in srgb,var(--blue) 12%,var(--surface))}
.fsel-rowb{flex:1;min-width:0;display:flex;align-items:center;gap:14px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;min-height:58px;padding:0 10px;cursor:pointer}
.fsel-rowt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fsel-rowt .fsel-name{font-size:1rem;font-weight:500}
.fsel-dot{width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:2px solid var(--blue);flex:none;background:var(--surface)}
.fsel-row.on .fsel-dot{background:var(--blue)}
.fsel-playbig{width:44px;height:44px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;margin-right:6px}
.fsel-done{border:0;border-radius:12px;background:var(--blue);color:#fff;font:inherit;font-size:1rem;font-weight:500;min-height:50px;cursor:pointer}
@media (max-width:520px){html body .controls>label:has(select) .fsel-btn{width:100%;min-height:46px}}

.fsel-note{margin:0;font-size:.78rem;line-height:1.35;color:var(--muted)}

/* v395: Colour mode examples */
.fsel-mini{position:relative;display:block;width:112px;height:72px;border-radius:8px;border:1px solid;overflow:hidden;flex:none}
.fsel-mw{position:relative;display:block}
.fsel-now{position:absolute;right:4px;top:3px;font-size:.62rem;font-weight:600;line-height:1;padding:3px 5px;border-radius:6px;background:var(--ink);color:var(--surface);white-space:nowrap}

.fsel-note.fsel-top{font-weight:600;color:var(--ink)}