/* COMP90086 · Workshop 2 — deck theme
   Same scaffolding as Workshops 3 and 4 (Inter, dark high-contrast, QR title),
   with the Week 2 teaching chrome (rails, trap slides, array grids) kept.
*/

:root{
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink:#0e1117;          /* ground */
  --ink-2:#161b25;        /* raised panel */
  --ink-3:#2b3546;        /* border */
  --fg:#e8ecf3;
  --fg-dim:#9aa7ba;
  --np:#4DABCF;           /* NumPy section */
  --plt:#F0A55C;          /* Matplotlib section */
  --cv:#E76E7A;           /* OpenCV section */
  --warn:#F2C14E;
  --ch-r:#E5484D;
  --ch-g:#4CAF62;
  --ch-b:#3E8FE0;
  --paper:#F5F1E6;        /* gotcha cards invert to this */
  --paper-ink:#1B1712;
}

/* ---------- base ---------- */
.reveal{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size:24px; font-weight:400; color:var(--fg);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.reveal-viewport{ background:var(--ink); }
.reveal .slides{ text-align:left; }
.reveal .slides section{ height:100%; padding:0; }

.reveal h1,.reveal h2,.reveal h3{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight:700;
  color:var(--fg); text-transform:none; letter-spacing:-0.02em;
  margin:0 0 .35em; line-height:1.08; text-shadow:none;
}
.reveal h1{ font-size:2.5em; }
.reveal h2{ font-size:1.55em; }
.reveal h3{ font-size:1.0em; letter-spacing:0; }
.reveal p{ margin:0 0 .6em; line-height:1.45; }
.reveal ul{ margin:0 0 .5em; padding-left:1.05em; list-style:none; }
.reveal ul li{ margin:0 0 .38em; line-height:1.4; position:relative; }
.reveal ul li::before{
  content:''; position:absolute; left:-.85em; top:.55em;
  width:5px; height:5px; background:var(--accent,var(--np)); border-radius:1px;
}
.reveal a{ color:var(--accent,var(--np)); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18); }
.reveal strong{ color:#fff; font-weight:600; }
.reveal em{ color:var(--accent,var(--np)); font-style:normal; font-weight:500; }
.diff-a,.diff-b{
  padding:0 .2em; border-radius:3px; font-weight:600;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.diff-a{ color:#79D2F0; background:rgba(77,171,207,.14); }
.diff-b{ color:#FF929D; background:rgba(231,110,122,.14); }
.reveal .progress{ color:var(--accent,var(--np)); height:3px; }
.reveal .slide-number{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:13px;
  background:none; color:var(--fg-dim); right:22px; bottom:14px;
}
.reveal .controls{
  color:var(--fg-dim);
  /* Reveal positions its arrow buttons to the left of a zero-width anchor. */
  left:112px; right:auto; bottom:18px;
}

/* ---------- slide chrome ---------- */
.pad{ padding:52px 68px 56px; height:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.rail{
  display:flex; align-items:center; gap:12px;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:14px; letter-spacing:.04em;
  margin-bottom:20px; flex:0 0 auto;
}
.tag{
  color:var(--ink); background:var(--accent,var(--np));
  padding:2px 9px; border-radius:3px; font-weight:700;
}
.crumb{ color:var(--fg-dim); text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.rail::after{ content:''; flex:1; height:1px; background:var(--ink-3); }
.body{ flex:1 1 auto; min-height:0; }

/* section accents */
section[data-sec="np"]{ --accent:var(--np); }
section[data-sec="plt"]{ --accent:var(--plt); }
section[data-sec="cv"]{ --accent:var(--cv); }

/* ---------- layout helpers ---------- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
.two > *,.three > *{ min-width:0; }
.two.wide-l{ grid-template-columns:1.25fr 1fr; }
.two.wide-r{ grid-template-columns:1fr 1.3fr; }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.center{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.small{ font-size:.82em; color:var(--fg-dim); line-height:1.4; }
.tiny{ font-size:.7em; color:var(--fg-dim); line-height:1.45; }
.lede{ font-size:1.12em; color:var(--fg); max-width:24em; }

.card{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:8px; padding:18px 20px;
}
.card h3{ margin-bottom:.4em; color:var(--accent,var(--np)); font-size:.82em;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- code ---------- */
.reveal pre{
  width:100%; margin:0 0 14px; box-shadow:none; font-size:1em;
  background:#0A1116; border:1px solid var(--ink-3); border-radius:8px;
}
.reveal pre code{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:17px; line-height:1.55;
  padding:16px 18px; max-height:none; overflow-x:auto; display:block;
  background:transparent; color:#D7E3EB; border-radius:8px;
}
.reveal code:not(pre code){
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.88em;
  background:rgba(77,171,207,.12); color:var(--accent,var(--np));
  padding:1px 6px; border-radius:4px;
}
.hljs-comment{ color:#7D95A6; font-style:italic; }
/* The pink OpenCV accent lands at 4.4:1 on the inline-code chip; one shade
   lighter clears 4.5. Trap slides keep their own dark-on-paper code colour. */
section[data-sec="cv"]:not([data-kind="trap"]) code:not(pre code){ color:#F08A94; }
.hljs-keyword,.hljs-literal{ color:#E76E7A; }
.hljs-string{ color:#7BD88F; }
.hljs-number{ color:#F0A55C; }
.hljs-built_in,.hljs-type{ color:#4DABCF; }
.hljs-title,.hljs-function .hljs-title{ color:#C6A0F6; }
.hljs-params{ color:#D7E3EB; }
.hljs-attr,.hljs-property{ color:#D7E3EB; }

/* ---------- out (console echo) ---------- */
.out{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:15px; line-height:1.5;
  color:var(--fg-dim); border-left:2px solid var(--ink-3); padding:2px 0 2px 14px;
  white-space:pre; margin:0 0 12px;
}

/* ---------- array grid (the recurring motif) ---------- */
.arr{
  display:grid; gap:3px; grid-template-columns:repeat(var(--cols),1fr);
  width:max-content; margin:0 0 6px;
}
.arr .c{
  width:38px; height:34px; display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:14px;
  background:#1A2934; color:#D6E1E7;
  border:1px solid #4B6575; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.arr .c.sel{
  background:var(--accent,var(--np)); color:var(--ink);
  border-color:var(--accent,var(--np)); font-weight:700;
}
.arr.sm .c{ width:22px; height:20px; font-size:0; border-radius:2px; }
.arr.xs{ gap:2px; }
.arr.xs .c{ width:13px; height:13px; font-size:0; border-radius:1px; }
.slicefig{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.slicefig code{ font-size:.8em; }
.figrow{ display:flex; gap:26px; flex-wrap:wrap; }

/* Keep denser teaching slides inside the 1280 × 720 stage. */
.pad.compact{ padding-top:44px; padding-bottom:44px; }
.compact .rail{ margin-bottom:14px; }
.compact .small{ font-size:.78em; line-height:1.34; }
.compact .tiny{ font-size:.67em; line-height:1.36; }
.compact .card{ padding:15px 18px; }
.compact pre code{ font-size:16px; line-height:1.48; padding:13px 16px; }
.pad.dense{ padding-top:38px; padding-bottom:38px; }
.dense .rail{ margin-bottom:12px; }
.dense h2{ font-size:1.43em; }
/* Floor for the densest slides: anything smaller stops being readable from
   the back of the room once the stage is projected. */
.dense .small{ font-size:.78em; line-height:1.32; }
.dense .tiny{ font-size:.69em; line-height:1.34; }
.dense .card{ padding:13px 16px; }
.dense pre code{ font-size:15px; line-height:1.4; padding:11px 14px; }
.camera-layout{ grid-template-columns:1.16fr 1fr; gap:28px; }
.camera-slide .question{ font-size:.76em; line-height:1.34; }
.camera-slide .hints{ margin-top:12px !important; }
.camera-slide .hints li{ margin-bottom:.25em; line-height:1.3; }
.camera-slide .diagram-card{ padding:14px 16px; }
.trap-range pre code{ font-size:16px; }
/* Popovers hang off the BOTTOM edge of the code block they belong to, so they
   never cover the code they are explaining. .pop-host is the anchor. */
.pop-host{ position:relative; }
.range-pop{
  position:absolute; z-index:4; right:10px; top:100%; margin-top:-10px;
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  padding:9px 11px; border:2px solid #12647F; border-radius:8px;
  background:#FFFDF6; box-shadow:0 8px 24px rgba(27,23,18,.18);
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:#1B1712;
}
.range-pop::before{
  content:''; position:absolute; right:22px; top:-11px;
  width:0; height:0; background:transparent;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-bottom:11px solid #12647F;
}
.range-pop .range-label{ color:#12647F; font-weight:700; font-size:13px; }
.range-pop .range-values{ display:flex; align-items:center; gap:9px; }
.range-pop .range-cells{ display:flex; gap:3px; }
.range-pop .range-cells span{
  width:25px; height:25px; display:flex; align-items:center; justify-content:center;
  border:1px solid #5E7D8F; border-radius:3px; background:#E9F3F6; font-size:12px;
}
.range-pop .range-meta{
  display:flex; justify-content:space-between; gap:12px;
  padding-top:5px; border-top:1px solid #B7C6CF;
  color:#485D69; font-size:10px; white-space:nowrap;
}
.reveal pre[data-pop]{ position:relative; overflow:visible; }
.code-pop{
  position:absolute; z-index:6; right:10px; top:100%; margin-top:-8px;
  max-width:78%; box-sizing:border-box; padding:9px 11px;
  border:2px solid #4DABCF; border-radius:8px;
  background:#FFFDF6; color:#1B1712;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12px;
  line-height:1.4; white-space:pre-wrap;
}
.code-pop::before{
  content:''; position:absolute; right:22px; top:-11px;
  width:0; height:0; border-left:9px solid transparent;
  border-right:9px solid transparent; border-bottom:11px solid #4DABCF;
}
.code-pop .pop-label{
  display:block; margin-bottom:4px; color:#12647F;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.code-pop .pop-body{ display:block; }
.code-pop-dismiss{ position:absolute; width:0; height:0; overflow:hidden; }
.shape-compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.shape-card{ min-height:245px; display:flex; flex-direction:column; align-items:flex-start; }
.shape-card .shape-title{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:1.35em; font-weight:700;
  color:var(--accent,var(--np)); margin-bottom:5px;
}
.shape-card .shape-badge{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:11px; color:var(--fg-dim);
  border:1px solid var(--ink-3); border-radius:99px; padding:2px 8px; margin-bottom:15px;
}
.shape-card .arr{ margin:auto 0 14px; }
.shape-card .shape-index{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12px; color:var(--fg);
  margin:0 0 8px;
}
.crop-math{ display:grid; grid-template-columns:.9fr 1.1fr; gap:26px; align-items:start; margin-top:14px; }
.math-step{ padding:13px 16px; }
.math-step .eq{
  display:block; margin-bottom:5px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:1.05em; color:var(--accent,var(--cv)); font-weight:700;
}
.math-step p{ margin:0; }
.intro-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.intro-choice{ min-height:150px; display:flex; flex-direction:column; }
.intro-choice .num{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:var(--accent,var(--np));
  font-size:1.7em; font-weight:700; line-height:1; margin-bottom:14px;
}
.portrait-layout{ display:grid; grid-template-columns:.92fr 1.08fr; gap:34px; align-items:stretch; }
.photo-frame{
  background:#091015; border:1px solid var(--ink-3); border-radius:9px;
  overflow:hidden; min-height:0; position:relative;
}
.photo-frame img{ width:100%; height:100%; display:block; object-fit:cover; }
.photo-frame .caption{
  position:absolute; left:14px; right:14px; bottom:12px; margin:0;
  padding:8px 10px; border-radius:5px; color:#fff;
  background:rgba(7,12,16,.82); font-size:.66em; line-height:1.3;
}
.agent-rule{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px;
  align-items:center; margin-top:22px;
}
.agent-rule .vs{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:var(--fg-dim); font-size:.72em; }
.photo-example{ display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; align-items:start; }
.photo-example pre code{ font-size:15px; line-height:1.45; }
.example-image{
  width:100%; max-height:330px; object-fit:cover; display:block;
  border:1px solid #4B6575; border-radius:7px; background:#091015;
}
.example-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.example-pair figure{ margin:0; }
.example-pair figcaption{
  margin-top:6px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:11px; color:var(--fg-dim); text-align:center;
}
.example-pair.crop-pair{ grid-template-columns:1.15fr .7fr; align-items:end; }
.crop-canvas{
  width:100%; height:auto; max-height:330px; display:block; object-fit:contain;
  border:1px solid #4B6575; border-radius:7px; background:#091015;
}
.crop-window{
  height:300px; overflow:hidden; position:relative; border-radius:7px;
  border:1px solid #4B6575; background:#091015;
}
.crop-window img{ width:150%; max-width:none; transform:translate(-27%,-6%); display:block; }
.example-canvas{
  width:100%; height:265px; object-fit:cover; display:block;
  border:1px solid #4B6575; border-radius:7px; background:#091015;
}
.image-comparison{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 10px;
}
.image-comparison figure{ margin:0; }
.image-comparison figure:last-child{
  grid-column:1 / -1; width:calc(50% - 5px); justify-self:center;
}
/* 4:3 matches the source photograph, so all three panels show the same framing. */
.image-comparison .example-canvas{ height:auto; aspect-ratio:4 / 3; object-fit:contain; }
.image-comparison .pixelated-image{
  image-rendering:pixelated;
}
.image-comparison figcaption{
  margin-top:6px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:11px; color:var(--fg-dim); text-align:center;
}

/* axis ticks around a grid */
.axed{ display:grid; grid-template-columns:auto auto; gap:6px; width:max-content; }
.axed .cols{ display:grid; gap:3px; grid-template-columns:repeat(var(--cols),1fr); }
.axed .rows{ display:grid; gap:3px; }
.axed .lbl{
  width:38px; height:16px; display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12px; color:var(--fg-dim);
}
.axed .rows .lbl{ width:20px; height:34px; }

/* ---------- gotcha cards (the inverted slides) ---------- */
section[data-kind="trap"]{ --accent:#8F4E12; }
section[data-kind="trap"] .pad{ background:var(--paper); color:var(--paper-ink); }
section[data-kind="trap"] h2{ color:var(--paper-ink); }
section[data-kind="trap"] .crumb{ color:#6B5F4E; }
section[data-kind="trap"] .tag{ background:#8F4E12; color:var(--paper); }
section[data-kind="trap"] .rail::after{ background:rgba(27,23,18,.18); }
section[data-kind="trap"] h3{ color:#744719; }
section[data-kind="trap"] .small,
section[data-kind="trap"] .tiny{ color:#5D5344; }
section[data-kind="trap"] .card{ background:rgba(27,23,18,.05); border-color:rgba(27,23,18,.14); }
section[data-kind="trap"] .card h3{ color:#8F4E12; }
section[data-kind="trap"] p,
section[data-kind="trap"] li{ color:var(--paper-ink); }
section[data-kind="trap"] strong{ color:#000; }
section[data-kind="trap"] .diff-a{ color:#12647F; background:rgba(18,100,127,.10); }
section[data-kind="trap"] .diff-b{ color:#A4293B; background:rgba(164,41,59,.10); }
section[data-kind="trap"] .out{ color:#5D5344; border-left-color:rgba(27,23,18,.2); }
section[data-kind="trap"] code:not(pre code){ background:rgba(27,23,18,.07); color:#8A4E13; }
/* keep the paper background when exporting to PDF */
section[data-kind="trap"] .pad{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.trap-flag{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight:700; font-size:.75em;
  letter-spacing:.16em; color:#8F4E12; margin-bottom:.5em;
}
/* side-by-side evidence photos on a gotcha slide */
.trap-figs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.trap-figs figure{ margin:0; }
.trap-figs img{
  width:100%; height:auto; display:block; border-radius:5px;
  border:1px solid rgba(27,23,18,.28);
}
.trap-figs figcaption{
  margin-top:5px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:10px; line-height:1.3; color:#5D5344; text-align:center;
}
/* the three single-channel views of the bird */
.chan-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.chan-strip figure{ margin:0; }
.chan-strip img{
  width:100%; height:auto; display:block; border-radius:4px; border:1px solid #4B6575;
}
.chan-strip figcaption{
  margin-top:5px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:10px; color:var(--fg-dim); text-align:center;
}

/* ---------- dividers ---------- */
section[data-kind="divider"] .pad{ justify-content:center; }
.div-num{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:1em; color:var(--accent,var(--np));
  letter-spacing:.2em; margin-bottom:14px;
}
.div-title{ font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight:700; font-size:4.2em;
  line-height:1; letter-spacing:-.03em; margin-bottom:.18em; }
.div-sub{ color:var(--fg-dim); font-size:1.05em; max-width:20em; }
.div-rule{ width:120px; height:4px; background:var(--accent,var(--np)); margin:26px 0 0; }

/* ---------- title ---------- */
.title-wrap{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.eyebrow{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:15px; letter-spacing:.2em;
  color:var(--fg-dim); text-transform:uppercase; margin-bottom:22px; }
.title-libs{ display:flex; gap:10px; margin-top:30px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:15px; }
.title-libs span{ padding:5px 12px; border-radius:4px; border:1px solid var(--ink-3); color:var(--fg-dim); }
.title-libs span.a{ border-color:var(--np); color:var(--np); }
.title-libs span.b{ border-color:var(--plt); color:var(--plt); }
.title-libs span.c{ border-color:var(--cv); color:var(--cv); }

/* ---------- misc bits ---------- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.9em; align-items:baseline; }
.kv code{ white-space:nowrap; }
.chip{
  display:inline-block; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.72em;
  padding:2px 8px; border-radius:99px; border:1px solid var(--ink-3); color:var(--fg-dim);
}
.swatch{ display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:6px; }
.roadmap{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
.roadmap .card{ border-top:3px solid var(--c,var(--ink-3)); }
table.plain{ width:100%; border-collapse:collapse; font-size:.84em; }
table.plain td{ padding:5px 10px 5px 0; border-bottom:1px solid var(--ink-3); vertical-align:top; }
table.plain td:first-child{ white-space:nowrap; width:1%; }
table.plain tr:last-child td{ border-bottom:none; }
.errlist{ display:flex; flex-direction:column; gap:14px; }
.compact .errlist{ gap:12px; }
.errlist .e{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:14px; line-height:1.35;
  color:#F3A1A9; background:rgba(231,110,122,.10);
  border-left:2px solid var(--cv); padding:5px 10px; border-radius:0 4px 4px 0;
}
.errlist .e.quiet{ color:var(--fg-dim); border-left-color:var(--fg-dim); background:rgba(147,167,180,.08); font-style:italic; }
.errlist p{ margin:.32em 0 0; }
section[data-kind="trap"] .chip{ border-color:rgba(27,23,18,.22); color:#5D5344; }
.reveal .footnote{ margin-top:auto; padding-top:14px; font-size:.62em; color:#7D95A6; }
svg .lbl{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12px; fill:var(--fg-dim); }
svg .lbl-b{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:13px; fill:var(--fg); font-weight:700; }
svg .axis{ stroke:#C3D0D7; stroke-width:1.5; }
@media (prefers-reduced-motion:reduce){ .reveal .slides section{ transition:none !important; } }

/* ---------- ?print-pdf handout ----------
   Fragments are flattened (pdfSeparateFragments:false), so the fade-in-then-out
   overlays would all print at once on top of the prose. Their content is only ever
   a restatement of what the code produces, so drop them from the handout. */
@media print{
  .code-pop, .range-pop, .code-pop-dismiss{ display:none !important; }
}
html.print-pdf .code-pop,
html.print-pdf .range-pop,
html.print-pdf .code-pop-dismiss{ display:none !important; }


/* ---------- short-deck extras ---------- */
.spine{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.spine .t{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-left:4px solid var(--tc,var(--np)); border-radius:6px; padding:14px 16px;
}
.spine .t .n{
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--tc,var(--np)); letter-spacing:.1em; margin-bottom:6px;
}
.spine .t .h{ font-weight:700; font-size:.9em; margin-bottom:5px; }
.spine .t .d{ font-size:.68em; color:var(--fg-dim); line-height:1.35; }
.remember{
  margin-top:auto; display:flex; align-items:center; gap:14px;
  padding:13px 18px; border-radius:8px;
  background:#1B1712; color:#F5F1E6;
}
.remember .lab{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; color:#F2C14E; white-space:nowrap;
}
.remember .txt{ font-weight:700; font-size:1.02em; line-height:1.25; }
.remember .txt code{ background:rgba(245,241,230,.12) !important; color:#FFD98A !important; font-size:.9em; }
.remember strong,
section[data-kind="trap"] .remember strong{ color:#FFFFFF; }
.remember em,
section[data-kind="trap"] .remember em{ color:#FFD98A; }
section:not([data-kind="trap"]) .remember{ background:var(--ink-2); border:1px solid var(--accent,var(--np)); }
section:not([data-kind="trap"]) .remember .txt{ color:var(--fg); }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.shot{ width:100%; height:auto; display:block; border-radius:6px; border:1px solid #4B6575; }
section[data-kind="trap"] .shot{ border-color:rgba(27,23,18,.28); }
.pixelated{ image-rendering:pixelated; }
.grow{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.mono{ font-family:var(--mono); }
section[data-kind="trap"] figcaption{ color:#5D5344; }
section[data-kind="trap"] svg .lbl{ fill:#5D5344; }
section[data-kind="trap"] svg .lbl-b{ fill:#1B1712; }
section[data-kind="trap"] .grow > svg{ width:100%; height:auto; }


/* ---------- Week 3/4 title + QR chrome ---------- */
.title-slide {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 52px 68px;
}
.title-slide .kicker {
  font-size: .55em; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent, var(--np)); font-weight: 600;
}
.title-slide h1 { margin: .25em 0 .1em; font-size: 2em; text-align: center; }
.title-slide .sub { color: var(--fg-dim); font-size: .9em; max-width: 34em; margin-left: auto; margin-right: auto; }
.title-rule {
  width: 74px; height: 3px; margin: 1em auto; border-radius: 3px;
  background: linear-gradient(90deg, var(--np), var(--plt), var(--cv));
}
.qr-invite {
  display: flex; align-items: center; justify-content: center;
  gap: .9em; margin-top: 1.1em; text-align: left;
}
.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; max-width: 26em; }
.qr-lead { font-size: .62em; font-weight: 600; color: var(--fg); }
.qr-url  { font-family: var(--mono, ui-monospace, monospace); font-size: .5em; color: var(--np); }
.pill {
  display: inline-block; font-size: .55em; padding: .18em .6em;
  border-radius: 999px; border: 1px solid var(--ink-3);
  color: var(--fg-dim); background: var(--ink-2); letter-spacing: .04em;
  font-family: var(--mono, ui-monospace, monospace);
}
.pill.np { color: var(--np); border-color: rgba(77,171,207,.45); }
.pill.plt { color: var(--plt); border-color: rgba(240,165,92,.45); }
.pill.cv { color: var(--cv); border-color: rgba(231,110,122,.45); }
.takeaway {
  margin-top: .9em; padding: .55em .9em; font-size: .82em;
  border-left: 3px solid var(--plt);
  background: rgba(242,166,90,.08); border-radius: 0 10px 10px 0;
  color: var(--fg);
}