/* Nursing Exam Simulator - one stylesheet for the desktop window and the phone.
   The look borrows from the ward rather than from app templates: cool chart paper, theatre-green
   ink for what you can press, and the patient wristband colours for status (red = wrong or
   ended, amber = needs attention). Colours are tokens so dark and light stay in step; sizes
   are rem so the larger-text setting and the phone's own font scale both work.
   Phone layout: the section buttons become a bar along the bottom, targets are 44px or more,
   and nothing may be wider than the screen (min-width:0 on every flex/grid child). */
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{--bg:#0d1715;--bg2:#13201d;--card:#172723;--sunk:#0f1b18;--line:#27403a;--ink:#e6efeb;--dim:#97aca6;
  --accent:#5bc0a4;--accent-ink:#04201a;--tint:rgba(91,192,164,.12);
  --ok:#4cc38a;--okbg:#12332a;--bad:#f07d72;--badbg:#3a1d1c;--warn:#e9b949;--warnbg:#33291a;--focus:#ffd24a;
  --r-lg:16px;--r:12px;--r-sm:9px}
:root[data-theme="light"]{--bg:#f2f5f4;--bg2:#ffffff;--card:#ffffff;--sunk:#e9efed;--line:#d5dfdb;--ink:#14232a;--dim:#5b6c70;
  --accent:#17675a;--accent-ink:#ffffff;--tint:rgba(23,103,90,.07);
  --ok:#1d7a4c;--okbg:#e3f3ea;--bad:#b8322a;--badbg:#fbe9e7;--warn:#9a6200;--warnbg:#fdf3e1;--focus:#0a58ca}
:root[data-text="sm"]{font-size:90%}:root[data-text="big"]{font-size:118%}:root[data-text="xl"]{font-size:136%}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.65 "Vazirmatn",system-ui,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;min-height:100vh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);overflow-x:hidden;overflow-x:clip}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
select{max-width:100%}
img,video,svg,canvas{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
main:focus,main:focus-visible{outline:0}               /* the page itself takes focus after each screen change: no ring round the whole page */
/* nothing may push the page wider than the screen: flex and grid children may shrink */
.row>*,.rowhead>*,.rowfoot>*,.qhead>*,.dur>*,.withbuddy>*,.ready-card>*,.setrow>*,.grid>*,.rows>*,.rowcard>*,.planbox>*,.chips>*,.labrow>*{min-width:0}

/* ---------------------------------------------------------------- frame */
.top{display:flex;align-items:center;gap:.75rem;padding:.55rem 1.1rem;background:var(--bg2);border-bottom:1px solid var(--line)}
.brand{background:none;border:0;font-weight:800;font-size:1.05rem;padding:.25rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:0}
.brand span{color:var(--accent)}
.top nav{display:flex;gap:.15rem;flex:1;min-width:0}
.top nav button{background:none;border:0;padding:.45rem .75rem;border-radius:var(--r-sm);color:var(--dim);font-weight:600;min-height:2.75rem;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.top nav button i{display:block;font-style:normal;line-height:0}
.top nav button svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top nav button:hover{color:var(--ink)}
.top nav button.on{color:var(--accent);background:var(--tint)}
.top nav b{background:var(--warn);color:#1b1400;border-radius:10px;padding:0 .4rem;font-size:.72rem;line-height:1.35;font-weight:700}
#exam-pick{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;max-width:15rem;min-height:2.5rem;font-weight:600;font-size:.9rem;direction:ltr}
main{flex:1;width:100%;max-width:56rem;margin:0 auto;padding:1.4rem 1.1rem 2.5rem;outline:0}

/* ---------------------------------------------------------------- type */
h1{font-size:1.5rem;font-weight:800;margin:0 0 .35rem;line-height:1.3}
h2{font-size:1.02rem;font-weight:700;margin:1.8rem 0 .6rem;color:var(--ink)}
h3{font-size:.98rem;font-weight:700;margin:0 0 .3rem;line-height:1.45}
.lead{color:var(--dim);margin:0 0 1.1rem;max-width:40rem}
.fine{color:var(--dim);font-size:.84rem;margin:.3rem 0;line-height:1.6}
p{max-width:44rem}

/* ---------------------------------------------------------------- surfaces
   one surface per meaning: a list of actions is one grouped panel, a status is a card with a
   wristband edge, a row of data is a quiet panel. Not every box looks the same. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.05rem}
.card.act{text-align:start;width:100%;min-height:4.25rem;display:block;margin:0 0 .6rem;border-inline-start:4px solid var(--line)}
.card.act b{display:block;font-size:1rem;font-weight:700;margin-bottom:.1rem}
.card.act span{color:var(--dim);font-size:.86rem;display:block}
.card.resume{border-inline-start-color:var(--warn);background:var(--warnbg)}
.card.update{border-color:var(--accent);display:grid;gap:.4rem;margin:.75rem 0}
/* a set of actions: one panel with dividers; on the home screen the first is the one to press */
.grid{display:grid;gap:0;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.grid>.card,.grid>.card.act{border:0;border-radius:0;margin:0;border-bottom:1px solid var(--line);background:none;padding:.9rem 1.05rem}
.grid>.card:last-child{border-bottom:0}
.grid.actions>.card.act:first-child{background:var(--accent);color:var(--accent-ink)}
.grid.actions>.card.act:first-child span{color:inherit;opacity:.85}
@media (min-width:721px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid>.card,.grid>.card.act{border-inline-end:1px solid var(--line)}
}

.btn{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:var(--r-sm);padding:.6rem 1.15rem;font-weight:700;min-height:2.85rem;line-height:1.4}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.small{padding:.35rem .8rem;font-size:.88rem;min-height:2.4rem}
.btn.big{padding:.85rem 2.2rem;font-size:1.08rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.playing{background:var(--warn);color:#1b1400;border-color:var(--warn)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.bar{height:.5rem;background:var(--sunk);border-radius:6px;overflow:hidden}
.bar.thin{height:.3rem;margin:0 0 .9rem}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.bar i.low{background:var(--bad)}.bar i.mid{background:var(--warn)}
fieldset{border:0;border-top:1px solid var(--line);border-radius:0;padding:.7rem 0 .9rem;margin:0}
legend{color:var(--dim);font-size:.85rem;font-weight:600;padding:0 0 .45rem;float:inline-start;width:100%}
legend+*{clear:both}
.chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.88rem;min-height:2.6rem;max-width:100%;text-align:start}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

/* ---------------------------------------------------------------- readiness */
.ready-card{display:flex;gap:1.1rem;align-items:center;margin:.6rem 0 1rem;padding:1.1rem 1.1rem}
.gauge{--p:0;--c:var(--accent);flex:none;width:6.4rem;height:6.4rem;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;position:relative;
  background:conic-gradient(var(--c) calc(var(--p)*1%),var(--sunk) 0)}
.gauge::before{content:"";position:absolute;inset:.55rem;border-radius:50%;background:var(--card)}
.gauge>*{position:relative}
.gauge.mid{--c:var(--warn)}.gauge.low{--c:var(--bad)}
.gauge b{font-size:2rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}.gauge span{font-size:.72rem;color:var(--dim);margin-top:.15rem}
.chart{width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.chart .grid{stroke:var(--line);stroke-width:1}.chart .axis{fill:var(--dim);font-size:10px}
.chart .trend{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--dim);stroke:var(--card);stroke-width:2}.chart .pt.ok{fill:var(--ok)}.chart .pt.no{fill:var(--bad)}
.chart .passline{stroke:var(--warn);stroke-width:1.5;stroke-dasharray:6 4}.chart .passtext{fill:var(--warn);font-size:10px}
.spark{width:90px;height:24px;flex:none}.spark polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.4rem 0 .6rem}
@media (min-width:720px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .8rem;min-width:0}
.tile b{display:block;font-size:1.3rem;line-height:1.3;font-variant-numeric:tabular-nums}.tile span{display:block;color:var(--dim);font-size:.8rem;line-height:1.4}
button.rowcard.act{width:100%;text-align:start;margin:0}button.rowcard.act:hover{border-color:var(--accent)}
.chart .work{fill:var(--line)}.chart .ready{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.rows{display:grid;gap:.55rem}
.rowcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .95rem;display:grid;gap:.45rem}
.rowcard.slim{gap:.2rem}
.rowhead,.rowfoot{display:flex;justify-content:space-between;gap:.6rem;align-items:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- the question */
.qhead{display:flex;justify-content:space-between;gap:.75rem;align-items:center;color:var(--dim);font-size:.88rem;margin-bottom:.5rem;flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.15rem .75rem;direction:ltr}
.timer.low{color:var(--bad);border-color:var(--bad);background:var(--badbg)}
.stem{font-size:1.12rem;font-weight:600;margin:.4rem 0 .8rem;white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}
.instr{color:var(--accent);font-weight:700;font-size:.85rem;margin:0 0 .6rem}
.opt{display:flex;gap:.8rem;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r);padding:.8rem .9rem;margin:0 0 .5rem;min-height:3.1rem;line-height:1.5;overflow-wrap:anywhere}
.opt>*{min-width:0}
.opt .k{flex:none;width:1.85rem;height:1.85rem;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-weight:700;display:grid;place-items:center;font-size:.9rem}
.opt.sata .k{border-radius:6px}
.opt.sel{border-color:var(--accent);background:var(--tint)}
.opt.sel .k{background:var(--accent);color:var(--accent-ink)}
.opt.right{border-color:var(--ok);background:var(--okbg)}.opt.right .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--badbg)}.opt.wrong .k{background:var(--bad);border-color:var(--bad);color:#fff}
.opt small{display:block;color:var(--dim);margin-top:.25rem;font-size:.85rem}
.opt small.mk{font-weight:700;color:var(--ink)}
.opt[disabled],.opt[aria-disabled]{cursor:default}
.opt.struck{opacity:.45}.opt.struck>span:last-child{text-decoration:line-through}
.numeric{display:flex;gap:.6rem;align-items:center;margin:.5rem 0 .75rem;flex-wrap:wrap}
.numeric input{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.6rem .75rem;width:11rem;max-width:100%;font-size:1.15rem;direction:ltr}
.numeric input.right{border-color:var(--ok)}.numeric input.wrong{border-color:var(--bad)}
.why{background:var(--tint);border:0;border-inline-start:4px solid var(--accent);border-radius:var(--r-sm);padding:.8rem 1rem;margin:.9rem 0}
.why h3{color:var(--accent)}
.why .hook{color:var(--warn);font-weight:700;margin:.5rem 0 0}
.why pre{white-space:pre-wrap;font:inherit;margin:0;overflow-wrap:anywhere}
.verdict{font-weight:800;margin:0 0 .4rem}.verdict.ok{color:var(--ok)}.verdict.no{color:var(--bad)}
.navrow{margin-top:1rem}
.palbox{margin-top:.9rem}
.palette{display:flex;gap:.35rem;flex-wrap:wrap;margin:.75rem 0 0}
.palette button{min-width:2.75rem;height:2.75rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:.85rem;font-variant-numeric:tabular-nums}
.palette button.done{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.palette button.flag{outline:2px solid var(--warn);outline-offset:-2px}
.palette button.cur{border:2px solid var(--ink);font-weight:800}
.note{width:100%;min-height:3.8rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .65rem;margin-top:.6rem}
.tools{margin:0 0 .6rem}
.tag{display:inline-block;background:var(--sunk);border-radius:6px;padding:.05rem .5rem;font-size:.75rem;color:var(--dim);margin-inline-end:.3rem}
.tag.ok{color:var(--ok);background:var(--okbg)}.tag.no{color:var(--bad);background:var(--badbg)}
.warnbox{border:0;border-inline-start:4px solid var(--warn);border-radius:var(--r-sm);padding:.65rem .95rem;background:var(--warnbg);margin:.6rem 0}
.score{font-size:2.75rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
/* the real exams' result: a plain PASS or FAIL */
.bigverdict{font-size:2.6rem;font-weight:800;letter-spacing:.06em;line-height:1;margin:.4rem 0 .6rem}
.bigverdict.ok{color:var(--ok)}.bigverdict.no{color:var(--bad)}

/* ------------------------------------------------- NGN items and case studies (ngn.js) */
.ngn{margin:.2rem 0 .8rem}
.ngn-case{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:.6rem .8rem;margin:0 0 .8rem}
.ngn-casehead{margin:0 0 .3rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.ngn-intro{margin:0 0 .5rem;color:var(--dim)}
.ngn-tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.ngn-tab{background:none;border:1px solid transparent;border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;padding:.4rem .75rem;min-height:2.6rem;color:var(--dim);font-weight:600}
.ngn-tab.on{border-color:var(--line);background:var(--card);color:var(--ink)}
.ngn-panel p{margin:.2rem 0}.ngn-panel ul{margin:.2rem 0;padding-inline-start:1.2rem}
.ngn-scroll{overflow-x:auto;max-width:100%}
.ngn-table{border-collapse:collapse;font-size:.92rem;min-width:100%}
.ngn-table th,.ngn-table td{border:1px solid var(--line);padding:.35rem .55rem;text-align:start;vertical-align:top}
.ngn-table thead th{background:var(--sunk)}
.ngn-matrix td{text-align:center}.ngn-matrix input{width:1.3rem;height:1.3rem}
.ngn-cell.right{background:var(--okbg)}.ngn-cell.wrong{background:var(--badbg)}
.ngn-exhibit{margin:0 0 .7rem}
.ngn-grouphead{font-weight:700;margin:.6rem 0 .2rem}
.ngn-check{display:flex;gap:.6rem;align-items:center;padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--r-sm);margin:.3rem 0;background:var(--card)}
.ngn-check input{width:1.2rem;height:1.2rem}
.ngn-check.right{border-color:var(--ok);background:var(--okbg)}.ngn-check.wrong{border-color:var(--bad);background:var(--badbg)}
.ngn-cloze{line-height:2.4;font-size:1.05rem}
.ngn-select{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.3rem .4rem;margin:0 .2rem;max-width:100%}
.ngn-select.right,.ngn-target.right{border-color:var(--ok)}.ngn-select.wrong,.ngn-target.wrong{border-color:var(--bad)}
.ngn-target{background:var(--card);border:1.5px dashed var(--accent);border-radius:var(--r-sm);padding:.15rem .6rem;margin:0 .2rem;min-height:2.4rem}
.ngn-tokens{display:flex;gap:.45rem;flex-wrap:wrap;margin:.4rem 0}
.ngn-passage{line-height:2.1}
.ngn-hl{background:none;border:1px dashed var(--line);border-radius:6px;padding:.05rem .3rem;margin:.1rem 0;text-align:start}
.ngn-hl.on{background:var(--warnbg);border-color:var(--warn);border-style:solid}
.ngn-hl.right{border-color:var(--ok);border-style:solid}.ngn-hl.wrong{border-color:var(--bad);border-style:solid}
.ngn-bowtie{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin:.3rem 0 .8rem}
.ngn-slot{border:1px solid var(--line);border-radius:var(--r-sm);padding:.45rem .6rem;background:var(--card);min-width:0}
.ngn-slot small{display:block;color:var(--dim)}.ngn-slot.mid{border-color:var(--accent)}
.ngn-bowgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}.ngn-bowgrid>*{min-width:0}
.ngn-bowcol .opt{font-size:.92rem}
@media (max-width:720px){.ngn-bowtie,.ngn-bowgrid{grid-template-columns:1fr}}
input[type=search]{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem;width:100%;min-height:2.75rem}
details{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .95rem;margin:.5rem 0;background:var(--card)}
summary{cursor:pointer;font-weight:600;min-height:1.8rem}

/* ---------------------------------------------------------------- key points */
.tipcard{margin:1rem 0;min-height:9rem}
.tip{font-size:1.25rem;font-weight:600;margin:.3rem 0 0;line-height:1.55}
.player{justify-content:center;margin:.4rem 0 1rem}

/* ---------------------------------------------------------------- dialogs and tools */
.modal{position:fixed;inset:0;background:rgba(5,14,12,.62);display:grid;place-items:center;padding:1rem;z-index:20}
.sheet{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.15rem 1.2rem;width:100%;max-width:28rem;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.sheet h2{margin-top:0}
.sheet.tall{max-width:34rem;max-height:86vh;overflow:auto}
.labrow{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.labrow b{text-align:end;font-weight:600}
.calcout{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem;font-size:1.8rem;text-align:right;direction:ltr;margin:.6rem 0;min-height:3.4rem;overflow:hidden;font-variant-numeric:tabular-nums}
.calcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;direction:ltr}
.calckey{min-height:3.2rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:1.25rem}
.calckey.op{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800}
.calckey.wide{grid-column:span 4;font-size:1rem}
.dateinp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .75rem;width:100%;min-height:2.75rem}

@media (hover:hover){.grid.actions>.card.act:first-child:hover{background:var(--accent)}.opt:hover:not([disabled]):not([aria-disabled]),.card.act:hover{border-color:var(--accent)}.grid>.card.act:hover{background:var(--tint)}}
@media (prefers-reduced-motion:no-preference){.opt,.card.act,.chip,.top nav button{transition:border-color .12s,background-color .12s,color .12s}}

/* ---------------------------------------------------------------- settings */
:root[data-accent="blue"]{--accent:#4c9bff;--accent-ink:#04182e;--tint:rgba(76,155,255,.12)}
:root[data-accent="violet"]{--accent:#a58bff;--accent-ink:#150a33;--tint:rgba(165,139,255,.12)}
:root[data-accent="rose"]{--accent:#ff7aa8;--accent-ink:#33081a;--tint:rgba(255,122,168,.12)}
:root[data-accent="amber"]{--accent:#f3b640;--accent-ink:#2b1c00;--tint:rgba(243,182,64,.12)}
:root[data-accent="green"]{--accent:#46c36a;--accent-ink:#062312;--tint:rgba(70,195,106,.12)}
:root[data-theme="light"][data-accent="blue"]{--accent:#1d6fe0;--accent-ink:#fff;--tint:rgba(29,111,224,.07)}
:root[data-theme="light"][data-accent="violet"]{--accent:#6c4fd6;--accent-ink:#fff;--tint:rgba(108,79,214,.07)}
:root[data-theme="light"][data-accent="rose"]{--accent:#d63a72;--accent-ink:#fff;--tint:rgba(214,58,114,.07)}
:root[data-theme="light"][data-accent="amber"]{--accent:#b06f00;--accent-ink:#fff;--tint:rgba(176,111,0,.07)}
:root[data-theme="light"][data-accent="green"]{--accent:#1f8f45;--accent-ink:#fff;--tint:rgba(31,143,69,.07)}
.swatches{display:flex;gap:.6rem;flex-wrap:wrap}
.swatch{width:2.75rem;height:2.75rem;border-radius:50%;border:3px solid var(--line)}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg)}
.s-teal{background:#17675a}.s-blue{background:#4c9bff}.s-violet{background:#a58bff}.s-rose{background:#ff7aa8}.s-amber{background:#f3b640}.s-green{background:#46c36a}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow b{display:block}.setrow .fine{display:block;margin:0}
.toggle{flex:none;width:3.2rem;height:1.8rem;border-radius:1rem;border:1px solid var(--line);background:var(--sunk);padding:2px;direction:ltr;text-align:left}
.toggle i{display:block;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--dim);transition:transform .15s}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on i{background:var(--accent-ink);transform:translateX(1.4rem)}
.setrow input[type=range]{width:9rem;max-width:40vw;accent-color:var(--accent)}
.sample{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem;font-weight:600}
ol.steps{margin:.3rem 0 0;padding-inline-start:1.3rem}ol.steps li{margin:.15rem 0}
:root[data-motion="on"] main>*{animation:rise .22s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:root[data-motion="on"] main>*{animation:none}}

/* ---------------------------------------------------------------- plans */
.planbox{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));margin:.75rem 0}
.plist{margin:.2rem 0 .4rem;padding-inline-start:1.15rem;display:grid;gap:.3rem}
.price{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums}
.rowcard.pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.dur{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap}
.dur .fine{display:block}
.codeinp{flex:1 1 14rem;min-width:0;width:100%;font:inherit;padding:.65rem .8rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink)}

/* ---------------------------------------------------------------- account, support, language */
.gate .top nav,.gate #exam-pick{display:none}
.pick{font:inherit;padding:.6rem .7rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%;max-width:100%;min-height:2.75rem}
.checkrow{display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.checkrow input{width:1.3rem;height:1.3rem;flex:none;margin-top:.15rem;accent-color:var(--accent)}
.ticket{border:1px solid var(--line);border-radius:var(--r);padding:.65rem .85rem;background:var(--card)}
.tmsg{border-radius:var(--r-sm);padding:.5rem .75rem;margin:.45rem 0;background:var(--sunk)}
.tmsg.support{background:var(--okbg)}
.tmsg p{margin:.15rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}

/* right-to-left menus; a question in English inside them keeps its own direction */
[dir=rtl] #view p,[dir=rtl] #view b,[dir=rtl] #view span,[dir=rtl] #view small,[dir=rtl] #view li,[dir=rtl] #view h1,[dir=rtl] #view h2,[dir=rtl] #view h3,[dir=rtl] #view summary{unicode-bidi:plaintext}
[dir=rtl] .card.act{text-align:start}
/* the answers are English, like the question: they read from the left also inside right-to-left menus */
[dir=rtl] .opt{direction:ltr;text-align:left}
[dir=rtl] .stem{direction:ltr;text-align:left}

/* companions (practice only) */
.buddy{display:inline-block;flex:none;pointer-events:none;line-height:0}
.buddy video,.buddy img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.buddy.react{float:inline-end;width:5.5rem;margin:-.6rem 0 .2rem .6rem}
.buddy.greet{width:7rem}.buddy.greet.wide{width:11rem}
.withbuddy{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.buddy.fly{position:fixed;z-index:60;width:9rem;bottom:18%;left:-10rem;animation:flyby 5s linear forwards}
@keyframes flyby{0%{transform:translate(0,0)}50%{transform:translate(55vw,-8vh)}100%{transform:translate(calc(100vw + 20rem),2vh)}}

/* dictionary */
.dictpop{position:fixed;z-index:70;max-width:min(20rem,92vw);background:var(--bg2);color:var(--ink);border:1px solid var(--accent);border-radius:var(--r);padding:.6rem .8rem;box-shadow:0 12px 32px rgba(0,0,0,.28);display:grid;gap:.25rem;justify-items:start}
.dictpop .mean{font-size:1.1rem}

/* an address, a licence name, an email: left-to-right inside right-to-left menus */
.ltr{direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere;text-align:start}
.maillink{color:var(--accent);font-weight:600;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere;padding:.35rem 0;display:inline-block}
input:disabled,select:disabled{opacity:.5}

/* ---------------------------------------------------------------- phone */
@media (max-width:720px){
  .top{padding:.45rem .9rem;gap:.6rem}
  .brand{flex:1;text-align:start;font-size:1rem}
  #exam-pick{max-width:9.5rem;font-size:.85rem;padding:.35rem .7rem}
  main{padding:1rem .95rem 6.2rem}
  .top nav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--bg2);border-top:1px solid var(--line);gap:0;
    padding:0 .15rem env(safe-area-inset-bottom)}
  .top nav button{flex:1 1 0;min-width:0;flex-direction:column;justify-content:flex-start;gap:.2rem;padding:.5rem .1rem .35rem;font-size:.66rem;font-weight:600;
    border-radius:0;min-height:3.75rem;position:relative;line-height:1.15;background:none}
  .top nav button span{display:block;max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
  .top nav button svg{width:1.4rem;height:1.4rem}
  .top nav button.on{background:none}
  .top nav button.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .top nav b{position:absolute;top:.25rem;inset-inline-end:18%}
  body.running .top{display:none}              /* a question in progress owns the screen: no menu, no header */
  body.running main{padding-bottom:2rem}
  h1{font-size:1.35rem}
  .ready-card{gap:.9rem}
  .gauge{width:5.4rem;height:5.4rem}.gauge::before{inset:.48rem}.gauge b{font-size:1.65rem}
  .stem{font-size:1.04rem}
  .tip{font-size:1.12rem}
  .navrow .btn:not(.small){flex:1}
  .row>.btn:not(.small){flex:1 1 auto}
}
@media (max-width:520px){.buddy.greet{width:5rem}.buddy.greet.wide{width:7rem}.buddy.react{width:4.4rem}}

/* ---------------------------------------------------------------- website edition (webpay.js) */
.okbox{border-inline-start:4px solid var(--ok);border-radius:var(--r-sm);padding:.65rem .95rem;background:var(--okbg);margin:.6rem 0;font-weight:600}
.price-eur{display:block;font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;margin-top:.15rem}
.checkrow.consent{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .95rem;margin:0 0 .7rem;font-size:.92rem}
details.codes summary{cursor:pointer;font-weight:600;color:var(--dim)}