/* =============================================================================
   EthicsOff — shared stylesheet (Brutalist Notebook)
   Tokens + shell + consent + question screen + thread + admin panel.
   Linked by baseline.html, v1-immersive.html, followup.html. The two report
   pages keep their own rich CSS but reuse these tokens.
============================================================================= */
:root{
  --paper:#F3EFE6; --ink:#0A0A0A;
  --ink-70:rgba(10,10,10,.72); --ink-50:rgba(10,10,10,.50);
  --ink-30:rgba(10,10,10,.30); --ink-15:rgba(10,10,10,.15); --ink-08:rgba(10,10,10,.08);
  --accent:#E2371F; --accent-soft:rgba(226,55,31,.10);
  --rule:2px solid var(--ink); --hair:1px solid var(--ink);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --narrow:'Archivo Narrow','Archivo',sans-serif;
  --reddit:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
:root[data-mode="dark"]{
  --paper:#0E0E0E; --ink:#EDEAE0;
  --ink-70:rgba(237,234,224,.72); --ink-50:rgba(237,234,224,.50);
  --ink-30:rgba(237,234,224,.30); --ink-15:rgba(237,234,224,.15); --ink-08:rgba(237,234,224,.08);
  --accent:#FF5A3C; --accent-soft:rgba(255,90,60,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){
    --paper:#0E0E0E; --ink:#EDEAE0;
    --ink-70:rgba(237,234,224,.72); --ink-50:rgba(237,234,224,.50);
    --ink-30:rgba(237,234,224,.30); --ink-15:rgba(237,234,224,.15); --ink-08:rgba(237,234,224,.08);
    --accent:#FF5A3C; --accent-soft:rgba(255,90,60,.12);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; transition:background .15s ease,color .15s ease;
}

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:var(--rule); display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:14px 32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.shell .brand{font-weight:700}
.shell .progress{letter-spacing:.22em; text-align:center}
.shell .actions{text-align:right; display:inline-flex; justify-content:flex-end; align-items:center; gap:16px}
.shell .actions a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink-30); padding-bottom:1px}
.shell .actions a:hover{border-bottom-color:var(--ink)}
.mode-toggle{
  background:transparent; border:1px solid var(--ink); color:var(--ink);
  padding:5px; cursor:pointer; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
}
.mode-toggle:hover{background:var(--ink); color:var(--paper)}
.mode-toggle svg{width:16px; height:16px; display:block}
.mode-toggle .icon-sun{display:none} .mode-toggle .icon-moon{display:block}
:root[data-mode="dark"] .mode-toggle .icon-sun{display:block}
:root[data-mode="dark"] .mode-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]) .mode-toggle .icon-sun{display:block}
  :root:not([data-mode="light"]) .mode-toggle .icon-moon{display:none}
}
main{max-width:760px; margin:0 auto; padding:0 20px}

/* ── prompt ──────────────────────────────────────────────────────────────── */
.eo-prompt{margin:56px 0 0; padding-bottom:8px}
.eo-prompt-title{font-family:var(--sans); font-size:32px; font-weight:700; line-height:1.2; margin:0 0 18px; letter-spacing:-.005em}
.eo-prompt-text{font-family:var(--sans); font-size:17px; line-height:1.6; max-width:64ch}

/* ── decision ────────────────────────────────────────────────────────────── */
.eo-decision{margin-top:88px; padding-bottom:80px}
.eo-decision-q{
  font-family:var(--narrow); font-weight:700; text-transform:uppercase;
  font-size:58px; line-height:.95; letter-spacing:-.015em; margin:0 0 44px; transition:color .2s;
}
.eo-decision.locked .eo-decision-q{color:var(--ink-30)}
.eo-answers{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.eo-opt{
  appearance:none; background:transparent; color:var(--ink); border:none;
  padding:28px 0 22px; border-top:4px solid var(--ink); border-bottom:4px solid var(--ink);
  font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:38px;
  letter-spacing:.01em; cursor:pointer; text-align:left;
  transition:background .1s,color .1s,padding .1s,border-color .2s,opacity .2s;
}
.eo-opt:hover:not(:disabled){background:var(--ink); color:var(--paper); padding-left:18px; padding-right:18px}
.eo-opt.selected{background:var(--accent); color:var(--paper); padding-left:18px; padding-right:18px; border-color:var(--accent)}
.eo-decision.locked .eo-opt{color:var(--ink-30); border-color:var(--ink-30); cursor:not-allowed}
.eo-opt:disabled{pointer-events:none}
.eo-decision.answered .eo-opt:not(.selected){opacity:.22}

/* ── confidence + optional note + confirm ────────────────────────────────── */
.eo-finalize{margin-top:36px}
.eo-finalize[hidden]{display:none}
.eo-conf-lab{display:block; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50); margin-bottom:16px}
.eo-conf-row{display:flex; align-items:center; gap:22px}
.eo-conf-val{font-family:var(--narrow); font-weight:800; font-size:36px; line-height:1; color:var(--accent); min-width:92px; text-align:right; font-variant-numeric:tabular-nums}
.eo-range{
  -webkit-appearance:none; appearance:none; flex:1; height:4px; background:var(--ink-30);
  outline:none; border:none; margin:0; cursor:pointer;
}
.eo-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; background:var(--accent); border:3px solid var(--ink); cursor:pointer}
.eo-range::-moz-range-thumb{width:22px; height:22px; background:var(--accent); border:3px solid var(--ink); border-radius:0; cursor:pointer}
.eo-range:disabled{opacity:.5; cursor:not-allowed}
.eo-note{
  width:100%; box-sizing:border-box; margin-top:26px; min-height:62px; resize:vertical;
  background:transparent; color:var(--ink); border:2px solid var(--ink); padding:14px 16px;
  font-family:var(--sans); font-size:15px; line-height:1.5; outline:none;
}
.eo-note:focus{border-color:var(--accent)}
.eo-note:disabled{opacity:.5}
.eo-note::placeholder{color:var(--ink-50)}
.eo-confirm{
  margin-top:24px; cursor:pointer; appearance:none;
  background:var(--ink); color:var(--paper); border:3px solid var(--ink);
  font-family:var(--narrow); font-weight:800; text-transform:uppercase; font-size:22px;
  letter-spacing:.02em; padding:16px 40px;
}
.eo-confirm:hover:not(:disabled){background:var(--accent); border-color:var(--accent)}
.eo-confirm:disabled{opacity:.4; cursor:not-allowed}
.eo-decision.answered .eo-finalize{opacity:.55}

/* ── thread ──────────────────────────────────────────────────────────────── */
.eo-like-you{
  display:inline-flex; align-items:center; background:var(--accent); color:var(--paper);
  font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:3px 8px 2px; line-height:1.2; white-space:nowrap;
}
.eo-like-you::before{content:"▪"; margin-right:6px; font-size:12px; line-height:1}
.eo-explainer{
  margin:40px 0 24px; padding:16px 20px; border-left:4px solid var(--accent);
  background:var(--accent-soft); font-family:var(--sans); font-size:14px; line-height:1.6;
}
.eo-explainer b.tag{
  font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;
}
.eo-post{display:grid; grid-template-columns:56px 1fr; border:var(--rule); background:var(--paper)}
.eo-post.no-votes{grid-template-columns:1fr}
.eo-post .eo-votes{
  background:var(--ink-08); padding:16px 0; text-align:center;
  font-family:var(--mono); font-weight:700; border-right:var(--hair);
}
.eo-post .eo-votes .arrow{display:block; font-size:20px; line-height:1; padding:4px 0; color:var(--ink-50)}
.eo-post .eo-votes .arrow.up{color:var(--accent)}
.eo-post .eo-votes .score{display:block; padding:6px 0; font-size:20px; color:var(--ink)}
.eo-post-body{padding:18px 24px 20px; font-family:var(--reddit)}
.eo-post-title{font-family:var(--sans); font-size:26px; font-weight:700; line-height:1.25; margin:0 0 14px}
.eo-post-text{font-family:var(--reddit); font-size:15.5px; line-height:1.6}
.eo-comments{border:var(--rule); border-top:none; background:var(--paper); padding:4px 18px 22px}
.eo-comment{margin-top:22px; padding-left:14px; border-left:2px solid var(--ink-30); font-family:var(--reddit)}
.eo-comment.nested{margin-left:28px}
.eo-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--ink-50); margin-bottom:8px}
.eo-meta .eo-user{color:var(--ink); font-weight:700; font-size:13.5px}
.eo-vote-pill{
  display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--ink-30);
  padding:3px 8px; font-family:var(--mono); font-weight:700; font-size:13px;
  color:var(--ink); background:var(--paper); line-height:1;
}
.eo-vote-pill .arrow{font-size:13px; color:var(--ink-50)}
.eo-vote-pill .arrow.up{color:var(--ink)}
.eo-vote-pill .score{min-width:2ch; text-align:center; font-size:15px}
.eo-vote-pill.hot{border-color:var(--accent)}
.eo-vote-pill.hot .score,.eo-vote-pill.hot .arrow.up{color:var(--accent)}
.eo-vote-pill.top{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.eo-vote-pill.top .score{color:var(--paper); font-size:16px}
.eo-vote-pill.top .arrow.up{color:var(--paper)}
.eo-vote-pill.top .arrow.down{color:rgba(243,239,230,.55)}
.eo-vote-pill.down{border-color:var(--ink-15); background:var(--ink-08); color:var(--ink-50)}
.eo-vote-pill.down .score,.eo-vote-pill.down .arrow,.eo-vote-pill.down .arrow.up{color:var(--ink-30)}
.eo-vote-pill.down .arrow.down{color:var(--ink-50)}
.eo-comment-body{font-size:14.8px; line-height:1.6; color:var(--ink)}
.eo-thread-end{height:1px; width:100%; margin-top:24px}

/* ── consent modal (baseline.html) ───────────────────────────────────────── */
.consent-open{overflow:hidden}
.consent-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px}
.consent-modal[hidden]{display:none}
.consent-backdrop{position:absolute; inset:0; background:rgba(10,10,10,.62)}
:root[data-mode="dark"] .consent-backdrop{background:rgba(0,0,0,.78)}
.consent-card{
  position:relative; width:100%; max-width:600px; max-height:calc(100vh - 48px);
  overflow-y:auto; background:var(--paper); border:var(--rule);
  box-shadow:0 24px 60px rgba(0,0,0,.45); animation:consentIn .25s cubic-bezier(.22,1,.36,1);
}
@keyframes consentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.consent-header{
  background:var(--ink); color:var(--paper); padding:12px 28px;
  font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.consent-content{padding:28px 32px 24px}
.consent-title{font-family:var(--sans); font-weight:700; font-size:22px; line-height:1.25; margin:0 0 18px}
.consent-body{font-family:var(--sans); font-size:14.5px; line-height:1.6}
.consent-body p{margin:0 0 12px}
.consent-careful{border-left:4px solid var(--accent); padding:8px 12px; background:var(--accent-soft); margin-top:14px!important; font-weight:500}
.consent-ack{
  appearance:none; display:block; width:100%; margin:0; border:none;
  background:var(--accent); color:var(--paper); font-family:var(--mono); font-weight:700;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
  text-align:left; padding:20px 28px; cursor:pointer; border-top:var(--rule);
  transition:background .12s,padding .12s;
}
.consent-ack:hover{background:var(--ink); padding-left:36px}

/* ── admin override panel ────────────────────────────────────────────────── */
.eo-admin-btn{
  position:fixed; right:14px; bottom:14px; z-index:120;
  background:var(--ink); color:var(--paper); border:2px solid var(--ink);
  font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.2em;
  padding:8px 12px; cursor:pointer;
}
.eo-admin-btn:hover{background:var(--accent); border-color:var(--accent)}
.eo-admin-panel{
  position:fixed; right:14px; bottom:52px; z-index:120; width:320px;
  max-height:70vh; overflow:auto; background:var(--paper);
  border:2px solid var(--ink); box-shadow:0 18px 44px rgba(0,0,0,.4); padding:16px;
}
.eo-admin-panel[hidden]{display:none}
.eo-admin-h{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.eo-admin-panel label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-50); margin:10px 0 0}
.eo-admin-panel select{
  width:100%; margin-top:5px; background:transparent; color:var(--ink);
  border:1.5px solid var(--ink); padding:8px 10px; font-family:var(--sans); font-size:13px;
}
.eo-admin-controls{margin-top:6px}
.eo-admin-row{display:flex; gap:8px; margin-top:16px}
.eo-admin-row button{
  flex:1; appearance:none; cursor:pointer; background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); font-family:var(--mono); font-weight:700; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; padding:10px 8px;
}
.eo-admin-row button:hover{background:var(--accent); border-color:var(--accent)}
.eo-admin-note{margin-top:12px; font-family:var(--mono); font-size:10px; line-height:1.5; color:var(--ink-50)}

/* ── demo shortcut ───────────────────────────────────────────────────────── */
.demo-shortcut{margin-top:48px; padding-top:16px; border-top:var(--hair);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-30)}
.demo-shortcut a{color:var(--ink-50); text-decoration:none; border-bottom:1px solid var(--ink-15); padding-bottom:1px}
.demo-shortcut a:hover{color:var(--accent); border-bottom-color:var(--accent)}

@media (max-width:720px){
  main{padding:0 14px}
  .eo-prompt-title{font-size:24px} .eo-post-title{font-size:22px}
  .eo-decision-q{font-size:56px}
  .eo-answers{grid-template-columns:1fr; gap:12px}
  .eo-opt{font-size:26px; padding-top:22px}
  .shell .actions a{display:none}
}