/* ============================================================
   Visual toolkit — diagrams & data viz for the work section
   Built from real repo data. Monochrome + signal-green accent,
   plus one warm "error" hue for confusion-matrix mistakes.
   ============================================================ */
:root{
  --warn: oklch(0.74 0.135 45);          /* soft amber — error cells */
  --warn-soft: oklch(0.74 0.135 45 / 0.14);
  --warn-line: oklch(0.74 0.135 45 / 0.34);
}

/* ---- shared viz shell ---- */
.viz{ margin-top:4px; }
.viz-cap{
  margin-top:14px; font-family:var(--mono); font-size:11.5px; line-height:1.5;
  letter-spacing:.02em; color:var(--faint);
}
.viz-cap b{ color:var(--ink-2); font-weight:500; }
.viz-title{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:9px;
}
.viz-title::before{ content:""; width:6px; height:6px; background:var(--acc); border-radius:1px; }

/* ============================================================
   PIPELINE / FLOW DIAGRAM
   ============================================================ */
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:9px; }
.flow-node{
  flex:1 1 0; min-width:96px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:13px 14px; display:flex; flex-direction:column; gap:6px; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.flow-node:hover{ border-color:var(--line-2); }
.flow-node .fn-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.flow-node .fn-label{ font-size:13.5px; line-height:1.2; color:var(--ink); font-weight:500; }
.flow-node.acc{ background:var(--acc-soft); border-color:var(--acc-line); }
.flow-node.acc .fn-label{ color:var(--acc); }
.flow-node.acc .fn-tag{ color:var(--acc-deep); }
.flow-arrow{ flex:none; align-self:center; color:var(--faint); font-size:15px; line-height:1; user-select:none; }
@media(max-width:560px){
  .flow{ flex-direction:column; align-items:stretch; }
  .flow-node{ width:100%; }
  .flow-arrow{ transform:rotate(90deg); }
}

/* ============================================================
   BAR CHART (model / method comparison)
   ============================================================ */
.barchart{ display:flex; flex-direction:column; gap:6px; }
.bc-row{
  display:grid; grid-template-columns:1fr auto;
  grid-template-areas:"label val" "track track";
  column-gap:12px; row-gap:7px; align-items:baseline; padding:6px 0;
}
.bc-label{ grid-area:label; font-family:var(--mono); font-size:12px; color:var(--ink-2); letter-spacing:.01em; }
.bc-val{ grid-area:val; font-family:var(--mono); font-size:13px; color:var(--ink-2); text-align:right; font-feature-settings:"tnum"; }
.bc-track{ grid-area:track; width:100%; height:11px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
.bc-fill{ height:100%; width:0; background:var(--acc-deep); border-radius:6px; transition:width 1.1s var(--ease); }
.bc-row.best .bc-label{ color:var(--acc); }
.bc-row.best .bc-fill{ background:var(--acc); }
.bc-row.best .bc-val{ color:var(--ink); }
.bc-row.down .bc-fill{ background:var(--muted); }

/* ============================================================
   CONFUSION MATRIX
   ============================================================ */
.cmatrix{ display:grid; grid-template-columns:18px 1fr 1fr; grid-template-rows:auto 1fr 1fr; gap:8px; }
.cm-corner{}
.cm-col{ grid-row:1; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:center; padding-bottom:2px; align-self:end; }
.cm-row{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:center; align-self:center; }
.cm-cell{ border-radius:11px; padding:18px 14px; min-height:96px; display:flex; flex-direction:column; justify-content:center; gap:6px; border:1px solid; }
.cm-cell .cmn{ font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1; letter-spacing:-0.02em; font-feature-settings:"tnum"; }
.cm-cell .cml{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.cm-cell.ok{ background:var(--acc-soft); border-color:var(--acc-line); }
.cm-cell.ok .cmn{ color:var(--acc); } .cm-cell.ok .cml{ color:var(--acc-deep); }
.cm-cell.err{ background:var(--warn-soft); border-color:var(--warn-line); }
.cm-cell.err .cmn{ color:var(--warn); } .cm-cell.err .cml{ color:var(--warn); }
.cm-cell.muted{ background:var(--bg-2); border-color:var(--line); }
.cm-cell.muted .cmn{ color:var(--ink-2); } .cm-cell.muted .cml{ color:var(--faint); }
.cm-cell .check{ font-size:24px; color:var(--acc); line-height:1; }

/* ============================================================
   CLASS-IMBALANCE BAR
   ============================================================ */
.imbalance{ }
.imb-bar{ position:relative; height:52px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.imb-neg{ position:absolute; inset:0; display:flex; align-items:center; padding-left:18px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.imb-pos{ position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--acc); box-shadow:0 0 16px 2px var(--acc-soft); }
.imb-legend{ display:flex; justify-content:space-between; gap:14px; margin-top:12px; }
.imb-legend .it{ display:flex; align-items:baseline; gap:9px; }
.imb-legend .sw{ width:9px; height:9px; border-radius:2px; flex:none; transform:translateY(1px); }
.imb-legend .sw.pos{ background:var(--acc); } .imb-legend .sw.neg{ background:var(--surface-2); border:1px solid var(--line-2); }
.imb-legend .tx{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); }
.imb-legend .tx b{ color:var(--ink); }
.imb-legend .tx span{ color:var(--faint); display:block; }

/* ============================================================
   RING GAUGE
   ============================================================ */
.ring-wrap{ display:flex; align-items:center; gap:18px; }
.ring{ --p:0; position:relative; width:108px; height:108px; flex:none; border-radius:50%;
  background:conic-gradient(var(--acc) calc(var(--p)*1deg), var(--surface-2) 0); display:grid; place-items:center; }
.ring::before{ content:""; position:absolute; width:80px; height:80px; border-radius:50%; background:var(--bg-2); }
.ring .rv{ position:relative; font-family:var(--disp); font-weight:600; font-size:24px; color:var(--ink); letter-spacing:-0.02em; }
.ring-meta .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.ring-meta .rd{ font-size:14px; color:var(--ink-2); margin-top:6px; max-width:26ch; }

/* ============================================================
   SCREENSHOT FRAME (real inference capture)
   ============================================================ */
.shot{ border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#000; box-shadow:0 30px 70px -45px #000; }
.shot img{ width:100%; height:auto; display:block; }
.shot-cap{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:var(--bg-2); font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.shot-cap .led{ width:7px; height:7px; border-radius:50%; background:var(--acc); flex:none; animation:pulse 2.4s infinite; }
.shot-cap b{ color:var(--ink-2); font-weight:500; }

/* ============================================================
   EEG RAW-SIGNAL EXHIBIT (real CHB-MIT trace, inverted to glow)
   ============================================================ */
.eeg-trace{ margin:0; }
.eeg-trace-img{
  position:relative; border:1px solid var(--line-2); border-radius:14px;
  background:
    radial-gradient(120% 140% at 50% -10%, oklch(0.255 0.008 66 / 0.6), transparent 60%),
    var(--bg);
  padding:18px clamp(14px,2vw,26px) 14px;
  overflow:hidden;
  box-shadow:0 30px 70px -50px #000;
}
/* faint baseline grid behind the traces */
.eeg-trace-img::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:9.09% 100%;  /* ~11 time gridlines */
}
.eeg-trace-img img{
  position:relative; z-index:1; width:100%; height:auto; display:block;
  /* black-on-transparent clinical trace -> luminous near-white signal on dark */
  filter:invert(1) brightness(1.02) drop-shadow(0 0 6px var(--acc-soft));
}
/* annotation band over the rhythmic ictal discharge */
.eeg-onset{
  position:absolute; z-index:2; top:10px; bottom:34px; left:66%; width:19%;
  border-left:1px dashed var(--acc-line); border-right:1px dashed var(--acc-line);
  background:linear-gradient(180deg, var(--acc-soft), transparent 85%);
  pointer-events:none;
}
.eeg-onset-tag{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bg); background:var(--acc); padding:3px 9px; border-radius:100px; white-space:nowrap;
}
@media(max-width:560px){ .eeg-onset-tag{ font-size:8px; padding:2px 7px; } }

/* ---- compact KPI strip (denser than the big .kpis grid) ---- */
.kstrip{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px; }
.kstrip .k{ flex:1 1 0; min-width:88px; background:var(--bg-2); padding:16px 16px; }
.kstrip .k .n{ font-family:var(--disp); font-weight:600; font-size:clamp(20px,2.3vw,28px); line-height:1; color:var(--ink); letter-spacing:-0.02em; font-feature-settings:"tnum"; }
.kstrip .k .n .u{ color:var(--acc); font-size:.6em; }
.kstrip .k .l{ margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); line-height:1.35; }

/* ---- two-up visual grid inside a project body ---- */
.viz-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); align-items:start; }
@media(max-width:680px){ .viz-2{ grid-template-columns:1fr; } }
.viz-block + .viz-block{ margin-top:30px; }

/* ---- chip sets (real queries / rosters / factors) ---- */
.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.qc{
  font-family:var(--mono); font-size:12px; letter-spacing:.01em;
  padding:8px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink-2); display:inline-flex; align-items:baseline; gap:7px;
  transition:border-color .25s var(--ease);
}
.qc:hover{ border-color:var(--line-2); }
.qc em{ color:var(--acc); font-style:normal; }
.qc .qa{ color:var(--faint); font-size:10.5px; }

/* ---- dataset stat strip (lighter than kstrip) ---- */
.dstrip{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2); }
.dstrip .d{ flex:1 1 0; min-width:104px; padding:16px 18px; border-right:1px solid var(--line); }
.dstrip .d:last-child{ border-right:0; }
.dstrip .d .dn{ font-family:var(--disp); font-weight:600; font-size:clamp(19px,2.1vw,25px); line-height:1; color:var(--ink); letter-spacing:-0.02em; font-feature-settings:"tnum"; }
.dstrip .d .dn .u{ color:var(--acc); font-size:.62em; }
.dstrip .d .dl{ margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); line-height:1.35; }
@media(max-width:560px){ .dstrip .d{ flex-basis:50%; border-bottom:1px solid var(--line); } }

/* ============================================================
   TECH-STACK MARQUEE (infinite scroll) — instant breadth signal
   ============================================================ */
.marquee{ position:relative; border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; }
.marquee::before, .marquee::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(40px,8vw,120px); z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg-2), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--bg-2), transparent); }
.marquee-track{ display:flex; align-items:center; width:max-content; animation:mq 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee .mq{ font-family:var(--mono); font-size:14px; letter-spacing:.02em; color:var(--ink-2); white-space:nowrap; padding:17px 0; }
.marquee .mq-sep{ color:var(--acc); font-size:8px; padding:0 22px; transform:translateY(-1px); }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; padding:8px clamp(20px,5vw,64px); }
}

/* skills chip clouds inside capability cards */
.cap .chipset{ margin-top:2px; }
.cap .qc{ font-size:11.5px; padding:7px 11px; }