/* ReaderStudy — dark theme for a darkened reading room */
:root{
  --screen:#12161b; --panel:#0b0e12; --edge:#252c35; --input:#171c22;
  --btn:#1d232a; --btn-edge:#313a45;
  --tx:#dbe0e6; --tx2:#8d96a1; --tx3:#646d78;
  --acc:#4a93d4; --acc-bg:#15304a; --acc-tx:#cde2f6;
  --warn:#c98a3c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:#0a0d10; color:var(--tx);
  font:400 15px/1.5 -apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden}
body.grabbing, body.grabbing *{cursor:grabbing !important}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
button:disabled{cursor:not-allowed}
input,select{font:inherit}
kbd{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 6px; font-weight:600;
  border-radius:4px; background:#2f3843; border:1px solid #4a5563; color:#e6ebf1; font-size:12px; font-weight:700}
.hidden{display:none !important}

#syncbadge{position:fixed; top:10px; right:14px; z-index:50; padding:3px 10px; border-radius:20px; font-size:11.5px;
  background:#1b2129; border:1px solid var(--edge); color:var(--tx3)}
#syncbadge.ok{color:#8fd3a8; border-color:#2c4b39}
#syncbadge.busy{color:#e0be7e; border-color:#4b3f26}
#syncbadge.off{color:#e3968c; border-color:#54302c}

/* ── Reading screen ───────────────────────────────────────────── */
.screen{position:relative; display:flex; flex-direction:column; height:100vh; padding:3px 8px 4px; background:var(--screen)}
.topbar{flex:0 0 26px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--edge); padding-right:150px}
.counter{font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; margin-left:6px; color:#fff}
.stage-tag{font-size:12px; font-weight:600; color:#c8d0da; padding:1px 9px; border-radius:20px; border:1px solid var(--edge)}
.stage-tag.s2{color:var(--acc-tx); border-color:#2b4f6e; background:var(--acc-bg)}
.topbtn{font-size:13px; font-weight:600; color:#e6ebf1; padding:1px 8px; border-radius:5px; min-height:24px}
.topbtn:hover{color:var(--tx); background:#1b2129}
.topbtn.help{margin-left:auto}
.idtag{font-size:12.5px; font-weight:600; color:#c8d0da; font-variant-numeric:tabular-nums; letter-spacing:.02em}
.topbar .idtag{margin-left:4px}

.imgrow{flex:1 1 auto; min-height:0; display:flex; gap:12px; justify-content:center; padding:3px 0 3px}
.pane{position:relative; display:flex; flex-direction:column; flex:0 0 auto; height:100%; width:fit-content; min-width:0;
  background:var(--panel); border:1px solid var(--edge); border-radius:6px; overflow:hidden}
/* the header never sets the panel width (width:0 + min-width:100%) — the box below does */
.pane-head{flex:0 0 24px; width:0; min-width:100%; display:flex; align-items:center; gap:10px; padding:0 8px; font-size:10.5px; color:var(--tx3);
  white-space:nowrap; overflow:hidden}
.pane-title{font-weight:600; letter-spacing:.04em; color:#c8d0da}
.verdict{font-size:15.5px; color:#fff; font-weight:700}
.probline{margin-left:auto; font-size:12.5px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums}
/* image box: height = panel height − header 34 − bottom margin 6, width from aspect-ratio (flex-start so stretch does not override it) */
.pane-box{flex:0 0 auto; align-self:flex-start; height:min(calc(100% - 28px), calc((50vw - 26px) / var(--ar, 1))); width:auto; aspect-ratio:1 / 1; position:relative; overflow:hidden;
  cursor:grab; user-select:none; margin:0 4px 4px}
.view{position:absolute; inset:0; transform-origin:center center; will-change:transform}
.view.crop{overflow:hidden}
.pane-img{width:100%; height:100%; object-fit:contain; display:block; will-change:filter; -webkit-user-drag:none; user-select:none}
.pane-img.is-placeholder{opacity:.9}
.pane-hint{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:10px; color:#4d545d; margin-left:2px}
.meter{margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600}
.meter em{font-style:normal; color:#c8d0da}
.bars{display:inline-flex; gap:2px}
.bars i{width:9px; height:12px; border-radius:2px; background:#242b33; display:block; cursor:pointer}
.bars i:hover{outline:1px solid #6a7684}
.bars i.on{background:#5a6672}
.minibtn{flex:0 0 auto; font-size:11.5px; font-weight:600; color:#e6ebf1; padding:2px 9px; border-radius:4px; border:1px solid var(--btn-edge); background:var(--btn); min-height:22px}
.minibtn:hover{color:var(--tx); border-color:#4a5563}

/* CAM colour bar (R51) */
.cbar{position:absolute; right:10px; top:44px; display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none}
.cbar i{width:9px; height:88px; border-radius:2px; border:1px solid #2c343e;
  background:linear-gradient(#c62b1e 0%,#e8a33d 30%,#5cc26a 55%,#3f8fd0 78%,#2b2f6e 100%)}
.cbar-t{font-size:10.5px; font-weight:600; color:#e6ebf1}
.cbar-note{font-size:10px; font-weight:600; color:#c8d0da; writing-mode:vertical-rl; margin-top:4px}

/* ── Input area ─────────────────────────────────────────────── */
.form{flex:0 0 auto; background:var(--input); border:1px solid var(--edge); border-radius:6px; padding:7px 12px 8px}
/* title and axis labels (No pneumoperitoneum ‖ Pneumoperitoneum) on one line — only 18px of height */
.row-head{position:relative; display:flex; align-items:baseline; height:18px; margin-bottom:4px}
.row-title{font-size:13px; font-weight:500; white-space:nowrap}
.row-note{font-size:12.5px; color:var(--tx2); margin-left:10px}
.row-tail{margin-left:auto; font-size:11px; color:var(--tx3)}
.btnrow{display:flex; align-items:stretch; gap:7px}
.btnrow + .btnrow{margin-top:7px}
.btnrow.lh{position:relative}
.btnrow.lh, .btnrow.so, .btnrow.ns{align-items:center}
.btnrow .row-title{flex:0 0 92px; font-size:14px; font-weight:700; color:#fff}

/* ‖ above the boundary between buttons 3 and 4 (R18): right edge of button 3 = 50 % + half the gap */
.axis{position:absolute; top:0; left:0; right:0; display:flex; justify-content:center; font-size:11.5px; color:var(--tx3); pointer-events:none}
.axis-l,.axis-r{flex:1 1 0}
.axis-l{text-align:right; padding-right:10px}
.axis-r{text-align:left; padding-left:10px}
.axis-m{color:var(--tx2); font-weight:600; flex:0 0 28px; text-align:center}

.opt{flex:1 1 0; min-width:0; min-height:52px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  gap:1px 9px; align-items:center; text-align:left; padding:4px 11px; border-radius:5px;
  background:var(--btn); border:1px solid var(--btn-edge); position:relative}
.opt kbd{grid-row:1 / 3}
.opt-t{grid-column:2; font-size:16px; font-weight:700; line-height:1.25; white-space:nowrap; color:#fff}
.opt-s{grid-column:2; font-size:13.5px; font-weight:600; color:#fff; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.opt:hover{border-color:#4a5563}
.opt:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.opt.on{background:var(--acc-bg); border-color:var(--acc)}
.opt.on .opt-t{color:#fff}
.opt.on .opt-s{color:#d6e8fa}
.opt.on::after{content:"✓"; grid-column:3; grid-row:1 / 3; color:var(--acc); font-weight:700; font-size:15px}   /* R79·R81 */
.opt.narrow{flex:0 0 auto; grid-template-columns:auto auto auto; grid-template-rows:auto; padding:7px 14px; min-height:44px}
.opt.tiny{flex:0 0 44px; min-height:44px; justify-items:center; grid-template-columns:1fr; grid-template-rows:auto}
.opt.tiny kbd{display:none}
.opt.tiny.on::after{display:none}
.opt.tiny.on .opt-t{text-decoration:underline; text-underline-offset:4px}
.opt.after-gap{margin-left:36px}
/* absent 3 | present 3 — thick bright divider (in the middle of the 36px gap) */
.opt.after-gap::before{content:""; position:absolute; left:-20px; top:-6px; bottom:-6px; width:4px; background:#e8edf3; border-radius:2px; box-shadow:0 0 6px rgba(232,237,243,.35)}

.ghost{min-height:52px; padding:6px 11px; font-size:13.5px; font-weight:600; color:#e6ebf1; border-radius:5px; border:1px solid transparent; white-space:nowrap}
.ghost:hover:not(:disabled){color:var(--tx2); border-color:var(--btn-edge)}
.ghost:disabled{color:#aab4c0; opacity:1}          /* disabled buttons stay readable (not greyed out) */
.ghost.sm{min-height:32px; padding:4px 10px}
.confirm{min-height:52px; padding:6px 16px; border-radius:5px; font-size:15px; font-weight:700; background:#e8ecf1; color:#12161b; white-space:nowrap}
.confirm:hover:not(:disabled){background:#fff}
.confirm:disabled{background:#39414c; color:#cfd6df}
.confirm.sm{min-height:32px; padding:4px 12px; font-size:12.5px}

/* ── Overlay · toast ───────────────────────────────────── */
.overlay{position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:rgba(8,11,14,.9)}
.ov-card{width:min(540px,86vw); padding:26px 28px; border-radius:9px; background:var(--screen); border:1px solid var(--edge); text-align:center}
.ov-card.wide{width:min(820px,92vw); max-height:88vh; overflow:auto; text-align:left}
.ov-card h2{margin:0 0 8px; font-size:19px; font-weight:600}
.ov-card p{margin:0 0 18px; color:var(--tx2); font-size:13.5px}
.ov-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px}
.grace-bar{height:4px; background:#1e242b; border-radius:2px; margin-top:16px; overflow:hidden}
.grace-bar i{display:block; height:100%; width:100%; background:var(--acc)}
.help-body{max-height:60vh; overflow:auto; margin-bottom:14px}
.toast{position:absolute; left:50%; top:44px; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:12px;
  padding:9px 14px 9px 16px; border-radius:8px; background:#1b2129; border:1px solid #3a4553; font-size:13px; color:var(--tx)}

/* ── General pages · onboarding ────────────────────────────────── */
.page{max-width:760px; margin:0 auto; padding:52px 28px 90px; height:100vh; overflow-y:auto; position:relative}
.page-head{display:flex; align-items:baseline; gap:16px}
.page h1{font-size:24px; font-weight:600; margin:0 0 8px; flex:1}
.lede{color:var(--tx2); font-size:14px; margin:0 0 24px}
.lede.warn{color:var(--warn)}
.prose{background:var(--screen); border:1px solid var(--edge); border-radius:7px; padding:18px 22px; margin-bottom:18px}
.prose p{margin:0 0 11px; font-size:14px; color:#c3cad2; line-height:1.65}
.prose p:last-child{margin-bottom:0}
.prose.guide p b{color:var(--tx)}
.keys{display:grid; grid-template-columns:1fr 1fr; gap:9px 22px}
.krow{display:flex; align-items:center; gap:11px; font-size:13px; color:var(--tx2)}
.checks{display:flex; flex-direction:column; gap:10px; margin:6px 0 22px}
.check{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; min-height:44px; padding:6px 12px;
  border-radius:6px; border:1px solid transparent}
.check input{width:18px; height:18px; accent-color:var(--acc); flex:0 0 auto}
.check:hover{border-color:var(--btn-edge)}
.check:has(input:checked){background:var(--acc-bg); border-color:var(--acc)}          /* S4: strong border + filled background + bold text */
.check:has(input:checked) span{font-weight:600; color:var(--acc-tx)}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px; max-width:440px}
.field label{font-size:12.5px; color:var(--tx2)}
input,select{padding:9px 12px; border-radius:5px; background:var(--input); border:1px solid var(--btn-edge); color:var(--tx); outline:none; min-height:44px}
input:focus,select:focus{border-color:var(--acc)}
.regform{margin-bottom:8px}
/* section titles of the 1/2 screen (1 participant info · 2 anonymisation · 3 pre-survey) */
.page h2.sec{font-size:15px; font-weight:600; margin:26px 0 12px; padding-top:18px; border-top:1px solid var(--edge); color:var(--tx)}
.page h2.sec:first-of-type{border-top:0; padding-top:0; margin-top:6px}
.whoami{margin:0; font-size:12.5px; min-height:17px; color:transparent}
.whoami.ok{color:#8fd3a8}
.whoami.bad{color:#e3968c}
.survey{display:flex; flex-direction:column; gap:18px; margin-bottom:22px}
.q{background:var(--screen); border:1px solid var(--edge); border-radius:7px; padding:15px 18px}
.qtext{margin:0 0 10px; font-size:14px}
.anchors{margin:0 0 8px; font-size:11.5px; color:var(--tx3); white-space:pre}
.choices{display:flex; gap:8px; flex-wrap:wrap}
.choices .opt{flex:0 0 auto; padding:7px 14px}
.likert7{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.stepfoot{display:flex; align-items:center; gap:14px; margin-top:20px}
.stephint{flex:1; display:flex; justify-content:center; align-items:center; text-align:center; font-size:12px; color:var(--tx3)}
.stepnum{flex:0 0 auto; min-width:34px; font-size:12px; color:var(--tx3); font-variant-numeric:tabular-nums}
.page .confirm{margin-top:4px}

.toast.fshint{pointer-events:none; color:var(--tx2)}
.fs-tip{margin:-6px 0 18px; color:var(--acc-tx)}

/* mouse · keyboard table (2/2 instructions · ? Help) */
.prose.controls{padding:14px 18px 10px}
.ctl-title{font-weight:600; color:var(--tx); margin:0 0 8px !important}
.ctl-row{display:grid; grid-template-columns:270px 1fr; gap:0 14px; padding:5px 0; border-top:1px solid #1c2229; font-size:13px; line-height:1.45}
.ctl-k{color:var(--acc-tx)}
.ctl-v{color:#c3cad2}

/* practice-case hints — translucent labels that never block the controls */
.coach{position:absolute; z-index:5; pointer-events:none; background:rgba(11,14,18,.8); border:1px solid #3a4553; border-radius:6px;
  padding:6px 9px; font-size:11.5px; line-height:1.45; color:#c3cad2}
.coach b{display:block; color:var(--acc-tx); font-weight:600; margin-bottom:2px}
.coach span{display:block}
.coach-img{left:10px; top:10px; max-width:280px}
.coach-meter{top:26px; right:60px; font-size:10.5px; padding:2px 7px; z-index:6}
.coach-ai{left:50%; bottom:14px; transform:translateX(-50%); text-align:center; max-width:80%}
.row-title small{display:block; font-size:11.5px; font-weight:600; color:#c8d0da; line-height:1.15; margin-top:2px}

/* anonymisation notice */
.privacy-note{color:var(--tx2); max-width:760px; margin-top:10px}
.privacy-banner{margin:0 0 12px; padding:10px 14px; border-radius:6px; background:#15304a; border:1px solid #2b4f6e;
  color:var(--tx); font-size:13px; line-height:1.55}

.minibtn.inv.on{background:#e8ecf1; color:#12161b; border-color:#e8ecf1}   /* invert-on indicator */
.ctl-row.ctl-sec{grid-template-columns:1fr; border-top:0; padding-top:10px; color:var(--tx2); font-weight:600}
.ctl-row.ctl-sec .ctl-k{color:var(--tx2)}

/* returning reader · ID notice · device notice · waiting for the connection */
.welcome{margin:6px 0 18px; padding:16px 18px; border-radius:8px; background:#15304a; border:1px solid #2b4f6e}
.welcome-t{font-size:18px; font-weight:700; color:#fff; margin:0 0 4px}
.welcome-s{color:#d6e3f0; margin:0 0 12px}
.id-notice{margin:0 0 16px; padding:12px 16px; border-radius:6px; background:#1d2a1f; border:1px solid #35553b; color:#e6f2e8; font-size:14px; line-height:1.55}
.device-note{margin:0 0 14px; padding:10px 14px; border-radius:6px; background:#3a2a12; border:1px solid #6b4e1f; color:#ffe2b0; font-size:14px}
.or-line{margin:4px 0 10px; color:var(--tx2); text-align:center}
.ov-card.net h2{color:#ffd28a}
.net-tip{max-width:520px; color:#d6dde5; font-size:14px; line-height:1.55; text-align:left}

/* continue — by name */
.field.hidden, .suggest.hidden{display:none}
.linkish{background:none; border:0; color:#9fc3e6; text-decoration:underline; cursor:pointer; padding:6px 0; font-size:14px; margin-top:6px}
.suggest{margin:6px 0 12px; padding:12px 16px; border-radius:8px; background:#15304a; border:1px solid #2b4f6e}
.suggest-q{margin:0 0 4px; color:#cfe3f7; font-weight:700}
.suggest-who{margin:0 0 10px; color:#fff; font-size:16px}

/* likelihood buttons: top = absent · <5% (bin), bottom = Definite (word) — the Next-step row is unchanged */
.btnrow.lh .opt-s{grid-row:1}
.btnrow.lh .opt-t{grid-row:2}