/* ═══════════════════════════════════════════════════════════════════
   Anatomy of a QUIC Connection — capture-replay whitepaper
   Identity: a packet capture you scroll through.
   Client lane = cyan. Server lane = violet. Verdict = gold.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --cap-bg: #05070d;
    --cap-bg-raise: #0a0e18;
    --cap-ink: #dbe4f0;
    --cap-ink-dim: #8b97ab;
    --cap-line: rgba(139, 151, 171, 0.18);
    --client: #22d3ee;
    --client-dim: rgba(34, 211, 238, 0.14);
    --server: #a78bfa;
    --server-dim: rgba(167, 139, 250, 0.14);
    --verdict: #fbbf24;
    --verdict-dim: rgba(251, 191, 36, 0.12);
    --ok: #34d399;
    --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--cap-bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34, 211, 238, 0.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 100%, rgba(167, 139, 250, 0.06), transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 63px, rgba(139, 151, 171, 0.035) 63px 64px);
    color: var(--cap-ink);
    font-family: var(--sans);
    line-height: 1.65;
    min-height: 100vh;
}

a { color: var(--client); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: rgba(139, 151, 171, 0.12);
    border: 1px solid var(--cap-line);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    color: #cfe6ff;
    overflow-wrap: anywhere;
}

/* ── Capture-file header ─────────────────────────────────────────── */

/* Content layers sit above the fixed background canvas (z-index 0) */
.cap-header, .cap-footer { position: relative; z-index: 1; }

.cap-header {
    border-bottom: 1px solid var(--cap-line);
    background: linear-gradient(180deg, rgba(10, 14, 24, 0.9), rgba(5, 7, 13, 0.6));
    padding: 34px 20px 22px;
}

.cap-header-inner { max-width: 1060px; margin: 0 auto; }

.cap-header-top { display: flex; gap: 22px; align-items: center; }

.logo-image {
    width: 74px; height: 74px;
    border-radius: 12px;
    border: 1px solid var(--cap-line);
    display: block;
}

.cap-kicker {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--client);
    margin-bottom: 6px;
}

.cap-title {
    font-size: clamp(1.7rem, 4.4vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    background: linear-gradient(92deg, var(--cap-ink) 20%, var(--client) 60%, var(--server) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cap-ink);
}

.cap-subtitle { color: var(--cap-ink-dim); margin-top: 8px; max-width: 62ch; }

.cap-meta {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--cap-line);
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--mono);
}

.cap-meta-item { background: var(--cap-bg-raise); padding: 10px 14px; }
.cap-meta-item dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cap-ink-dim); }
.cap-meta-item dd { font-size: 0.86rem; margin-top: 3px; color: var(--cap-ink); overflow-wrap: anywhere; }
.cap-meta-verdict dd { color: var(--verdict); cursor: pointer; }
.cap-meta-verdict dd:hover, .cap-meta-verdict dd:focus-visible { text-decoration: underline; outline: none; }

.cap-byline { margin-top: 14px; font-size: 0.82rem; color: var(--cap-ink-dim); }

/* ── Connection-state HUD (bottom status bar, like a capture tool) ──
   Lives at the bottom of the viewport so it never shares the top strip
   with the site's floating menu button (fixed top-right, z 10200). */

.hud {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(5, 7, 13, 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--cap-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.hud-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--mono);
}

/* Keep the last content clear of the fixed bottom bar */
body { padding-bottom: 64px; }

.hud-cells { display: flex; gap: 16px; flex-wrap: wrap; }

.hud-cell {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cap-ink-dim);
}

.hud-cell b {
    display: inline-block;
    margin-left: 6px;
    color: var(--client);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
    min-width: 3ch;
}

.hud-track {
    display: flex;
    gap: 4px;
    list-style: none;
}

.hud-track li {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cap-ink-dim);
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 99px;
    transition: all 0.3s ease;
    opacity: 0.55;
}

.hud-track li.done { opacity: 0.9; color: var(--ok); }
.hud-track li.now {
    opacity: 1;
    color: var(--client);
    border-color: rgba(34, 211, 238, 0.5);
    background: var(--client-dim);
}
.hud-track li[data-s="verdict"].now,
.hud-track li[data-s="verdict"].done { color: var(--verdict); border-color: rgba(251, 191, 36, 0.5); background: var(--verdict-dim); }

/* ── Frame index (packet-list side pane, wide screens only) ──────── */

.frame-index {
    display: none;
    position: fixed;
    top: 96px;
    left: 14px;
    width: 205px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    z-index: 25;
    font-family: var(--mono);
    background: rgba(5, 7, 13, 0.85);
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    padding: 10px 8px 12px;
    scrollbar-width: thin;
}

@media (min-width: 1540px) {
    .frame-index { display: block; }
}

.fi-head {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cap-ink-dim);
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--cap-line);
    margin-bottom: 6px;
}

.fi-list, .fi-sub { list-style: none; margin: 0; padding: 0; }

.fi-list { counter-reset: fi; }

.fi-list > li { counter-increment: fi; }

.fi-list > li > a {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 8px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    font-size: 0.7rem;
    color: var(--cap-ink-dim);
    text-decoration: none;
    white-space: nowrap;
}

.fi-list > li > a::before {
    content: counter(fi, decimal-leading-zero);
    color: rgba(139, 151, 171, 0.5);
    font-size: 0.62rem;
}

.fi-t {
    min-width: 34px;
    text-align: right;
    font-size: 0.6rem;
    color: var(--verdict);
    opacity: 0.7;
}

.fi-list > li > a:hover { color: var(--cap-ink); text-decoration: none; background: rgba(34, 211, 238, 0.06); }

.fi-list > li > a.fi-active {
    color: var(--client);
    border-left-color: var(--client);
    background: var(--client-dim);
}

.fi-sub { margin: 1px 0 3px 44px; }

.fi-sub a {
    display: block;
    padding: 2px 8px;
    font-size: 0.64rem;
    color: rgba(139, 151, 171, 0.75);
    text-decoration: none;
    border-radius: 5px;
}

.fi-sub a:hover { color: var(--client); text-decoration: none; }

/* ── Capture body / lanes ────────────────────────────────────────── */

.capture {
    max-width: 1060px;
    margin: 0 auto;
    padding: 10px 20px 60px;
    position: relative;
}

/* the wire: a faint vertical spine down the middle of the capture */
.capture::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--cap-line) 6%, var(--cap-line) 94%, transparent);
    pointer-events: none;
}

.lane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--mono);
    pointer-events: none;
}

.lane {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--cap-bg-raise);
    border: 1px solid var(--cap-line);
}

.lane em { display: block; font-style: normal; letter-spacing: 0.02em; font-size: 0.66rem; color: var(--cap-ink-dim); }
.lane-c { color: var(--client); border-color: rgba(34, 211, 238, 0.4); }
.lane-s { color: var(--server); border-color: rgba(167, 139, 250, 0.4); text-align: right; }

.lane-wire-label {
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cap-ink-dim);
    background: var(--cap-bg);
    padding: 0 10px;
}

/* ── Phases ──────────────────────────────────────────────────────── */

.phase {
    position: relative;
    margin: 46px 0;
    padding: 26px 28px 30px;
    background: rgba(10, 14, 24, 0.72);
    border: 1px solid var(--cap-line);
    border-radius: 14px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.phase.in-view { opacity: 1; transform: none; }

.phase-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-family: var(--mono);
}

.pm-time {
    font-size: 0.78rem;
    color: var(--verdict);
    letter-spacing: 0.06em;
}

.pm-chip {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(34, 211, 238, 0.4);
    color: var(--client);
    background: var(--client-dim);
}

.pm-chip-meta { border-color: var(--cap-line); color: var(--cap-ink-dim); background: transparent; }

.phase h2 {
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.prose { color: var(--cap-ink-dim); margin: 12px 0; max-width: 88ch; }
.prose strong { color: var(--cap-ink); }

/* ── Wire exchanges (packet rows) ────────────────────────────────── */

.wire {
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pkt {
    position: relative;
    max-width: 78%;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 8px 14px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pkt code { background: transparent; border: none; padding: 0; color: inherit; font-size: 1em; }

.pkt.c2s {
    align-self: flex-start;
    background: var(--client-dim);
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #bfeef8;
    border-right-width: 3px;
    transform: translateX(-26px);
}

.pkt.s2c {
    align-self: flex-end;
    background: var(--server-dim);
    border: 1px solid rgba(167, 139, 250, 0.35);
    color: #ddd3fd;
    border-left-width: 3px;
    transform: translateX(26px);
}

/* direction arrows drawn as pseudo-elements pointing along the wire */
.pkt.c2s::after, .pkt.s2c::after {
    font-size: 0.9em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
    opacity: 0.8;
}
.pkt.c2s::after { content: "\2192"; right: -20px; }
.pkt.s2c::after { content: "\2190"; left: -20px; }

.phase.in-view .pkt { opacity: 1; transform: none; }
.phase.in-view .pkt:nth-child(1) { transition-delay: 0.15s; }
.phase.in-view .pkt:nth-child(2) { transition-delay: 0.4s; }
.phase.in-view .pkt:nth-child(3) { transition-delay: 0.65s; }
.phase.in-view .pkt:nth-child(4) { transition-delay: 0.9s; }

/* ── Transport-parameter dump ────────────────────────────────────── */

.param-dump {
    margin: 18px 0;
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--mono);
}

.pd-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(90px, 0.7fr) 2fr;
    gap: 12px;
    padding: 7px 14px;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(139, 151, 171, 0.09);
    background: rgba(10, 14, 24, 0.6);
}

.pd-row:nth-child(odd) { background: rgba(10, 14, 24, 0.9); }
.pd-row:last-child { border-bottom: none; }

.pd-k { color: var(--server); overflow-wrap: anywhere; }
.pd-v { color: var(--cap-ink); text-align: right; }
.pd-note { color: var(--cap-ink-dim); font-family: var(--sans); font-size: 0.8rem; }

/* ── Probe grid ──────────────────────────────────────────────────── */

.probe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.probe-card {
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    padding: 16px 18px;
    background: rgba(5, 7, 13, 0.55);
    transition: border-color 0.25s ease;
}

.probe-card:hover { border-color: rgba(34, 211, 238, 0.45); }

.probe-card h3 {
    font-size: 0.98rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.probe-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--verdict);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 4px;
    padding: 1px 7px;
}

.probe-card p { font-size: 0.88rem; color: var(--cap-ink-dim); }
.probe-card strong { color: var(--cap-ink); }

/* ── Inline SVG diagrams (SMIL-animated, zero JS) ────────────────── */

.diagram-card {
    margin: 20px 0;
    padding: 18px 14px 10px;
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    background: rgba(5, 7, 13, 0.55);
    overflow-x: auto;
}

.cap-svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 560px;
}

.diagram-caption {
    margin: 10px 4px 6px;
    font-size: 0.8rem;
    color: var(--cap-ink-dim);
}

.svg-t {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--cap-ink-dim);
}

.svg-tc { fill: var(--client); }
.svg-ts { fill: var(--server); }
.svg-tv { fill: var(--verdict); }

.svg-rail {
    stroke: rgba(139, 151, 171, 0.4);
    stroke-width: 1;
    stroke-dasharray: 2 6;
}

.svg-msg {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.svg-msg-c { stroke: var(--client); }
.svg-msg-s { stroke: var(--server); }

.svg-bar { stroke-width: 1; }
.svg-bar-c { fill: rgba(34, 211, 238, 0.35); stroke: var(--client); }
.svg-bar-s { fill: rgba(167, 139, 250, 0.35); stroke: var(--server); }
.svg-bar-v { fill: rgba(251, 191, 36, 0.4); stroke: var(--verdict); }

.svg-path-0 { stroke: var(--client); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.65; }
.svg-path-1 { stroke: var(--verdict); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.65; }

.svg-node {
    fill: rgba(34, 211, 238, 0.15);
    stroke: var(--client);
    stroke-width: 1.5;
}

.svg-node-s { fill: rgba(167, 139, 250, 0.15); stroke: var(--server); }

.svg-pkt-0 { fill: var(--client); }
.svg-pkt-1 { fill: var(--verdict); }

/* ── Code + log excerpts ─────────────────────────────────────────── */

.code-block {
    margin: 16px 0;
    padding: 14px 16px;
    background: rgba(5, 7, 13, 0.85);
    border: 1px solid var(--cap-line);
    border-left: 3px solid rgba(167, 139, 250, 0.5);
    border-radius: 8px;
    overflow-x: auto;
}

.code-block code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.76rem;
    line-height: 1.6;
    color: #cfe6ff;
    white-space: pre;
}

.pm-chip-server { border-color: rgba(167, 139, 250, 0.4); color: var(--server); background: var(--server-dim); }

.log-dump {
    margin: 16px 0;
    padding: 12px 16px;
    background: #03050a;
    border: 1px solid var(--cap-line);
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.7;
    overflow-x: auto;
}

.log-line { white-space: nowrap; color: var(--ok); }
.log-line-dim { color: rgba(52, 211, 153, 0.6); }
.log-ts { color: var(--cap-ink-dim); }
.log-src { color: var(--server); }

/* ── Field notes ─────────────────────────────────────────────────── */

.field-notes {
    margin: 18px 0 6px;
    padding: 0;
    list-style: none;
    counter-reset: fn;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-notes li {
    counter-increment: fn;
    position: relative;
    padding: 14px 18px 14px 58px;
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    background: rgba(5, 7, 13, 0.55);
    color: var(--cap-ink-dim);
    font-size: 0.9rem;
}

.field-notes li::before {
    content: counter(fn, decimal-leading-zero);
    position: absolute;
    left: 16px;
    top: 14px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--verdict);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 5px;
    padding: 1px 6px;
}

.field-notes li b { display: block; color: var(--cap-ink); margin-bottom: 3px; }

/* ── Evidence manifest ───────────────────────────────────────────── */

.inv-group {
    margin: 18px 0;
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    padding: 14px 18px;
    background: rgba(5, 7, 13, 0.45);
}

.inv-group h3 {
    font-size: 0.98rem;
    color: var(--cap-ink);
    margin-bottom: 8px;
}

.inv-why {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--verdict);
    margin-top: 3px;
}

.inv-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inv-list li {
    font-size: 0.84rem;
    color: var(--cap-ink-dim);
    padding-left: 14px;
    position: relative;
}

.inv-list li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--client);
}

.inv-list code { color: var(--server); background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.25); }

/* ── Verdict tree + reveal ───────────────────────────────────────── */

.verdict-tree {
    margin: 18px 0;
    border-left: 2px solid rgba(251, 191, 36, 0.35);
    padding: 4px 0 4px 18px;
    font-size: 0.92rem;
}

.vt-q { color: var(--cap-ink); font-weight: 600; margin-top: 12px; }
.vt-q:first-child { margin-top: 0; }
.vt-branch { margin: 6px 0 6px 14px; display: flex; flex-direction: column; gap: 5px; }
.vt-no, .vt-yes { color: var(--cap-ink-dim); font-size: 0.88rem; }

.vt-grade {
    display: inline-block;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 1px 9px;
    border-radius: 5px;
    margin: 0 4px;
}

.vt-f   { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.4); }
.vt-c   { background: rgba(251, 146, 60, 0.15);  color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.4); }
.vt-a   { background: rgba(250, 204, 21, 0.12);  color: #facc15; border: 1px solid rgba(250, 204, 21, 0.4); }
.vt-ap  { background: rgba(52, 211, 153, 0.12);  color: var(--ok); border: 1px solid rgba(52, 211, 153, 0.4); }
.vt-app { background: var(--verdict-dim);        color: var(--verdict); border: 1px solid rgba(251, 191, 36, 0.55); }

.verdict-reveal {
    margin: 26px auto 10px;
    max-width: 460px;
    text-align: center;
    padding: 22px 20px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(251, 191, 36, 0.12), transparent 70%),
        rgba(10, 14, 24, 0.8);
}

.vr-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cap-ink-dim);
}

.vr-grade {
    display: block;
    font-family: var(--mono);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--verdict);
    text-shadow: 0 0 34px rgba(251, 191, 36, 0.45);
    filter: blur(14px);
    opacity: 0.4;
    transition: filter 0.9s ease 0.35s, opacity 0.9s ease 0.35s;
}

.phase.in-view .vr-grade { filter: blur(0); opacity: 1; }

.vr-detail { display: block; font-family: var(--mono); font-size: 0.74rem; color: var(--cap-ink-dim); margin-top: 6px; }

/* ── Epilogue ────────────────────────────────────────────────────── */

.phase-epilogue { border-color: rgba(251, 191, 36, 0.25); }

.epilogue-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 20px 0 30px;
}

.ep-link {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--cap-line);
    border-radius: 10px;
    background: rgba(5, 7, 13, 0.55);
    color: var(--cap-ink);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.ep-link:hover { border-color: rgba(34, 211, 238, 0.5); text-decoration: none; transform: translateY(-2px); }
.ep-link b { display: block; font-size: 0.94rem; color: var(--client); }
.ep-link span { display: block; font-size: 0.8rem; color: var(--cap-ink-dim); margin-top: 3px; }

.refs-heading { font-size: 1.1rem; margin-top: 10px; }

.ref-list {
    margin: 12px 0 0 18px;
    color: var(--cap-ink-dim);
    font-size: 0.86rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.cap-footer {
    border-top: 1px solid var(--cap-line);
    padding: 26px 20px 40px;
    text-align: center;
}

.footer-copyright { font-size: 0.85rem; color: var(--cap-ink-dim); }
.footer-copyright strong { color: var(--cap-ink); }
.footer-notice { font-size: 0.75rem; color: var(--cap-ink-dim); margin-top: 6px; opacity: 0.8; }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 800px) {
    .capture::before { display: none; }
    .lane-header { position: static; }
    .lane-wire-label { display: none; }
    .pkt { max-width: 92%; font-size: 0.72rem; }
    .pkt.c2s::after, .pkt.s2c::after { display: none; }
    .pd-row { grid-template-columns: 1fr auto; }
    .pd-note { grid-column: 1 / -1; padding-top: 2px; }
    .hud-track { display: none; }
    .phase { padding: 20px 16px 24px; margin: 30px 0; }
    .cap-header-top { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── Reduced motion: everything visible, nothing animated ────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .phase, .pkt { opacity: 1; transform: none; transition: none; }
    .vr-grade { filter: none; opacity: 1; transition: none; }
    .hud-track li, .hud-cell b, .probe-card, .ep-link { transition: none; }
}