:root{
  --chalk:#F5F6F2; --paper:#FFFFFF; --ink:#1C1F23; --ink-2:#5A6068; --line:#DADDD6;
  --cobalt:#1E4ED8; --cobalt-soft:#E6ECFB; --mat:#1C1F23;
  --good:#2FBF71; --warn:#F2B019; --bad:#E5484D; --bad-soft:#FBE9E6;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --r-s:6px; --r-m:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--chalk);color:var(--ink);font:400 16px/1.5 var(--body)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0}
h1{font-size:clamp(2.4rem,7vw,3.4rem);letter-spacing:-.01em}
h2{font-size:1.8rem}
h3{font-size:1.25rem}
p{margin:0}
a{color:var(--cobalt)}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.stack>*+*{margin-top:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:540px){.grid2{grid-template-columns:1fr}}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--chalk);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-family:var(--display);text-decoration:none;color:var(--ink)}
.brand-k{font-size:1.6rem;font-weight:800;color:var(--cobalt)}
.brand-rest{font-size:1.05rem;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ink);background:var(--paper);
  padding:10px 16px;border-radius:var(--r-s);font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.btn.ghost{border-color:transparent;background:none;color:var(--cobalt);padding:8px 10px}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.big{width:100%;padding:16px;font-size:1.1rem}
.btn:disabled{opacity:.45;cursor:default}

input[type=text],input[type=tel],input[type=email],input[type=date],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper)}
textarea{min-height:46px;resize:vertical}
label.f{display:block;font-weight:700;font-size:.92rem}
label.f>span{display:block;margin-bottom:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--cobalt)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.flag{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bad-soft);color:var(--bad);white-space:nowrap}
.flag.ok{background:#E3F5EB;color:#1F8A50}
.flag.none{background:#ECEDE9;color:var(--ink-2)}
.flag.live{background:var(--cobalt);color:#fff}

/* scale 1–10 */
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale button{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-s);padding:10px 0;font-family:var(--display);font-size:1.3rem;font-weight:700;cursor:pointer}
.scale button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.scale-ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-2);margin-top:4px}

/* yes/no */
.q{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.q .t strong{display:block;font-weight:700}
.q .t em{font-style:normal;color:var(--ink-2);font-size:.85rem}
.yn{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;align-self:start}
.yn button{border:0;background:var(--paper);padding:8px 14px;font-weight:700;cursor:pointer}
.yn button+button{border-left:1px solid var(--line)}
.yn button[aria-pressed="true"][data-v="da"]{background:var(--bad);color:#fff}
.yn button[aria-pressed="true"][data-v="nu"]{background:var(--ink);color:#fff}
.q textarea{grid-column:1/-1}

.seg{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.seg button{flex:none;border:1px solid var(--line);background:var(--paper);padding:7px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.9rem}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--chalk)}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:4px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
.tab{flex:1;max-width:160px;border:0;background:none;padding:8px 4px;border-radius:var(--r-s);cursor:pointer;font-weight:700;color:var(--ink-2)}
.tab[aria-current="page"]{color:var(--cobalt);background:var(--cobalt-soft)}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:var(--chalk);padding:10px 16px;border-radius:var(--r-s);font-weight:700;transition:.25s;pointer-events:none;z-index:50;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.lv{font-family:var(--display);font-weight:700;font-size:.9rem;min-width:28px;text-align:center;padding:1px 6px;border-radius:4px;color:#fff;display:inline-block}
.dose{font-family:var(--display);font-weight:700;font-size:1.25rem;white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:480px){.top .row{gap:0;flex-wrap:nowrap}.top .btn.ghost{padding:6px 6px;font-size:.9rem;white-space:nowrap}}