/* certnUNcertn: shared look. Deliberately single dark theme (a game screen shared in a meeting).
   Certainty runs lilac (not sure) -> sky (fairly sure) -> mint (certain). Colours from docs/prototype.html. */
:root{
  --night:#0A101E; --deck:#131C31; --deck2:#1A2540; --rule:#2A3756; --ink:#EEF2FA; --dim:#93A1BE;
  --sure:#4FD8A8; --mid:#7CB8E8; --not:#A894FF;                       /* Certain, Fairly sure, Not sure */
  --know:#4FD8A8; --hidden:#7CB8E8; --gap:#E8C26B; --blind:#FF7A6E;   /* outcomes */
  --good:var(--know); --bad:var(--blind);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--sure);outline-offset:2px}
.btn{border-radius:999px;padding:10px 20px;font-weight:700;background:var(--deck);border:1px solid var(--rule)}
.btn.go{background:var(--sure);color:#06261A;border-color:var(--sure)}
.btn:disabled{opacity:.35;cursor:default}
.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--dim);font-weight:700}
.field input,.field select{background:rgba(255,255,255,.07);border:1px solid var(--rule);border-radius:12px;padding:11px 12px;color:var(--ink);font:inherit;font-size:1rem}
.note{color:var(--dim);font-size:.85rem}
.err{color:var(--bad);font-weight:700;min-height:1.3em}
.conn{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));background:var(--bad);color:#2A0705;font-weight:800;padding:6px 14px;border-radius:999px;z-index:50;font-size:.85rem}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---- brand: certnUNcertn™ (certn mint, UN light, certn lilac) + Advanced Training logo ---- */
.logo{font-family:var(--display);font-weight:800;font-size:1.4rem;display:inline-flex;align-items:baseline;letter-spacing:-.01em;white-space:nowrap}
.logo .s{color:var(--sure)} .logo .o{color:var(--ink);font-weight:300;margin:0 .03em} .logo .n{color:var(--not)}
.logo sup{font-size:.4em;color:var(--dim);font-weight:600;margin-left:2px;line-height:0}
.atlogo{display:inline-block;background:#fff;border-radius:8px;padding:4px 8px;height:38px;width:auto;vertical-align:middle}
.atlogo.sm{height:30px;padding:3px 6px;border-radius:6px}
/* dropdown lists: readable options on dark pages */
select{color-scheme:dark}
select option,select optgroup{background:#131C31;color:#EEF2FA}
/* diagonal watermark that says which screen this is */
.watermark{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;overflow:hidden}
.watermark span{font-family:var(--display);font-weight:800;font-size:min(22vw,260px);letter-spacing:.06em;transform:rotate(-24deg);color:#fff;opacity:.04;white-space:nowrap;user-select:none}
/* help cards */
details.help{background:rgba(255,255,255,.05);border:1px solid var(--rule);border-radius:14px;padding:10px 14px}
details.help summary{cursor:pointer;font-weight:700}
details.help ol,details.help ul{margin:8px 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:5px;color:var(--ink)}
details.help p{margin-top:8px;color:var(--dim);font-size:.9rem}
/* the three confidence levels */
.lv1{background:rgba(168,148,255,.16);color:var(--not)} .lv2{background:rgba(124,184,232,.16);color:var(--mid)} .lv3{background:rgba(79,216,168,.16);color:var(--sure)}
/* pause: everything frozen, a banner over the top */
.pausebox{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(6,10,20,.45);pointer-events:none}
.pausebox div{background:var(--ink);color:#0B1120;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,6vw,4.5rem);padding:.25em .9em;border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.5);text-align:center;line-height:1.1}
.pausebox small{display:block;font-family:var(--body);font-weight:700;font-size:.32em;margin-top:.3em;opacity:.8}
.cpu{font-size:.62em;font-weight:800;letter-spacing:.08em;color:var(--dim);border:1px solid var(--rule);border-radius:999px;padding:0 .45em;margin-left:.35em;vertical-align:middle}