/* Trap Map pages: shared look of every map (one page per exam domain).
   Tokens match the exam pages: light by default, dark on the Theme button.
   Used with /assets/js/trap-map.js. */

/* ============ tokens : light is the base (same as the exam page) ============ */
:root{
  --paper:#F0F9FF;
  --surface:#FFFFFF;
  --surface-2:#E7EFF5;
  --ink:#0C2E43;
  --ink-2:#3D5567;
  --ink-3:#405360;
  --rule:#BAE6FD;
  --rule-2:#8ECBEE;
  --brand:#065E8C;
  --brand-soft:#DDEEF8;
  --accent:#8A5206;
  --accent-soft:#F6EBD8;
  --btn-ink:#FFFFFF;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(6,45,70,.05), 0 12px 32px -18px rgba(6,45,70,.3);
}
:root[data-theme="dark"]{
  --paper:#081019;
  --surface:#101B27;
  --surface-2:#182836;
  --ink:#EAF2F8;
  --ink-2:#A8BECD;
  --ink-3:#93A9B8;
  --rule:#1E3141;
  --rule-2:#335066;
  --brand:#5CC8F5;
  --brand-soft:#0B2A3C;
  --accent:#F0B429;
  --accent-soft:#2C2211;
  --btn-ink:#0A1219;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -22px rgba(0,0,0,.9);
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink-3) 14%,transparent) 1px,transparent 0);background-size:22px 22px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.1}
button{font:inherit;color:inherit}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.trace{animation:none!important}}

/* ============ top bar (same as the exam page) ============ */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rule)}
.topbar-in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-family:var(--display);font-size:19px;white-space:nowrap}
.brand svg{width:24px;height:24px;flex:none;color:var(--brand)}
.spacer{flex:1}
.tbtn{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--rule);border-radius:7px;background:transparent;cursor:pointer;text-decoration:none}
.tbtn:hover{border-color:var(--rule-2);color:var(--ink);background:var(--surface-2)}
@media(max-width:480px){.tbtn.back{display:none}}

/* ============ hero ============ */
.wrap{max-width:1180px;margin:0 auto;padding:28px 16px 120px}
@media(min-width:1000px){.wrap{padding-right:420px}}
.flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);padding:6px 12px;border-radius:999px;margin-bottom:18px}
h1{font-size:clamp(36px,7vw,60px);letter-spacing:-.01em;max-width:16ch}
h1 em{color:var(--brand)}
.lede{color:var(--ink-2);max-width:58ch;margin:14px 0 22px;font-size:17px}

/* overview diagram: colors come from the tokens so both themes work */
.ovwrap{margin:0 0 30px}
.ovwrap figcaption{color:var(--ink-3);font-size:14px;margin-top:-6px}
.overview{width:100%;max-width:560px;display:block;margin:6px 0 18px}
.overview .root rect{fill:var(--surface);stroke:var(--brand);stroke-width:1.5}
.overview .root .t1{fill:var(--ink);font-family:var(--display);font-size:19px}
.overview .root .t2{fill:var(--brand);font-family:var(--sans);font-size:11px}
.overview .chipbtn rect{fill:var(--surface);stroke:var(--rule-2)}
.overview .chipbtn .t1{fill:var(--brand);font-family:var(--sans);font-weight:700;font-size:13px}
.overview .chipbtn .t2{fill:var(--ink-2);font-family:var(--sans);font-size:10.5px}
.overview .chipbtn{cursor:pointer}
.overview .chipbtn:hover rect,.overview .chipbtn:focus rect{stroke:var(--brand);stroke-width:2}
.overview .chipbtn:focus{outline:none}
.trace{stroke:var(--brand);stroke-width:1.5;fill:none;opacity:.55;stroke-dasharray:4 5;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}

.howto{margin:0 0 34px;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px;max-width:640px}
.howto li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.howto li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--brand);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:14px;margin-top:-1px}
.howto b{color:var(--ink);font-weight:600}

/* ============ the 10 trap pairs ============ */
.sech{font-size:clamp(28px,4.5vw,38px);margin-top:10px}
.secsub{color:var(--ink-2);margin:6px 0 16px;max-width:60ch}
.pairs{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.pairs{grid-template-columns:1fr 1fr}}
.pair{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:12px;background:var(--surface);padding:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;box-shadow:var(--shadow)}
.pair button{background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;padding:10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.pair button:hover{border-color:var(--accent)}
.pair strong{font-size:16px;font-weight:700}
.pair button span{color:var(--ink-2);font-size:14px;line-height:1.35}
.pair .vs{align-self:center;color:var(--accent);font-weight:700;font-size:14px}
.pair .tell{grid-column:1/-1;margin:2px 2px 0;font-size:14.5px}
.pair .tell b{color:var(--accent);font-weight:700}

/* ============ the full map ============ */
.mapintro{margin-top:46px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.jump a{color:var(--brand);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:14px;background:var(--surface)}
.jump a:hover{border-color:var(--brand)}
.progress{font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.bar{width:110px;height:6px;border-radius:3px;background:var(--rule);overflow:hidden;display:inline-block}
.bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.tagdemo,.node.hot::after{font-size:11px;font-weight:700;color:var(--btn-ink);background:var(--accent);border-radius:4px;padding:1px 6px}

.board{position:relative;padding:26px 0 8px 30px;margin-top:26px;scroll-margin-top:80px}
.board::before{content:"";position:absolute;left:9px;top:72px;bottom:0;width:2px;background:linear-gradient(var(--brand),color-mix(in srgb,var(--brand) 8%,transparent))}
.taskhead{display:flex;align-items:center;gap:14px;margin-left:-30px}
.taskchip{flex:none;width:58px;height:44px;border:1.5px solid var(--brand);border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;color:var(--brand);background:var(--paper);position:relative}
.taskchip::before,.taskchip::after{content:"";position:absolute;left:10px;right:10px;height:4px;background:repeating-linear-gradient(90deg,var(--brand) 0 3px,transparent 3px 8px);opacity:.6}
.taskchip::before{top:-6px}.taskchip::after{bottom:-6px}
.taskhead h2{font-size:clamp(26px,4vw,34px)}
.taskhead p{margin:2px 0 0;color:var(--ink-2);font-size:14px}
.cluster{position:relative;margin:22px 0 0;padding-left:14px}
.cluster::before{content:"";position:absolute;left:-21px;top:12px;width:28px;height:2px;background:color-mix(in srgb,var(--brand) 45%,transparent)}
.cluster::after{content:"";position:absolute;left:4px;top:8px;width:10px;height:10px;border-radius:50%;border:2px solid var(--brand);background:var(--paper)}
.cluster h3{font-family:var(--sans);font-size:17px;font-weight:700;margin:0 0 4px 12px}
.cluster .hint{margin:0 0 10px 12px;color:var(--ink-3);font-size:14px}
.nodes{display:flex;flex-wrap:wrap;gap:8px;margin-left:12px}
.node{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:8px 12px 8px 10px;cursor:pointer;font-size:15px;transition:border-color .15s,background .15s;text-align:left}
.node:hover{border-color:var(--brand)}
.node.hot::after{content:"Trap";margin-left:2px}
.node .pad{display:none}
.node.seen .pad{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--brand);color:var(--btn-ink);font-size:11px;font-weight:700}
.node.active{border-color:var(--brand);background:var(--surface-2);box-shadow:0 0 0 1px var(--brand)}
.node.flash{animation:flash 1s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 1px var(--brand)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 25%,transparent)}}

/* pipeline sequence */
.seq{display:flex;flex-wrap:wrap;margin-left:12px;align-items:stretch;row-gap:8px}
.seq .step{display:flex;align-items:center}
.seq .node{flex-wrap:wrap;max-width:180px;min-width:118px}
.seq .node small{flex-basis:100%;color:var(--ink-3);font-size:12px}
.seq .link{width:14px;height:2px;background:var(--brand);opacity:.5;margin:0 2px}
.seq .step:last-child .link{display:none}

/* ============ detail panel: bottom sheet on phones, side column on desktop ============ */
.panel{position:fixed;z-index:40;background:var(--surface);border:1px solid var(--rule);color:var(--ink);overflow:auto;
  left:0;right:0;bottom:0;max-height:72%;border-radius:16px 16px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -12px 40px rgba(6,45,70,.25)}
.panel.open{transform:none}
@media(min-width:1000px){
  .panel{left:auto;top:86px;right:16px;bottom:16px;width:380px;max-height:none;border-radius:14px;transform:none;box-shadow:var(--shadow)}
}
.panel .crumb{color:var(--ink-3);font-size:13px;margin:0 0 6px}
.panel h3{font-size:30px;margin-bottom:10px;padding-right:40px}
.panel .def{font-size:16px;margin:0 0 18px}
.close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--surface-2);cursor:pointer;font-size:18px;line-height:1}
@media(min-width:1000px){.close{display:none}}
.block{border-left:3px solid;padding:10px 14px;border-radius:0 8px 8px 0;margin:0 0 14px;background:var(--surface-2)}
.block h4{margin:0 0 4px;font-size:14px;font-weight:700}
.block p{margin:0;font-size:15px}
.block.trap{border-color:var(--accent)}.block.trap h4{color:var(--accent)}
.block.sig{border-color:var(--brand)}.block.sig h4{color:var(--brand)}
.xlinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.xlinks button{border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:transparent;border-radius:999px;padding:4px 11px;font-size:14px;cursor:pointer}
.xlinks button:hover{background:var(--accent-soft)}
.mark{width:100%;margin-top:6px;border:1px solid var(--brand);background:transparent;color:var(--brand);padding:11px;border-radius:8px;cursor:pointer;font-weight:700}
.mark.done{background:var(--brand);color:var(--btn-ink)}
.empty{color:var(--ink-2)}
.empty h3{font-size:26px;color:var(--ink)}

/* ============ call to action + footer ============ */
.cta-box{margin-top:60px;padding:24px;border:1px solid var(--rule);border-left:3px solid var(--brand);border-radius:0 12px 12px 0;background:var(--surface);box-shadow:var(--shadow);max-width:680px}
.cta-box h2{font-size:clamp(26px,4vw,32px);margin-bottom:8px}
.cta-box p{color:var(--ink-2);margin:0 0 16px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:9px;font-weight:600;text-decoration:none;border:1px solid var(--brand)}
.btn-a{background:var(--brand);color:var(--btn-ink)}
.btn-b{background:transparent;color:var(--brand)}
.foot{margin-top:40px;color:var(--ink-3);font-size:13px;max-width:62ch}

/* ============ navigation between the maps of one exam ============ */
.mapnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.mapnav a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-decoration:none;color:var(--ink-2);border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:6px 12px}
.mapnav a:hover{border-color:var(--brand);color:var(--brand)}
.mapnav a[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:var(--btn-ink)}

/* ============ locked map (no license key in this browser) ============ */
.locked{max-width:640px;margin:10px 0 0;padding:26px;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--surface);box-shadow:var(--shadow)}
.locked h2{font-size:clamp(26px,4vw,32px);margin-bottom:10px}
.locked p{color:var(--ink-2);margin:0 0 14px}
.locked .small{font-size:14.5px;margin:16px 0 0}
.wrap.narrow{padding-right:16px}