/* ===== PatchLeaks :: Brutalist Technical ===== */

:root {
  --bg:        #0b0c0e;
  --panel:    #111214;
  --panel-2:  #0e0f11;
  --ink:      #e8e8e6;
  --ink-2:    #c4c4c0;
  --dim:      #7a7b7e;
  --dim-2:    #55565a;
  --line:     #24262a;
  --line-2:   #1a1c1f;

  --sig:      #ff5c3a;   /* threat / vuln */
  --sig-soft: rgba(255,92,58,.12);
  --ok:       #4ade80;   /* fixed / safe */
  --ok-soft:  rgba(74,222,128,.12);
  --warn:     #f6c445;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r: 2px;         /* radius — almost none */
  --u: 8px;         /* unit */
  --density: 1;     /* tweak */
}

[data-theme="light"] {
  --bg:       #f4f3ee;
  --panel:    #ffffff;
  --panel-2:  #faf9f5;
  --ink:      #0b0c0e;
  --ink-2:    #2a2b2e;
  /* Bumped from #6b6c6f -> #454649 so topbar/nav/dim text has
     WCAG AAA (7:1) contrast on the cream background, not the
     marginal ~4.5:1 it had before. */
  --dim:      #454649;
  --dim-2:    #8a8b8e;
  --line:     #c6c2b5;
  --line-2:   #d9d6cd;
  --sig:      #d63b14;
  --sig-soft: rgba(214,59,20,.10);
  --ok:       #1d8a4c;
  --ok-soft:  rgba(29,138,76,.10);
}

[data-accent="lime"]   { --ok: #c6f26a; --sig: #ff5c3a; }
[data-accent="cyan"]   { --ok: #5bd8ff; --sig: #ff5c3a; }
[data-accent="amber"]  { --ok: #f6c445; --sig: #ff5c3a; }
[data-accent="mono"]   { --ok: #e8e8e6; --sig: #ff5c3a; }

[data-density="compact"]    { --density: 0.8; }
[data-density="comfortable"]{ --density: 1; }
[data-density="spacious"]   { --density: 1.25; }

[data-pair="mono"]  { --sans: "JetBrains Mono", ui-monospace, monospace; }
[data-pair="serif"] { --sans: "Fraunces", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace; }
[data-pair="grot"]  { --sans: "Inter", -apple-system, sans-serif; }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Belt-and-suspenders against any descendant that would push the
     document wider than the viewport. Individual components still
     take responsibility for not overflowing, but this keeps the
     sticky topbar from ever scrolling off-screen on mobile. */
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; }

::selection { background: var(--sig); color: #fff; }

/* ===== Typography utilities ===== */
.mono { font-family: var(--mono); font-feature-settings: "ss01","ss02","zero"; }
.sans { font-family: var(--sans); }
.up   { text-transform: uppercase; letter-spacing: 0.06em; }
.tiny { font-size: 10px; }
.small{ font-size: 11px; }
.dim  { color: var(--dim); }
.sig  { color: var(--sig); }
.ok   { color: var(--ok); }

/* ===== Layout primitives ===== */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.rule    { border-top: 1px solid var(--line); }
.rule-b  { border-bottom: 1px solid var(--line); }
.rule-l  { border-left: 1px solid var(--line); }
.rule-r  { border-right: 1px solid var(--line); }
.box     { border: 1px solid var(--line); background: var(--panel); }
.box-2   { border: 1px solid var(--line); background: var(--panel-2); }

/* ===== Top bar ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: stretch;
  height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand-mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.brand-sub {
  color: var(--dim); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-left: auto;
}
.navlinks {
  display: flex;
  align-items: stretch;
}
.navlinks a {
  display: flex; align-items: center;
  padding: 0 18px;
  font-family: var(--mono); font-size: 12px;
  color: var(--dim);
  border-right: 1px solid var(--line);
  position: relative;
  transition: color .15s, background .15s;
}
.navlinks a:hover { color: var(--ink); background: var(--panel); }
.navlinks a.active { color: var(--ink); background: var(--panel); }
.navlinks a.active::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--sig);
}

/* ===== Nav dropdowns ===== */
.nav-drop { position: relative; display: flex; align-items: stretch; }
.nav-drop > a {
  display: flex; align-items: center; gap: 4px;
  padding: 0 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dim);
  text-decoration: none;
  position: relative;
  transition: color .15s, background .15s;
}
.nav-drop > a:hover { color: var(--ink); background: var(--panel); }
.nav-drop.open > a,
.nav-drop.active > a { color: var(--ink); background: var(--panel); }
.nav-drop.active > a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--sig);
}
.nav-caret { font-size: 9px; opacity: 0.6; margin-top: 1px; }
.nav-drop.open .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 260px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 50;
  padding: 6px 0;
  display: flex; flex-direction: column;
}
.nav-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px;
  border-bottom: 0;
  text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  font-family: var(--sans);
}
.nav-menu a:hover { background: var(--panel-2); }
.nav-menu a.on { background: var(--panel-2); }
.nav-menu a.on::before { display: none; }
.nav-menu-lbl { color: var(--ink); }
.nav-menu-hint {
  font-family: var(--mono); font-size: 10px; color: var(--dim-2);
  text-transform: lowercase; letter-spacing: 0.02em;
}
.nav-menu-sep { height: 1px; background: var(--line-2); margin: 4px 0; }
.topbar-right {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;  border-left: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.pulse-dot {
  width: 8px; height: 8px; background: var(--ok); display: inline-block;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* ===== Buttons ===== */
.btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .15s, background .15s, color .15s;
  border-radius: var(--r);
}
.btn:hover { border-color: var(--ink); }
.btn-primary {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.btn-primary:hover { background: var(--sig); border-color: var(--sig); color: #fff; }
.btn-danger {
  background: var(--sig); color: #fff; border-color: var(--sig);
}
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 10px; font-size: 11px; }

/* ===== Pills / chips / badges ===== */
.pill {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.pill.sig { color: var(--sig); border-color: var(--sig); background: var(--sig-soft); }
.pill.ok  { color: var(--ok);  border-color: var(--ok);  background: var(--ok-soft); }
.pill.solid-sig { background: var(--sig); color: #fff; border-color: var(--sig); }
.pill.solid-ok  { background: var(--ok); color: #071208; border-color: var(--ok); }
.pill.solid-ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ===== Forms ===== */
.input, .select, .textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--mono); font-size: 12px;
  border-radius: var(--r);
  outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.label {
  display: block;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 6px;
}

/* ===== Section header ===== */
.sxn-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: end;
  gap: 32px;
  padding: 40px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.sxn-num {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  letter-spacing: 0.1em;
}
.sxn-title {
  font-family: var(--sans); font-weight: 500;
  font-size: 32px; line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.sxn-sub {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  text-align: right;
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ===== Scroll story (landing) ===== */
.hero {
  padding: 64px 0 24px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 80px;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 68vh;
}
.hero-cell {
  border-right: 1px solid var(--line);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-cell:last-child { border-right: 0; }
.hero-cell-gutter {
  border-right: 1px solid var(--line);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--line-2) 10px, var(--line-2) 11px);
}
.hero h1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.hero h1 em {
  font-style: normal;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.5em;
  display: block;
  margin-top: 16px;
  letter-spacing: 0.02em;
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.hero-meta > div {
  padding: 16px 20px;
  border-right: 1px solid var(--line);
}
.hero-meta > div:last-child { border-right: 0; }
.hero-meta .k {
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.hero-meta .v {
  font-family: var(--mono); font-size: 18px; font-weight: 500;
}

/* Scroll story container */
.story {
  position: relative;
  padding: 0;
}
.story-stage {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.story-side {
  border-right: 1px solid var(--line);
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.story-side.right { border-right: 0; border-left: 1px solid var(--line); }
.story-center {
  padding: 32px;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}

.story-scroll {
  height: 520vh; /* 5 stages */
}

.story-indicator {
  position: absolute;
  left: 12px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--line);
  z-index: 2;
}
.story-indicator-fill {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--sig);
  transition: height .1s linear;
}
.story-stages {
  position: absolute;
  left: 0; top: 20px;
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--mono); font-size: 10px;
  color: var(--dim);
  z-index: 3;
  pointer-events: none;
}
.story-stages .sstep {
  height: calc((100vh - 96px) / 5);
  display: flex; align-items: center;
  padding-left: 24px;
  text-transform: uppercase; letter-spacing: 0.1em;
  position: relative;
  transition: color .3s;
}
.story-stages .sstep::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 5px; height: 5px;
  border: 1px solid var(--dim);
  background: var(--bg);
  transform: translateY(-50%);
  transition: all .3s;
}
.story-stages .sstep.active { color: var(--ink); }
.story-stages .sstep.active::before { background: var(--sig); border-color: var(--sig); }
.story-stages .sstep.done::before { background: var(--ok); border-color: var(--ok); }

/* Code pane */
.codepane {
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  overflow: hidden;
  position: relative;
}
.codepane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--dim);
}
.codepane-head .dots { display: flex; gap: 6px; }
.codepane-head .dot { width: 8px; height: 8px; border: 1px solid var(--line); }
.codepane-body {
  padding: 16px 0;
  max-height: 58vh;
  overflow: auto;
}
.codeline {
  display: grid;
  grid-template-columns: 48px 1fr;
  padding: 0;
  transition: background .4s;
}
.codeline .ln {
  color: var(--dim-2);
  text-align: right;
  padding-right: 12px;
  user-select: none;
  border-right: 1px solid var(--line-2);
}
.codeline .src {
  padding-left: 14px;
  white-space: pre;
  overflow-x: auto;
}
.codeline.del { background: var(--sig-soft); }
.codeline.del .src::before { content: "- "; color: var(--sig); }
.codeline.add { background: var(--ok-soft); }
.codeline.add .src::before { content: "+ "; color: var(--ok); }
.codeline.mark .src { background: linear-gradient(var(--sig-soft), var(--sig-soft)); }
.tok-k { color: #b794f4; }         /* keywords */
.tok-s { color: #c6f26a; }         /* strings */
.tok-n { color: #7fcfff; }         /* numbers */
.tok-c { color: var(--dim); font-style: italic; }
.tok-v { color: var(--ink); }
.tok-fn{ color: #ffc45e; }

/* Side UI components that assemble in */
.ui-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s, transform .5s;
}
.ui-card.in { opacity: 1; transform: none; }
.ui-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.ui-kv {
  display: grid; grid-template-columns: 80px 1fr;
  font-family: var(--mono); font-size: 11px;
  gap: 2px 12px;
}
.ui-kv .k { color: var(--dim); }
.ui-bar {
  height: 4px; background: var(--line); overflow: hidden;
  position: relative;
}
.ui-bar > i { display: block; height: 100%; background: var(--sig); }

/* ===== Feature strip ===== */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 220px;
  position: relative;
}
.feature:last-child { border-right: 0; }
.feature-num {
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.feature h3 {
  font-family: var(--sans); font-weight: 500;
  font-size: 18px; margin: 0;
  letter-spacing: -0.01em;
}
.feature p {
  font-family: var(--sans);
  font-size: 13px; color: var(--dim);
  margin: 0;
  flex: 1;
}
.feature-foot {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}

/* ===== Stats strip ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 24px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat .n { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.stat .l { font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; }

/* ===== Tables ===== */
.table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.table th, .table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table th {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--panel-2);
  font-weight: 500;
}
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--panel); }
.table tbody tr.selected { background: var(--panel); }

/* ===== Dashboard specific ===== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.kpi {
  padding: 20px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px;
  color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em;
}
.kpi-val {
  font-family: var(--mono); font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi-delta { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--sig); }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 32px; margin-top: 4px; }
.spark i { flex: 1; background: var(--dim-2); display: block; }
.spark i.h { background: var(--ink); }

/* ===== Sidebar layout ===== */
.with-sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 56px);
}
.sidebar {
  border-right: 1px solid var(--line);
  padding: 24px 0;
  background: var(--panel-2);
}
.sidebar-sect {
  padding: 0 20px 8px;
  font-family: var(--mono); font-size: 10px;
  color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 20px;
}
.sidebar a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  font-family: var(--mono); font-size: 12px;
  color: var(--dim);
  border-left: 2px solid transparent;
}
.sidebar a:hover { color: var(--ink); background: var(--panel); }
.sidebar a.active {
  color: var(--ink);
  border-left-color: var(--sig);
  background: var(--panel);
}
.sidebar a .n {
  font-size: 10px;
  color: var(--dim);
  background: var(--bg);
  padding: 1px 6px;
  border: 1px solid var(--line);
}

/* ===== Severity color coding ===== */
.sev { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.sev::before { content: ""; width: 8px; height: 8px; display: inline-block; }
.sev.crit::before { background: var(--sig); }
.sev.high::before { background: #ff8a3a; }
.sev.med::before  { background: var(--warn); }
.sev.low::before  { background: var(--dim); }

/* ===== Diff viewer ===== */
.diff {
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
  background: var(--panel-2);
}
.diff-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--dim);
}

/* ===== Tweaks panel ===== */
.tweaks-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 280px;
  background: var(--panel);
  border: 1px solid var(--line);
  z-index: 100;
  font-family: var(--mono);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.tweaks-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
.tweaks-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.tweak-row { display: flex; flex-direction: column; gap: 6px; }
.tweak-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.tweak-seg button {
  padding: 6px 8px;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dim);
  border-right: 1px solid var(--line);
  background: transparent;
}
.tweak-seg button:last-child { border-right: 0; }
.tweak-seg button.on { background: var(--ink); color: var(--bg); }

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-top: 60px;
  font-family: var(--mono); font-size: 11px;
  color: var(--dim);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.footer h4 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); margin: 0 0 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer a:hover { color: var(--ink); }

/* ===== Density hooks ===== */
[data-density="compact"] .kpi       { padding: calc(20px * var(--density)); }
[data-density="compact"] .table th,
[data-density="compact"] .table td  { padding: 6px 10px; font-size: 11px; }
[data-density="spacious"] .table th,
[data-density="spacious"] .table td { padding: 14px 18px; }
[data-density="spacious"] .kpi      { padding: 28px; }

/* ASCII divider */
.ascii-div {
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  padding: 8px 0;
  white-space: nowrap; overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.1em;
}

/* Tables list rows */
.row-action {
  opacity: 0; transition: opacity .15s;
  font-family: var(--mono); font-size: 10px;
  color: var(--dim);
}
.table tr:hover .row-action { opacity: 1; color: var(--ink); }

/* ===== Misc ===== */
.shake { animation: shake 0.3s; }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }

.caret { display:inline-block; width:8px; height:14px; background: var(--ink); animation: blink 1s steps(2) infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }

.hover-flip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
}
.hover-flip::after {
  content: "→"; transition: transform .2s;
}
.hover-flip:hover::after { transform: translateX(3px); }

/* Route page fade */
.page { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--dim-2); }

/* Custom checkbox */
.check {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border: 1px solid var(--line);
  background: var(--panel-2); cursor: pointer; vertical-align: middle;
  position: relative;
}
.check:checked { background: var(--sig); border-color: var(--sig); }
.check:checked::after {
  content: ""; position: absolute; left: 3px; top: 0px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Mobile */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .hero-grid { grid-template-columns: 24px 1fr 1fr 24px; }
  .story-stage { grid-template-columns: 1fr; }
  .story-side { display: none; }
  .kpi-row, .features, .stats { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .feature { border-bottom: 1px solid var(--line); }
  .with-sidebar { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* =========================================================
   MOBILE — ≤820px
   Collapses topbar, hero, features, footer, sections to
   single-column with comfortable scrolling.
   ========================================================= */
@media (max-width: 820px) {
  :root { --topbar-h: 48px; }

  .container { padding: 0 16px; }

  /* Topbar */
  .topbar {
    height: 48px;
    /* Opaque background on mobile. Desktop uses color-mix +
       backdrop-filter, but on phones the blurred translucency
       made text (especially in light mode) hard to read as the
       grid pattern on body bled through. */
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar-inner {
    height: 48px;
    padding: 0 14px;
    gap: 10px;
    /* Desktop forces a 220px brand column; on phones that plus the
       topbar-right buttons exceeds 375px and pushes the sticky bar
       off-screen. Let the brand size to content and both edges use
       auto so the 1fr middle column absorbs any remaining space. */
    grid-template-columns: auto 1fr auto;
  }
  .topbar-inner > * { min-width: 0; }
  .brand {
    gap: 6px;
    font-size: 13px;
    padding: 0 10px;
    border-right: 0;
  }
  .brand-mark { width: 22px; height: 22px; font-size: 10px; }
  .brand-sub { display: none; }
  .navlinks { display: none; } /* hide primary nav; users will scroll + use mobile drawer if we add one */
  .topbar-right {
    gap: 10px;
    font-size: 11px;
    flex-wrap: nowrap;
    /* Desktop sets padding:0 20px + border-left; at phone widths
       that eats ~40px of a ~360-390px viewport and, combined with
       the auto-sized grid column, pushes the burger off-screen. */
    padding: 0;
    border-left: 0;
  }
  .topbar-right > span:first-child { display: none; } /* hide 'indexing' pill */
  .topbar-right .btn { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
  /* Collapse "+ New scan" to just "+" at every mobile width, not
     only <=380. The auto grid column sizes to min-content, so the
     label forces the whole topbar wider than the viewport on 375-
     430px phones. Desktop (>=821px) keeps the label. */
  .topbar-newscan-label { display: none; }

  /* Hero — stack terminal under copy, drop gutter cells */
  .hero { padding: 28px 0 16px; }
  .hero-grid {
    /* minmax(0, 1fr) lets the column shrink below min-content of
       its descendants (e.g. the codepane terminal output that
       contains long unwrapped lines). Plain `1fr` would resolve
       to min-content and overflow the viewport. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
  }
  .hero-cell-gutter { display: none; }
  .hero-cell {
    border-right: 0 !important;
    padding: 18px 0 !important;
    min-height: auto !important;
    min-width: 0; /* permit shrink inside grid */
    overflow: hidden; /* clip the codepane's overflow:auto inner */
  }
  .hero-cell .codepane,
  .hero-cell .codepane-body { max-width: 100%; }
  .hero-cell h1, .hero h1 { font-size: 40px !important; line-height: 1.02 !important; }
  .hero-meta {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    margin-top: 18px;
  }
  .hero-meta .k { font-size: 10px; }
  .hero-meta .v { font-size: 22px; }

  /* Section heads */
  .sxn-head {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 28px 0 18px !important;
  }
  .sxn-num { font-size: 11px; }
  .sxn-title { font-size: 28px !important; line-height: 1.05 !important; }
  .sxn-sub { font-size: 13px; max-width: none; }

  /* Features / stats / kpis → single column */
  .features, .stats, .kpi-row {
    grid-template-columns: 1fr !important;
  }
  .feature { padding: 20px 16px !important; }
  .feature-title { font-size: 18px !important; }

  .stats .stat { padding: 18px 14px; }
  .stats .stat .n { font-size: 28px !important; }

  /* Method section panels stack */
  .method-grid, .method {
    grid-template-columns: 1fr !important;
  }

  /* Footer stacks */
  .footer { padding: 30px 0 40px; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  /* Tweaks panel — make bottom-sheet on mobile */
  .tweaks-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Livefeed + article rows */
  .livefeed, .live-row { grid-template-columns: 1fr !important; }

  /* Phase 10 — give .box-wrapped tables a horizontal scroll at
     mobile so they don't push the document past the viewport. */
  .box { overflow-x: auto; }
  .box > table { width: 100%; min-width: 0; }

  /* Body text scale */
  body { font-size: 14px; }
}

/* Phase 10 — topbar overflow fix at <=480px.
   Hide the UTC clock + 'indexing' pulse to free space. The
   ≤820px rule above already hides the indexing pill, so we
   re-assert it here and additionally hide the clock. */
@media (max-width: 480px) {
  .topbar-right [data-pl-clock] { display: none; }
  .topbar-right > span:first-child { display: none; }
  .topbar-right { gap: 8px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .topbar-inner { padding: 0 10px; gap: 6px; }
  .topbar-right .btn { padding: 5px 8px; }
  .hero-cell h1, .hero h1 { font-size: 32px !important; }
  .sxn-title { font-size: 24px !important; }
}

/* =========================================================
   PHASE 11 (XCC2) — Mobile topbar drawer
   Hamburger button + slide-in nav panel that exposes the
   primary-nav links collapsed by `.navlinks { display: none }`
   at <=820px. See _topbar.html + topbar-drawer.js.

   Pattern is reusable: any "modal-like" off-canvas panel can
   reuse .topbar-drawer-backdrop for the click-out overlay.
   ========================================================= */

/* Burger button — desktop default: never visible. The button
   ships with [hidden]; topbar-drawer.js removes the attribute
   on init so the @media rule below can take over. */
.topbar-burger {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 34px;
  height: 30px;
  padding: 0;
  margin-left: 4px;
  position: relative;
  cursor: pointer;
  color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease;
}
.topbar-burger:hover { background: var(--panel); }
.topbar-burger:focus-visible {
  outline: 2px solid var(--accent, #5aa9ff);
  outline-offset: 2px;
}
/* 3-line glyph: middle bar via background, top + bottom via
   pseudo-elements. No icon font, no SVG — pure CSS. */
.topbar-burger-glyph,
.topbar-burger-glyph::before,
.topbar-burger-glyph::after {
  display: block;
  position: absolute;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
}
.topbar-burger-glyph { top: 50%; margin-top: -1px; }
.topbar-burger-glyph::before { content: ""; top: -6px; left: 0; transform: none; }
.topbar-burger-glyph::after  { content: ""; top:  6px; left: 0; transform: none; }

/* Backdrop overlay — sits behind the drawer */
.topbar-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  z-index: 998;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.topbar-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Slide-in drawer panel itself.
   Default display:none so the HTML [hidden] attribute actually
   wins: a .topbar-drawer{display:flex} rule has the same
   specificity as the UA [hidden]{display:none} and comes later,
   so it was silently overriding [hidden] and leaving the drawer
   rendered off-canvas. On iOS Safari, overflow-x:hidden on
   html/body does NOT contain position:fixed descendants, so the
   translated drawer added ~280px of horizontal scroll. Switch
   to display:flex only while the drawer is visible. */
.topbar-drawer {
  position: fixed;
  top: var(--topbar-h, 56px);
  right: 0;
  width: 280px;
  max-width: calc(100vw - 32px);
  height: calc(100vh - var(--topbar-h, 56px));
  height: calc(100dvh - var(--topbar-h, 56px));
  background: var(--bg, #0b0c0e);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.35);
  z-index: 999;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.topbar-drawer:not([hidden]) { display: flex; }
.topbar-drawer.open {
  transform: translateX(0);
  opacity: 1;
}

.topbar-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg, #0b0c0e);
  z-index: 1;
}
.topbar-drawer-title {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim, #98a0aa);
  text-transform: uppercase;
}
.topbar-drawer-close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.topbar-drawer-close:hover { background: var(--panel); }

.topbar-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 24px;
  gap: 2px;
}
.topbar-drawer-link {
  display: block;
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 500;
}
.topbar-drawer-link:hover,
.topbar-drawer-link.active { background: var(--panel); }

.topbar-drawer-group { padding: 0; margin: 0; }
.topbar-drawer-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.topbar-drawer-group > summary::-webkit-details-marker { display: none; }
.topbar-drawer-group > summary::after {
  content: "▾";
  font-size: 10px;
  color: var(--dim);
  transition: transform 160ms ease;
}
.topbar-drawer-group[open] > summary::after { transform: rotate(180deg); }
.topbar-drawer-group > summary:hover { background: var(--panel); }
.topbar-drawer-sublink {
  display: block;
  padding: 10px 14px 10px 28px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
.topbar-drawer-sublink:hover,
.topbar-drawer-sublink.active { background: var(--panel-2, var(--panel)); }

/* Lock body scroll when drawer is open */
body.pl-drawer-open { overflow: hidden; touch-action: none; }

/* Show the burger only at <=820px. The drawer + backdrop
   themselves are positioned: fixed; they're harmless at any
   width as long as the burger can't open them. */
@media (max-width: 820px) {
  .topbar-burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* Phone-sized: drawer fills almost the whole viewport. */
@media (max-width: 480px) {
  .topbar-drawer {
    width: calc(100vw - 32px);
    max-width: 360px;
  }
}