/* VOICE everyday learning tool, a little playful, clinical where data is shown
   IDEA an operant chamber on a lab bench, a cumulative recorder and a lab notebook
   PICTURE the chamber (side view) drawn large; the recorder strip under it
   COLOUR white bench, steel greys, Fresno red for food and alerts, blue pen ink
   TYPE Archivo for titles and buttons, Inter for text, Plex Mono for counters
   LAYOUT laptop: chamber left, notebook right; phone: chamber, then notebook */
:root{color-scheme:light dark;--bg:light-dark(#ffffff,#111316);--ink:light-dark(#16181d,#eceef1);--mute:light-dark(#5b616b,#a3a9b2);--line:light-dark(#d9dce1,#2e3238);--shade:light-dark(#eceef2,#22262b);--panel:light-dark(#f3f4f6,#1a1d21);--red:#db0032;--blue:light-dark(#1d4ed8,#7aa2ff);--ok:light-dark(#0f7a43,#4ccf8a);--warnbg:light-dark(#fff4d6,#3a2f10)}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box;min-width:0}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif;overflow-x:clip}
h1,h2,h3,h4,button,.brand{font-family:Archivo,Inter,sans-serif}
h2{font-size:clamp(22px,3vw,30px);line-height:1.1;letter-spacing:-.01em;margin:0 0 8px}
h3{font-size:19px;margin:0 0 8px}
h4{font-size:15px;margin:16px 0 4px}
p{margin:0 0 10px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(4vw,16px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}
.who{color:var(--mute);font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.link{background:none;border:0;color:var(--blue);font:600 15px Inter,sans-serif;cursor:pointer;padding:6px 0;text-decoration:underline}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;margin:24px max(4vw,16px)}
.card.narrow{max-width:460px;margin-inline:auto}
label{display:block;font-weight:600;font-size:15px;margin:14px 0 4px}
input[type=text],input[type=email],input[type=password],select,textarea{font:16px Inter,sans-serif;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
textarea{min-height:130px;resize:vertical}textarea.short{min-height:84px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.btn{font:700 16px Archivo,sans-serif;border:0;border-radius:12px;padding:12px 18px;min-height:46px;cursor:pointer;background:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.food{background:var(--red);color:#fff;width:100%;font-size:19px;min-height:60px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.hint{font-size:14px;color:var(--mute)}
.warn{font-size:14px;color:var(--red);min-height:1.2em;margin:4px 0 0}
.hub{max-width:1100px;margin:0 auto;padding:24px max(4vw,16px) 48px}
.ratcard{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.ratcard canvas{width:260px;max-width:100%;height:auto}
.ratcard form{margin:0}.ratcard input{max-width:260px}
.sec{margin-top:28px}
.labs{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lab{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:var(--bg)}
.lab .n{font:800 18px Archivo,sans-serif;color:var(--mute)}
.lab h3{margin:0 0 4px}.lab p{margin:0 0 4px}
.lab .meta{font-size:14px;color:var(--mute)}
.lab .act{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lab .st{font-size:14px;font-weight:600;white-space:nowrap}
.lab.done .st{color:var(--ok)}.lab.prog .st{color:var(--blue)}
.lab.soon{opacity:.6}
.labtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px max(4vw,16px);border-bottom:1px solid var(--line)}
.labtop h2{margin:0;font-size:24px}
.steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 0 auto;padding:0}
.steps button{font:600 14px Archivo,sans-serif;border:1px solid var(--line);background:var(--bg);color:var(--mute);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer}
.steps button[aria-current=step]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.steps button.done{color:var(--ok);border-color:var(--ok)}
.steps button:disabled{opacity:.45;cursor:not-allowed}
.wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;padding:20px max(4vw,16px) 40px;max-width:1400px;margin:0 auto}
.stage{display:flex;flex-direction:column;gap:12px}
.box{position:relative;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
#ch{display:block;width:100%;aspect-ratio:16/9;touch-action:manipulation}
.now{position:absolute;left:12px;top:10px;font:500 14px 'IBM Plex Mono',monospace;background:rgba(255,255,255,.88);color:#16181d;padding:4px 10px;border-radius:8px}
.hud{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;color:var(--mute)}
.hud b{font:500 15px 'IBM Plex Mono',monospace;color:var(--ink)}
.meter{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--line);vertical-align:middle;overflow:hidden}
.meter i{display:block;height:100%;background:var(--red)}
.rec{height:150px}.rec canvas{position:absolute;inset:0;width:100%;height:100%}
.reclab{position:absolute;right:12px;top:8px;font-size:13px;color:var(--mute)}
.nb{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;align-self:start}
.field{margin-top:6px}
.fmeta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--mute);margin-top:4px}
.flag{background:var(--warnbg);color:var(--ink);border-radius:6px;padding:2px 8px;font-weight:600}
.flagnote{background:var(--warnbg);border-radius:10px;padding:10px 12px;font-size:15px}
.tallies{display:grid;grid-template-columns:repeat(auto-fit,minmax(10em,1fr));gap:10px;margin-top:12px}
.btn.tally{background:var(--blue);color:#fff;min-height:64px;display:flex;justify-content:space-between;align-items:center}
.btn.tally b{font:500 22px 'IBM Plex Mono',monospace}
.phase{font-weight:700;margin-top:12px}
.goal{height:10px;background:var(--line);border-radius:5px;overflow:hidden;margin:6px 0 4px}
.goal i{display:block;height:100%;background:var(--ok);transition:width .3s}
.chk{display:flex;gap:8px;align-items:center;font-weight:500}
.chk input{width:20px;height:20px}
.bars{display:grid;gap:4px;margin:8px 0}
.bar{display:grid;grid-template-columns:minmax(6em,9em) minmax(0,1fr) 2.5em;gap:8px;align-items:center;font-size:14px}
.bar span:nth-child(2){height:12px;background:var(--line);border-radius:3px;overflow:hidden}
.bar span:nth-child(2) i{display:block;height:100%}
.bar span:last-child{text-align:right;font-family:'IBM Plex Mono',monospace}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 10px}
.tbl th{text-align:left;font-weight:600;padding:6px 4px;border-bottom:2px solid var(--line)}
.tbl td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.scroll{overflow-x:auto}
.result{max-width:900px;margin-inline:auto}
.score{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:8px 0 16px;flex-wrap:wrap}
.big{font:800 clamp(48px,8vw,72px)/1 Archivo,sans-serif;color:var(--ok)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16em,1fr));gap:16px;margin-bottom:12px}
.cols ul{margin:0;padding-left:20px}
.comment{background:var(--bg);border-left:4px solid var(--blue);padding:10px 14px;margin-bottom:16px;border-radius:6px}
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;place-items:center;padding:16px;z-index:9}
.dlg.on{display:grid}
.dlg>div{background:var(--bg);border-radius:14px;padding:22px;max-width:440px;border-top:6px solid #e0a800}
@media(max-width:900px){.wrap{grid-template-columns:minmax(0,1fr)}.steps{margin-left:0}}
@media(max-width:600px){.lab{grid-template-columns:minmax(0,1fr)}.lab .act{align-items:flex-start}.lab .n{font-size:15px}.rec{height:120px}}
@media(prefers-reduced-motion:reduce){.goal i{transition:none}}