:root{
  --teal:#0f766e; --teal-600:#0d9488; --teal-050:#ecfdf9;
  --purple:#6d28d9; --ink:#111827; --muted:#6b7280; --line:#e6e8ec;
  --bg:#f4f6f8; --card:#ffffff; --amber:#b45309;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Hide the native scrollbar; a custom floating thumb (in app.js) replaces it. */
html, body{scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0; display:none}
body{
  margin:0; color:var(--ink); background:var(--bg); line-height:1.6;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- custom scrollbar widget: full-height track beside the content, gradient thumb like the
       progress bar. Its horizontal position (just right of the content column) is set in app.js. ---- */
.scrollbar{position:fixed; z-index:60; width:8px; top:0; height:100vh;
  background:var(--line); border-radius:999px; opacity:0; transition:opacity .2s; pointer-events:none}
.scrollbar.show{opacity:1; pointer-events:auto; cursor:pointer}
.scrollthumb{position:absolute; left:0; width:8px; min-height:38px; border-radius:999px;
  background:linear-gradient(180deg,var(--teal),var(--purple)); pointer-events:auto; cursor:grab;
  transition:filter .15s}
.scrollthumb:hover{filter:brightness(1.08)}
.scrollthumb.drag{cursor:grabbing; filter:brightness(1.08)}
/* while dragging the thumb, force the grabbing cursor everywhere so it never flickers */
html.grabbing, html.grabbing *{cursor:grabbing !important}

/* ---------- dark theme ---------- */
html.dark{
  --teal-050:#0d2b2a; --purple-050:#211a3a;
  --ink:#e7eaf0; --muted:#98a2b3; --line:#2a3546;
  --bg:#0e1522; --card:#151d2b; --amber:#f0b45f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
html.dark .topbar{background:rgba(16,22,34,.82)}
html.dark p, html.dark .answer-text, html.dark .intro-lead, html.dark .intro-steps{color:#c6cedb}
html.dark .answer-model{color:var(--ink)}
html.dark .dim-label, html.dark .anchor b{color:#cdd5e1}
html.dark .segmented{background:#1a2434}
html.dark .segmented button:not(.on):hover{background:#26324a; color:var(--ink)}
html.dark .comment{background:#101a28; color:var(--ink)}
html.dark .comment.req{background:#2a1518; border-color:#7f1d1d}
html.dark .field input{background:#101a28; color:var(--ink)}
html.dark .pb-track, html.dark .scrollbar{background:#26324a}
html.dark .answer:hover{border-color:#3a475d}
html.dark .prompt{background:#0f2b2a; border-color:#1c5551; color:#d7f0ea}
html.dark .scenario-id{background:#211a3a; border-color:#3a2f66; color:#c4b5fd}
html.dark .badge, html.dark .cite{background:#0f2b2a; border-color:#1c5551}
html.dark .endbar-inner{background:#0a1120}
/* developer button (on state) + dev-only source panels */
html.dark .btn-ghost.on{color:var(--amber); border-color:#5c4a1e; background:#241f10}
html.dark .sources{border-top-color:var(--line)}
html.dark .src-item + .src-item{border-top-color:var(--line)}
html.dark .src-item .src-text{color:#c6cedb}
html.dark .src-item .src-n{border-color:#1c5551}
html.dark .cite.dead{background:#1a2434; border-color:var(--line); color:var(--muted)}
/* front-screen "welcome back" line stays legible */
html.dark .intro-resume{color:#5eead4}
/* rating hover tooltip: lift off the dark page background */
html.dark .tooltip{background:#22304a}
html.dark .tooltip.below::after{border-bottom-color:#22304a}
html.dark .tooltip:not(.below)::after{border-top-color:#22304a}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.topbar-inner{max-width:960px; margin:0 auto; padding:16px 20px 8px;
  display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--purple)); box-shadow:var(--shadow)}
.brand-mark svg{display:block}
.brand-title{font-weight:700; font-size:16px; letter-spacing:-.01em}
.brand-sub{font-size:12px; color:var(--muted); margin-top:-2px}
.controls{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.field{display:flex; flex-direction:row; align-items:center; font-size:12px; color:var(--muted); gap:8px; white-space:nowrap}
.field input{font:inherit; font-size:14px; color:var(--ink); padding:8px 11px;
  border:1px solid var(--line); border-radius:10px; min-width:190px; background:#fff; transition:border-color .15s, box-shadow .15s}
.field input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-050)}
.savestate{font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px;
  opacity:0; transition:opacity .3s}
.savestate::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--teal-600)}
.savestate.show{opacity:1}
.btn{font:inherit; font-weight:600; font-size:14px; color:#fff; cursor:pointer;
  background:var(--teal); border:0; border-radius:10px; padding:9px 16px; box-shadow:var(--shadow);
  transition:transform .05s, background .15s}
.btn:hover{background:var(--teal-600)}
.btn:active{transform:translateY(1px)}
.btn-ghost{font:inherit; font-weight:600; font-size:13px; cursor:pointer; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px 12px; transition:.15s;
  display:inline-flex; align-items:center; gap:6px}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-ghost.on{color:var(--amber); border-color:#f4d9a8; background:#fffaf0}
.btn-ghost.on::before{content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:currentColor}
.icon-btn{padding:8px 10px; gap:0}
.icon-btn svg{display:block}
/* ---------- live completion widget (bottom of the sticky header) ---------- */
.progressbar{max-width:960px; margin:0 auto; padding:2px 20px 9px; display:flex; align-items:center; gap:12px}
.pb-track{flex:1; height:7px; background:#e9ebef; border-radius:999px; overflow:hidden}
.pb-fill{height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--purple)); transition:width .35s ease}
/* Fixed width + tabular figures so the track's right edge never shifts as the number changes. */
.pb-label{flex:0 0 auto; min-width:92px; display:flex; justify-content:flex-end; align-items:baseline;
  font-size:11.5px; color:var(--muted); white-space:nowrap}
.pb-label #pb-pct{font-weight:500; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- end-of-review bar ---------- */
.endbar{margin:30px 0 12px}
.endbar-inner{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--ink); color:#fff; border-radius:16px; padding:20px 24px; box-shadow:var(--shadow)}
.endbar-check{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(94,234,212,.18); color:#5eead4; font-weight:800; font-size:16px}
.endbar-text{flex:1; min-width:220px}
.endbar-title{font-size:16.5px; font-weight:700}
.endbar-sub{font-size:12.5px; color:#cfd4db; margin-top:3px}
.endbar .btn{white-space:nowrap}

/* ---------- intro / instructions screen ---------- */
.intro{max-width:760px; margin:34px auto; padding:0 20px}
.intro[hidden]{display:none}
.intro-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px 30px; animation:rise .3s ease both}
.intro-title{margin:0 0 6px; font-size:22px; letter-spacing:-.01em}
.intro-lead{margin:0 0 16px; color:#374151; font-size:15px}
.intro-steps{margin:0 0 16px; padding-left:20px; color:#374151; line-height:1.7; font-size:14.5px}
.intro-steps li{margin:6px 0}
.intro-note{font-size:13px; color:var(--muted); margin:0 0 20px}
.btn-start{font-size:15px; padding:12px 24px}
.btn-start:disabled{opacity:.55; cursor:default; background:var(--muted)}
.intro-resume{margin:13px 0 0; font-size:13px; color:var(--teal); font-weight:600}
.intro-resume[hidden]{display:none}
main[hidden]{display:none}

/* ---------- layout ---------- */
main{max-width:960px; margin:22px auto; padding:0 20px}
.empty{color:var(--muted); text-align:center; padding:60px 20px; font-size:15px}
.meta{margin:0 0 14px; color:var(--muted); font-size:12.5px}
.meta-bottom{margin:22px 0 0; text-align:center}

/* ---------- scenario card ---------- */
.scenario{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin:0 0 22px; animation:rise .3s ease both}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.scenario-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.scenario-id{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple); background:#f5f3ff; border:1px solid #ede9fe; padding:3px 9px; border-radius:999px}
.prompt{font-size:15.5px; font-weight:500; background:var(--teal-050); border:1px solid #d5f0ea;
  border-left:4px solid var(--teal); padding:13px 15px; border-radius:12px}

/* ---------- answer ---------- */
.answer{border:1px solid var(--line); border-radius:14px; padding:15px 16px; margin:16px 0 0;
  transition:border-color .15s, box-shadow .15s}
.answer:hover{border-color:#d7dbe0}
.answer-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.badge{font-weight:700; font-size:13px; color:var(--teal); background:var(--teal-050);
  border:1px solid #d5f0ea; width:26px; height:26px; display:grid; place-items:center; border-radius:8px}
.answer-model{font-weight:600; font-size:14px; color:var(--ink)}
.src-count{margin-left:auto; font-size:11.5px; color:var(--muted)}
.answer-text{font-size:14.5px; color:#1f2937}
.answer-text p{margin:0 0 9px}
.answer-text > :last-child{margin-bottom:0}
.answer-text ul, .answer-text ol{margin:0 0 9px; padding-left:22px}
.answer-text li{margin:2px 0}
.answer-text li::marker{color:var(--muted)}
.answer-text h1, .answer-text h2, .answer-text h3,
.answer-text h4, .answer-text h5, .answer-text h6{
  font-size:14.5px; font-weight:700; color:#111827; margin:11px 0 5px; line-height:1.35}
.answer-text code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;
  background:#f3f5f7; border:1px solid var(--line); border-radius:5px; padding:1px 5px}
html.dark .answer-text h1, html.dark .answer-text h2, html.dark .answer-text h3,
html.dark .answer-text h4, html.dark .answer-text h5, html.dark .answer-text h6{color:#e7eaf0}
html.dark .answer-text code{background:#101a28}

/* citation chips */
.cite{display:inline-flex; align-items:center; justify-content:center; cursor:help;
  font-size:11px; font-weight:700; line-height:1; color:var(--teal);
  background:var(--teal-050); border:1px solid #cfeee7; border-radius:6px;
  padding:1px 5px; margin:0 1px; vertical-align:baseline; transition:background .12s, transform .12s}
.cite:hover,.cite.active{background:var(--teal); color:#fff; border-color:var(--teal); transform:translateY(-1px)}
.cite.dead{color:var(--muted); background:#f3f4f6; border-color:var(--line)}

/* ---------- rating ---------- */
.rate{display:flex; flex-direction:column; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.dim{font-size:14px}
.dim-label{font-size:14.5px; color:#374151; margin-bottom:3px; font-weight:600}
.dim-guide{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:9px; max-width:74ch}
.segmented{display:inline-flex; background:#f3f4f6; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.segmented button{font:inherit; font-weight:600; font-size:14.5px; width:40px; height:34px; border:0;
  background:transparent; color:var(--muted); cursor:pointer; transition:background .12s, color .12s}
.segmented button:not(:last-child){border-right:1px solid var(--line)}
.segmented button:hover{background:#e9ebee; color:var(--ink)}
.segmented button.on{background:var(--teal); color:#fff}
.segmented.choice button{width:auto; padding:0 15px}
.anchors{display:flex; flex-wrap:wrap; gap:3px 16px; margin-top:8px; font-size:12.5px;
  color:var(--muted); line-height:1.5; max-width:80ch}
.anchor{white-space:normal}
.anchor b{display:inline-block; min-width:12px; color:#374151; font-weight:700; margin-right:3px}
/* modern hover tooltip for rating buttons (replaces the native title tooltip) */
.tooltip{position:fixed; z-index:120; max-width:280px; background:#0f172a; color:#e5e7eb;
  padding:8px 11px; border-radius:9px; font-size:12.5px; font-weight:500; line-height:1.45;
  box-shadow:0 10px 30px rgba(2,6,23,.4); opacity:0; transform:translateY(3px);
  transition:opacity .12s, transform .12s; pointer-events:none; white-space:normal}
.tooltip.show{opacity:1; transform:none}
.tooltip::after{content:""; position:absolute; left:var(--tip-arrow,50%); transform:translateX(-50%);
  border:5px solid transparent}
.tooltip.below::after{top:-10px; border-bottom-color:#0f172a}
.tooltip:not(.below)::after{bottom:-10px; border-top-color:#0f172a}

/* ---------- modal (masked password prompt) ---------- */
.modal-back{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  background:rgba(16,24,40,.42); opacity:0; transition:opacity .14s}
.modal-back.show{opacity:1}
.modal{width:min(380px,100%); background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:14px; padding:20px; box-shadow:0 24px 60px rgba(2,6,23,.35);
  transform:translateY(6px) scale(.98); transition:transform .14s}
.modal-back.show .modal{transform:none}
.modal-title{font-size:16px; font-weight:700; letter-spacing:-.01em}
.modal-msg{margin:6px 0 14px; font-size:13px; color:var(--muted); line-height:1.5}
.modal-input{width:100%; font:inherit; font-size:14px; color:var(--ink); padding:9px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--card)}
.modal-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-050)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px}
html.dark .modal-back{background:rgba(0,0,0,.55)}
html.dark .modal-input{background:#101a28}
.safety-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.safety-row .safety-reason{flex:1 1 220px; min-width:200px}
.safety-row .comment{margin-top:0; height:36px; min-height:0; padding:0 12px; resize:none}
.safety-reason:empty{display:none}
.comment.req{border-color:#fca5a5; background:#fff5f5}
.comment{width:100%; margin-top:11px; border:1px solid var(--line); border-radius:10px; padding:9px 11px;
  font:inherit; font-size:13.5px; resize:vertical; min-height:40px; background:#fff; transition:border-color .15s, box-shadow .15s}
.comment:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-050)}

/* ---------- click-to-open source popover (interactive/scrollable) ---------- */
.popover{position:absolute; z-index:100; max-width:440px; background:#0f172a; color:#e5e7eb;
  border-radius:12px; padding:12px 14px 12px; font-size:13px; line-height:1.55;
  box-shadow:0 14px 40px rgba(2,6,23,.4); opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .12s, transform .12s; pointer-events:none}
.popover.show{opacity:1; visibility:visible; transform:none; pointer-events:auto}
.popover .pop-src{font-weight:700; color:#5eead4; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:6px; padding-right:16px}
.popover .pop-body{max-height:240px; overflow:auto}
.popover .pop-close{position:absolute; top:8px; right:10px; cursor:pointer; color:#94a3b8; font-size:15px; line-height:1}
.popover .pop-close:hover{color:#fff}

/* dev-only retrieved-sources panel */
.sources{margin-top:12px; border-top:1px dashed var(--line); padding-top:10px}
.sources summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--teal); list-style:none}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"▸ "; color:var(--muted)}
.sources[open] summary::before{content:"▾ "}
.src-item{margin:10px 0 0; font-size:13px}
.sources summary + .src-item{margin-top:7px}
.src-item + .src-item{border-top:1px solid var(--line); padding-top:9px}
.src-head{display:flex; align-items:center; gap:7px; margin-bottom:3px}
.src-item .src-n{flex:0 0 auto; display:inline-grid; place-items:center; width:19px; height:19px; border-radius:6px;
  font-size:10.5px; font-weight:700; color:var(--teal); background:var(--teal-050); border:1px solid #cfeee7}
.src-item .src-file{font-size:11px; color:var(--muted)}
.src-item .src-text{color:#374151; white-space:pre-wrap; line-height:1.5}

/* missing-rating highlight + toast */
.dim.missing{outline:2px solid #f87171; outline-offset:6px; border-radius:8px; animation:pulseMiss 1s ease}
.dim.missing .dim-label{color:#dc2626; font-weight:700}
@keyframes pulseMiss{0%{outline-color:#fca5a5}50%{outline-color:#ef4444}100%{outline-color:#f87171}}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px);
  background:#111827; color:#fff; font-size:14px; font-weight:500; padding:12px 18px; border-radius:12px;
  box-shadow:0 12px 34px rgba(2,6,23,.35); opacity:0; visibility:hidden; transition:.2s; z-index:200; max-width:90vw}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

footer{max-width:960px; margin:10px auto 48px; padding:0 20px; color:var(--muted); font-size:12.5px}

@media (max-width:640px){
  .controls{width:100%; justify-content:space-between}
  .field input{min-width:0; flex:1}
  .rate{gap:16px}
}