/* ============================================================================
   Snyk × RMIT Cyber Day — merged workshop: interactive attack styles
   Layered on top of the presentation's inline styles. Adds the inline
   "execute station" cards and the docked mission-log + loot rail.
   ========================================================================== */
:root{ --gold:#fbbf24; --cyan:#38bdf8; --red:#fb5a5a; --green:#4ade80; }

/* ---------- interactive attack (execute) slides ---------- */
.slide.is-attack{ justify-content:flex-start; }   /* top-align tall interactive content */
.slide.is-attack h2{ margin-top:6px; }
/* merged explain+execute: each "move" stacks its explain panel over its run panel */
.moves .move{ display:flex; flex-direction:column; gap:14px; }
/* single-attack exploit slides: one card, capped width (not a lonely half-column) */
.split.moves.single{ display:block; max-width:840px; }

/* unified sectioned attack card: What / Description / Payload / ▶ / Output */
.atk-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(26,21,48,.7), rgba(12,10,20,.5)); }
.atk-card.done{ border-color:rgba(74,222,128,.5); }
.atk-card .asec{ padding:16px 20px; border-bottom:1px solid var(--line); }
.atk-card .alabel{ font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--pink); margin-bottom:6px; }
.atk-card .atitle{ font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.atk-card .asec p{ color:var(--muted); font-size:.88rem; line-height:1.45; }
.atk-card .asec p code{ color:var(--violet); }
.atk-card pre.req{ margin:0; font-family:var(--mono); font-size:.82rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  background:#07060d; border:1px solid var(--line); border-left:3px solid var(--pink); border-radius:8px; padding:11px 13px; color:#e6e1f5; }
.atk-card pre.req .method{ color:var(--violet); font-weight:700; }
.atk-card pre.req .pay{ color:var(--pink); font-weight:700; }
.atk-card pre.req .cmt{ color:#6b6390; }
.atk-card .arun{ display:flex; align-items:center; gap:13px; padding:16px 20px; }
.atk-card .btn-play{ width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer; font-size:1.05rem;
  border:1px solid var(--green); color:var(--green); background:rgba(74,222,128,.1); display:grid; place-items:center; transition:all .15s; }
.atk-card .btn-play:hover{ background:var(--green); color:#04060a; box-shadow:0 0 20px rgba(74,222,128,.4); }
.atk-card .btn-play:disabled{ opacity:.5; cursor:wait; }
.atk-card .arun .hint{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.atk-card .out{ display:none; margin:0; padding:12px 16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.8rem; max-height:32vh; overflow:auto; background:#050409; }
.atk-card .out.show{ display:block; }

/* Python "real attacker code" block shown inside the output terminals */
.pyblock{ margin:8px 0 10px; border:1px solid rgba(74,222,128,.3); border-radius:8px; overflow:hidden; }
.pyblock .pylabel{ font-family:var(--mono); font-size:.72rem; color:var(--green); background:rgba(74,222,128,.08); padding:5px 10px; border-bottom:1px solid rgba(74,222,128,.2); }
.pyblock pre{ margin:0; padding:10px 12px; font-family:var(--mono); font-size:.8rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; color:#d7f5e0; background:#04080a; }

/* vulnerable-vs-fixed code card (on the vuln intro slides) */
.code-card{ margin-top:16px; border:1px solid var(--line); border-radius:14px; overflow:hidden; max-width:1120px;
  background:linear-gradient(180deg, rgba(26,21,48,.6), rgba(12,10,20,.4)); }
.code-card .cc-head{ padding:11px 18px; border-bottom:1px solid var(--line); font-weight:700; font-size:1rem; }
.code-card .cc-grid{ display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:1000px){ .code-card .cc-grid{ grid-template-columns:1fr; } }
.code-card .cc-col{ padding:18px 22px; }
.code-card .cc-col.bad{ border-right:1px solid var(--line); }
@media(max-width:1000px){ .code-card .cc-col.bad{ border-right:none; border-bottom:1px solid var(--line); } }
.code-card .cc-label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; margin-bottom:10px; }
.code-card .cc-col.bad .cc-label{ color:var(--red); }
.code-card .cc-col.good .cc-label{ color:var(--green); }
.code-card pre.code{ margin:0 0 10px; font-family:var(--mono); font-size:.8rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  background:#07060d; border-radius:8px; padding:12px 14px; color:#e6e1f5; }
.code-card .cc-col.bad pre.code{ border-left:3px solid var(--red); }
.code-card .cc-col.good pre.code{ border-left:3px solid var(--green); }
.code-card pre.code .pay{ color:var(--red); font-weight:700; }
.code-card pre.code .okk{ color:var(--green); font-weight:700; }
.code-card .cc-col p{ color:var(--muted); font-size:.85rem; line-height:1.45; margin:0; }
.code-card .cc-col p code{ color:var(--violet); }
.code-card .dimtext{ color:#5a5378; }
.exec-grid{ display:grid; gap:22px; margin-top:28px; }
.exec-grid.two{ grid-template-columns:1fr 1fr; }
@media(max-width:1200px){ .exec-grid.two{ grid-template-columns:1fr; } }

.exec-card{
  border:1px solid var(--line); border-radius:14px; padding:22px 24px;
  background:linear-gradient(180deg, rgba(26,21,48,.7), rgba(12,10,20,.5));
  transition:border-color .2s;
}
.exec-card.done{ border-color:rgba(74,222,128,.5); }
.exec-card .req{
  font-family:var(--mono); font-size:.9rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  background:#07060d; border:1px solid var(--line); border-left:3px solid var(--pink);
  border-radius:9px; padding:12px 14px; color:#e6e1f5;
}
.exec-card .req .method{ color:var(--violet); font-weight:700; }
.exec-card .req .pay{ color:var(--pink); font-weight:700; }
.exec-card .req .cmt{ color:#6b6390; }
.exec-card .actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.exec-card .hint{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }

.btn-exec{
  cursor:pointer; font-family:var(--mono); font-weight:700; font-size:1rem; letter-spacing:.04em;
  border:1px solid var(--green); color:var(--green); border-radius:10px; padding:13px 26px;
  background:rgba(74,222,128,.08); transition:all .15s;
}
.btn-exec:hover{ background:var(--green); color:#04060a; box-shadow:0 0 26px rgba(74,222,128,.45); }
.btn-exec:disabled{ opacity:.5; cursor:wait; }
.btn-exec.xss{ border-color:var(--pink); color:var(--pink); background:rgba(255,92,138,.08); }
.btn-exec.xss:hover{ background:var(--pink); color:#04060a; box-shadow:0 0 26px rgba(255,92,138,.45); }

.exec-card .out{
  display:none; margin-top:16px; background:#050409; border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font-family:var(--mono); font-size:.82rem; max-height:38vh; overflow:auto;
}
.exec-card .out.show{ display:block; }
.out .line{ white-space:pre-wrap; word-break:break-word; margin-bottom:1px; animation:fadein .18s ease; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
.out .ok{ color:var(--green); } .out .bad{ color:var(--red); } .out .info{ color:var(--cyan); }
.out .loot{ color:var(--gold); } .out .dim{ color:var(--muted); }
/* sandboxed vulnerable page for the self-contained XSS demo */
.out .xss-frame{ margin:9px 0; }
.out .xss-frame iframe{ width:100%; height:118px; border:1px solid var(--line); border-radius:9px; background:#fff; }

/* data tables inside output */
table.data{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.74rem; }
table.data th,table.data td{ border:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top; }
table.data th{ color:var(--green); background:#07060d; position:sticky; top:0; }
table.data tr.hot td{ background:rgba(251,191,36,.08); }
table.data td.mono{ color:var(--gold); }
.tablewrap{ max-height:30vh; overflow:auto; border-radius:8px; }

/* ---------- docked mission-log + loot rail ---------- */
.dock{
  position:fixed; top:0; right:0; width:360px; height:calc(100vh - 52px); z-index:45;
  display:none; flex-direction:column; gap:14px; padding:18px 16px;
  background:linear-gradient(180deg, #0b0f16, #07060d); border-left:1px solid var(--line);
  box-shadow:-20px 0 50px rgba(0,0,0,.4); overflow:auto;
}
body.show-rail .dock{ display:flex; }
body.show-rail .hint-keys{ display:none; }
/* keep the active slide's content clear of the 360px docked rail */
body.show-rail .slide.active{ padding-right:392px; }
body.show-rail.rail-hidden .slide.active{ padding-right:clamp(32px,6vw,110px); }
/* terminal (rail) hide/show toggle */
body.rail-hidden .dock{ display:none; }
body.rail-hidden .slide.is-attack{ padding-right:clamp(32px,6vw,110px); }   /* reclaim the space */
#rail-show{ position:fixed; right:16px; bottom:60px; z-index:46; display:none; cursor:pointer;
  font-family:var(--mono); font-size:.8rem; color:var(--green); background:rgba(74,222,128,.1);
  border:1px solid var(--line); border-radius:9px; padding:9px 14px; }
#rail-show:hover{ background:rgba(74,222,128,.2); }
body.show-rail.rail-hidden #rail-show{ display:inline-flex; align-items:center; gap:6px; }

.dock .dock-h{ display:flex; align-items:center; justify-content:space-between; }
.dock .dock-h .t{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.dock .btn-reset{ font-family:var(--mono); cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:7px; padding:5px 10px; font-size:.72rem; }
.dock .btn-reset:hover{ border-color:var(--red); color:var(--red); }

.status{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.status .led{ width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none; }
.status.online .led{ background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 1.6s ease-in-out infinite; }
.status.offline .led{ background:var(--red); box-shadow:0 0 10px var(--red); }
.status .txt b{ color:var(--text); }
@keyframes pulse{ 50%{opacity:.4} }

.term{ border:1px solid var(--line); border-radius:11px; background:#050409; overflow:hidden; flex:1; min-height:180px; display:flex; flex-direction:column; }
.term .bar{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.term .bar .dots{ display:flex; gap:6px; } .term .bar .dots i{ width:10px; height:10px; border-radius:50%; }
.term .bar .dots i:nth-child(1){ background:#ff5f57; } .term .bar .dots i:nth-child(2){ background:#febc2e; } .term .bar .dots i:nth-child(3){ background:#28c840; }
.term .bar .tt{ font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.1em; }
.term .log{ padding:11px 13px; overflow:auto; font-family:var(--mono); font-size:.76rem; flex:1; }
.term .log .l{ white-space:pre-wrap; word-break:break-word; margin-bottom:2px; animation:fadein .18s; }
.term .log .l .ts{ color:#3f4a5c; }
.term .log .ok{ color:var(--green); } .term .log .bad{ color:var(--red); } .term .log .info{ color:var(--cyan); }
.term .log .loot{ color:var(--gold); } .term .log .warn{ color:var(--gold); } .term .log .sys{ color:var(--muted); }

.loot-panel{ border:1px solid rgba(251,191,36,.35); border-radius:11px; background:linear-gradient(180deg,rgba(251,191,36,.05),transparent); padding:14px; }
.loot-panel h3{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.loot-panel .empty{ color:var(--muted); font-size:.8rem; font-style:italic; }
.loot-panel .item{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid rgba(251,191,36,.15); animation:fadein .3s; }
.loot-panel .item:first-of-type{ border-top:none; }
.loot-panel .item .ic{ font-size:1.05rem; }
.loot-panel .item .d .k{ font-size:.82rem; color:#fff; font-weight:700; }
.loot-panel .item .d .v{ font-size:.75rem; color:var(--muted); word-break:break-word; }
.loot-panel .item .d .v b{ color:var(--gold); }

/* layered platform view: AI-native security built on the AppSec foundation */
.layers{ display:flex; flex-direction:column; gap:14px; margin-top:30px; max-width:1120px; }
.layers .cbadge{ display:inline-block; font-family:var(--mono); font-size:.85rem; letter-spacing:.05em; padding:6px 14px; border-radius:999px; }
.layers .layer{ border-radius:16px; padding:18px 22px 20px; }
.layers .layer.ai{ background:linear-gradient(180deg, rgba(255,92,138,.12), rgba(255,92,138,.03)); border:1px solid rgba(255,92,138,.42); }
.layers .layer.trad{ background:linear-gradient(180deg, rgba(167,139,250,.12), rgba(167,139,250,.03)); border:1px solid rgba(167,139,250,.4); }
.layers .layer.ai .cbadge{ color:var(--pink); background:rgba(255,92,138,.14); border:1px solid rgba(255,92,138,.45); }
.layers .layer.trad .cbadge{ color:var(--violet); background:rgba(167,139,250,.14); border:1px solid rgba(167,139,250,.42); }
.layers .lhead{ display:flex; align-items:center; gap:14px; margin-bottom:13px; flex-wrap:wrap; }
.layers .lnote{ color:var(--muted); font-size:.85rem; }
.layers .lrow{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; gap:12px; }
.layers .comp{ display:flex; flex-direction:column; gap:4px; justify-content:center; min-height:96px; padding:13px 16px; border-radius:10px; background:rgba(10,8,18,.5); border:1px solid var(--line); }
.layers .comp b{ font-size:.92rem; color:var(--text); }
.layers .comp span{ font-size:.76rem; color:var(--muted); line-height:1.35; }
@media(max-width:820px){ .layers .lrow{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.layers .layer.ai .comp{ border-left:3px solid var(--pink); }
.layers .layer.trad .comp{ border-left:3px solid var(--violet); }
.layers .layer-join{ text-align:center; font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.06em; padding:1px 0; }

/* full OWASP Top 10 list with highlighted demo targets (slide 10) */
.owasp10{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:28px; max-width:1080px; }
.owasp10 .oi{ display:flex; align-items:center; gap:12px; padding:9px 14px; border:1px solid var(--line);
  border-radius:9px; background:rgba(26,21,48,.4); }
.owasp10 .oi .id{ font-family:var(--mono); font-size:.8rem; color:var(--muted); min-width:30px; }
.owasp10 .oi .nm{ font-weight:600; font-size:.92rem; flex:1; }
.owasp10 .oi .tag{ font-family:var(--mono); font-size:.72rem; color:var(--pink); white-space:nowrap; }
.owasp10 .oi.hot{ border-color:var(--pink); background:rgba(255,92,138,.10); box-shadow:0 0 18px rgba(255,92,138,.12); }
.owasp10 .oi.hot .id{ color:var(--pink); font-weight:700; }
.owasp10 .oi.dim{ opacity:.5; }

/* product-release timeline (on the "Who is Snyk" slide) */
.timeline{ display:flex; align-items:flex-start; margin-top:30px; position:relative; max-width:1050px; }
.timeline::before{ content:""; position:absolute; left:8px; right:8px; top:34px; height:2px;
  background:linear-gradient(90deg, var(--purple), var(--pink)); opacity:.6; }
.timeline .tl{ flex:1; text-align:center; position:relative; padding:0 5px; }
.timeline .tl .yr{ font-family:var(--mono); font-weight:800; font-size:1rem;
  background:linear-gradient(100deg,var(--violet),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.timeline .tl .dot{ width:13px; height:13px; border-radius:50%; margin:11px auto 12px;
  background:var(--pink); box-shadow:0 0 12px rgba(236,72,153,.6); position:relative; z-index:1; border:2px solid var(--ink); }
.timeline .tl .lbl{ font-weight:700; font-size:.84rem; line-height:1.2; color:var(--text); }
.timeline .tl .det{ color:var(--muted); font-size:.7rem; margin-top:4px; line-height:1.3; }
.timeline .tl.now .dot{ background:var(--violet); box-shadow:0 0 16px rgba(196,181,253,.8); }

/* interactive Contents / table-of-contents rows (click to jump) */
.agenda.toc .row{ grid-template-columns:120px 1fr auto; cursor:pointer;
  transition:border-color .15s, transform .12s, background .15s; }
.agenda.toc .row:hover{ border-color:var(--purple); background:rgba(167,139,250,.09); transform:translateX(5px); }
.agenda.toc .row .jump{ align-self:center; color:var(--purple); font-size:1.4rem; opacity:.45; transition:opacity .15s, transform .15s; }
.agenda.toc .row:hover .jump{ opacity:1; transform:translateX(3px); }

/* the "launch chat" convenience link on AI attack slides */
.chatlink{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.82rem; color:var(--cyan);
  border:1px solid var(--line); background:rgba(56,189,248,.08); border-radius:8px; padding:8px 13px; text-decoration:none; }
.chatlink:hover{ background:rgba(56,189,248,.2); }

/* ---- slide 12 (SCA recon): attack on the left, results panel on the right ---- */
.atk-card.sca-2col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); align-items:stretch;
  max-width:none; flex:1 1 auto; min-height:0; margin-top:18px; }
.atk-card.sca-2col .acol-l{ display:flex; flex-direction:column; min-width:0; }
.atk-card.sca-2col .acol-l .arun{ margin-top:auto; }   /* anchor the ▶ button at the bottom */
.atk-card.sca-2col .acol-r{ position:relative; display:flex; min-width:0; min-height:0; border-left:1px solid var(--line); background:#050409; }
.atk-card.sca-2col .out{ border-top:none; margin:0; flex:1; min-height:0; max-height:none; }
.atk-card.sca-2col .out-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  color:var(--muted); font-family:var(--mono); font-size:.86rem; text-align:center; padding:22px; }
.atk-card.sca-2col .out-placeholder .oph-i{ font-size:1.7rem; opacity:.65; }
.atk-card.sca-2col .out-placeholder .oph-s{ font-size:.74rem; color:#5a5378; }
.atk-card.sca-2col:has(.out.show) .out-placeholder{ display:none; }
@media(max-width:1024px){
  .atk-card.sca-2col{ grid-template-columns:1fr; }
  .atk-card.sca-2col .acol-r{ border-left:none; border-top:1px solid var(--line); min-height:180px; }
}

/* ============================================================================
   Audience interactivity — predict beats · crowdsource AI · quiz · QR take-home
   ========================================================================== */

/* "Your turn" predict callout (web attack slides) */
.your-turn{ display:flex; align-items:center; gap:13px; margin-top:14px; max-width:1040px;
  border:1px solid rgba(56,189,248,.42); background:rgba(56,189,248,.08); border-radius:12px; padding:12px 18px; }
.your-turn .yt-badge{ flex:none; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); }
.your-turn .yt-q{ font-size:1rem; color:var(--text); line-height:1.4; }
.your-turn .yt-q b{ color:var(--cyan); }
.your-turn .yt-q code{ font-family:var(--mono); color:var(--violet); }

/* Crowdsource input (AI attack slides) — type what the room shouts, send to the bot */
.crowd{ margin-top:14px; max-width:860px; border:1px solid rgba(56,189,248,.42); background:rgba(56,189,248,.06); border-radius:12px; padding:14px 16px; }
.crowd .crowd-head{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px; }
.crowd .crowd-row{ display:flex; gap:10px; }
.crowd .crowd-input{ flex:1; min-width:0; font-family:var(--mono); font-size:.9rem; color:var(--text); background:#07060d; border:1px solid var(--line); border-radius:9px; padding:11px 13px; }
.crowd .crowd-input:focus{ outline:none; border-color:var(--cyan); }
.crowd .crowd-send{ flex:none; cursor:pointer; font-family:var(--mono); font-weight:700; font-size:.85rem; color:var(--cyan); background:rgba(56,189,248,.12); border:1px solid var(--cyan); border-radius:9px; padding:11px 16px; transition:all .15s; }
.crowd .crowd-send:hover{ background:var(--cyan); color:#04060a; }
.crowd .crowd-send:disabled{ opacity:.5; cursor:wait; }
.crowd .crowd-out{ display:none; margin-top:12px; font-family:var(--mono); font-size:.82rem; line-height:1.5; background:#050409; border:1px solid var(--line); border-radius:9px; padding:12px 14px; max-height:30vh; overflow:auto; }
.crowd .crowd-out.show{ display:block; }
.crowd .crowd-out .line{ white-space:pre-wrap; word-break:break-word; margin-bottom:5px; animation:fadein .18s ease; }
.crowd .crowd-out .dim{ color:var(--muted); } .crowd .crowd-out .info{ color:var(--cyan); }
.crowd .crowd-out .loot{ color:var(--gold); } .crowd .crowd-out .ok{ color:var(--green); } .crowd .crowd-out .bad{ color:var(--red); }

/* Quiz (knowledge-check slides) */
.quiz{ margin-top:24px; max-width:920px; display:flex; flex-direction:column; gap:26px; }
.quiz-q .q-text{ font-size:1.14rem; font-weight:700; margin-bottom:13px; line-height:1.35; }
.quiz-q .q-text .qn{ font-family:var(--mono); color:var(--purple); margin-right:9px; }
.quiz-q .q-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:820px){ .quiz-q .q-opts{ grid-template-columns:1fr; } }
.q-opt{ text-align:left; cursor:pointer; font-family:var(--sans); font-size:.98rem; color:var(--text);
  background:rgba(26,21,48,.5); border:1px solid var(--line); border-radius:10px; padding:13px 16px; transition:all .15s; }
.q-opt:hover{ border-color:var(--purple); background:rgba(167,139,250,.10); }
.quiz-q.answered .q-opt{ cursor:default; }
.quiz-q.answered .q-opt:hover{ border-color:var(--line); background:rgba(26,21,48,.5); }
.q-opt.correct{ border-color:var(--green); background:rgba(74,222,128,.15); color:#dcfce7; }
.q-opt.correct::after{ content:" ✓"; color:var(--green); font-weight:700; }
.q-opt.wrong{ border-color:var(--red); background:rgba(251,90,90,.15); color:#fecaca; }
.q-opt.wrong::after{ content:" ✗"; color:var(--red); font-weight:700; }
.q-exp{ display:none; margin-top:12px; font-size:.92rem; line-height:1.45; color:#bbf7d0;
  background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.3); border-radius:10px; padding:11px 15px; }
.q-exp.show{ display:block; }
.q-exp b{ color:var(--green); }

/* QR take-home row (wrap-up slide) */
.qr-row{ display:flex; gap:40px; margin-top:30px; flex-wrap:wrap; }
.qr-item{ display:flex; flex-direction:column; align-items:center; gap:11px; }
.qr-item img{ width:148px; height:148px; border-radius:12px; background:#fff; padding:8px; box-shadow:0 8px 26px rgba(0,0,0,.4); }
.qr-item .qr-cap{ font-family:var(--mono); font-size:.8rem; color:var(--muted); text-align:center; }
.qr-item .qr-cap b{ display:block; color:var(--violet); font-size:.92rem; margin-bottom:2px; }

/* ---- persistent corner logos (one each top corner, every slide bar the title) ---- */
.brandmark{ position:fixed; top:20px; z-index:41; height:34px; width:auto; display:block;
  opacity:.92; pointer-events:none; transition:opacity .3s ease, right .3s ease; }
.bm-snyk{ left:30px; }
.bm-rmit{ right:30px; }
body.show-rail .bm-rmit{ right:388px; }   /* slide clear of the 360px docked rail */
body.at-title .brandmark{ opacity:0; }

/* ---- "assembled app" as one 100% stacked bar (slide 5) ---- */
.stackbar-wrap{ margin-top:34px; max-width:1000px; }
.stackbar{ display:flex; height:70px; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.35); }
.stackbar .seg{ display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden;
  color:#120e1f; font-weight:700; font-size:.9rem; white-space:nowrap; flex:0 0 var(--w, auto); }
/* segments build out one at a time as the presenter advances */
.stackbar .seg.fragment{ opacity:1; filter:none; transform:none; transition:flex-basis .55s cubic-bezier(.4,0,.2,1); }
.stackbar .seg.fragment:not(.revealed){ flex-basis:0; }
.stackbar .seg span{ padding:0 8px; overflow:hidden; text-overflow:ellipsis; }
.stackbar .seg + .seg{ box-shadow:inset 1px 0 0 rgba(12,10,20,.4); }
.stackbar .seg.you{ background:linear-gradient(90deg,#ffffff,#e9defc); }
.stackbar .seg.oss{ background:linear-gradient(90deg,var(--purple),var(--violet)); }
.stackbar .seg.cont{ background:linear-gradient(90deg,#7c5cd6,#a78bfa); }
.stackbar .seg.iac{ background:linear-gradient(90deg,var(--magenta),var(--pink)); }
.stackbar .seg.ai{ background:linear-gradient(90deg,#f0abfc,#c4b5fd); }
.stackcap{ margin-top:12px; font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.stackcap b{ color:var(--text); }
.stackkey{ display:grid; grid-template-columns:1fr 1fr; gap:13px 38px; margin-top:26px; max-width:960px; }
.stackkey .ki{ display:grid; grid-template-columns:15px auto 1fr; align-items:center; gap:11px; }
/* legend rows reveal in lockstep with their bar segment */
.stackkey .ki[data-mirror]{ opacity:.12; filter:blur(.4px); transition:opacity .35s ease, filter .35s ease; }
.stackkey .ki[data-mirror].revealed{ opacity:1; filter:none; }
.stackkey .ki b{ font-size:1rem; white-space:nowrap; }
.stackkey .ki i{ color:var(--muted); font-style:normal; font-size:.85rem; }
.stackkey .sw{ width:14px; height:14px; border-radius:4px; }
.stackkey .sw.you{ background:linear-gradient(135deg,#ffffff,#e9defc); }
.stackkey .sw.oss{ background:linear-gradient(135deg,var(--purple),var(--violet)); }
.stackkey .sw.cont{ background:linear-gradient(135deg,#7c5cd6,#a78bfa); }
.stackkey .sw.iac{ background:linear-gradient(135deg,var(--magenta),var(--pink)); }
.stackkey .sw.ai{ background:linear-gradient(135deg,#f0abfc,#c4b5fd); }
@media(max-width:820px){ .stackkey{ grid-template-columns:1fr; } }

/* ============================================================================
   CTF — "Operation Crown Jewels": scoreboard, flag toast, mission map, boards
   ========================================================================== */

/* ---- docked scoreboard header (top of the rail) ---- */
.scoreboard{ border:1px solid rgba(251,191,36,.35); border-radius:11px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(251,191,36,.07), transparent); }
.scoreboard .sb-row{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--muted); margin-bottom:11px; }
.scoreboard .sb-row b{ color:var(--gold); font-size:1.2rem; }
.pips{ display:flex; gap:6px; flex-wrap:wrap; }
.pips i{ width:23px; height:6px; border-radius:3px; background:rgba(255,255,255,.13); transition:all .3s; }
.pips i.lit{ background:var(--gold); box-shadow:0 0 9px var(--gold); }

/* ---- persistent FLAG-CAPTURED banner (top-centre; stays, updates on each capture) ---- */
.flag-banner{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:46;
  display:none; align-items:center; gap:14px; padding:9px 22px; border-radius:12px; color:#160f04;
  font-family:var(--mono); font-weight:700; white-space:nowrap; pointer-events:none;
  background:linear-gradient(100deg, var(--gold), var(--magenta)); box-shadow:0 10px 34px rgba(0,0,0,.5); }
.flag-banner.show{ display:flex; }
.flag-banner .fb-tag{ font-size:.74rem; letter-spacing:.09em; }
.flag-banner .fb-latest{ font-size:.98rem; }
.flag-banner .fb-pts{ font-size:.82rem; color:#fff; background:rgba(0,0,0,.28); padding:2px 11px; border-radius:999px; }
/* independent `scale` so the centring transform is untouched by the pop */
.flag-banner.pop{ animation:fbpop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes fbpop{ 0%{scale:1} 32%{scale:1.09} 100%{scale:1} }

/* ---- mission map (2 targets × flag cards; reflects live capture state) ---- */
.mmap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; max-width:1120px; }
@media(max-width:1000px){ .mmap{ grid-template-columns:1fr; } }
.mtarget{ border:1px solid var(--line); border-radius:14px; padding:15px 17px; background:rgba(26,21,48,.5); }
.mt-head{ display:flex; justify-content:space-between; align-items:baseline; font-weight:700; margin-bottom:12px; }
.mt-head span{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:560px){ .mgrid{ grid-template-columns:1fr; } }
.mapcard{ position:relative; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background:rgba(10,8,18,.5); display:flex; flex-direction:column; gap:2px; transition:all .3s; }
.mapcard .mc-n{ font-family:var(--mono); font-size:.7rem; font-weight:700; color:var(--pink); }
.mapcard .mc-name{ font-weight:700; font-size:.9rem; }
.mapcard .mc-owasp{ font-family:var(--mono); font-size:.66rem; color:var(--muted); }
.mapcard .mc-pts{ position:absolute; top:9px; right:12px; font-family:var(--mono); font-size:.7rem; color:var(--muted); }
.mapcard::after{ content:"🔒"; position:absolute; bottom:8px; right:11px; font-size:.78rem; opacity:.45; }
.mapcard.captured{ border-color:var(--gold); background:rgba(251,191,36,.1); }
.mapcard.captured .mc-n{ color:var(--gold); }
.mapcard.captured::after{ content:"🏴"; opacity:1; }

/* ---- defence flag board (red CAPTURED → green CLOSED via fragment reveal) ---- */
.flagboard{ display:flex; flex-direction:column; gap:8px; margin-top:18px; max-width:1040px; }
.flagrow{ display:grid; grid-template-columns:42px 1fr 118px 1.1fr; gap:14px; align-items:center;
  border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px; padding:11px 16px;
  background:rgba(251,90,90,.06); transition:border-color .4s, background .4s; }
.flagrow.fragment{ opacity:1; filter:none; transform:none; }   /* board rows stay visible; reveal flips colour, not opacity */
.flagrow .fr-id{ font-family:var(--mono); font-weight:700; color:var(--pink); }
.flagrow .fr-name{ font-weight:700; font-size:.95rem; }
.flagrow .fr-name em{ display:block; font-style:normal; font-family:var(--mono); font-size:.7rem; color:var(--muted); font-weight:400; margin-top:2px; }
.flagrow .fr-state{ font-family:var(--mono); font-size:.76rem; font-weight:700; color:var(--red); }
.flagrow .fr-state::before{ content:"🏴 CAPTURED"; }
.flagrow .fr-fix{ font-family:var(--mono); font-size:.82rem; color:var(--muted); opacity:0; transition:opacity .4s; }
.flagrow.revealed, .flagrow.closed{ border-left-color:var(--green); background:rgba(74,222,128,.08); }
.flagrow.revealed .fr-state, .flagrow.closed .fr-state{ color:var(--green); }
.flagrow.revealed .fr-state::before, .flagrow.closed .fr-state::before{ content:"✓ CLOSED"; }
.flagrow.revealed .fr-fix, .flagrow.closed .fr-fix{ opacity:1; color:var(--green); }
.flagrow.locked{ opacity:.5; border-left-color:var(--muted); background:rgba(255,255,255,.02); }
.flagrow.locked .fr-state{ color:var(--muted); }
.flagrow.locked .fr-state::before{ content:"🔒 STILL OPEN"; }
.flagrow.locked .fr-fix{ opacity:0; }

/* ---- greenlight finale: all-green board with a one-shot sweep on slide enter ---- */
.greenboard .flagrow{ opacity:0; }
.slide.active .greenboard .flagrow{ animation:rowin .45s ease forwards; }
.slide.active .greenboard .flagrow:nth-child(1){ animation-delay:.04s }
.slide.active .greenboard .flagrow:nth-child(2){ animation-delay:.10s }
.slide.active .greenboard .flagrow:nth-child(3){ animation-delay:.16s }
.slide.active .greenboard .flagrow:nth-child(4){ animation-delay:.22s }
.slide.active .greenboard .flagrow:nth-child(5){ animation-delay:.28s }
.slide.active .greenboard .flagrow:nth-child(6){ animation-delay:.34s }
.slide.active .greenboard .flagrow:nth-child(7){ animation-delay:.40s }
.slide.active .greenboard .flagrow:nth-child(8){ animation-delay:.46s }
.slide.active .greenboard .flagrow:nth-child(9){ animation-delay:.52s }
.slide.active .greenboard .flagrow:nth-child(10){ animation-delay:.58s }
@keyframes rowin{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }

/* ---- MISSION COMPLETE "switch hats" scoreboard readback ---- */
.mission-banner{ display:inline-flex; flex-direction:column; gap:5px; margin-top:22px; padding:16px 24px; border-radius:14px;
  border:1px solid rgba(74,222,128,.4); background:rgba(74,222,128,.08); }
.mission-banner .mb-score{ font-family:var(--mono); font-size:1.5rem; font-weight:800; color:var(--green); }
.mission-banner .mb-sub{ color:#bbf7d0; font-size:.92rem; }
.hats{ margin-top:18px; font-family:var(--mono); font-size:.86rem; color:var(--cyan); letter-spacing:.04em; }

/* ---- phase kicker chip on attack/explain slides ---- */
.phase-tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); border:1px solid rgba(56,189,248,.35); background:rgba(56,189,248,.08);
  border-radius:999px; padding:4px 11px; }
.flag-name{ font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--gold);
  border:1px solid rgba(251,191,36,.35); background:rgba(251,191,36,.08); border-radius:999px; padding:4px 11px; }