/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   research.foyl.io — "The Instrument" design system.
   A calibrated, engineering-paper light theme for a scientific measurement
   instrument. Space Grotesk (display) · IBM Plex Sans (body) · IBM Plex Mono
   (data). One cool SIGNAL accent, one warm ALERT accent (semantic only),
   neutral NOISE graphite. OKLCH throughout; hairlines before shadow.

   Class + token names are the contract the study engine, task modules, and
   charts depend on — the visual system changed, the names did not.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* engineering-paper ground (cool near-white, never cream) */
  --paper:oklch(98.6% 0.004 240);
  --paper-2:oklch(96.8% 0.005 240);
  --panel:oklch(99.3% 0.003 240);
  --ink:oklch(23% 0.021 258);
  --ink-2:oklch(43% 0.017 258);
  --ink-3:oklch(58% 0.012 258);
  --rule:oklch(23% 0.021 258 / .13);
  --rule-2:oklch(23% 0.021 258 / .30);
  --grid:oklch(23% 0.021 258 / .045);

  /* one cool SIGNAL accent + one warm semantic ALERT + neutral NOISE */
  --signal:oklch(53% 0.115 222);
  --signal-ink:oklch(45% 0.12 224);
  --signal-soft:oklch(53% 0.115 222 / .10);
  --alert:oklch(56% 0.15 42);
  --alert-soft:oklch(56% 0.15 42 / .12);
  --noise:oklch(56% 0.006 258);
  --noise-soft:oklch(56% 0.006 258 / .12);
  --ok:oklch(52% 0.10 155);
  --ok-soft:oklch(52% 0.10 155 / .12);
  --warn:oklch(60% 0.12 70);

  --display:'Space Grotesk',sans-serif;
  --font:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* legacy aliases so JS/inline styles keep resolving */
  --jakarta:var(--display);
  --accent:var(--signal); --accent-d:var(--signal-ink); --accent-soft:var(--signal-soft);
  --danger:var(--alert);
  --surf:var(--panel); --surf2:var(--paper-2); --surf3:var(--paper-2);
  --line:var(--rule); --line2:var(--rule-2);
  --tx:var(--ink); --tx2:var(--ink-2); --tx3:var(--ink-3);
  --radius:3px; --radius-sm:2px;
  --shadow-sm:none; --shadow:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--font); font-size:16px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:24px 24px, 24px 24px;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; color:var(--ink); margin:0 0 .5em; line-height:1.08; letter-spacing:-.02em}
h1{font-size:2.3rem; font-weight:600}
h2{font-size:1.6rem}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--signal-ink); text-decoration:none}
a:hover{text-decoration:underline}
strong{color:var(--ink); font-weight:600}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}
::selection{background:var(--signal-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:0}

/* ── shared primitives ──────────────────────────────────── */
.wrap{max-width:1160px; margin:0 auto; padding:0 32px}
.prose{max-width:680px}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.sig{color:var(--signal-ink)}
.spec, .kicker{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--signal-ink); margin:0 0 .9rem; display:block;
}
.tick{display:inline-block; width:8px; height:1px; background:var(--rule-2); vertical-align:middle; margin:0 10px}

.section{padding:64px 0}
.grid{display:grid; gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* instrument panel: hairline bezel + corner ticks, no soft shadow */
.panel{position:relative; background:var(--panel); border:1px solid var(--rule)}
.panel::before,.panel::after{content:""; position:absolute; width:9px; height:9px; border:1.5px solid var(--rule-2)}
.panel::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.panel::after{bottom:-1px; right:-1px; border-left:0; border-top:0}

/* ── nav ─────────────────────────────────────────────────── */
.site-nav{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--rule);
  background:oklch(98.6% 0.004 240 / .85); backdrop-filter:saturate(140%) blur(8px)}
.site-nav .wrap{display:flex; align-items:center; height:60px; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:20px; width:auto; display:block}
.brand .sep{width:1px; height:18px; background:var(--rule-2)}
.brand .tag{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3)}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:24px}
.nav-links a{font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--ink-2)}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.nav-links a.here{color:var(--signal-ink)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.03em; line-height:1;
  padding:13px 22px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; transition:transform .12s ease, background .15s, border-color .15s; text-decoration:none}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn-primary{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn-primary:hover{background:oklch(30% 0.021 258)}
.btn-lg{padding:15px 26px; font-size:13.5px}
.btn-ghost{background:transparent; border-color:var(--rule-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); background:transparent}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}

.pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--rule); padding:5px 11px; border-radius:0}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--signal)}
.pill.ok{color:var(--ok)} .pill.ok .dot{background:var(--ok)}
.pill.warn{color:var(--warn)} .pill.warn .dot{background:var(--warn)}

/* ── forms / probes ──────────────────────────────────────── */
.field{margin:0 0 22px}
.field > label{display:block; font-weight:500; color:var(--ink); margin-bottom:8px; font-family:var(--font)}
.field .hint{font-size:.85rem; color:var(--ink-3); margin-bottom:8px}
select, input[type=text], input[type=number], input[type=password], textarea{
  width:100%; font-family:var(--font); font-size:1rem; color:var(--ink);
  background:var(--panel); border:1px solid var(--rule-2); border-radius:0; padding:11px 13px}
select:focus, input:focus, textarea:focus{outline:2px solid var(--signal-soft); outline-offset:1px; border-color:var(--signal)}

.choices{display:flex; flex-wrap:wrap; gap:10px}
.choice{display:flex; align-items:center; gap:10px; padding:11px 16px; border:1px solid var(--rule-2);
  background:var(--panel); cursor:pointer; transition:border-color .12s; user-select:none}
.choice:hover{border-color:var(--signal)}
.choice.sel{border-color:var(--signal); background:var(--signal-soft); color:var(--signal-ink); font-weight:500}
.choice input{accent-color:var(--signal)}

/* slider / Likert probe rows */
.scale-row{display:grid; grid-template-columns:230px 1fr 52px; gap:18px; align-items:center; margin:0 0 18px;
  padding-bottom:18px; border-bottom:1px solid var(--rule)}
.scale-row:last-child{border-bottom:0}
.scale-row .lbl{font-weight:500; color:var(--ink)}
.scale-row .lbl small{display:block; font-weight:400; color:var(--ink-3); font-size:.78rem; margin-top:2px}
.scale-row input[type=range]{width:100%; accent-color:var(--signal)}
.scale-row .val{font-family:var(--mono); font-size:1.05rem; text-align:right; color:var(--signal-ink); font-weight:500}
.scale-ends{display:flex; justify-content:space-between; font-size:.7rem; color:var(--ink-3);
  font-family:var(--mono); letter-spacing:.04em; margin-top:5px; text-transform:uppercase}
@media (max-width:640px){.scale-row{grid-template-columns:1fr 48px} .scale-row .lbl{grid-column:1/-1}}

/* ── study shell ─────────────────────────────────────────── */
#study-app{min-height:100vh; display:flex; flex-direction:column}
.study-main{flex:1}
.study-wrap{max-width:780px; margin:0 auto; padding:44px 32px 90px}
/* progress as a calibrated scale of ticks */
.stepbar{display:flex; gap:6px; max-width:780px; margin:22px auto 0; padding:0 32px}
.stepbar .step{flex:1; height:3px; background:var(--rule-2); transition:background .3s}
.stepbar .step.done{background:var(--ink)}
.stepbar .step.now{background:var(--signal)}

.screen{display:none; animation:fadeup .32s ease both}
.screen.active{display:block}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen-head{margin-bottom:24px}
.screen-head h1{font-size:2.1rem; font-weight:600}
.screen-actions{display:flex; gap:12px; margin-top:28px; align-items:center; flex-wrap:wrap}

.consent-box{max-height:340px; overflow-y:auto; border:1px solid var(--rule); padding:22px 26px;
  background:var(--panel); font-size:.95rem; line-height:1.7}
.consent-box h4{margin:1.3em 0 .35em; font-size:.78rem; font-family:var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--signal-ink)}
.consent-box ul{margin:.2em 0 1em; padding-left:1.2em}
.consent-check{display:flex; gap:12px; align-items:flex-start; margin-top:18px}
.consent-check input{margin-top:4px; accent-color:var(--signal); width:17px; height:17px}

/* ── task chrome ─────────────────────────────────────────── */
.task-hud{display:flex; align-items:center; gap:22px; padding:13px 20px; background:var(--panel);
  border:1px solid var(--rule-2); margin-bottom:20px; position:sticky; top:74px; z-index:20}
.hud-stat{display:flex; flex-direction:column}
.hud-stat .n{font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); line-height:1}
.hud-stat .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
.hud-track{flex:1; height:4px; background:var(--paper-2); overflow:hidden; border:1px solid var(--rule)}
.hud-track > span{display:block; height:100%; background:var(--signal); width:0; transition:width .4s}
.countdown{font-family:var(--mono); font-weight:500; font-size:1.05rem; color:var(--ink);
  padding:6px 13px; background:var(--paper-2); border:1px solid var(--rule-2)}
.countdown.low{color:var(--alert); border-color:var(--alert); animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* alert triage */
.alert-card{position:relative; border:1px solid var(--rule-2); border-left-width:3px; background:var(--panel); padding:22px 24px}
.alert-card.sev-crit{border-left-color:var(--alert)}
.alert-card.sev-high{border-left-color:var(--warn)}
.alert-card.sev-med{border-left-color:var(--signal)}
.alert-card.sev-low{border-left-color:var(--ink-3)}
.alert-meta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.sev-badge{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; font-weight:500}
.sev-badge.crit{background:var(--alert-soft); color:var(--alert)}
.sev-badge.high{background:oklch(60% 0.12 70 / .16); color:var(--warn)}
.sev-badge.med{background:var(--signal-soft); color:var(--signal-ink)}
.sev-badge.low{background:var(--paper-2); color:var(--ink-2)}
.alert-rule{font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em}
.alert-desc{color:var(--ink-2); margin-bottom:14px}
.ents{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.ent{font-family:var(--mono); font-size:12px; background:var(--paper-2); border:1px solid var(--rule); padding:4px 9px}
.ent b{color:var(--ink-3); font-weight:400; margin-right:5px}
.raw{font-family:var(--mono); font-size:12px; line-height:1.7; background:oklch(20% 0.02 258); color:oklch(84% 0.02 240);
  padding:14px 16px; overflow-x:auto; white-space:pre-wrap}
.raw b{color:oklch(78% 0.10 222); font-weight:500}
.verdicts{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.verdict{flex:1; min-width:140px}

/* phish hunt */
.mail{border:1px solid var(--rule-2); background:var(--panel); overflow:hidden}
.mail-head{padding:16px 22px; border-bottom:1px solid var(--rule); background:var(--paper-2); font-size:.9rem}
.mail-head .row{display:flex; gap:8px; margin-bottom:3px}
.mail-head .k{font-family:var(--mono); font-size:11px; color:var(--ink-3); min-width:52px; text-transform:uppercase; letter-spacing:.05em}
.mail-body{padding:22px 24px; line-height:1.7}
.flagable{border-bottom:1px dashed transparent; cursor:pointer; padding:0 1px; transition:background .1s}
.flagable:hover{background:oklch(60% 0.12 70 / .15); border-bottom-color:var(--rule-2)}
.flagable.flagged{background:var(--alert-soft); border-bottom:1px solid var(--alert)}
.lnk-chip{font-family:var(--mono); font-size:11px; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--rule); padding:1px 6px; margin-left:4px}

/* feedback + framing */
.feedback{margin-top:16px; padding:14px 18px; font-size:.95rem; border:1px solid var(--rule)}
.feedback.good{background:var(--ok-soft); color:var(--ok); border-color:oklch(52% 0.10 155 / .3)}
.feedback.bad{background:var(--alert-soft); color:var(--alert); border-color:oklch(56% 0.15 42 / .3)}
.frame-banner{padding:15px 20px; margin-bottom:22px; font-size:.95rem; border:1px solid var(--rule); background:var(--panel); border-left:3px solid var(--rule-2)}
.frame-banner.mastery{border-left-color:var(--ok); color:var(--ok)}
.frame-banner.control{border-left-color:var(--alert); color:var(--alert)}

/* metrics / debrief */
.metric-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0}
.metric{background:var(--panel); border:1px solid var(--rule); border-right:0; padding:18px}
.metric:last-child{border-right:1px solid var(--rule)}
.metric .n{font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--ink); line-height:1}
.metric .k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:6px}
.metric .sub{font-size:.78rem; color:var(--ink-3); margin-top:4px}

.card{position:relative; background:var(--panel); border:1px solid var(--rule); padding:26px}
.card h3{margin-top:0}

/* ── loader (foyl "o") ───────────────────────────────────── */
#loading{position:fixed; inset:0; z-index:500; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:22px; background:var(--paper); transition:opacity .4s ease}
#loading.hidden{opacity:0; pointer-events:none}
.lso{position:relative; width:76px; height:76px; animation:lso-spin 3s linear infinite}
.lso span{position:absolute; width:6px; height:6px; border-radius:50%; animation:lso-pulse 1.6s ease-in-out infinite}
.lso-brand{font-family:var(--display); font-size:16px; font-weight:700; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:4px; letter-spacing:-.02em}
.lso-brand span{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
@keyframes lso-spin{to{transform:rotate(360deg)}}
@keyframes lso-pulse{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ── footer ──────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule); padding:32px 0; margin-top:8px}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em}
.site-foot a{color:var(--ink-2)}

/* ── dataviz ─────────────────────────────────────────────── */
.chart{width:100%; overflow-x:auto}
.chart svg{display:block; max-width:100%; height:auto}
.legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.02em}
.legend .k{display:flex; align-items:center; gap:6px}
.legend .sw{width:11px; height:11px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important; transition-duration:.001ms!important}}