/* ==========================================================================
   Pentest Toolkit — interface
   --------------------------------------------------------------------------
   Design rules this file follows, deliberately:
     · Colour carries meaning. Red, amber and green are reserved for verdicts.
       Nothing decorative is coloured, and there are no gradients.
     · Hairline borders instead of shadows and blur. Panels read as instrument
       surfaces, not floating cards.
     · Monospace for every machine-produced value and every field label, so
       data and chrome are visually separable at a glance.
     · Full-width app shell. A persistent rail on the left, content filling
       the remaining viewport.
   No external fonts, no CDN, no third-party requests of any kind.
   ========================================================================== */

:root {
  /* Neutral scale — warm-neutral, no blue cast */
  --n-000: #0a0a0b;
  --n-050: #0f0f11;
  --n-100: #141417;
  --n-150: #1a1a1e;
  --n-200: #212127;
  --n-300: #2b2b33;
  --n-400: #3a3a44;
  --n-500: #55555f;
  --n-600: #7c7c88;
  --n-700: #a1a1ac;
  --n-800: #c9c9d1;
  --n-900: #edeef1;

  --bg:        var(--n-000);
  --panel:     var(--n-100);
  --panel-2:   var(--n-150);
  --raised:    var(--n-200);
  --line:      #23232a;
  --line-2:    #2e2e37;

  --text:      var(--n-900);
  --text-2:    var(--n-700);
  /* text-3 / text-4 are pinned, not taken from the surface scale: n-600 and
     n-500 measured 4.46:1 and 2.50:1 against the panel, both under WCAG AA
     for small text. These clear 4.5:1 on every surface they appear over. */
  --text-3:    #94949f;
  --text-4:    #82828e;

  /* Brand — used only for identity and active state */
  --brand:     #f5b942;
  --brand-dim: rgba(245, 185, 66, 0.12);
  --brand-ln:  rgba(245, 185, 66, 0.34);

  /* Semantics — verdicts only */
  --danger:    #f0484f;
  --danger-bg: rgba(240, 72, 79, 0.10);
  --danger-ln: rgba(240, 72, 79, 0.32);
  --warn:      #f5b942;
  --warn-bg:   rgba(245, 185, 66, 0.10);
  --warn-ln:   rgba(245, 185, 66, 0.30);
  --safe:      #3ecf8e;
  --safe-bg:   rgba(62, 207, 142, 0.10);
  --safe-ln:   rgba(62, 207, 142, 0.30);
  --info:      #5a9dff;
  --info-bg:   rgba(90, 157, 255, 0.10);
  --info-ln:   rgba(90, 157, 255, 0.28);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --r:    6px;
  --r-sm: 4px;

  --rail: 236px;
  --bar:  52px;

  --topbar-bg: rgba(10, 10, 11, 0.92);
  --btn-hi:    #ffffff;
  --on-solid:  #ffffff;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Light theme.
   theme.js always resolves to an explicit data-theme attribute before first
   paint, so one dark block plus one light block covers every case — no
   duplicated prefers-color-scheme variant, and no flash of the wrong palette.
   The neutral scale inverts (000 = furthest-back surface, 900 = primary text),
   so every rule referencing it re-targets automatically. Semantic hues are
   restated rather than inverted: the dark-theme values are too light to hold
   contrast against white.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --n-000: #f8f8f6;
  --n-050: #f9f9f7;
  --n-100: #ffffff;
  --n-150: #fcfcfb;
  --n-200: #f0f0ec;
  --n-300: #e4e4de;
  --n-400: #cbcbc3;
  --n-500: #9d9d95;
  --n-600: #76767e;
  --n-700: #56565e;
  --n-800: #34343b;
  --n-900: #17171b;

  --bg:      #eeeeea;
  --panel:   #ffffff;
  --panel-2: #fcfcfb;
  --raised:  #f1f1ed;
  --line:    #e3e3dc;
  --line-2:  #d3d3ca;

  --text:   #17171b;
  --text-2: #4a4a53;
  --text-3: #6b6b74;
  --text-4: #6e6e78;   /* was #86868f — 3.61:1, under AA */

  /* Amber darkened to clear AA as text on both white panels and the
     off-white code surface, where the crafted PoC link is rendered in it.
     #a06f04 measured 4.40:1 / 4.14:1 — just short. */
  --brand:     #8f6300;
  --brand-dim: rgba(143, 99, 0, 0.10);
  --brand-ln:  rgba(143, 99, 0, 0.32);

  --danger:    #c22630;
  --danger-bg: rgba(194, 38, 48, 0.075);
  --danger-ln: rgba(194, 38, 48, 0.26);
  --warn:      #8a5d00;
  --warn-bg:   rgba(138, 93, 0, 0.075);
  --warn-ln:   rgba(138, 93, 0, 0.24);
  --safe:      #0b6b45;
  --safe-bg:   rgba(11, 107, 69, 0.075);
  --safe-ln:   rgba(11, 107, 69, 0.24);
  --info:      #1a54ad;
  --info-bg:   rgba(26, 84, 173, 0.075);
  --info-ln:   rgba(26, 84, 173, 0.24);

  --topbar-bg: rgba(255, 255, 255, 0.90);
  --btn-hi:    #000000;
  --on-solid:  #ffffff;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* An explicit display value on an element beats the UA stylesheet's
   [hidden] { display: none }, so .tool-card (flex) and .finder-clear (grid)
   would stay visible when scripts set el.hidden = true. This makes the
   hidden attribute authoritative everywhere. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ======================== APP SHELL ==================================== */

.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- left rail ---- */

.rail {
  border-right: 1px solid var(--line);
  background: var(--n-050);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px; height: var(--bar); flex: none;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--text);
}
.rail-brand:hover { background: var(--n-100); }
.mark { width: 22px; height: 22px; flex: none; color: var(--brand); }
.rail-brand b { font-size: 13.5px; font-weight: 620; letter-spacing: -0.008em; }

.rail-group { padding: 14px 10px 6px; }
.rail-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-4);
  padding: 0 6px 7px; margin: 0;
}

.rail-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none;
  font-size: 13px; line-height: 1.35;
  border-left: 2px solid transparent;
}
.rail-item svg { width: 15px; height: 15px; flex: none; color: var(--text-4); }
.rail-item:hover { background: var(--n-150); color: var(--text); }
.rail-item:hover svg { color: var(--text-2); }
.rail-item[aria-current="page"] {
  background: var(--brand-dim); color: var(--text);
  border-left-color: var(--brand);
}
.rail-item[aria-current="page"] svg { color: var(--brand); }
.rail-item.is-soon { color: var(--text-4); pointer-events: none; }
.rail-item.is-soon svg { color: var(--n-400); }
.rail-item .soon-dot {
  margin-left: auto; font-family: var(--sans); font-size: 10px;
  font-weight: 500; letter-spacing: .02em; color: var(--n-500);
  text-transform: none;
}

.rail-foot {
  margin-top: auto; padding: 13px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-4); line-height: 1.55;
}
.rail-foot a { color: var(--text-3); }

/* ---- main column ---- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--bar); flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
}
.topbar h1 {
  margin: 0; font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--text);
  display: flex; align-items: center; gap: 9px; min-width: 0;
}
.topbar h1 svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.topbar .crumb { color: var(--text-4); font-weight: 400; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--text-3); white-space: nowrap;
}
.chip svg { width: 11px; height: 11px; }
.chip.is-warn { color: var(--warn); border-color: var(--warn-ln); background: var(--warn-bg); }
.chip.is-safe { color: var(--safe); border-color: var(--safe-ln); background: var(--safe-bg); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.content { padding: 22px; flex: 1; }
.content-wide { max-width: 2160px; }

/* mobile rail → horizontal strip */
.rail-toggle { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden; gap: 4px;
    padding-right: 10px; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-brand { border-bottom: none; border-right: 1px solid var(--line); flex: none; }
  .rail-brand b { display: none; }
  .rail-group { display: flex; align-items: center; gap: 4px; padding: 8px 0; flex: none; }
  .rail-label, .rail-foot { display: none; }
  .rail-item {
    border-left: none; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 6px 10px; white-space: nowrap;
  }
  .rail-item[aria-current="page"] {
    background: transparent; border-bottom-color: var(--brand);
  }
  .rail-item.is-soon { display: none; }
  .rail-item .soon-dot { display: none; }
  .content { padding: 16px 14px 40px; }
  .topbar { padding: 0 14px; }
  .topbar .chip { display: none; }
}

/* ======================== TYPE ========================================= */

.page-head { margin: 0 0 20px; max-width: 150ch; }
.page-head h2 {
  margin: 0 0 7px; font-size: 22px; line-height: 1.22;
  letter-spacing: -0.021em; font-weight: 640;
}
.page-head p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.page-head code, .lede code { color: var(--text); }

h3 { margin: 0 0 5px; font-size: 14.5px; font-weight: 620; letter-spacing: -0.008em; }
h4 {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4); font-weight: 600;
}
.hint { font-size: 12px; color: var(--text-4); margin: 5px 0 0; line-height: 1.5; }

a { color: var(--text-800, var(--n-800)); text-decoration-color: var(--n-500);
    text-underline-offset: 2px; }
a:hover { color: var(--brand); text-decoration-color: var(--brand-ln); }

code:not(pre code) {
  font-family: var(--mono); font-size: 0.885em;
  background: var(--raised); color: var(--n-800);
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ======================== PANELS ======================================= */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel + .panel { margin-top: 14px; }

.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid var(--line);
  background: var(--n-050); border-radius: var(--r) var(--r) 0 0;
}
.panel-head svg { width: 15px; height: 15px; color: var(--text-4); flex: none; }
.panel-head h3 { margin: 0; flex: 1; min-width: 0; }
.panel-head .step {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-4);
  letter-spacing: .08em;
}
.panel-body { padding: 15px; }
.panel-body > * + * { margin-top: 14px; }
.panel-note {
  padding: 10px 15px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3); background: var(--n-050);
  border-radius: 0 0 var(--r) var(--r);
}

.stack > * + * { margin-top: 14px; }

/* ======================== FORMS ======================================== */

label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin-bottom: 6px;
}

input[type="text"], input[type="url"], input[type="number"], textarea, select {
  width: 100%; padding: 9px 11px;
  font-family: var(--mono); font-size: 13px;
  color: var(--text); background: var(--n-000);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
input::placeholder { color: var(--n-500); }
input:hover, textarea:hover { border-color: var(--n-400); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
input[aria-invalid="true"] { border-color: var(--danger); }
textarea { resize: vertical; min-height: 100px; line-height: 1.55; }

.field-row { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-start; }
.field-row > .grow   { flex: 1 1 260px; min-width: 0; }
.field-row > .shrink { flex: 0 0 104px; }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-2);
  cursor: pointer; margin: 0;
}
.check input {
  width: 15px; height: 15px; flex: none; margin-top: 2px;
  accent-color: var(--brand); cursor: pointer;
}

/* ======================== BUTTONS ====================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 13px; font-weight: 550;
  border: 1px solid transparent; cursor: pointer; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn-primary { background: var(--n-900); color: var(--n-000); font-weight: 620; }
.btn-primary:hover { background: var(--btn-hi); }

.btn-ghost {
  background: var(--raised); color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--n-300); border-color: var(--n-400); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-sm svg { width: 12px; height: 12px; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-row .spacer { margin-left: auto; }

kbd {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--n-000); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 3px;
  padding: 1px 4px; color: var(--text-3);
}

/* ======================== VERDICT ====================================== */

.verdict {
  display: flex; gap: 11px; padding: 13px 14px;
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r-sm); background: var(--n-050);
}
.verdict-icon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  background: var(--raised); color: var(--text-4);
}
.verdict-body { flex: 1; min-width: 0; }
.verdict-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 3px; color: var(--text-3);
}
.verdict-text { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.55; }

.verdict.is-danger { border-left-color: var(--danger); background: var(--danger-bg); }
.verdict.is-danger .verdict-icon  { background: var(--danger); color: var(--on-solid); }
.verdict.is-danger .verdict-label { color: var(--danger); }
.verdict.is-safe   { border-left-color: var(--safe);   background: var(--safe-bg); }
.verdict.is-safe   .verdict-icon  { background: var(--safe); color: var(--on-solid); }
.verdict.is-safe   .verdict-label { color: var(--safe); }
.verdict.is-warn   { border-left-color: var(--warn);   background: var(--warn-bg); }
.verdict.is-warn   .verdict-icon  { background: var(--warn); color: var(--on-solid); }
.verdict.is-warn   .verdict-label { color: var(--warn); }
.verdict.is-info   { border-left-color: var(--info);   background: var(--info-bg); }
.verdict.is-info   .verdict-icon  { background: var(--info); color: var(--on-solid); }
.verdict.is-info   .verdict-label { color: var(--info); }
.verdict.is-idle   { border-left-color: var(--n-400); }

/* ======================== CONSOLE ====================================== */

.console {
  font-family: var(--mono); font-size: 11.75px; line-height: 1.7;
  background: var(--n-000); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 12px;
  overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  max-height: 250px;
}
.console:empty::after {
  content: "no observations yet"; color: var(--n-500); font-style: normal;
}
.console-tall { max-height: min(44vh, 430px); }
.log-line { display: flex; gap: 9px; }
.log-time { color: var(--n-500); flex: none; }
.log-msg  { flex: 1; min-width: 0; color: var(--text-2); }
.log-step .log-msg { color: var(--text); }
.log-good .log-msg { color: var(--safe); }
.log-bad  .log-msg { color: var(--danger); }
.log-warn .log-msg { color: var(--warn); }

/* ======================== TABLES ======================================= */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
thead th {
  text-align: left; padding: 8px 12px; background: var(--n-050);
  color: var(--text-4); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.11em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--n-050); }
td code { font-size: 12px; }
td .hint { margin-top: 3px; max-width: 34ch; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--text-3); background: var(--raised);
}
.pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill-danger { color: var(--danger); border-color: var(--danger-ln); background: var(--danger-bg); }
.pill-safe   { color: var(--safe);   border-color: var(--safe-ln);   background: var(--safe-bg); }
.pill-warn   { color: var(--warn);   border-color: var(--warn-ln);   background: var(--warn-bg); }
.pill-idle   { color: var(--text-4); }

/* ======================== CODE ========================================= */

.code-block { position: relative; }
.code-block pre {
  margin: 0; padding: 11px 12px; overflow-x: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  background: var(--n-000); color: var(--n-800);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.code-block .copy-btn { position: absolute; top: 7px; right: 7px; }
/* Payload lines are long and have no natural break points, so a horizontal
   scrollbar hides most of them. Wrapping variant, with room kept clear on the
   first line for the copy button. */
.code-block.is-wrap pre {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  overflow-x: visible; padding-right: 66px;
}
.code-block:has(.copy-btn) pre { padding-right: 74px; }

.url-out pre { color: var(--brand); word-break: break-all; white-space: pre-wrap; }
.url-out.is-empty pre { color: var(--n-500); }

/* ======================== TABS ========================================= */

.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line);
  margin-bottom: 18px; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 15px; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 550;
  color: var(--text-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab .tab-n {
  font-family: var(--mono); font-size: 10px; color: var(--n-500);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 0 4px;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
.tab[aria-selected="true"] .tab-n { color: var(--brand); border-color: var(--brand-ln); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ======================== LAYOUT: WORKBENCH ============================ */

.bench {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1180px) {
  .bench { grid-template-columns: minmax(0, 1fr) minmax(390px, 460px); }
  .bench-aside { position: sticky; top: calc(var(--bar) + 14px); }
  .content:has(.bench-aside) > .page-head { max-width: calc(100% - 474px); }
}
.bench-main > * + *, .bench-aside > * + * { margin-top: 14px; }

/* ======================== CALLOUT ====================================== */

.callout {
  display: flex; gap: 10px; padding: 11px 13px;
  border-radius: var(--r-sm); font-size: 12.75px; line-height: 1.6;
  border: 1px solid var(--line); background: var(--n-050);
}
.callout svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--text-4); }
.callout p { margin: 0; color: var(--text-2); }
.callout p + p { margin-top: 6px; }
.callout strong { color: var(--text); font-weight: 600; }
.callout.is-warn   { border-color: var(--warn-ln);   background: var(--warn-bg); }
.callout.is-warn   svg { color: var(--warn); }
.callout.is-danger { border-color: var(--danger-ln); background: var(--danger-bg); }
.callout.is-danger svg { color: var(--danger); }
.callout.is-info   { border-color: var(--info-ln);   background: var(--info-bg); }
.callout.is-info   svg { color: var(--info); }

/* ======================== ACCORDION ==================================== */

details.acc {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); overflow: hidden;
}
details.acc + details.acc { margin-top: 7px; }
details.acc > summary {
  padding: 10px 14px; cursor: pointer; font-size: 13.5px; font-weight: 550;
  display: flex; align-items: center; gap: 9px; list-style: none;
  color: var(--text);
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4.5px solid var(--text-4);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
details.acc[open] > summary::before {
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4.5px solid var(--brand); border-bottom: 0;
}
details.acc > summary:hover { background: var(--n-050); }
details.acc > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
details.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc-body { padding: 14px; font-size: 13.5px; color: var(--text-2); }
.acc-body > * + * { margin-top: 11px; }
.acc-body strong { color: var(--text); font-weight: 600; }
.acc-body p { margin: 0; line-height: 1.65; }

/* ======================== DEFINITION LIST ============================== */

.meta-list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.meta-list li {
  display: flex; gap: 14px; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.meta-list li:last-child { border-bottom: none; }
.meta-list .k {
  flex: 0 0 156px; color: var(--text-4);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em;
}
.meta-list .v {
  flex: 1; min-width: 0; word-break: break-word;
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
}

/* ======================== TOOL INDEX GRID ============================== */

.tool-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.tool-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r);
}
a.tool-card:hover { border-color: var(--n-400); background: var(--panel-2); }
.tool-card-top { display: flex; align-items: center; gap: 9px; }
.tool-card-top svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.tool-card h3 { margin: 0; flex: 1; min-width: 0; }
.tool-card p { margin: 0; font-size: 12.75px; color: var(--text-3); line-height: 1.6; flex: 1; }
.tool-card .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
  background: var(--raised); color: var(--text-4); border: 1px solid var(--line);
}
.tool-card.is-soon { opacity: .74; }
.tool-card.is-soon .tool-card-top svg { color: var(--text-4); }

/* ======================== MOTION ======================================= */

@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.is-running .verdict-icon { animation: blink 1.1s ease-in-out infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }
.fade-in { animation: rise .2s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ======================== SCROLLBARS =================================== */

* { scrollbar-width: thin; scrollbar-color: var(--n-400) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

@media (max-width: 560px) {
  .meta-list li { flex-direction: column; gap: 2px; }
  .meta-list .k { flex-basis: auto; }
  .page-head h2 { font-size: 19px; }
  .field-row > .shrink { flex: 1 1 100px; }
}

/* Cap prose line length on very wide viewports — panels may span 1100px+ at
   1920, which is well past comfortable reading measure. Data tables, code
   blocks and the console are deliberately exempt: they want the full width. */
.panel-note, .acc-body p, .callout p, .hint { max-width: 96ch; }

/* No hardware keyboard on a phone — the shortcut hint is noise there. */
@media (max-width: 900px) {
  .kbd-hint { display: none; }
}

/* Breathing room when a new section head follows content */
.tool-grid + .page-head,
.panel + .page-head,
section + section,
#reference { margin-top: 30px; }

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.icon-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--text-3); padding: 0;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--raised); color: var(--text); border-color: var(--n-400); }
.icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   Touch and mobile ergonomics
   ========================================================================== */

/* Kill the grey flash on tap without removing focus affordance */
a, button, summary, input, label, .tab { -webkit-tap-highlight-color: transparent; }

/* Never let the page rubber-band sideways */
/* Do NOT put overflow-x here. Any overflow value other than visible turns the
   body into a scroll container, and position:sticky then resolves against that
   box instead of the viewport — which silently disabled the sticky rail, the
   sticky topbar and the sticky results aside all at once. overscroll-behavior
   is what actually stops the sideways rubber-band, and every wide child (code
   blocks, tables, the tab strip) scrolls inside its own container. */
html, body { overscroll-behavior-x: none; max-width: 100%; }

@media (max-width: 900px) {
  /* 16px is the threshold below which iOS Safari zooms the viewport on focus.
     Anything smaller makes every field tap a layout jump. */
  input[type="text"], input[type="url"], input[type="number"],
  textarea, select { font-size: 16px; padding: 11px 12px; }

  /* Comfortable touch targets — 32px rows are a miss-tap generator */
  .btn { min-height: 42px; padding: 10px 16px; font-size: 14px; }
  .btn-sm { min-height: 38px; padding: 9px 13px; font-size: 13px; }
  .icon-btn { width: 38px; height: 38px; }
  .tab { padding: 12px 14px; font-size: 13.5px; min-height: 44px; }
  .check { padding: 4px 0; font-size: 14px; }
  .check input { width: 19px; height: 19px; }
  details.acc > summary { padding: 13px 14px; min-height: 46px; }
  .rail-item { min-height: 42px; }
  .copy-btn { min-height: 34px; }

  /* Stack the button row so nothing gets squeezed to an unreadable width */
  .btn-row { gap: 8px; }
  .btn-row .spacer { margin-left: 0; }

  /* Room for the home indicator / gesture bar */
  .content { padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }

  /* Wide values wrap instead of forcing a horizontal scroll */
  .meta-list .v { font-size: 11.5px; }
  .code-block pre { font-size: 11.5px; }
  .console { font-size: 11px; }
}

@media (max-width: 620px) {
  /* Copy button below the code rather than floating over a narrow column */
  .code-block .copy-btn { position: static; margin-top: 7px; width: 100%; }
  .code-block:has(.copy-btn) pre { padding-right: 12px; }
  .panel-head { padding: 10px 12px; flex-wrap: wrap; }
  .panel-head .step { display: none; }
  .panel-body { padding: 12px; }
  .topbar h1 { font-size: 12.5px; }
  .topbar h1 .crumb { display: none; }
}

/* A table that scrolls should look like it scrolls */
.table-scroll { position: relative; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .table-scroll::after {
    content: "swipe to see more \\2192";
    display: block; padding: 6px 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-4);
    border-top: 1px solid var(--line); background: var(--n-050);
    position: sticky; left: 0;
  }
}

/* Respect a user who prefers more contrast */
@media (prefers-contrast: more) {
  :root { --line: #4a4a55; --line-2: #63636f; --text-2: var(--n-800); --text-3: var(--n-700); }
  :root[data-theme="light"] { --line: #b8b8ae; --line-2: #9a9a90; --text-2: #2a2a31; --text-3: #45454d; }
}

/* Print — an evidence page may well be printed into a report */
@media print {
  :root { color-scheme: light; }
  .rail, .topbar, .tabs, .btn, .icon-btn, .copy-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .app { display: block; }
  .panel, .callout, .verdict { border: 1px solid #999; break-inside: avoid; }
  .console, .code-block pre { background: #f6f6f6; color: #000; }
  details.acc { border: 1px solid #999; }
  details.acc > summary { font-weight: 700; }
  .acc-body { display: block !important; }
}

/* ==========================================================================
   Tool finder
   ========================================================================== */

.finder {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 26px;
}
.finder-search { position: relative; flex: 1 1 340px; min-width: 0; }
.finder-search > svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-4); pointer-events: none;
}
.finder-search input {
  padding-left: 34px; padding-right: 34px;
  font-family: var(--sans); font-size: 14px;
}
.finder-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-4); font-size: 12px; border-radius: 3px; padding: 0;
}
.finder-clear:hover { color: var(--text); background: var(--raised); }

.finder-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  font-family: var(--sans); font-size: 13px; font-weight: 550;
  color: var(--text-3); white-space: nowrap;
}
.filter-chip span {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-4);
  background: var(--raised); border-radius: 3px; padding: 1px 5px;
}
.filter-chip:hover { color: var(--text); border-color: var(--line-2); }
.filter-chip[aria-pressed="true"] {
  color: var(--text); border-color: var(--brand-ln); background: var(--brand-dim);
}
.filter-chip[aria-pressed="true"] span { color: var(--brand); }
.filter-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.finder-empty {
  padding: 15px; border: 1px dashed var(--line-2); border-radius: var(--r);
  font-size: 13.5px; color: var(--text-2); text-align: center; margin: 0 0 22px;
}
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand); text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Category groups
   ========================================================================== */

.group { margin-bottom: 34px; scroll-margin-top: calc(var(--bar) + 16px); }
.group-head {
  display: flex; align-items: flex-start; gap: 11px;
  padding-bottom: 11px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.group-head > svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 3px; }
.group-head > div { flex: 1; min-width: 0; }
.group-head h2 {
  margin: 0 0 3px; font-size: 16.5px; font-weight: 640; letter-spacing: -0.014em;
}
.group-head p { margin: 0; font-size: 13px; color: var(--text-3); max-width: 88ch; }
.group-count {
  flex: none; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-4);
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px;
  white-space: nowrap; margin-top: 2px;
}

.rail-live {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  display: inline-grid; place-items: center;
  background: var(--safe-bg); color: var(--safe);
  border: 1px solid var(--safe-ln);
}

/* ==========================================================================
   Credit / site footer
   ========================================================================== */

.credit {
  margin-top: 8px; padding: 18px 0 10px;
  border-top: 1px solid var(--line);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--text-3);
}
.credit-by { display: flex; align-items: center; gap: 8px; }
.credit-by svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.credit strong { color: var(--text); font-weight: 600; }
.credit-links { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.credit-links a { color: var(--text-3); text-decoration: none; }
.credit-links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .finder { gap: 8px; }
  .finder-search { flex: 1 1 100%; }
  .finder-filters { width: 100%; }
  .filter-chip { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .group-count { display: none; }
  .group-head { gap: 9px; }
  .credit { flex-direction: column; align-items: flex-start; gap: 10px; }
  .credit-links { margin-left: 0; }
}

/* ==========================================================================
   Security Header Analyzer
   ========================================================================== */

.input-tall { min-height: 210px; font-size: 12.5px; line-height: 1.6; }
@media (max-width: 900px) { .input-tall { min-height: 170px; } }

/* ---- grade ---- */

.gradebox {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); border-left-width: 3px;
  background: var(--n-050);
}
.grade-letter {
  flex: none; width: 58px; height: 58px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 26px; font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--raised); color: var(--text-4);
}
.grade-meta { min-width: 0; }
.grade-score {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text);
}
.grade-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

.gradebox.is-safe   { border-left-color: var(--safe);   background: var(--safe-bg); }
.gradebox.is-safe   .grade-letter { background: var(--safe);   color: var(--on-solid); }
.gradebox.is-warn   { border-left-color: var(--warn);   background: var(--warn-bg); }
.gradebox.is-warn   .grade-letter { background: var(--warn);   color: var(--on-solid); }
.gradebox.is-danger { border-left-color: var(--danger); background: var(--danger-bg); }
.gradebox.is-danger .grade-letter { background: var(--danger); color: var(--on-solid); }
.gradebox.is-idle   { border-left-color: var(--n-400); }

/* ---- findings ---- */

.finding > summary { gap: 10px; flex-wrap: wrap; }
.finding-name { flex: 1; min-width: 0; }
.finding-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-4);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px;
  white-space: nowrap;
}
.finding .acc-body > h4 { margin-top: 14px; }
.finding .acc-body > h4:first-child { margin-top: 0; }

.issue-list, .leak-list { list-style: none; padding: 0; margin: 0; }
.issue-list li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.55;
}
.issue-list li:last-child { border-bottom: none; }
.issue-list .pill { flex: none; margin-top: 1px; }

.leak-list li {
  padding: 8px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.leak-list li:last-child { border-bottom: none; }
.leak-list code {
  font-size: 12px; word-break: break-all;
  background: var(--n-000); border-color: var(--line);
}
.leak-list .hint { margin: 0; }

/* ---- per-platform fix switcher ---- */

.fix-bar {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 9px;
  padding: 3px; background: var(--n-050);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.fix-btn {
  padding: 5px 11px; border-radius: 3px; cursor: pointer;
  background: transparent; border: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  color: var(--text-3);
}
.fix-btn:hover { color: var(--text); background: var(--raised); }
.fix-btn[aria-pressed="true"] {
  background: var(--brand-dim); color: var(--brand);
}
.fix-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

@media (max-width: 900px) {
  .fix-btn { min-height: 34px; padding: 7px 12px; font-size: 12px; }
  .grade-letter { width: 50px; height: 50px; font-size: 22px; }
}

/* A label is a mono uppercase micro-heading; a full sentence in that style
   reads as shouting. Keep sentences in .hint, not in <label>. */
label > code { text-transform: none; letter-spacing: 0; }

/* Inset tab strip, for switching input mode inside a panel */
.tabs-inset {
  border-bottom: 1px solid var(--line);
  margin: -4px 0 14px;
}
.tabs-inset .tab { padding: 7px 13px; font-size: 12.5px; }

/* A meta-list value that carries an explanatory hint needs it on its own
   line, otherwise the value and the hint run together as one string. */
.meta-list .v > .hint { display: block; margin-top: 3px; }
.meta-list .v > span:first-child { display: block; }

/* ==========================================================================
   URL Scanner — stage progress
   ========================================================================== */

.prog-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.prog-row:last-child { border-bottom: none; }
.prog-name { flex: 1; min-width: 0; color: var(--text-2); }
.prog-state {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-4); white-space: nowrap;
}
.prog-row[data-state="run"]  .prog-state { color: var(--info); }
.prog-row[data-state="done"] .prog-state { color: var(--safe); }
.prog-row[data-state="skip"] .prog-state { color: var(--text-4); }
.prog-row[data-state="skip"] .prog-name  { color: var(--text-4); }
.prog-row[data-state="run"]::before,
.prog-row[data-state="done"]::before,
.prog-row[data-state="wait"]::before,
.prog-row[data-state="skip"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--n-400);
}
.prog-row[data-state="run"]::before  { background: var(--info); animation: blink 1.1s ease-in-out infinite; }
.prog-row[data-state="done"]::before { background: var(--safe); }
.prog-row[data-state="skip"]::before { background: transparent; border: 1px solid var(--n-400); }

/* The framing probe must be present in the layout to load, but never visible. */
.probe-frame {
  position: fixed; left: -9999px; top: -9999px;
  width: 320px; height: 240px; border: 0; opacity: 0;
  pointer-events: none;
}

/* Clickjacking proof of concept — deliberately visible, because the operator
   judges it. A browser cannot distinguish a blocked frame from a loaded one. */
.poc-frame-wrap { margin-top: 10px; }
.poc-frame {
  width: 100%; height: 320px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--n-000);
}

/* ==========================================================================
   URL Scanner — module selector
   ========================================================================== */

#module-select { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mod-group-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-4); margin: 0 0 6px;
}
.mod-row {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 6px 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-2);
  margin: 0;
}
.mod-row input { width: 15px; height: 15px; flex: none; margin-top: 2px; accent-color: var(--brand); }
.mod-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mod-name { color: var(--text); font-weight: 550; }
.mod-row .hint { margin: 0; font-size: 11.5px; }
.mod-row.is-unavailable { cursor: default; opacity: .62; }
.mod-row.is-unavailable .mod-name { color: var(--text-3); }
.mod-x {
  width: 15px; flex: none; text-align: center; color: var(--text-4);
  font-family: var(--mono); font-size: 12px; margin-top: 1px;
}
#module-output .panel + .panel { margin-top: 12px; }

@media (max-width: 900px) {
  #module-select { grid-template-columns: 1fr; }
  .mod-row { padding: 9px 0; }
  .mod-row input { width: 19px; height: 19px; }
}

/* The About accordion sits on its own rather than in a stack, so it needs a
   little more presence than a nested one. */
.acc-about > summary { padding: 13px 15px; font-size: 14px; }
.acc-about > summary svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.acc-about > summary .finding-tag { margin-left: auto; }
.acc-about .meta-list { font-size: 13px; }

/* ==========================================================================
   Practice labs
   ========================================================================== */

/* ---- level selector ---- */

.lvl-bar {
  display: grid; gap: 8px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.lvl {
  display: flex; flex-direction: column; gap: 2px; position: relative;
  padding: 10px 13px; text-align: left; cursor: pointer;
  background: var(--n-050); color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; min-height: 56px;
}
.lvl:hover { background: var(--raised); border-color: var(--n-400); color: var(--text); }
.lvl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lvl.is-on {
  background: var(--raised); color: var(--text);
  border-color: var(--brand); box-shadow: inset 2px 0 0 var(--brand);
}
.lvl-tier {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
.lvl.is-on .lvl-tier { color: var(--brand); }
.lvl-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.lvl-done {
  position: absolute; top: 8px; right: 10px;
  font-size: 13px; font-weight: 700; color: var(--safe);
}

/* ---- hints ---- */

.hint-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.hint-row:first-child { margin-top: 10px; }
.hint-row p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.hint-n {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4);
  padding-top: 2px; min-width: 44px;
}

/* ---- the target frame ---- */

.target-frame {
  /* A starting height only — the frame reports its content height and the
     shell resizes to it, so no level pads out to the tallest one. */
  width: 100%; height: 430px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; display: block;
  color-scheme: light;   /* the target is its own site, always light */
}
@media (max-width: 700px) { .target-frame { height: 520px; } }

/* ---- query log ---- */

.qlog { max-height: 460px; overflow-y: auto; }
.qrow { padding: 9px 0; border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: none; }
.qrow-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.qseq { font-family: var(--mono); font-size: 10.5px; color: var(--text-4); }
.qdelay {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn);
}
.qsql {
  margin: 0 0 4px; padding: 7px 9px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  background: var(--n-000); color: var(--n-800);
  border: 1px solid var(--line); border-radius: 4px;
}
.qout { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* ---- solved / flag ---- */

#solved { border-color: var(--safe-ln); background: var(--safe-bg); padding: 15px 16px; }
.solved-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 650; color: var(--text); margin-bottom: 6px;
}
.solved-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--safe); color: var(--on-solid); font-size: 12px; font-weight: 700;
}
#solved p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.flagline {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 10px;
  background: var(--n-000); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.flag-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
code.flag {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--brand); background: none; border: none; padding: 0;
  overflow-wrap: anywhere;
}

/* ---- solution walkthrough ---- */

.sol-step { margin-bottom: 14px; }
.sol-step h4 { margin-bottom: 5px; }
.walkthrough { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.prose-pre {
  margin: 0; font-family: inherit; font-size: 13px; line-height: 1.65;
  color: var(--text-2); white-space: pre-wrap; overflow-wrap: break-word;
}

/* ---- lab catalogue cards ---- */

.lab-grid {
  display: grid; gap: 12px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.lab-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 15px; text-decoration: none;
  background: var(--n-050); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
}
a.lab-card:hover { background: var(--raised); border-color: var(--n-400); }
.lab-card.is-soon { opacity: 0.62; }
.lab-card-top { display: flex; align-items: center; gap: 9px; }
.lab-card-top svg { width: 17px; height: 17px; flex: none; color: var(--brand); }
.lab-card-top h3 { margin: 0; flex: 1; }
.lab-card p { margin: 0; font-size: 12.75px; color: var(--text-3); line-height: 1.55; }
.lab-levels { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.lab-lvl {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--line-2); color: var(--text-4);
}
.lab-lvl.is-done { border-color: var(--safe); color: var(--safe); }