/* ==================================================================
   COMP90073 · Workshop Week 3 — privacy tutorial deck theme
   A quiet, dark, high-contrast theme: one idea per slide, generous
   whitespace, and labs that read at the back of the room.
   ================================================================== */

:root {
  --bg:        #09111f;
  --bg-soft:   #111d2e;
  --panel:     #17263a;
  --line:      #29415c;
  --ink:       #edf5ff;
  --ink-dim:   #a4b6cb;
  --ink-faint: #71849b;
  --accent:    #48b8ff;   /* query / data      */
  --accent-2:  #ff9b73;   /* attack / warning  */
  --accent-3:  #69dfb2;   /* protected/result  */
  --accent-4:  #bb8cff;   /* model / inference */
  --warn:      #ffd67a;
  --radius: 14px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.reveal-viewport { background: var(--bg); }

.reveal {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ---------- headings ---------- */

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: none;
  margin: 0 0 .5em 0;
  line-height: 1.15;
}
.reveal h1 { font-size: 2.1em; font-weight: 700; }
.reveal h2 { font-size: 1.5em; }
.reveal h3 { font-size: 1.12em; color: var(--ink); }
.reveal h4 { font-size: .82em; color: var(--ink-dim); font-weight: 600; }

.reveal section { text-align: left; }
.reveal .center { text-align: center; }

/* Reveal is initialised with display:'flex', so each visible slide is a
   column flex container. Ordinary slides centre themselves; lab slides
   are top-aligned because their demos fill in asynchronously and would
   otherwise jump as they grow. */
.reveal .slides > section {
  height: 100%; flex-direction: column; justify-content: center;
}
.reveal .slides > section.lab { justify-content: flex-start; }
.reveal .slides > section > * { flex: 0 0 auto; }

/* ---------- text ---------- */

.reveal p { line-height: 1.5; margin: 0 0 .7em; }
.reveal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(110,168,254,.35); }
.reveal ul { margin-left: 1em; }
.reveal li { margin-bottom: .45em; line-height: 1.45; }
.reveal li::marker { color: var(--accent); }

.lead   { font-size: 1.15em; color: var(--ink); }
.dim    { color: var(--ink-dim); }
.faint  { color: var(--ink-faint); }
.small  { font-size: .72em; }
.tiny   { font-size: .58em; }
.mono   { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

strong, b { color: #fff; font-weight: 600; }
em { color: var(--accent-2); font-style: normal; font-weight: 600; }

.eyebrow {
  font-size: .5em; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 1.1em;
}

/* Lab slides carry a compact heading so the demo gets the room. */
.lab h3 { font-size: .96em; margin-bottom: .18em; }
.lab .lab-brief { font-size: .58em; color: var(--ink-dim); margin: 0 0 .6em; }

/* ---------- code ---------- */

.reveal code {
  font-family: var(--mono); font-size: .78em;
  background: var(--panel); color: #cfe3ff;
  padding: .12em .38em; border-radius: 6px;
}

/* ---------- title slide ---------- */

.title-slide { text-align: center; }
.title-slide .kicker {
  font-size: .55em; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.title-slide h1 { margin: .25em 0 .1em; font-size: 2em; }
.title-slide .sub { color: var(--ink-dim); font-size: .9em; }
.title-rule {
  width: 74px; height: 3px; margin: 1em auto; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-4));
}

/* Students scan this at the start to open the labs on their own devices.
   Dark modules on a white card: inverted codes scan unreliably, so the card
   stays light even on the dark deck, and its padding extends the quiet zone. */
.qr-invite {
  display: flex; align-items: center; justify-content: flex-start;
  gap: .9em; margin-top: 1.1em;
}
.qr-card {
  flex: 0 0 auto; background: #fff; border-radius: 12px; padding: 8px;
  line-height: 0; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.qr-card img { display: block; width: 4.2em; height: 4.2em; }
.qr-text { display: flex; flex-direction: column; gap: .16em; }
.qr-lead { font-size: .62em; font-weight: 600; color: var(--ink); }
.qr-url  { font-family: var(--mono); font-size: .55em; color: var(--accent); }
.qr-note { font-size: .46em; color: var(--ink-faint); }

/* ---------- section divider ---------- */

.divider { text-align: center; }
.divider .num {
  font-size: 4.2em; font-weight: 700; line-height: 1;
  background: linear-gradient(140deg, var(--accent), var(--accent-4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.divider h2 { margin-top: .2em; }
.divider p  { color: var(--ink-dim); }
.divider .divider-questions {
  margin-top: 1.1em; font-size: .6em; color: var(--ink-faint);
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- layout helpers ---------- */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; align-items: start; }

.card {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8em 1em;
}
.card h4 { margin: 0 0 .35em; }

.caption { font-size: .55em; color: var(--ink-dim); margin-top: .5em; }
.caption b { color: var(--ink); font-weight: 600; }

.takeaway {
  margin-top: .8em; padding: .55em .9em; font-size: .62em;
  border-left: 3px solid var(--accent-2);
  background: rgba(242,166,90,.08); border-radius: 0 10px 10px 0;
  color: var(--ink);
}
.takeaway b { color: var(--accent-2); }

.pill {
  display: inline-block; font-size: .55em; padding: .18em .6em;
  border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-dim); background: var(--panel); letter-spacing: .04em;
}
.pill.attack  { color: var(--accent-2); border-color: rgba(255,155,115,.42); }
.pill.model   { color: var(--accent-4); border-color: rgba(187,140,255,.42); }
.pill.privacy { color: var(--accent-3); border-color: rgba(105,223,178,.42); }

/* ---------- buttons and inputs ---------- */

.btn {
  font: inherit; font-size: 1em; cursor: pointer;
  background: var(--panel); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .32em .85em; transition: all .15s ease;
}
.btn:hover { color: var(--ink); border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.active { background: var(--accent); color: #0b0e14; border-color: var(--accent); font-weight: 600; }
.btn:disabled { opacity: .62; cursor: default; }
.btn.is-locked { background: var(--panel); color: var(--ink-dim); border-color: var(--line); }
.btn-group { display: inline-flex; gap: .35em; flex-wrap: wrap; align-items: center; }

.reveal input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 150px; height: 4px; border-radius: 4px;
  background: var(--line); outline: none;
}
.reveal input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}

.slider-control { display: flex; align-items: center; gap: .5em; font-size: .52em; color: var(--ink-dim); }
.slider-label { white-space: nowrap; }
.range-value { min-width: 3.1em; color: var(--accent); font-family: var(--mono); }

.seg-control { display: flex; align-items: center; gap: .45em; font-size: .52em; color: var(--ink-dim); }
.seg-label { white-space: nowrap; letter-spacing: .04em; }
.lab-note { font-size: .5em; color: var(--ink-faint); letter-spacing: .03em; }

.lab-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: .7em; flex-wrap: wrap; margin-bottom: .45em; font-size: .95em;
}
.toolbar-left { display: flex; align-items: center; gap: 1.1em; flex-wrap: wrap; }
.lab-toolbar .btn-group { font-size: .52em; }

/* ---------- metrics ---------- */

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .45em; }
.metric-row-four { grid-template-columns: repeat(4, 1fr); }
.metric-stack { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.metric-single { grid-template-columns: minmax(260px, 22em); }

.metric {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; padding: .42em .7em; background: rgba(17,29,46,.7);
}
.metric-label { display: block; color: var(--ink-faint); font-size: .4em; text-transform: uppercase; letter-spacing: .08em; }
.metric-value { display: block; margin-top: .1em; font-family: var(--mono); font-size: .74em; color: var(--ink); }
.metric-hint { display: block; margin-top: .1em; color: var(--ink-faint); font-size: .38em; }
.metric.attack-tone  { border-left-color: var(--accent-2); }
.metric.model-tone   { border-left-color: var(--accent-4); }
.metric.privacy-tone { border-left-color: var(--accent-3); }
.metric.is-leak { background: rgba(255,155,115,.14); border-left-color: var(--accent-2); }
.metric.is-leak .metric-value { color: var(--accent-2); }
.metric.is-blocked .metric-value { color: var(--ink-faint); }

/* ---------- verdict strip ---------- */

.verdict {
  margin-top: .5em; padding: .5em .85em; border-radius: 10px;
  font-size: .55em; line-height: 1.45; min-height: 2.1em;
  background: var(--bg-soft); color: var(--ink-dim);
  border-left: 3px solid var(--line);
}
.verdict.ok   { color: var(--accent-3); background: rgba(105,223,178,.09); border-left-color: var(--accent-3); }
.verdict.warn { color: var(--warn);     background: rgba(255,214,122,.08); border-left-color: var(--warn); }
.verdict.bad  { color: var(--accent-2); background: rgba(255,155,115,.1);  border-left-color: var(--accent-2); }

/* ---------- shared svg chrome ---------- */

.demo > svg { width: 100%; height: auto; display: block; margin: .3em 0; }
svg text { font-family: var(--font); fill: var(--ink-dim); }
.grid-line { stroke: rgba(113,132,155,.18); stroke-width: 1; }
.axis-label { fill: var(--ink-faint); font-size: 12px; font-family: var(--mono); }
.faint-label { opacity: .65; }
.empty-chart-label { fill: var(--ink-faint); font-size: 15px; font-family: var(--font); }
.zone-label { fill: var(--accent-2); font-size: 12px; opacity: .8; }

/* ---------- section eyebrow / scenario ---------- */

.scenario {
  display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: .8em 1em;
}
.scenario p { margin: .2em 0; font-size: .64em; }
.scenario-person {
  width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 1.05em; color: #101926;
  background: linear-gradient(145deg, #ffd3c3, var(--accent-2));
  box-shadow: 0 0 0 6px rgba(255,155,115,.10);
}
.privacy-person { background: linear-gradient(145deg, #b9ffe5, var(--accent-3)); }
.status { display: inline-block; margin-top: .5em; padding: .2em .6em; border-radius: 999px; font-family: var(--mono); font-size: .82em; }
.status.bad  { color: var(--accent-2); background: rgba(255,155,115,.1); }
.status.good { color: var(--accent-3); background: rgba(105,223,178,.1); }

/* ---------- roadmap and threat flow ---------- */

.release-card { position: relative; overflow: hidden; min-height: 7.2em; }
.release-card::after {
  content: ""; position: absolute; inset: auto -2em -4em auto;
  width: 7em; height: 7em; border-radius: 50%;
  background: radial-gradient(circle, rgba(72,184,255,.12), transparent 68%);
}
.release-card:nth-child(2)::after { background: radial-gradient(circle, rgba(187,140,255,.14), transparent 68%); }
.release-card:nth-child(3)::after { background: radial-gradient(circle, rgba(105,223,178,.13), transparent 68%); }
.part-num { font-family: var(--mono); font-size: .55em; color: var(--ink-faint); margin-bottom: .7em; }

.threat-flow { display: grid; grid-template-columns: 1fr .5fr 1.15fr .6fr 1fr; gap: .5em; align-items: center; }
.threat-node {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .28em; min-height: 5.4em; justify-content: center;
  padding: .8em; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.threat-node small { color: var(--ink-dim); font-size: .52em; }
.node-icon {
  display: grid; place-items: center; width: 2em; height: 2em;
  border-radius: 12px; font-family: var(--mono); font-weight: 700;
  background: rgba(72,184,255,.14); color: var(--accent); border: 1px solid rgba(72,184,255,.35);
}
.interface-node .node-icon { background: rgba(187,140,255,.13); color: var(--accent-4); border-color: rgba(187,140,255,.35); }
.attacker-node .node-icon { background: rgba(255,155,115,.13); color: var(--accent-2); border-color: rgba(255,155,115,.35); }
.flow-arrow { text-align: center; color: var(--accent); font-size: 1.1em; }
.flow-arrow span { display: block; color: var(--ink-faint); font-size: .36em; margin-bottom: .3em; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Lab 1 · query builder ---------- */

.query-builder {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.2em;
  padding: .55em .8em; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(17,29,46,.55); font-size: .95em;
}
.query-builder .seg-control .btn { font-size: 1em; }
.builder-sliders { display: flex; gap: 1.1em; flex-wrap: wrap; align-items: center; }
.query-builder .btn-group { font-size: .52em; margin-left: auto; }

.lab-split { display: grid; grid-template-columns: .95fr 1.45fr; gap: .7em; align-items: start; margin-top: .4em; }
.lab-split .verdict { margin-top: 0; }

.query-log { width: 100%; border-collapse: collapse; font-size: .4em; }
.query-log th {
  text-align: left; padding: .3em .6em; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.query-log td { padding: .28em .6em; border-bottom: 1px solid rgba(41,65,92,.4); font-family: var(--mono); }
.query-log td:last-child { color: var(--accent-3); }
.query-log tr.is-blocked td:last-child { color: var(--accent-2); }
.query-log tbody:empty::after { content: "no queries yet"; color: var(--ink-faint); }

.band-unknown  { fill: rgba(41,65,92,.42); }
.band-possible { fill: rgba(255,155,115,.34); stroke: var(--accent-2); stroke-width: 1.5; }
.axis-rule { stroke: rgba(113,132,155,.4); stroke-width: 1.5; }
.band-caption { fill: var(--ink-dim); font-size: 15px; font-family: var(--mono); }
.band-caption.is-live { fill: var(--accent-2); font-weight: 600; }

/* ---------- Lab 2 · repeated noise ---------- */

/* The repeated query, restated in the lab so the slide stands alone. */
.query-caption { margin: .1em 0 .3em; }
.query-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.2em; flex-wrap: wrap;
}
.query-eq { font-family: var(--mono); font-size: .6em; color: var(--ink); }
.query-eq .query-value { color: var(--accent-2); font-weight: 600; }
.query-noise { font-family: var(--mono); font-size: .5em; color: var(--ink-faint); }
.query-gloss { font-size: .5em; color: var(--ink-dim); margin-top: .34em; line-height: 1.4; }

.reference-line { stroke-width: 1.5; stroke-dasharray: 7 6; }
.reference-0 { stroke: rgba(187,140,255,.55); }
.reference-1 { stroke: rgba(105,223,178,.6); }
.decision-line { stroke: rgba(113,132,155,.5); stroke-width: 1; stroke-dasharray: 2 5; }
.ci-band { fill: rgba(72,184,255,.16); stroke: none; }
/* Raw answers. Integer answers land exactly on the dashed reference lines, so
   they need a hue of their own to stay legible against them — red reads as the
   attacker's raw observations against the blue mean drawn over them. */
.answer-dots { fill: rgba(255,72,72,.95); stroke: none; }
.running-mean-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.running-mean-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }

/* ---------- Lab 1b · aggregate reconstruction ---------- */

.toggle-row { display: flex; gap: .45em; flex-wrap: wrap; font-size: .52em; margin-bottom: .5em; }
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin-top: .55em; }
.funnel-step {
  display: flex; flex-direction: column; align-items: center; gap: .15em;
  padding: .5em .4em; border-radius: 10px; border: 1px dashed var(--line);
  background: rgba(17,29,46,.4); opacity: .45; transition: .18s ease;
}
.funnel-step b { font-family: var(--mono); font-size: .78em; color: var(--ink-dim); }
.funnel-step span { font-size: .4em; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; text-align: center; }
.funnel-step .funnel-detail { text-transform: none; letter-spacing: 0; opacity: .8; }
.funnel-step.reached { opacity: 1; border-style: solid; }
.funnel-step.current { border-color: var(--accent-2); background: rgba(255,155,115,.12); }
.funnel-step.current b { color: var(--accent-2); }

.candidate-list { display: flex; flex-wrap: wrap; gap: .35em; justify-content: center; margin-top: .55em; }
.candidate-chip {
  font-family: var(--mono); font-size: .46em; padding: .3em .7em; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--accent-3);
}
.candidate-chip.faint { color: var(--ink-faint); }

/* ---------- Lab 3 · baselines ---------- */

.bar-compare { display: grid; gap: .5em; margin: .5em 0; }
.bar-row { display: grid; grid-template-columns: 300px 1fr 68px; gap: .6em; align-items: center; font-size: .58em; }
.bar-label { color: var(--ink-dim); }
.bar-track { height: 21px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; transition: width .16s ease; }
.baseline-fill { background: linear-gradient(90deg, rgba(187,140,255,.45), var(--accent-4)); }
.attack-fill   { background: linear-gradient(90deg, rgba(255,155,115,.45), var(--accent-2)); }
.bar-number { font-family: var(--mono); }

.zero-line { stroke: rgba(113,132,155,.45); stroke-width: 1.5; stroke-dasharray: 4 5; }
.advantage-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.no-advantage-region { fill: rgba(255,155,115,.2); stroke: none; }
.curve-dot { fill: var(--accent-2); stroke: var(--bg); stroke-width: 3; }

/* ---------- Labs 4–5 · membership ---------- */

.worlds { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7em; align-items: stretch; }
.world-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .9em; background: var(--bg-soft); }
.member-world { border-color: rgba(255,155,115,.42); }
.nonmember-world { border-color: rgba(187,140,255,.38); }
.world-label { font-family: var(--mono); font-weight: 600; font-size: .5em; letter-spacing: .12em; color: var(--ink-faint); }
.world-flow { display: flex; align-items: center; justify-content: center; gap: .7em; margin: .9em 0 .5em; color: var(--ink-dim); font-size: .68em; }
.mini-data, .mini-model { padding: .6em .9em; border-radius: 10px; border: 1px solid var(--line); font-family: var(--mono); }
.mini-data  { color: var(--accent); background: rgba(72,184,255,.09); }
.mini-model { color: var(--accent-4); background: rgba(187,140,255,.09); }
.world-vs { display: grid; place-items: center; font-size: 1.5em; color: var(--accent-2); }

.predicted-member-zone { fill: rgba(255,155,115,.075); }
.score-axis { stroke: rgba(113,132,155,.26); stroke-width: 2; }
.member-dot { fill: var(--accent-2); }
.nonmember-dot { fill: var(--accent-4); }
.predicted-negative { opacity: .35; }
.predicted-positive { stroke: #fff; stroke-width: 1.5; }
.threshold-line { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; }
.threshold-label { fill: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 13px; }

.candidate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .45em; margin: .5em 0; }
.candidate-card {
  display: flex; flex-direction: column; gap: .18em; align-items: center; padding: .5em .3em;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft); transition: .16s ease;
}
.candidate-value { font-family: var(--mono); font-weight: 600; font-size: .5em; color: var(--ink); }
.candidate-card .tiny { font-size: .36em; }
.candidate-score { font-family: var(--mono); font-weight: 700; font-size: .72em; color: var(--ink-dim); }
.candidate-card.best-candidate { border-color: var(--accent-2); background: rgba(255,155,115,.1); }
.candidate-card.best-candidate .candidate-score { color: var(--accent-2); }
.truth-tag {
  font-size: .34em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-3); border: 1px solid rgba(105,223,178,.4);
  border-radius: 999px; padding: .1em .5em;
}

/* ---------- Lab 6 · k-anonymity explorer ---------- */

.generalisation-controls {
  display: flex; flex-wrap: wrap; gap: .45em 1.3em; align-items: center;
  padding: .5em .8em; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(17,29,46,.55);
}
.generalisation-controls .seg-control .btn { font-size: 1em; padding: .26em .7em; }

.k-badge {
  margin-top: .45em; padding: .4em .85em; border-radius: 999px; text-align: center;
  font-family: var(--mono); font-size: .52em; letter-spacing: .03em;
}
.k-badge.pass { color: var(--accent-3); background: rgba(105,223,178,.11); border: 1px solid rgba(105,223,178,.35); }
.k-badge.fail { color: var(--accent-2); background: rgba(255,155,115,.11); border: 1px solid rgba(255,155,115,.35); }

.table-wrap { margin-top: .45em; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: .36em; }
.data-table th { padding: .38em .6em; text-align: left; color: var(--ink-faint); background: rgba(9,17,31,.7); text-transform: uppercase; letter-spacing: .06em; }
.data-table td { padding: .28em .6em; border-top: 1px solid rgba(41,65,92,.45); }
.data-table td:nth-last-child(2) { font-family: var(--mono); font-weight: 700; }
.data-table tr.group-a td:first-child { box-shadow: inset 4px 0 var(--accent); }
.data-table tr.group-b td:first-child { box-shadow: inset 4px 0 var(--accent-4); }
.data-table tr.group-c td:first-child { box-shadow: inset 4px 0 var(--accent-3); }
.data-table tr.group-d td:first-child { box-shadow: inset 4px 0 var(--accent-2); }
.data-table tr.group-e td:first-child { box-shadow: inset 4px 0 var(--warn); }
.data-table tr.group-f td:first-child { box-shadow: inset 4px 0 #68d5e8; }
.data-table tr.exposed { background: rgba(255,155,115,.11); }
.data-table tr.exposed td:last-child { color: var(--accent-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.data-table tr:not(.exposed) td:last-child { color: var(--ink-faint); }

.ladder-row { display: grid; grid-template-columns: 1.35fr 1.25fr .75fr; gap: .6em; margin-top: .45em; align-items: center; }
.ladder { display: flex; align-items: center; gap: .25em; font-size: .34em; }
.ladder-name { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.ladder-step {
  padding: .18em .5em; border-radius: 6px; border: 1px solid var(--line);
  color: var(--ink-faint); background: rgba(17,29,46,.6); font-family: var(--mono);
}
.ladder-step.above { color: var(--accent-3); border-color: rgba(105,223,178,.3); }
.ladder-step.current { color: #0b0e14; background: var(--accent); border-color: var(--accent); font-weight: 700; }

/* ---------- Lab 7 · homogeneity ---------- */

.guess-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-bottom: .5em; }
.guess-cell {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  padding: .4em .7em; border: 1px solid var(--line); border-radius: 10px; background: rgba(17,29,46,.55);
  font-size: .48em; color: var(--ink-dim);
}
.guess-input {
  width: 5.4em; font: 600 1.15em var(--mono); text-align: right;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 7px; padding: .2em .45em;
}
.guess-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.guess-input.correct   { border-color: var(--accent-3); color: var(--accent-3); }
.guess-input.incorrect { border-color: var(--accent-2); color: var(--accent-2); }

.homogeneity-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: .5em; }
.group-tile {
  display: flex; gap: 2px; justify-content: center; padding: 4px 2px;
  border: 1px solid rgba(41,65,92,.65); border-radius: 4px; background: rgba(17,29,46,.7);
}
.group-tile.homogeneous { border-color: var(--accent-2); background: rgba(255,155,115,.16); box-shadow: 0 0 0 1px rgba(255,155,115,.3); }
.sensitive-dot { width: 4px; height: 4px; border-radius: 50%; }
.sensitive-dot.value-0 { background: var(--accent); }
.sensitive-dot.value-1 { background: var(--accent-4); }
.sensitive-dot.value-2 { background: var(--accent-3); }
.sensitive-dot.value-3 { background: var(--warn); }
.sensitive-dot.value-4 { background: #68d5e8; }
.sensitive-dot.value-5 { background: #ff8fb1; }
.sample-caption { margin-top: .35em; text-align: center; font-size: .46em; color: var(--ink-faint); }
.sample-caption b { color: var(--accent-2); }

/* ---------- quizzes ---------- */

.quiz-options { display: grid; gap: .45em; max-width: 980px; margin: .6em auto; }
.quiz-options .btn { border-radius: 10px; padding: .62em 1em; text-align: left; font-size: .6em; }
.quiz-options .btn.correct   { color: var(--accent-3); border-color: var(--accent-3); background: rgba(105,223,178,.1); }
.quiz-options .btn.incorrect { color: var(--accent-2); border-color: var(--accent-2); background: rgba(255,155,115,.08); }
.quiz-feedback {
  min-height: 2.4em; padding: .6em .9em; border-radius: 10px; font-size: .58em;
  text-align: center; background: var(--bg-soft); color: var(--ink-dim); line-height: 1.45;
}
.quiz-feedback.correct   { color: var(--accent-3); }
.quiz-feedback.incorrect { color: var(--accent-2); }

/* ---------- tables and equations ---------- */

.reveal table.tbl { width: 100%; border-collapse: collapse; }
.reveal table.tbl th {
  text-align: left; padding: .4em .7em; font-size: .8em; font-weight: 600;
  color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.reveal table.tbl td { padding: .42em .7em; border-bottom: 1px solid rgba(43,53,70,.45); }
.reveal table.tbl tr:last-child td { border-bottom: none; }
.synthesis-table td:first-child { color: var(--accent); font-family: var(--mono); font-weight: 700; }
.reference-list li { margin-bottom: .55em; }

.eq {
  font-family: var(--mono); font-size: .8em; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .65em 1em; color: #cfe3ff;
}

/* ---------- pipeline diagram (shadow models) ---------- */

.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; align-items: stretch; }
.pipe-step {
  border: 1px solid var(--line); border-radius: 12px; padding: .7em .8em;
  background: var(--bg-soft); display: flex; flex-direction: column; gap: .25em;
}
.pipe-step .step-num { font-family: var(--mono); font-size: .48em; color: var(--accent); letter-spacing: .1em; }
.pipe-step b { font-size: .62em; }
.pipe-step span.body { font-size: .52em; color: var(--ink-dim); line-height: 1.4; }

/* ---------- MathJax and reveal chrome ---------- */

mjx-container[jax="SVG"] { color: var(--ink); }
/* Inline math sits inside dimmed prose and coloured chips, so it takes their
   colour; only display equations get the brighter body colour. */
mjx-container[jax="SVG"]:not([display="true"]) { color: inherit; }
mjx-container[jax="SVG"][display="true"] { margin: .3em 0 !important; }
.eq mjx-container[jax="SVG"][display="true"] { margin: 0 !important; }
.eq.math { font-family: var(--font); color: var(--ink); font-size: 1em; }
.takeaway mjx-container { color: inherit; }

/* MathJax sizes display SVGs in ex units, so a wide equation bleeds past the
   slide edge instead of shrinking. Scale to the container as a safety net. */
.eq mjx-container[jax="SVG"][display="true"] { max-width: 100%; }
.eq mjx-container[jax="SVG"][display="true"] > svg { max-width: 100%; height: auto; }

.reveal .progress { color: var(--accent); height: 3px; }
.reveal .controls { color: var(--ink-faint); }
.reveal .slide-number { background: transparent; color: var(--ink-faint); font-size: 14px; }

/* Part rail: shows which of the three release mechanisms we are in. */
.part-rail {
  position: absolute; top: 0; right: 0; display: flex; gap: .3em;
  font-size: .38em; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase;
}
.part-rail span { padding: .16em .55em; border-radius: 999px; border: 1px solid transparent; }
.part-rail span.on { color: var(--accent); border-color: rgba(72,184,255,.35); background: rgba(72,184,255,.09); }

@media (max-width: 720px) {
  .threat-flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); }
  .flow-arrow span { display: none; }
  .lab-split { grid-template-columns: 1fr; }
}