/* Security research mockup. Visual language taken from Op's two references:
   a light page, flat two-tone icons, stage groups in soft grey panels,
   elbow connectors, and one strong red for the route that actually worked. */
@font-face {
  font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url('/fonts/rubik-latin-wght-normal.woff2') format('woff2-variations');
}

/* Both themes from one set of tokens: light-dark() picks per color-scheme.
   No choice saved: follow the system. The toggle (theme.js) pins one. */
:root {
  color-scheme: light dark;
  --page-w: 1840px;  /* page width cap; header, menu rail and content all align to it */
  --bg: light-dark(#f4f6f9, #0f0f11);
  --paper: light-dark(#ffffff, #18181b);
  --panel: light-dark(#e8ecf1, #232327);
  --line: light-dark(#d3dae3, #2e2e33);
  --ink: light-dark(#1e2a3a, #ededef);
  --ink-2: light-dark(#4a5a70, #a3a3ab);
  --ink-3: light-dark(#7b8899, #74747c);
  --red: #e8333a;
  --red-hover: light-dark(#c9242b, #f2474d);
  --teal: #3cb7c4;
  --blue: #3d7fd6;
  --yellow: #f4c430;
  --grey: light-dark(#a3adba, #55555d);
  /* icons stay the same flat stickers in both themes: dark outline, bright fills */
  --ic-ink: light-dark(#1e2a3a, #0f0f11);
  --ic-white: light-dark(#ffffff, #f2f2f4);
  --ic-soft: light-dark(#e9ecf0, #d4d4d8);
  --ic-line: light-dark(#cfd6df, #a1a1aa);
  --ic-term: light-dark(#263445, #2b2b31);
  --ic-grey: light-dark(#9aa5b1, #8a8a93);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--ink); font-family: 'Rubik', system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* icon parts (classes added by build.py) */
.f-ink { fill: var(--ic-ink); } .s-ink { stroke: var(--ic-ink); }
.f-white { fill: var(--ic-white); } .f-soft { fill: var(--ic-soft); } .f-line { fill: var(--ic-line); }
.f-term { fill: var(--ic-term); } .s-grey { stroke: var(--ic-grey); } .f-grey { fill: var(--ic-grey); }
.s-white { stroke: var(--ic-white); }

/* chrome */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  max-width: var(--page-w); margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 2.5rem);
}
.mark { font-weight: 800; font-size: 1.2rem; text-decoration: none; letter-spacing: -0.01em; }
.top nav { display: flex; gap: 1.6rem; }
.top nav a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.top nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--red); }
.top-right { display: flex; align-items: center; gap: 1.6rem; }
.theme {
  display: none; font: inherit; font-weight: 500; color: var(--ink-2); cursor: pointer;
  background: none; border: 0; padding: 0;
}
.js .theme { display: inline; }
.theme:hover { color: var(--ink); }
.theme:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

main { max-width: var(--page-w); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; }

.intro { padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); max-width: 46rem; }
.intro h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.intro p { margin-top: 0.9rem; font-size: 1.2rem; color: var(--ink-2); }

/* one chain */
.chain { background: var(--paper); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.chain-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.chain-head h2 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; }
.chain-sum { margin-top: 0.6rem; color: var(--ink-2); max-width: 44rem; }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
/* chips: small raised keycaps. A solid lower edge gives the depth, a 1px top
   highlight catches the light. */
.facts { row-gap: 0.55rem; }
.facts li {
  --cap: light-dark(#e6eaf0, #34343a);
  --cap-edge: light-dark(#bcc5d1, #0b0b0d);
  --cap-hi: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12));
  font-size: 0.85rem; font-weight: 500; line-height: 1.5; padding: 0.12rem 0.6rem; border-radius: 4px;
  background: var(--cap); color: var(--ink-2);
  box-shadow: inset 0 1px 0 var(--cap-hi), 0 3px 0 var(--cap-edge);
}
.facts .diff { color: #fff; --cap-hi: rgba(255, 255, 255, 0.25); }
.facts .diff-easy { --cap: #2f9e6e; --cap-edge: #1d6b49; }
.facts .diff-medium { --cap: #d68b1c; --cap-edge: #96600f; }
.facts .diff-hard { --cap: var(--red); --cap-edge: #a3191f; }
.facts .diff-insane { --cap: #7a3fd0; --cap-edge: #4f2490; }
.read {
  align-self: center; flex: none; text-decoration: none; font-weight: 600; color: #fff; background: var(--red);
  padding: 0.65rem 1.2rem; border-radius: 12px;
}
.read:hover, .read:focus-visible { background: var(--red-hover); }

.chain-scroll { margin-top: 1.75rem; overflow-x: auto; }
.chain-svg { display: block; width: 100%; min-width: 860px; height: auto; }
.st-hex { fill: var(--ink); }
.st-num { fill: var(--paper); font-weight: 700; font-size: 16px; }
.st-name { fill: var(--ink); font-weight: 600; font-size: 18px; }
.panel { fill: var(--panel); }
.edge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.edge.route { stroke: var(--red); stroke-width: 4; }
.edge.dead { stroke: var(--grey); stroke-width: 2.5; stroke-dasharray: 6 7; }
.ah-route { fill: var(--red); }
.ah-dead { fill: var(--grey); }
.tile-label { fill: var(--ink); font-size: 17px; font-weight: 500; }
.tile.is-dead use { opacity: 0.45; filter: grayscale(1); }
.tile.is-dead .tile-label { fill: var(--ink-3); }
.badge { fill: var(--red); stroke: var(--paper); stroke-width: 3; }
.badge-n { fill: #fff; font-size: 14px; font-weight: 700; }
.badge-dead { fill: var(--grey); stroke: var(--paper); stroke-width: 3; }
.badge-x { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }

.key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1rem; font-size: 0.9rem; color: var(--ink-2); }
.key li { display: inline-flex; align-items: center; gap: 0.5rem; }
.key-route { width: 28px; height: 4px; border-radius: 2px; background: var(--red); }
.key-dead { width: 28px; height: 0; border-top: 2.5px dashed var(--grey); }
.key-badge { width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 700; display: inline-grid; place-items: center; }

.chain-notes { display: grid; gap: 2rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .chain-notes { grid-template-columns: 2fr 1fr; } }
.chain-notes h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.9rem; }
.steps { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 0.8rem; }
.step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; }
.steps p, .deads p { color: var(--ink-2); font-size: 0.95rem; }
.deads { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.deads li { padding-left: 0.9rem; border-left: 3px dashed var(--grey); }

/* index of all write-ups, each with its route in miniature */
.index { margin-top: 3.5rem; }
.index h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
.rows { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  background: var(--paper); border-radius: 16px; padding: 1rem 1.25rem;
}
.row-title { font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.row-title:hover, .row-title:focus-visible { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.row .facts { margin-top: 0.3rem; }
.mini { display: block; flex: none; }
.mini-line { stroke: var(--red); stroke-width: 3; }
.mini-bg { fill: var(--panel); }

.foot { max-width: var(--page-w); margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem; color: var(--ink-3); font-size: 0.9rem; }
.foot:empty { padding: 0; }

a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---- header options (comparison page) ---------------------------------- */
.options { padding-top: 1rem; }
.opt-label { margin: 2.5rem 0 0.75rem; color: var(--ink-3); font-size: 0.95rem; }
.options .opt-label:first-child { margin-top: 0.5rem; }
.tlink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tlink:hover, .tlink:focus-visible { color: var(--red); }
.dtext { font-weight: 600; }
.d-easy { color: #2f9e6e; } .d-medium { color: #d68b1c; } .d-hard { color: var(--red); } .d-insane { color: #8a52e0; }

/* A: plain text, two columns */
.hA { display: grid; gap: 1rem 3rem; align-items: end; }
@media (min-width: 900px) { .hA { grid-template-columns: auto minmax(0, 30rem); justify-content: space-between; } }
.hA h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.hA-facts { display: flex; gap: 1.1rem; margin-top: 0.7rem; color: var(--ink-2); }
.hA-right p { color: var(--ink-2); }
.hA-right .tlink { display: inline-block; margin-top: 0.5rem; }

/* B: solid band across the top of the card */
.chain-b { padding-top: 0; overflow: hidden; }
.hB-band {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; flex-wrap: wrap;
  background: var(--red); color: #fff; margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2.25rem));
  padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem);
}
.hB-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.1; }
.hB-facts { display: flex; gap: 1.2rem; font-weight: 500; opacity: 0.92; }
.hB-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; flex-wrap: wrap; margin-top: 1.1rem; }
.hB-sub p { color: var(--ink-2); max-width: 46rem; }

/* C: spec row */
.hC h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.spec { display: flex; flex-wrap: wrap; margin-top: 1.1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec > div { padding: 0.7rem 1.6rem 0.7rem 0; margin-right: 1.6rem; border-right: 1px solid var(--line); }
.spec > div:last-child { border-right: 0; margin-left: auto; margin-right: 0; padding-right: 0; align-self: center; }
.spec dt { font-size: 0.8rem; color: var(--ink-3); }
.spec dd { margin: 0; font-weight: 600; font-size: 1.05rem; }
.spec-a { color: var(--accent, #e5484d); text-decoration: none; border-bottom: 1px solid transparent; }
.spec-a:hover { border-bottom-color: currentColor; }
.hC-sum { margin-top: 0.9rem; color: var(--ink-2); max-width: 46rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main > .chain:first-of-type { margin-top: 0.75rem; }

/* ---- left-side menu ------------------------------------------------------ */
.layout { max-width: var(--page-w); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: grid; gap: 2rem; }
.layout > main { max-width: none; margin: 0; padding: 0 0 4rem; min-width: 0; }
.layout .chain { margin-top: 0.75rem; }
.hC h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.chain-notes h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.9rem; }

.menu, .menu-rail { display: none; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: 250px minmax(0, 1fr); }
  /* the rail fills the viewport height and centres the pane in it, whatever the scroll */
  .menu-rail {
    position: fixed; top: 0; bottom: 0; width: 250px; z-index: 2;
    left: calc(max(0px, (100% - var(--page-w)) / 2) + clamp(1rem, 4vw, 2.5rem));
    display: flex; align-items: center; pointer-events: none;
  }
  .menu {
    display: block; pointer-events: auto; width: 100%; max-height: calc(100vh - 11rem); overflow-y: auto;
    background: var(--paper); border-radius: 16px; padding: 1.1rem 0.75rem 1.2rem 1rem;
    box-shadow: 0 0 0 1px var(--line);
  }
  .menu-m { display: none; }
  .layout > main { grid-column: 2; }  /* the fixed rail leaves the grid, so place main explicitly */
  .menu .menu-list a { padding: 0.2rem 0.7rem; font-size: 0.95rem; }
  .menu .menu-sub { margin: 0.7rem 0 0.15rem; }
}
.menu-group + .menu-group { margin-top: 1.6rem; }
.menu-h { font-size: 1rem; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; padding-right: 0.5rem; }
.menu-h span, .menu-m summary span { font-size: 0.85rem; font-weight: 500; color: var(--ink-3); }
.menu-sub { font-size: 0.82rem; font-weight: 600; margin: 0.9rem 0 0.3rem; }
.menu-list { list-style: none; padding: 0; margin: 0.35rem 0 0; display: grid; gap: 1px; }
.menu-list a {
  display: block; text-decoration: none; color: var(--ink-2); padding: 0.32rem 0.7rem; border-radius: 8px;
  border-left: 3px solid transparent;
}
.menu-list a:hover { color: var(--ink); background: var(--panel); }
.menu-empty { padding: 0.2rem 0.7rem; font-size: 0.9rem; font-style: italic; color: var(--ink-3); opacity: 0.7; }
.menu-list a[aria-current] { color: var(--ink); font-weight: 600; background: var(--panel); border-left-color: var(--red); border-radius: 2px 8px 8px 2px; }

/* narrow screens: the same menu, folded into a disclosure above the chain */
.menu-m { background: var(--paper); border-radius: 14px; padding: 0.2rem 1rem; }
.menu-m summary { cursor: pointer; font-weight: 700; padding: 0.7rem 0; display: flex; gap: 0.5rem; align-items: baseline; }
.menu-m[open] { padding-bottom: 1rem; }
.menu-m .menu-list a:hover, .menu-m .menu-list a[aria-current] { background: var(--panel); }

/* narrow screens: the spec row becomes a two-column grid instead of wrapping with stray dividers */
@media (max-width: 640px) {
  .spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .spec > div { border-right: 0; margin-right: 0; padding-right: 0; }
  .spec > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .spec-link:empty { display: none; }
  .spec > div:last-child { margin-left: 0; }
}

/* narrow screens: five nav items have to fit */
@media (max-width: 480px) {
  .top nav { gap: 0.4rem 1.05rem; flex-wrap: wrap; }
  .top-right { gap: 1.05rem; flex-wrap: wrap; }
}

/* collapsible menu groups: a chevron that turns when open */
.menu-h, .menu-sub { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; border-radius: 6px; }
.menu-h::-webkit-details-marker, .menu-sub::-webkit-details-marker { display: none; }
.menu-h::before, .menu-sub::before {
  content: ''; flex: none; width: 0.4rem; height: 0.4rem; margin: 0 0.15rem 0 0.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
details[open] > .menu-h::before, details[open] > .menu-sub::before { transform: rotate(45deg); }
.menu-h { padding: 0.25rem 0.5rem 0.25rem 0; }
.menu-h span { margin-left: auto; }
.menu-sub { padding: 0.2rem 0; margin: 0.35rem 0 0 0.9rem; }
.menu .menu-sub { margin: 0.35rem 0 0 0.9rem; }
.menu-sub span { font-weight: 500; color: var(--ink-3); }
.menu-h:hover { color: var(--ink); } .menu-sub:hover { filter: brightness(1.2); }
.menu-h:focus-visible, .menu-sub:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.menu-subg .menu-list { margin-left: 0.9rem; }
.menu-group + .menu-group { margin-top: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .menu-h::before, .menu-sub::before { transition: none; } }

/* ---- HTB profile card, under the wordmark ---------------------------------- */
.htb-card { background: var(--paper); border-radius: 16px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 0 0 1px var(--line); align-self: start; }
.htb-id { display: flex; align-items: center; gap: 0.75rem; }
.htb-id img { width: 52px; height: 52px; border-radius: 12px; background: var(--panel); flex: none; }
.htb-name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.htb-where { font-size: 0.82rem; color: var(--ink-3); }
.htb-bio { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.95rem; }
.htb-labs { margin-top: 0.8rem; }
.htb-labs > p { font-size: 0.8rem; color: var(--ink-3); }
.htb-labs .facts { margin-top: 0.3rem; }
.htb-rare { margin-top: 0.85rem; font-size: 0.88rem; display: grid; }
.htb-rare strong { font-weight: 600; }
.htb-rare span { color: var(--ink-3); font-size: 0.82rem; }
.htb-link { display: inline-block; margin-top: 0.8rem; font-size: 0.92rem; }
/* wide screens: the card sits in the fixed rail above the menu and the pair is centred
   together, so they can never overlap; if space runs short the menu scrolls, not the card */
.menu-rail .htb-card { display: none; }
@media (min-width: 1100px) {
  .htb-m { display: none; }
  .menu-rail { flex-direction: column; justify-content: center; align-items: stretch; gap: 1rem; top: 4.75rem; bottom: 1rem; }
  .menu-rail .htb-card { display: block; flex: none; pointer-events: auto; }
  .menu-rail .menu { flex: 0 1 auto; min-height: 0; max-height: none; }
}

/* wide screens: keep the footer in the content column, clear of the fixed rail */
@media (min-width: 1100px) { .foot { padding-left: calc(clamp(1rem, 4vw, 2.5rem) + 250px + 2rem); } }

/* ---- HTB rank widget (HTB's own look: their card background and emblem) ---- */
.htb-xp { position: relative; overflow: hidden; padding: 0; background: #151f2e; color: #e8edf5; box-shadow: 0 0 0 1px #24324a; }
.xp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-in { position: relative; padding: 1.1rem 1.1rem 1rem; display: grid; gap: 0.75rem; }
.xp-emblem { width: 120px; height: 120px; justify-self: center; }
.xp-lvl { text-align: center; font-size: 2rem; font-weight: 700; line-height: 1; }
.xp-lvl span { font-size: 1.05rem; font-weight: 500; color: #8fa6c8; }
.xp-bar p { display: flex; justify-content: space-between; font-size: 0.8rem; color: #a9b8cf; margin-bottom: 0.3rem; }
.xp-bar p span:first-child { color: #e8edf5; font-weight: 600; }
.xp-bar progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: #2a3a55; overflow: hidden; }
.xp-bar progress::-webkit-progress-bar { background: #2a3a55; border-radius: 3px; }
.xp-bar progress::-webkit-progress-value { background: #9fef00; border-radius: 3px; }
.xp-bar progress::-moz-progress-bar { background: #9fef00; border-radius: 3px; }
.xp-rank { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; background: rgba(21, 31, 46, 0.85); border-radius: 8px; padding: 0.7rem 0.8rem; }
.xp-rank strong { display: block; font-size: 1.05rem; font-weight: 700; }
.xp-rank span { font-size: 0.78rem; color: #8fa6c8; }
.xp-grade { display: grid; justify-items: start; gap: 0.2rem; }
.gems { display: flex; gap: 0.35rem; padding-top: 0.3rem; }
.gems i { width: 0.6rem; height: 0.6rem; transform: rotate(45deg); border: 1.5px solid #b9c6da; }
.gems i.on { background: #ffffff; border-color: #ffffff; }
.xp-link { font-size: 0.82rem; color: #a9b8cf; text-decoration: underline; text-decoration-color: #9fef00; text-underline-offset: 3px; justify-self: start; }
.xp-link:hover, .xp-link:focus-visible { color: #ffffff; }
.htb-m .htb-xp { max-width: 420px; }

/* the whole badge is the link to the HTB profile */
a.htb-xp { display: block; text-decoration: none; color: #e8edf5; transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.htb-xp:hover { box-shadow: 0 0 0 2px #9fef00; transform: translateY(-1px); }
a.htb-xp:focus-visible { outline: 3px solid #9fef00; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.htb-xp { transition: none; } a.htb-xp:hover { transform: none; } }

/* wide screens: one fixed left column. Wordmark centred at the top, the badge pinned right
   under it, and the menu centred in the space left below the badge (so they never overlap). */
@media (min-width: 1100px) {
  .top { justify-content: flex-end; }
  .top .mark {
    position: fixed; z-index: 3; top: 1.4rem; width: 250px; text-align: center;
    left: calc(max(0px, (100% - var(--page-w)) / 2) + clamp(1rem, 4vw, 2.5rem));
  }
  .menu-rail { top: 4.3rem; bottom: 1rem; justify-content: flex-start; }
  .menu-rail .htb-card { width: 100%; }
  .menu-rail .menu { margin-block: auto; }
}

/* badge v2: rank + grade on one line, the handle under it; no wordmark above */
.xp-rank { grid-template-columns: 1fr auto; align-items: center; row-gap: 0.15rem; }
.xp-rank .gems { padding-top: 0; justify-self: end; }
.xp-rank .xp-handle { grid-column: 1 / -1; font-size: 0.9rem; color: #a9b8cf; }
.top { justify-content: flex-end; }
@media (min-width: 1100px) { .menu-rail { top: 1.4rem; } }

/* HTB avatar beside the handle */
.xp-rank .xp-handle { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.xp-handle img { width: 30px; height: 30px; border-radius: 7px; flex: none; box-shadow: 0 0 0 1px #2a3a55; }

/* merged left panel: badge on top (HTB's background at its natural size), menu below on the
   same navy base, so the two read as one card. Always dark, like HTB's card, in both themes.
   If the menu is taller than the window, only the menu part scrolls. */
@media (min-width: 1100px) {
  .menu-rail { top: 1.4rem; bottom: 1.4rem; justify-content: flex-start; }
  .rail-panel {
    --rail-grey: light-dark(#ffffff, #18181b);  /* matches the write-up container in each theme */
    pointer-events: auto; width: 100%; max-height: 100%; display: flex; flex-direction: column;
    background: var(--rail-grey); border-radius: 16px; overflow: hidden;
    box-shadow: 0 0 0 1px light-dark(#e2e2e5, #2a2a30);
  }
  .rail-panel .htb-card { flex: none; border-radius: 0; box-shadow: none; position: relative; }
  /* badge keeps the blue SVG at the top, then fades into the panel grey over the rank/profile */
  .rail-panel .htb-xp::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent 66%, var(--rail-grey) 100%);
  }
  .rail-panel .xp-in { position: relative; z-index: 2; }
  /* the rank row sits in the fade; drop its dark box in light mode and flip its text dark */
  .rail-panel .xp-rank { background: light-dark(transparent, rgba(21, 31, 46, 0.85)); }
  .rail-panel .xp-rank-link { color: light-dark(#1e2a3a, #e8edf5); }
  .rail-panel .xp-rank-link:hover { color: light-dark(#000000, #ffffff); }
  .rail-panel .xp-handle { color: light-dark(#4a5a70, #a9b8cf); }
  .rail-panel .gems i { border-color: light-dark(#5a6472, #b9c6da); }
  .rail-panel .gems i.on { background: light-dark(#1e2a3a, #ffffff); border-color: light-dark(#1e2a3a, #ffffff); }
  .rail-panel .xp-social a { color: light-dark(#5a6472, #8fa6c8); }
  .rail-panel .xp-social a:hover { color: light-dark(#000000, #ffffff); }
  .rail-panel a.htb-xp:hover { box-shadow: inset 0 0 0 2px #9fef00; transform: none; }
  .rail-panel a.htb-xp:focus-visible { outline-offset: -3px; }
  .rail-panel .menu {
    /* menu uses the normal theme text/line colours so it reads on the grey/white panel */
    --ink: light-dark(#1e2a3a, #ededef); --ink-2: light-dark(#4a5a70, #a3a3ab);
    --ink-3: light-dark(#7b8899, #74747c); --panel: light-dark(#e8ecf1, #232327);
    --line: light-dark(#d3dae3, #2e2e33);
    flex: 1 1 auto; min-height: 0; margin: 0; overflow-y: auto; max-height: none;
    background: transparent; border-radius: 0; box-shadow: none; color: var(--ink);
  }
}

/* panel top lines up with the content card: header (2.8rem padding + one 1.55rem line) + the card's 0.75rem gap */
@media (min-width: 1100px) { .menu-rail { top: 5.1rem; } }

/* badge = one big link to HTB (overlay), with the social icons sitting above it */
.htb-xp { display: block; position: relative; text-decoration: none; color: #e8edf5; }
.xp-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.xp-hit:focus-visible { outline: 3px solid #9fef00; outline-offset: -3px; }
.htb-xp:has(.xp-hit:hover) { box-shadow: 0 0 0 2px #9fef00; }
.rail-panel .htb-xp:has(.xp-hit:hover) { box-shadow: inset 0 0 0 2px #9fef00; }
.xp-social { margin-left: auto; display: flex; gap: 0.55rem; position: relative; z-index: 2; }
.xp-social a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: #8fa6c8; }
.xp-social a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.xp-social a:focus-visible { outline: 2px solid #9fef00; outline-offset: 1px; color: #ffffff; }

/* ======================= mobile ======================= */
/* kill chain: wide graph on larger screens, stacked graph on phones */
.chain-v { display: none; margin-top: 1.5rem; }
.chain-svg-v { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.chain-svg-v .st-name { paint-order: stroke; stroke: var(--paper); stroke-width: 8px; stroke-linejoin: round; }
@media (max-width: 700px) {
  .chain-scroll { display: none; }
  .chain-v { display: block; }
}

/* narrow screens: badge + Browse are one dark card, like the desktop panel */
@media (max-width: 1099px) {
  .top { justify-content: flex-start; }
  .m-panel {
    --ink: #e8edf5; --ink-2: #a9b8cf; --ink-3: #6f84a3; --panel: #22314a; --line: #24324a;
    background: #141c2e; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px #24324a;
  }
  .m-panel .htb-card { border-radius: 0; box-shadow: none; }
  .m-panel .htb-xp { max-width: none; }
  .m-panel .htb-xp:has(.xp-hit:hover) { box-shadow: inset 0 0 0 2px #9fef00; }
  .m-panel .menu-m { background: transparent; border-radius: 0; border-top: 1px solid #24324a; padding: 0.1rem 1.1rem; }
  .m-panel .menu-m[open] { padding-bottom: 0.9rem; }
  .m-panel .menu-m summary { color: var(--ink); }
  /* badge laid out sideways: emblem left, level + XP right, rank row underneath */
  .m-panel .xp-in { grid-template-columns: 92px 1fr; column-gap: 1rem; align-items: center; row-gap: 0.6rem; }
  .m-panel .xp-emblem { grid-row: 1 / span 2; width: 92px; height: 92px; }
  .m-panel .xp-lvl { text-align: left; font-size: 1.8rem; align-self: end; }
  .m-panel .xp-bar { grid-column: 2; align-self: start; }
  .m-panel .xp-rank { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .m-panel { display: none; } }

/* ---- mobile slide-out drawer (replaces the old inline menu dropdown) ------- */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink); padding: 0.35rem; margin-right: auto;
  border-radius: 8px; cursor: pointer;
}
.burger:hover { background: var(--panel); }
.burger:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(5, 10, 20, 0.55); }
.drawer {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: min(84vw, 320px); height: 100dvh; overflow-y: auto;
  background: var(--paper); border-right: 1px solid var(--line);
  padding: 0.75rem 1rem 2rem;
  transform: translateX(-100%); transition: transform 0.25s ease;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.35);
}
body.drawer-open { overflow: hidden; }
body.drawer-open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; font-weight: 700; color: var(--ink); }
.drawer-cnt { color: var(--ink-3); font-weight: 600; margin-left: 0.3rem; }
.drawer-x { background: none; border: 0; color: var(--ink-2); padding: 0.3rem; border-radius: 8px; cursor: pointer; }
.drawer-x:hover { background: var(--panel); color: var(--ink); }
.drawer-x:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.drawer .menu { display: block; max-height: none; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
@media (min-width: 1100px) { .burger, .scrim, .drawer { display: none; } }

/* ---- home: latest entry in full, then the recent list ---------------------- */
.recent { background: var(--paper); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.25rem); margin-top: 1.5rem; }
.recent h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.6rem; }
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list > li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 1.25rem;
  padding: 0.85rem 0; border-top: 1px solid var(--line);
}
.recent-list > li:first-child { border-top: 0; }
.recent-list time { color: var(--ink-3); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.recent-list a { font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.recent-list a:hover, .recent-list a:focus-visible { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.recent-list .facts { margin: 0; justify-content: flex-end; }
@media (max-width: 640px) {
  .recent-list > li { grid-template-columns: 1fr auto; }
  .recent-list time { grid-column: 1 / -1; }
}

/* home left panel: the three sections */
.menu-title { font-size: 1rem; font-weight: 700; padding: 0.25rem 0.5rem 0.25rem 0; }
.menu-sections a { display: flex; justify-content: space-between; align-items: baseline; }
.menu-sections a span { font-size: 0.85rem; color: var(--ink-3); }

/* only the rank name links to HTB, so a near-miss on X or GitHub does not open HTB */
.xp-rank-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(159, 239, 0, 0.55); text-decoration-thickness: 2px; text-underline-offset: 4px; justify-self: start; border-radius: 4px; }
.xp-rank-link:hover { text-decoration-color: #9fef00; color: #ffffff; }
.xp-rank-link:focus-visible { outline: 2px solid #9fef00; outline-offset: 3px; }

/* edge labels on the chain, so the flow between tiles reads */
.edge-label { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }

/* carried-over artifacts: key details + the fix */
.facts-block, .fix-block { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.facts-block h2, .fix-block h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.9rem; }
.facts-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55rem 1.75rem; margin: 0; }
.facts-dl > div { display: contents; }
.facts-dl dt { color: var(--ink-3); font-weight: 600; font-size: 0.92rem; }
.facts-dl dd { margin: 0; }
.fix-block p { color: var(--ink-2); max-width: 70ch; }
@media (max-width: 560px) {
  .facts-dl { grid-template-columns: 1fr; gap: 0; }
  .facts-dl > div { display: block; margin-bottom: 0.7rem; }
  .facts-dl dt { margin-bottom: 0.1rem; }
}

/* prose write-up (graph-less entries) */
.prose-body { margin-top: 1.5rem; }
.prose-sec { margin-top: 1.9rem; }
.prose-sec:first-child { margin-top: 0; }
.prose-sec h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.9rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.prose-sec p { color: var(--ink-2); max-width: 72ch; line-height: 1.7; margin-bottom: 0.85rem; }
.prose-sec p:last-child { margin-bottom: 0; }
.prose-list { color: var(--ink-2); max-width: 72ch; line-height: 1.7; margin: 0 0 0.85rem; padding-left: 1.2rem; list-style: none; }
.prose-list:last-child { margin-bottom: 0; }
.prose-list li { position: relative; margin-bottom: 0.6rem; }
.prose-list li:last-child { margin-bottom: 0; }
.prose-list li::before { content: ''; position: absolute; left: -1.2rem; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #e5484d); }
.prose-list li strong { color: var(--ink); font-weight: 650; }

/* code snippets in prose write-ups */
.prose-sec .code {
  margin: 0.9rem 0 0; padding: 0.9rem 1.1rem; border-radius: 10px; overflow-x: auto;
  background: light-dark(#f1f4f8, #0f1620); border: 1px solid var(--line);
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.86rem; line-height: 1.55; color: light-dark(#27313d, #cdd7e3);
  width: fit-content; max-width: 100%;  /* shrink to the code; scroll only if it overflows the container */
}
.prose-sec .code code { white-space: pre; }

/* figures + image slots in write-ups */
.prose-sec figure { margin: 1rem 0 0; }
.prose-sec figure img { display: block; width: 100%; max-width: 720px; border-radius: 10px; border: 1px solid var(--line); }
.prose-sec figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-3); }
.img-missing .img-ph { display: flex; align-items: center; justify-content: center; height: 150px; max-width: 720px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-3); font-size: 0.88rem; background: var(--panel); }
/* timeline */
.timeline { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.2rem 1.25rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline time { color: var(--ink-3); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.timeline p { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 0.05rem; } }

/* syntax highlighting (build-time tokens) */
.tok-c { color: light-dark(#6a737d, #6b7f95); font-style: italic; }
.tok-s { color: light-dark(#22863a, #9ece6a); }
.tok-k { color: light-dark(#d73a49, #c792ea); }
.tok-t { color: light-dark(#005cc5, #7dcfff); }
.tok-f { color: light-dark(#6f42c1, #82aaff); }
.tok-n { color: light-dark(#e36209, #ff9e64); }

/* vendor quote */
.prose-sec .quote { margin: 1rem 0 0; padding: 0.4rem 0 0.4rem 1.1rem; border-left: 3px solid var(--red); max-width: 72ch; }
.prose-sec .quote p { margin: 0; color: var(--ink); font-style: italic; }
.prose-sec .quote cite { display: block; margin-top: 0.55rem; font-style: normal; font-size: 0.85rem; color: var(--ink-3); }

/* a quote folded into a timeline entry */
.timeline li > div { min-width: 0; }
.timeline .quote { margin-top: 0.55rem; }
.timeline .quote p { font-size: 0.92rem; }

/* inline code in prose */
.prose-sec code.ic { font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; font-size: 0.9em; background: var(--panel); padding: 0.05rem 0.35rem; border-radius: 4px; border: 1px solid var(--line); }

/* serpentine desktop graph: scales to fit, never scrolls */
.chain-wrap { margin-top: 1.5rem; max-width: 820px; }
.chain-svg-s { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .chain-wrap { display: none; } }