/* ==================================================================
   COMP90073 · Workshop Week 4 — DP 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 still need to read from the back of the room. */
.lab h3 { font-size: 1.02em; margin-bottom: .2em; }
.lab .lab-brief { font-size: .64em; color: var(--ink-dim); margin: 0 0 .58em; }

/* ---------- 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; }
/* Uppercasing turns ε into E, which reads as a different symbol entirely. */
.metric-label .nocaps { text-transform: none; }
.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); }
.svg-html-label {
  color: var(--ink-faint); font: 12px/18px var(--mono); white-space: nowrap;
}
.svg-html-label.center { text-align: center; }
.svg-html-label.end { text-align: right; }
.svg-html-label mjx-container { margin: 0 !important; color: inherit; }
.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; }

/* ---------- pedagogical scaffolds ---------- */

.recall-path,
.learning-path {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .65em; align-items: stretch;
}
.learning-path { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; }
.recall-step,
.path-step {
  display: flex; flex-direction: column; gap: .25em; min-height: 4.8em;
  padding: .7em .8em; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft);
}
.recall-step b, .path-step b { font-size: .72em; }
.recall-step small, .path-step small { color: var(--ink-dim); font-size: .48em; line-height: 1.4; }
.recall-number, .path-step > span { color: var(--accent); font: 700 .55em var(--mono); }
.recall-step > div { display: flex; flex-direction: column; gap: .28em; }
.recall-step > div > span { color: var(--ink-dim); font-size: .48em; line-height: 1.4; }
.path-arrow, .role-arrow, .story-arrow, .prune-arrow, .ledger-plus { color: var(--accent); text-align: center; }

.crowd-path {
  display: grid; grid-template-columns: 1fr auto 1.1fr auto 1.25fr;
  gap: .6em; align-items: stretch;
}
.crowd-step {
  display: flex; flex-direction: column; justify-content: center; gap: .35em;
  min-height: 5.4em; padding: .7em .8em; border-top: 2px solid var(--line);
}
.crowd-step b { font-size: .68em; }
.crowd-step strong { font: 600 .58em var(--mono); color: var(--accent); }
.crowd-step small { color: var(--ink-dim); font-size: .46em; line-height: 1.4; }
.crowd-number { color: var(--accent); font: 700 .5em var(--mono); }
.crowd-arrow { align-self: center; color: var(--accent); font-size: 1.2em; }
.struck-data { color: var(--ink-faint) !important; text-decoration: line-through; text-decoration-color: var(--accent-2); }
.matching-rows { display: flex; flex-direction: column; gap: .18em; }
.matching-rows span { padding: .12em .45em; border-left: 3px solid var(--accent-3); background: rgba(105,223,178,.08); font: .45em var(--mono); }

.kanon-formula {
  margin: .1em 0 .8em; padding: .65em .8em; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .86em;
}
.formula-walk {
  display: grid; grid-template-columns: 1fr auto 1.25fr auto 1.1fr;
  gap: .65em; align-items: center;
}
.formula-walk > div { display: flex; flex-direction: column; gap: .22em; min-height: 3.2em; }
.formula-walk > div > span { color: var(--accent); font: 700 .5em var(--mono); }
.formula-walk b { font-size: .68em; }
.formula-walk small { color: var(--ink-dim); font-size: .46em; line-height: 1.4; }
.formula-walk i { color: var(--accent); font-style: normal; }

.kanon-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.kanon-method { display: flex; flex-direction: column; gap: .35em; padding: .7em 0; border-top: 2px solid var(--line); }
.kanon-method > span { color: var(--accent); font: 700 .5em var(--mono); letter-spacing: .08em; }
.kanon-method small { color: var(--ink-dim); font-size: .48em; line-height: 1.45; margin-top: .15em; }
.method-example { display: grid; grid-template-columns: 1fr auto 1fr; gap: .45em; align-items: center; font: .58em var(--mono); }
.method-example b:last-child { color: var(--accent-3); }
.method-example i { color: var(--accent); font-style: normal; }
.monotonicity-strip { display: grid; grid-template-columns: auto 1fr auto; gap: .7em; align-items: center; margin-top: .45em; font-size: .5em; color: var(--ink-faint); }
.monotonicity-strip b { padding: .35em .7em; text-align: center; color: var(--accent-3); border-bottom: 2px solid var(--accent-3); }
.question-route {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .42em;
}
.question-route > div {
  display: grid; grid-template-columns: 2.2em 1fr; grid-template-rows: auto auto;
  column-gap: .45em; padding: .42em .58em; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-soft); min-height: 2.55em;
}
.question-route span {
  grid-row: 1 / 3; align-self: center; color: var(--accent);
  font: 700 .55em var(--mono);
}
.question-route b { font-size: .58em; align-self: end; }
.question-route small { color: var(--ink-dim); font-size: .42em; line-height: 1.3; }
.recap-route { margin-top: .3em; }
.two-line-goal {
  display: grid; grid-template-columns: auto 1fr; gap: .45em .8em; align-items: center;
  margin-top: .75em; padding: .65em .8em; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(17,29,46,.7); font-size: .58em;
}
.two-line-goal span { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.two-line-goal p { margin: 0; font-size: 1em; }
.two-line-goal.route-goal { grid-template-columns: 1fr 1fr; column-gap: 1.2em; }

.participation-story,
.neighbor-pair,
.trust-pipelines,
.postprocess-flow,
.membership-game,
.sensitivity-story,
.budget-ledger {
  display: grid; align-items: center; gap: .65em;
}
.participation-story { grid-template-columns: 1fr auto 1fr; }
.story-world,
.dataset-world,
.trust-pipelines > div,
.membership-game > div:not(.game-model),
.sensitivity-story > div:not(.story-arrow),
.budget-ledger > div:not(.ledger-plus),
.postprocess-flow > div:not(.story-arrow) {
  display: flex; flex-direction: column; gap: .32em; padding: .85em 1em;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
}
.story-world span, .dataset-world span, .trust-pipelines small,
.membership-game span, .sensitivity-story span, .budget-ledger span, .postprocess-flow span {
  color: var(--ink-dim); font-size: .55em; line-height: 1.4;
}
.story-world b, .dataset-world b, .trust-pipelines b,
.membership-game b, .sensitivity-story b, .budget-ledger b, .postprocess-flow b { font-size: .68em; }
.story-equals { color: var(--accent-3); font: 700 1.1em var(--mono); }
.neighbor-pair { grid-template-columns: 1fr auto 1fr; }
.neighbor-change { display: flex; flex-direction: column; text-align: center; gap: .2em; color: var(--accent-2); }
.neighbor-change span { font: 700 .68em var(--mono); }
.neighbor-change b, .dataset-world small { color: var(--ink-faint); font-size: .45em; }
.trust-pipelines { grid-template-columns: 1fr 1fr; }
.mechanism-definition {
  display: grid; grid-template-columns: auto 1.25fr auto auto 1.15fr;
  gap: .55em; align-items: center; margin-bottom: .5em; padding: .42em .7em;
  border-left: 3px solid var(--accent); background: rgba(72,184,255,.07);
  font-size: .52em;
}
.mechanism-definition b { color: var(--accent); font-size: 1.2em; }
.mechanism-definition span { color: var(--ink); }
.mechanism-definition i { color: var(--accent); font-style: normal; }
.mechanism-definition strong { color: var(--accent-3); }
.mechanism-definition small { color: var(--ink-dim); font-size: .9em; line-height: 1.3; }
.distribution-comparison {
  padding: .45em .65em .5em; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft);
}
.distribution-legend {
  display: flex; align-items: center; gap: 1.2em; padding: 0 .35em .1em;
  color: var(--ink-dim); font-size: .52em;
}
.distribution-legend span { display: inline-flex; align-items: center; gap: .45em; }
.distribution-legend i { display: inline-block; width: 2.2em; border-top: 3px solid var(--accent); }
.distribution-legend .legend-dp i { border-color: var(--accent-4); border-top-style: dashed; }
.distribution-legend small { margin-left: auto; color: var(--ink-faint); font-size: .92em; }
.distribution-comparison > svg { display: block; width: 100%; height: 6.5em; }
.distribution-axis { stroke: var(--line); stroke-width: 2; }
.distribution-curve { fill: none; stroke-width: 4; }
.curve-d { stroke: var(--accent); }
.curve-dp { stroke: var(--accent-4); stroke-dasharray: 10 7; }
.event-band { fill: rgba(255,255,255,.045); stroke: rgba(255,214,122,.48); stroke-width: 2; stroke-dasharray: 5 5; }
.event-mass { stroke: none; }
.mass-d { fill: rgba(72,184,255,.32); }
.mass-dp { fill: rgba(187,140,255,.32); }
.distribution-axis-label { fill: var(--ink-faint); font: 17px var(--mono); }
.distribution-event-label { fill: var(--warn); font: 600 18px var(--font); }
.distribution-masses { display: grid; grid-template-columns: 1fr 1fr; gap: .65em; margin-top: .1em; }
.distribution-masses span {
  padding: .24em .55em; border-radius: 8px; text-align: center;
  font-size: .52em; font-family: var(--mono);
}
.mass-d-label { color: var(--accent); background: rgba(72,184,255,.08); }
.mass-dp-label { color: var(--accent-4); background: rgba(187,140,255,.08); }
.reveal-question {
  display: flex; justify-content: center; align-items: center; gap: .6em; margin-top: .7em;
  padding: .55em .8em; border-radius: 10px; background: rgba(72,184,255,.08); font-size: .62em;
}
.reveal-question span { color: var(--ink-dim); }

.column-roles { display: grid; grid-template-columns: .75fr auto 1.5fr auto 1fr; gap: .5em; align-items: center; }
.role-column { display: flex; flex-direction: column; gap: .25em; padding: .8em; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.role-column b { font-size: .65em; }
.role-column span { color: var(--accent); font-size: .48em; text-transform: uppercase; letter-spacing: .06em; }
.role-column small { color: var(--ink-dim); font-size: .45em; }
.role-column.sensitive span { color: var(--accent-2); }
.role-plus { color: var(--ink-faint); }
.link-story { display: grid; grid-template-columns: 1fr auto 1fr; gap: .55em; align-items: center; margin-top: .65em; text-align: center; font-size: .54em; color: var(--ink-dim); }
.link-story b { padding: .38em .65em; border-radius: 999px; color: var(--accent); background: rgba(72,184,255,.1); }

.class-example { display: grid; grid-template-columns: 1.7fr .8fr; gap: .8em; align-items: stretch; }
.mini-table { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .52em; }
.mini-table > div { display: grid; grid-template-columns: repeat(3, 1fr); padding: .24em .8em; border-top: 1px solid rgba(41,65,92,.55); }
.mini-table .mini-head { background: var(--panel); color: var(--ink-faint); border-top: 0; font-size: .9em; text-transform: uppercase; letter-spacing: .05em; }
.mini-table > div:nth-child(2), .mini-table > div:nth-child(5) { border-top: 3px solid var(--accent); }
.mini-table > div:nth-child(n+5) { background: rgba(255,155,115,.06); }
.class-labels { display: grid; grid-template-rows: 1fr 1fr; gap: .55em; }
.class-labels div { display: flex; flex-direction: column; justify-content: center; padding: .6em; border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: 0 10px 10px 0; }
.class-labels div:last-child { border-left-color: var(--accent-2); }
.class-labels b { font-size: .62em; }
.class-labels span { color: var(--ink-dim); font-size: .46em; }

.equivalence-demo { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .58em; }
.equivalence-demo > div { display: contents; }
.equivalence-demo span, .equivalence-demo b { padding: .28em .7em; border-top: 1px solid rgba(41,65,92,.55); }
.equivalence-head span { color: var(--ink-faint); background: var(--panel); border-top: 0; text-transform: uppercase; letter-spacing: .06em; }
.equivalence-row span, .equivalence-row b { font-family: var(--mono); }
.equivalence-brace b { grid-column: 1 / 3; color: var(--accent); border-top: 3px solid var(--accent); }
.equivalence-brace span { color: var(--ink-dim); border-top: 3px solid var(--accent); }

.hierarchy-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; align-items: end; }
.hierarchy { display: flex; flex-direction: column-reverse; gap: .22em; padding: .7em; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); text-align: center; }
.hierarchy b { order: 9; font-size: .66em; margin-bottom: .25em; }
.hierarchy span { padding: .38em .45em; border-radius: 8px; background: rgba(72,184,255,.1); color: var(--ink); font: .52em var(--mono); }
.hierarchy i { color: var(--ink-faint); font-size: .4em; font-style: normal; }
.pruning-board { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.prune-axis { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5em; align-items: center; padding: .8em; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.prune-axis .axis-title { grid-column: 1 / -1; color: var(--ink-faint); font-size: .48em; letter-spacing: .06em; text-transform: uppercase; }
.prune-axis small { grid-column: 1 / -1; color: var(--ink-dim); font-size: .46em; text-align: center; }
.prune-node { padding: .7em; border-radius: 9px; text-align: center; font-size: .55em; }
.prune-node.fail { color: var(--accent-2); background: rgba(255,155,115,.1); }
.prune-node.pass { color: var(--accent-3); background: rgba(105,223,178,.1); }
.prune-node.muted { color: var(--ink-dim); border: 1px dashed var(--line); }

.calculation-strip { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .55em; align-items: center; margin-top: .65em; padding: .55em .75em; border: 1px solid var(--line); border-radius: 10px; font-size: .58em; }
.calculation-strip span { color: var(--ink-faint); }
.mechanism-formula { display: grid; grid-template-columns: 1fr auto 1.8fr auto 1fr; align-items: center; gap: .5em; margin-bottom: .8em; }
.formula-piece { display: flex; flex-direction: column; gap: .2em; padding: .75em; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); text-align: center; font-size: .72em; }
.formula-piece small { color: var(--ink-faint); font-size: .65em; }
.formula-piece.noise { border-color: rgba(187,140,255,.45); }
.clip-example { display: flex; gap: .35em; flex-wrap: wrap; font: .5em var(--mono); }
.clip-example span { padding: .3em .55em; background: var(--panel); border-radius: 7px; }
.clip-example .clipped { color: var(--accent-2); }

.budget-ledger { grid-template-columns: 1fr auto 1fr auto 1.15fr; margin-bottom: .65em; }
.budget-ledger > div { text-align: center; }
.budget-ledger .ledger-total { border-color: rgba(105,223,178,.45); }
.postprocess-flow { grid-template-columns: .85fr auto 1fr auto 1.45fr; }
.postprocess-flow .dp-box { border-color: rgba(105,223,178,.45); }
.membership-game { grid-template-columns: 1fr .8fr 1fr; }
.membership-game > div:not(.game-model) { align-items: flex-start; text-align: left; }
.membership-game > div:not(.game-model) > b,
.membership-game > div:not(.game-model) > span { display: block; position: static; margin: 0; align-self: flex-start; }
.sensitivity-story { grid-template-columns: 1fr auto 1fr auto 1fr; }
.game-model { padding: .85em; text-align: center; border-radius: 50%; background: rgba(187,140,255,.12); color: var(--accent-4); font-size: .62em; }
.game-model small { color: var(--ink-dim); }
.principle-stack { display: grid; gap: .55em; }
.principle-stack > div { display: grid; grid-template-columns: auto 1.1fr 1.5fr; align-items: center; gap: .7em; padding: .65em .8em; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft); }
.principle-stack span { color: var(--accent); font: 700 .52em var(--mono); }
.principle-stack b { font-size: .64em; }
.principle-stack small { color: var(--ink-dim); font-size: .48em; line-height: 1.4; }
.final-answers { display: flex; justify-content: center; gap: .55em; flex-wrap: wrap; margin: .8em 0; }
.final-answers span { padding: .42em .7em; border: 1px solid var(--line); border-radius: 999px; color: var(--accent-2); font-size: .55em; }

/* ---------- 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); }

.original-table-layout { display: grid; grid-template-columns: 1.75fr .85fr; gap: .7em; align-items: stretch; }
.original-table-wrap { margin-top: 0; }
.original-data-table { font-size: .4em; }
.original-data-table th, .original-data-table td { padding-top: .25em; padding-bottom: .25em; }
.original-data-table .qi-heading { color: var(--accent); }
.original-data-table .sensitive-heading { color: var(--accent-2); }
.original-data-table td:nth-child(n+2):nth-child(-n+4) { background: rgba(72,184,255,.035); font-family: var(--mono); }
.original-data-table td:last-child { color: var(--accent-2); font-family: var(--mono); font-weight: 700; }
.original-table-key { display: flex; flex-direction: column; justify-content: space-between; gap: .45em; }
.original-table-key > div { padding: .5em .65em; border-left: 3px solid var(--line); background: rgba(17,29,46,.55); }
.original-table-key > div:first-child { border-left-color: var(--accent); }
.original-table-key > div:nth-child(2) { border-left-color: var(--accent-2); }
.original-table-key span { display: block; color: var(--accent); font: 700 .4em var(--mono); letter-spacing: .06em; }
.original-table-key > div:nth-child(2) span { color: var(--accent-2); }
.original-table-key b { display: block; margin: .12em 0; font-size: .56em; }
.original-table-key small { display: block; color: var(--ink-dim); font-size: .4em; line-height: 1.35; }

.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; }

/* ---------- 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; }
.eq.math.small { font-size: .66em; padding: .4em .8em; }
.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; }

/* Question rail: keeps the worksheet number visible on every worked slide. */
.part-rail {
  position: absolute; top: 0; right: 0; display: flex; gap: .3em;
  font-size: .32em; color: var(--ink-faint); letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.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; }
}

/* ==================================================================
   Week 4 lab styles
   ================================================================== */

/* ---------- Lab 1 · the Incognito lattice ---------- */

/* The lattice grows by a whole phase at a time, so the stage is capped and the
   panel scrolls internally — the verdict underneath must never be pushed off. */
.incognito-stage {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: .7em; align-items: stretch;
  /* A definite height, not just a cap: the grid row must be sized for the
     trace's flex child to resolve against, and it keeps the layout from
     jumping as phases appear or as k changes. */
  height: 400px; min-height: 0;
}
.incognito-stage > .lattice-panel { overflow-y: auto; min-height: 0; }
.lattice-panel {
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(17,29,46,.55); padding: .55em .7em;
}
.lattice-title {
  font-size: .38em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .3em;
}
.lattice-title b { color: var(--accent); font-weight: 600; }

/* One row per lattice level, so the bottom-up sweep reads upward. */
.lattice-level { display: flex; justify-content: center; gap: .3em; margin-bottom: .2em; flex-wrap: wrap; }

/* Phases read left to right; inside a phase the ladders sit side by side and
   grow upward, so "generalise further" is literally up the page. */
.lattice-phase { margin-bottom: .35em; }
.lattice-groups { display: flex; gap: .7em; align-items: flex-end; flex-wrap: wrap; }
.lattice-group { flex: 1 1 auto; min-width: 6.4em; display: flex; flex-direction: column; justify-content: flex-end; }
.lattice-group .lattice-title { text-align: center; margin: .15em 0 .3em; }

.node {
  font-family: var(--mono); font-size: .34em; padding: .26em .5em;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-dim); white-space: nowrap;
  transition: all .18s ease;
}
.node .node-k { opacity: .7; margin-left: .35em; }
.node.pass    { color: var(--accent-3); border-color: var(--accent-3); background: rgba(105,223,178,.12); }
.node.fail    { color: var(--accent-2); border-color: rgba(255,155,115,.45); background: rgba(255,155,115,.09); }
/* Never tested: ruled in by the rollup property rather than by a scan. */
.node.implied { color: var(--accent-3); border-style: dashed; background: rgba(105,223,178,.05); opacity: .82; }
.node.pruned  { color: var(--ink-faint); opacity: .4; text-decoration: line-through; }
.node.current { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.node.untested { opacity: .55; }
.node.minimal { box-shadow: 0 0 0 2px var(--accent-3); font-weight: 700; }

.lattice-legend { display: flex; gap: .8em; flex-wrap: wrap; font-size: .36em; color: var(--ink-faint); margin-top: .25em; }
.lattice-legend span::before {
  content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 3px;
  margin-right: .35em; vertical-align: -1px; border: 1px solid currentColor;
}
.legend-pass::before    { background: rgba(105,223,178,.5); color: var(--accent-3); }
.legend-fail::before    { background: rgba(255,155,115,.4); color: var(--accent-2); }
.legend-implied::before { background: transparent; color: var(--accent-3); border-style: dashed; }
.legend-pruned::before  { background: transparent; color: var(--ink-faint); }

/* The trace fills whatever height the stage gives it, rather than clipping a
   row halfway at a fixed max-height. */
.trace-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.k-certificate { flex: 0 0 auto; margin-bottom: .35em; padding-bottom: .35em; border-bottom: 1px solid var(--line); }
.k-certificate-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; margin-bottom: .3em; }
.k-certificate-head b { color: var(--ink); font: 600 .48em var(--mono); }
.k-certificate-head span { color: var(--ink-faint); font-size: .36em; }
.k-class-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2em .35em; max-height: 6.2em; overflow-y: auto; }
.k-class-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35em; padding: .2em .3em; border-left: 2px solid var(--line); background: rgba(9,17,31,.45); }
.k-class-row.smallest { border-left-color: var(--accent-2); background: rgba(255,155,115,.07); }
.k-class-pattern { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font: .34em var(--mono); }
.k-class-count { color: var(--ink); font: .36em var(--mono); }
.k-certificate-test { margin-top: .3em; padding: .25em .35em; text-align: center; border-radius: 7px; font: .42em var(--mono); }
.k-certificate-test.pass { color: var(--accent-3); background: rgba(105,223,178,.1); }
.k-certificate-test.fail { color: var(--accent-2); background: rgba(255,155,115,.1); }
.k-certificate-note { display: block; margin-top: .25em; color: var(--ink-faint); font-size: .34em; line-height: 1.3; }
.step-trace {
  font-size: .42em; line-height: 1.5; color: var(--ink-dim);
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .3em;
}
.step-trace div { padding: .18em 0; border-bottom: 1px solid rgba(41,65,92,.35); }
.step-trace .trace-dim { color: var(--ink-faint); }
.step-trace b { color: var(--accent); font-weight: 600; }
.step-trace .t-pass b { color: var(--accent-3); }
.step-trace .t-fail b { color: var(--accent-2); }

/* ---------- Lab 2 · randomised response ---------- */

.rr-flow { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.coin-tree { font-size: .46em; line-height: 1.6; color: var(--ink-dim); }
.coin-tree .branch { padding-left: 1.1em; border-left: 2px solid var(--line); margin: .25em 0; }
.coin-tree b { color: var(--accent); }

.rr-stage {
  display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 2.18fr);
  gap: .8em; align-items: stretch; min-height: 360px; margin-top: .3em;
}
.rr-metrics {
  grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr);
  gap: .35em; margin-top: 0;
}
.rr-metrics .metric { display: flex; flex-direction: column; justify-content: center; }
.rr-probability-panel {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: .55em .7em; border-left: 1px solid var(--line);
}
.rr-panel-title {
  margin-bottom: .8em; color: var(--ink-faint); font: 600 .42em var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}

.ratio-bars { display: grid; gap: .35em; margin-top: .3em; }
.ratio-row { display: grid; grid-template-columns: 11.6em 1fr 4.2em; align-items: center; gap: .5em; font-size: .44em; }
.ratio-label { color: var(--ink-dim); font-family: var(--mono); white-space: nowrap; }
.ratio-track { height: .95em; background: var(--panel); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.ratio-fill { height: 100%; border-radius: 4px; transition: width .2s ease; }
.ratio-fill.truth { background: linear-gradient(90deg, rgba(72,184,255,.55), var(--accent)); }
.ratio-fill.lie   { background: linear-gradient(90deg, rgba(255,155,115,.5), var(--accent-2)); }
.ratio-value { font-family: var(--mono); color: var(--ink); text-align: right; }
.rr-probability-panel .ratio-bars { gap: .9em; margin-top: 0; }
.rr-probability-panel .ratio-row { grid-template-columns: 18em minmax(0, 1fr) 4.5em; font-size: .5em; }
.rr-probability-panel .ratio-track { height: 1.25em; }
.rr-probability-panel .verdict { margin-top: 1em; }

/* ---------- Lab 4 · a mechanism that is not DP ---------- */

.dist-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: .4em; }
.dist-card { border: 1px solid var(--line); border-radius: 12px; padding: .55em .7em; background: rgba(17,29,46,.55); }
.dist-card h5 { margin: 0 0 .45em; font-size: .46em; color: var(--ink-dim); font-family: var(--mono); letter-spacing: .04em; }
.record-bar { display: grid; grid-template-columns: 3.4em 1fr 3.2em; gap: .45em; align-items: center; font-size: .42em; margin-bottom: .28em; }
.record-name { font-family: var(--mono); color: var(--ink-dim); }
.record-track { height: .8em; background: var(--panel); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.record-fill { height: 100%; background: var(--accent); }
.record-fill.absent { background: transparent; }
.record-prob { font-family: var(--mono); text-align: right; color: var(--ink); }
.record-bar.is-witness .record-name,
.record-bar.is-witness .record-prob { color: var(--accent-2); font-weight: 700; }
.record-bar.is-witness .record-fill { background: var(--accent-2); }

/* ---------- Lab 5 · what epsilon buys ---------- */

.belief-scale { margin-top: .5em; }
.belief-track {
  position: relative; height: 2.3em; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); overflow: hidden;
}
.belief-band {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,155,115,.3), rgba(255,155,115,.45));
  border-left: 2px solid var(--accent-2); border-right: 2px solid var(--accent-2);
  transition: all .2s ease;
}
.belief-prior { position: absolute; top: -.2em; bottom: -.2em; width: 2px; background: var(--accent); }
.belief-prior::after {
  content: "prior"; position: absolute; top: -1.15em; left: 50%; transform: translateX(-50%);
  font-size: .38em; color: var(--accent); font-family: var(--mono);
}
.belief-ticks { display: flex; justify-content: space-between; font-size: .38em; color: var(--ink-faint); font-family: var(--mono); margin-top: .25em; }
.belief-caption { font-size: .5em; color: var(--ink-dim); margin-top: .5em; text-align: center; }
.belief-caption b { color: var(--accent-2); }

/* ---------- Lab 7 · the privacy budget ---------- */

.budget-bar {
  display: flex; height: 1.9em; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); margin-top: .45em;
}
.budget-slice {
  display: grid; place-items: center; font-size: .38em; font-family: var(--mono);
  color: #0b0e14; border-right: 1px solid rgba(9,17,31,.5); overflow: hidden;
  transition: all .2s ease;
}
.budget-slice:last-child { border-right: 0; }
.budget-slice.spent { background: linear-gradient(180deg, var(--accent), rgba(72,184,255,.72)); }
.budget-slice.left  { background: rgba(41,65,92,.5); color: var(--ink-faint); }

/* ---------- shared small chrome ---------- */

.formula-strip {
  display: flex; gap: .5em; flex-wrap: wrap; align-items: center;
  font-size: .5em; color: var(--ink-dim); margin-top: .4em;
}
.formula-strip code { font-size: .95em; }
.assumption {
  margin-top: .5em; padding: .45em .8em; font-size: .5em; line-height: 1.45;
  border-left: 3px solid var(--accent-4); background: rgba(187,140,255,.08);
  border-radius: 0 10px 10px 0; color: var(--ink-dim);
}
.assumption b { color: var(--accent-4); }