/* Echo-Answer — a Lab-Rats product. Shapes/type follow lab-rats.com (pill buttons, mono eyebrows, brushed silver); palette from the Echo-Answer logo.
   --accent is the only "brand" hook: senders' brand color overrides it (respond page / emails). */
:root{
 /* Echo-Answer palette: black / white / silver + a sparing gold accent (from the logo); Lab-Rats type & shapes */
 --bg:#F4F5F6;--bg-2:#ffffff;--surface:#ffffff;--surface-2:#F4F5F6;
 --line:#dfe1e4;--line-strong:#C0C4C8;
 --text:#111111;--text-dim:#5b6066;--text-faint:#8A8F95;
 --silver-1:#111111;--silver-2:#2a2d31;--silver-3:#8A8F95;--silver-4:#C0C4C8;--silver-5:#dfe1e4;
 --chrome:linear-gradient(180deg,#ffffff 0%,#e9eaec 40%,#C0C4C8 100%);
 --brushed:linear-gradient(180deg,#ffffff 0%,#eef0f2 45%,#d6d9dc 100%);
 --glow:0 1px 2px rgba(17,17,17,.04),0 8px 24px -12px rgba(17,17,17,.12);
 --accent:#C9A23A;--accent-ink:#111111;--gold:#C9A23A;
 --ok:#2f7d4f;--warn:#a87a12;--bad:#b42318;--info:#3d5a80;
 --radius:22px;--radius-sm:14px;
 --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,32px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
header>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
img.site-logo{height:38px;width:auto;display:block}
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none}.site-brand small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.logo{font-weight:700;font-size:19px;letter-spacing:-.01em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.logo span{font-weight:400}
.logo::after{content:"by Lab Rats";margin-left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;-webkit-text-fill-color:var(--text-faint);color:var(--text-faint);font-weight:400}
.brand-logo{max-height:34px;border-radius:9px;vertical-align:middle;margin-right:8px}
main{max-width:860px;margin:auto;padding:20px clamp(16px,4vw,32px) 64px}
h1,h2,h3{margin:.3em 0;letter-spacing:-.015em;color:#111}
h1{font-size:clamp(26px,4vw,36px)}h2{font-size:22px}h3{font-size:17px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px;margin:14px 0;box-shadow:var(--glow)}
input,select,textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--text);font:inherit;margin:6px 0;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,58,.18)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);margin:0 6px 0 0}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;margin:4px 6px 4px 0;border-radius:999px;border:0;cursor:pointer;font:600 14.5px var(--font);color:var(--accent-ink);background:var(--accent);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -8px rgba(17,17,17,.35);transition:transform .2s,box-shadow .2s,filter .2s}
button:hover{filter:brightness(1.05)}
button:hover{transform:translateY(-1px)}button:disabled{opacity:.5;cursor:default;transform:none}
button.ghost{color:var(--text);background:var(--brushed);border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 #fff}
button.ghost:hover{border-color:var(--silver-3);color:#000}
button.rec{background:#111;color:#fff;box-shadow:0 0 0 4px rgba(180,35,24,.25)}

.muted{color:var(--text-dim);font-size:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--text-dim);background:var(--surface-2)}
.badge.opened{color:var(--info);border-color:rgba(61,90,128,.35)}
.badge.in{color:var(--warn);border-color:rgba(168,122,18,.4)}
.badge.completed{color:var(--ok);border-color:rgba(47,125,79,.35)}
.badge.bot{color:#111;border-color:var(--gold)}
.q{border-left:2px solid var(--gold);padding:10px 14px;margin:10px 0;background:var(--bg-2);border-radius:0 10px 10px 0}
.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:var(--accent)}
.chart{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;font-size:13px}
.chart i{display:block;height:10px;border-radius:4px;background:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:9px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--text-dim);font-weight:500}
pre,code{font-family:var(--mono)}code{color:var(--silver-2)}
pre{background:var(--bg-2);border:1px solid var(--line);padding:12px;border-radius:10px;overflow:auto;font-size:13px}
audio{width:100%;margin-top:6px}video{max-width:100%}
a{color:#111;text-decoration-color:var(--gold);text-underline-offset:3px}a:hover{color:#000}
details summary{cursor:pointer;color:var(--text-dim)}
.hide{display:none}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:10px 0}.tabs button{border-radius:10px 10px 0 0;min-height:36px}
.notice{border:1px solid var(--gold);background:rgba(201,162,58,.07);border-radius:12px;padding:12px 14px}
.score{font:700 28px var(--font);color:#111}
.choices{display:flex;gap:6px;flex-wrap:wrap}.choices button{min-width:44px}.choices button.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media(max-width:600px){main{padding:12px 12px 60px}.card{padding:14px}header{padding:10px 12px}.row>button,.row>a{flex:1 1 auto}h1{font-size:24px}.logo::after{display:none}}
@media print{body{background:#fff;color:#111}.card{box-shadow:none;background:#fff;border-color:#ccc}header,button{display:none}}
/* ---- UI audit fixes ---- */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.tabs button{min-height:44px}.choices button{min-height:44px;min-width:44px}
input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:0 0 auto}label.row{min-height:44px;cursor:pointer}
input[type=file]{padding:8px;background:var(--surface-2);border-style:dashed;cursor:pointer}
input[type=file]::file-selector-button{font:600 13.5px var(--font);border:1px solid var(--line-strong);background:var(--brushed);border-radius:999px;padding:8px 16px;margin-right:12px;cursor:pointer;color:var(--text)}
input[type=date],input[type=datetime-local],input[type=time]{min-height:44px;color-scheme:light}
input[readonly]{background:var(--surface-2);color:var(--text-dim);min-width:0;text-overflow:ellipsis}
.row>input{min-width:0}
pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}code{overflow-wrap:anywhere}
button.primary{background:var(--gold);color:#111}button.secondary{background:var(--brushed);color:var(--text);border:1px solid var(--line-strong)}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-3px}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-3px}@keyframes spin{to{transform:rotate(360deg)}}
.err{color:var(--bad);font-size:14px;margin:6px 0}.err:empty{display:none}
.recstate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin:10px 0}
.recstate .dot{width:10px;height:10px;border-radius:50%;background:var(--silver-4)}.recstate.on .dot{background:var(--bad);animation:pulse 1s infinite}.recstate.done .dot{background:var(--ok)}@keyframes pulse{50%{opacity:.3}}
.recstate .t{font:600 14px var(--mono)}
.balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.balance b{font-size:22px}.balance small{color:var(--text-dim);font-size:12px}
.empty{text-align:center;padding:36px 20px}.empty .ico{width:44px;height:44px;color:var(--gold)}
.tabpane[hidden]{display:none}.tabs button[aria-selected=true]{background:var(--gold);color:#111;border-color:var(--gold)}
.setgroup{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}.setgroup>h4{margin:0 0 4px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
@media(max-width:600px){.site-brand small{display:none}img.site-logo{height:30px}header select{width:auto;max-width:130px}#hb{min-width:0}.toc{display:none}}
label.row{flex-wrap:nowrap;align-items:flex-start}label.row>input[type=checkbox]{margin-top:2px}
.tok{display:inline-block;padding:0 8px;border-radius:999px;background:rgba(201,162,58,.15);border:1px solid var(--gold);font:500 12px var(--mono);line-height:1.6}
@media(max-width:600px){header{flex-wrap:wrap}#nav,#nav>span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}#nav button{min-height:44px;padding:0 12px;margin:0}#wsel{max-width:120px}}
/* announcement banner, help widget, cookie banner */
.announce{padding:10px 16px;background:var(--silver-1);color:#fff;font-size:14px;text-align:center}.announce.warn{background:#3a2f12}.announce.critical{background:var(--bad)}.announce a{color:var(--gold)}.announce button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;min-height:auto}
.help-fab{position:fixed;right:18px;bottom:18px;border-radius:999px;background:var(--silver-1);color:#fff;border:1px solid var(--gold);padding:10px 18px;z-index:50}
.help-panel{position:fixed;right:18px;bottom:70px;width:min(360px,92vw);z-index:51;box-shadow:var(--glow)}
.cookie-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:720px;margin:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:var(--glow);display:flex;gap:10px;flex-wrap:wrap;align-items:center}