/* Apple style, road-sign palette (approved by Mgebi 2026-11-11): system-like type, grouped inset lists, frosted translucent cards over a turquoise glow.
   Road-sign blue drives actions; green means correct or pass; red only as sign-style touches (rings, low timer); a miss is grey with a label.
   Green Apple version kept in design-backups/app-apple.css, Dose in design-backups/app-dose.css. */
:root{
  --bg:#edf4f8;
  --glass:rgb(255 255 255 / .72); --glass-strong:rgb(255 255 255 / .86); --hair:rgb(40 70 100 / .14);
  --label:#14202b; --label-2:rgb(40 60 80 / .8); --label-3:rgb(40 60 80 / .55);
  --fill:rgb(0 100 180 / .08);
  --accent:#0a66c2; --accent-press:#0853a0; --accent-tint:rgb(10 132 255 / .14); --on-accent:#fff;
  --ok:#1f8a3d; --ok-tint:rgb(52 199 89 / .16); --on-ok:#fff;
  --sign-red:#d7263d;
  --miss:#8e8e93; --miss-tint:rgb(142 142 147 / .16);
  --t-rules:rgb(10 132 255 / .14); --t-signs:rgb(255 255 255 / .9); --t-controls:rgb(52 199 89 / .16);
  --glow-1:rgb(0 190 210 / .26); --glow-2:rgb(90 200 250 / .26); --glow-3:rgb(10 102 194 / .12);
  --shadow:0 1px 2px rgb(0 0 0 / .04),0 8px 24px rgb(0 0 0 / .06);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
  --r-card:20px; --r-ctl:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#05101a;
  --glass:rgb(28 28 30 / .72); --glass-strong:rgb(44 44 46 / .86); --hair:rgb(84 84 88 / .5);
  --label:#fff; --label-2:rgb(235 235 245 / .7); --label-3:rgb(235 235 245 / .5);
  --fill:rgb(120 120 128 / .3);
  --accent:#4aa8ff; --accent-press:#2f8fe8; --accent-tint:rgb(64 156 255 / .22); --on-accent:#001a33;
  --ok:#30d158; --ok-tint:rgb(48 209 88 / .2); --on-ok:#00210b;
  --sign-red:#ff5a6a;
  --miss:#98989d; --miss-tint:rgb(152 152 157 / .2);
  --t-rules:rgb(64 156 255 / .22); --t-signs:rgb(255 255 255 / .1); --t-controls:rgb(48 209 88 / .2);
  --glow-1:rgb(0 190 210 / .16); --glow-2:rgb(100 210 255 / .12); --glow-3:rgb(10 102 194 / .14);
  --shadow:0 1px 2px rgb(0 0 0 / .3);
  color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;overflow-x:clip}
body{background:var(--bg);color:var(--label);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* the soft glow the glass sits on */
body::after{content:"";position:fixed;inset:-20vh -20vw auto;height:80vh;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 50% at 20% 30%,var(--glow-1),transparent 70%),radial-gradient(35% 45% at 80% 20%,var(--glow-2),transparent 70%),radial-gradient(30% 40% at 60% 70%,var(--glow-3),transparent 70%);filter:blur(30px)}
.wrap{max-width:640px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.view{display:grid;gap:14px;align-content:start}
h1{font-size:2.1rem;font-weight:700;letter-spacing:-0.025em;line-height:1.1;margin:0;text-wrap:balance}
h2{font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:0}
.h-sec{margin-top:14px}
p{margin:0}
.muted{color:var(--label-2)} .small{font-size:.88rem}
.mono{font-variant-numeric:tabular-nums;font-weight:600}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;color:var(--label-2)}
.brand img{border-radius:10px}
.stack{display:grid;gap:8px}
label{font-weight:600;font-size:.95rem;color:var(--label-2)}

/* Controls */
input{font:600 1.15rem var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--label);background:var(--glass-strong);border:1px solid var(--hair);border-radius:var(--r-ctl);height:52px;padding:0 16px;width:100%;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
input:focus-visible,.btn:focus-visible,.opt:focus-visible,.num:focus-visible,.item:focus-visible,.col:focus-visible,.report:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{font:600 1.02rem var(--font);letter-spacing:-0.01em;border-radius:var(--r-ctl);min-height:50px;padding:12px 18px;cursor:pointer;border:0;color:var(--accent);background:var(--fill);transition:transform .15s ease-out,background-color .15s ease-out}
.btn:active:not([disabled]){transform:scale(.97)}
.btn small{display:block;font-weight:500;font-size:.85rem;opacity:.8;letter-spacing:0}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:active:not([disabled]){background:var(--accent-press)}
.btn.ghost{background:var(--glass);color:var(--accent);box-shadow:inset 0 0 0 .5px var(--hair);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.btn.danger{background:var(--label);color:var(--bg)}
.btn.small{min-height:36px;padding:6px 14px;font-size:.92rem;border-radius:999px}
.btn.block{width:100%;text-align:left}
.btn[disabled]{opacity:.45;cursor:default}
.btn[aria-pressed=true]{background:var(--accent-tint);color:var(--label)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1 1 0}
.msg{background:var(--miss-tint);color:var(--label);border-radius:var(--r-ctl);padding:12px 14px;font-weight:600}

/* Glass surfaces */
.card,.plastic,.chart-wrap,.label{background:var(--glass);border-radius:var(--r-card);padding:16px;display:grid;gap:10px;box-shadow:inset 0 0 0 .5px var(--hair),var(--shadow);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.card.warn{box-shadow:inset 0 0 0 1.5px var(--label),var(--shadow)}
.resume{background:var(--glass-strong)}
.t-rules{background:linear-gradient(var(--t-rules),var(--t-rules)),var(--glass)} .t-signs{background:linear-gradient(var(--t-signs),var(--t-signs)),var(--glass)} .t-controls{background:linear-gradient(var(--t-controls),var(--t-controls)),var(--glass)}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.big{font-size:2.1rem;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.track{height:8px;background:var(--fill);border-radius:99px;overflow:hidden}
.track.thin{height:4px}
.fill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s ease-out}
.done{background:var(--ok-tint);border-radius:var(--r-ctl);padding:12px 14px;font-weight:600}

/* Test-Ready certificate as a wallet pass */
.label{background:linear-gradient(135deg,var(--ok),#16702f);color:var(--on-ok);gap:2px;padding:18px}
.label > span:first-child{font-weight:700;font-size:1.1rem}
.label .muted{color:inherit;opacity:.85}
.label b{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.label .stamp{justify-self:start;margin-top:10px;border:1.5px solid currentColor;border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:600}

/* Grouped inset lists */
.list{display:grid;gap:0;background:var(--glass);border-radius:var(--r-card);overflow:hidden;box-shadow:inset 0 0 0 .5px var(--hair),var(--shadow);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.list:empty{display:none}
.list > .item + .item{box-shadow:inset 0 .5px 0 var(--hair)}
.list > p{padding:14px 16px}
.list .card{border-radius:0;box-shadow:inset 0 .5px 0 var(--hair);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.list .card:first-child{box-shadow:none}
.list .plastic{border-radius:0;box-shadow:inset 0 .5px 0 var(--hair);-webkit-backdrop-filter:none;backdrop-filter:none}
.list .plastic:first-child{box-shadow:none}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;background:transparent;border:0;padding:13px 16px;text-align:left;font:inherit;color:var(--label);cursor:pointer;min-height:52px}
.item:active{background:var(--fill)}
.item b{font-weight:600}
.item .muted{grid-column:1}
.item .tag{grid-row:1/3;grid-column:2;font-size:.9rem;color:var(--label-3)}
.item .tag::after{content:"  \203A";font-size:1.2rem;color:var(--label-3)}
div.item .tag::after{content:none}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid3 .btn{padding:14px 8px;line-height:1.2}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid2 .btn{text-align:left;line-height:1.25}

/* Question screen: translucent top bar */
.qbar{display:flex;align-items:center;gap:12px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;margin:-16px -16px 0;padding:12px 16px;background:var(--glass);box-shadow:inset 0 -.5px 0 var(--hair);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.qbar .mono{margin-left:auto}
.timer{background:var(--fill);border-radius:999px;padding:3px 12px}
.timer{display:inline-flex;align-items:center;gap:8px}
/* mock timer as a traffic light: green, amber in the last 15 minutes, red in the last 5 */
.tl{display:inline-grid;gap:2px;padding:3px;background:#1c1c1e;border-radius:6px}
.tl i{width:7px;height:7px;border-radius:50%;background:#48484a}
.timer[data-phase=red] .tl i:nth-child(1){background:#ff3b30}
.timer[data-phase=amber] .tl i:nth-child(2){background:#ffb000}
.timer[data-phase=green] .tl i:nth-child(3){background:#30d158}
.timer[data-phase=red]{color:var(--sign-red)}
/* road-sign icons beside their text, never instead of it */
.sign{width:1.4em;height:1.4em;flex:none}
.with-sign{display:flex;align-items:center;gap:10px}
.btn.with-sign{justify-content:center}
.btn .sign{width:30px;height:30px}
.sec-label{justify-self:start;font-size:.85rem;font-weight:600;border-radius:999px;padding:3px 12px;color:var(--label-2)}
.sec-label.t-rules{background:var(--t-rules)} .sec-label.t-signs{background:var(--t-signs);box-shadow:inset 0 0 0 2px var(--sign-red)} .sec-label.t-controls{background:var(--t-controls)}
.pic{background:#fff;border-radius:var(--r-card);padding:16px;text-align:center;box-shadow:0 0 0 .5px var(--hair)}
.pic img{display:block;margin:0 auto;width:min(160px,45vw);height:auto;aspect-ratio:1}
.q{font-size:1.25rem;font-weight:700;line-height:1.35;letter-spacing:-0.015em;text-wrap:pretty}
.opts{display:grid;gap:0;background:var(--glass);border-radius:var(--r-card);overflow:hidden;box-shadow:inset 0 0 0 .5px var(--hair),var(--shadow);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.opt{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;text-align:left;font:inherit;color:var(--label);background:transparent;border:0;padding:14px 16px;cursor:pointer;min-height:54px;transition:background-color .15s ease-out}
.opt + .opt{box-shadow:inset 0 .5px 0 var(--hair)}
.opt:active:not([disabled]){background:var(--fill)}
.opt .l{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--label-3);font-size:.85rem;font-weight:700;color:var(--label-2)}
.opt[aria-checked=true]{background:var(--accent-tint)}
.opt[aria-checked=true] .l{background:var(--accent);color:var(--on-accent);box-shadow:none}
.opt.right{background:var(--ok-tint)}
.opt.right .l{background:var(--ok);color:var(--on-ok);box-shadow:none}
.opt.right span:last-child::after{content:"  \2713 Correct";font-size:.85rem;font-weight:600;color:var(--ok);white-space:nowrap}
.opt.wrong{background:var(--miss-tint);color:var(--label-2);text-decoration:line-through;text-decoration-color:var(--miss)}
.opt.wrong .l{background:var(--miss);color:#fff;box-shadow:none}
.opt[disabled]{cursor:default}
.feedback{border-radius:var(--r-card);padding:14px 16px;display:grid;gap:4px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.feedback.right{background:var(--ok-tint)}
.feedback.wrong{background:var(--miss-tint)}
.feedback b{font-size:1.05rem}
.report{font-size:.92rem;color:var(--accent);text-decoration:none;justify-self:start;padding:6px 0;min-height:32px}
.nav{margin-top:4px}

/* Review grid */
.numgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.num{font:600 .9rem var(--font);font-variant-numeric:tabular-nums;min-height:40px;border-radius:10px;border:0;background:var(--glass);color:var(--label);cursor:pointer;box-shadow:inset 0 0 0 .5px var(--hair)}
.num.ans{background:var(--accent-tint)}
.num.flag{background:var(--label);color:var(--bg)}
.legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.key{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--glass);box-shadow:inset 0 0 0 .5px var(--hair);vertical-align:-2px;margin-right:4px}
.key.ans{background:var(--accent-tint)} .key.flag{background:var(--label)}

/* Results */
.secres .top{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.secres .bar{position:relative}
.secres .mark{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--label)}
.pass{color:var(--ok)} .fail{color:var(--miss)}
.wrongq{display:grid;gap:4px}
.wrongq .ans{font-size:.95rem}
.wrongq .ans.fail{text-decoration:line-through}

/* Score chart: shape carries pass or not, never colour alone */
.chart-wrap{margin:0}
.chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;align-items:end;height:150px;border-bottom:.5px solid var(--hair)}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--label);min-width:0}
.col .v{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--label-2);margin-bottom:3px}
.col .b{width:100%;max-width:24px;border-radius:6px 6px 0 0;background:var(--ok);border:2px solid var(--ok);border-bottom:0}
.col .b.no{background:transparent;border-color:var(--miss)}
.col[aria-pressed=true] .v{color:var(--ok)}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

.legal-foot{margin-top:24px;display:grid;gap:4px;text-align:center;color:var(--label-3)}
.legal-foot a{color:var(--label-2)}