/* /v2x-stack/ only. The layer diagram, the regional table and the
   scroll-driven security walkthrough. Shipped by build.py on the one route
   whose body carries data-v2x-trust, so no other page pays for it.

   Built on main.css tokens: brand red is the threat, secure-cyan is trust,
   secure-green is "accepted". No fonts of its own, no dark theme (the site
   has none), and every step's text is ordinary HTML that reads in full with
   the script blocked -- the dimming below only applies once the script has
   added .is-live. */

/* ---------- layer diagram ---------- */
.stack-layers { display: grid; gap: 8px; max-width: 980px; list-style: none; margin: 0; padding: 0; }
.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; }
.stack-layer {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: 6px 22px; align-items: baseline;
  padding: 16px 20px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--brand-dark); border-radius: var(--radius-card);
}
.stack-layer h3 { font-size: 16px; margin: 0; color: var(--ink); }
.stack-layer p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--brand-grey); }
.stack-layer .stack-eg { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--brand-dark); white-space: nowrap; }
.stack-layer.is-security { border-left-color: var(--secure-cyan); background: var(--secure-cyan-soft); }
.stack-layer.is-security a { color: var(--secure-cyan-dark); font-weight: 600; }
.stack-layer.is-access { border-left-color: var(--brand-red); }
.stack-layer.is-vertical { border-style: dashed; border-left-style: solid; background: transparent; }
@media (max-width: 880px) {
  .stack-layer { grid-template-columns: minmax(0, 1fr); }
  .stack-layer .stack-eg { white-space: normal; }
}

/* ---------- regional comparison ---------- */
.region-table th[scope="col"], .region-table th[scope="row"] { width: auto; }
.region-table th[scope="row"] { width: 17%; }
.status-table th[scope="row"], .status-table thead th:first-child { width: 24%; }
.status-table thead th:last-child { width: auto; }
.region-table td { font-family: inherit; font-size: 14.5px; }
.region-table td small { display: block; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted-2); }
.region-table .unk { color: #8a5500; font-weight: 600; } /* 6:1 on brand-soft; secure-amber is under 3:1 */
@media (max-width: 900px) { .region-table td, .region-table th { min-width: 190px; } }

.status-table td { font-family: inherit; font-size: 15px; line-height: 1.65; }
/* Two columns of very unequal length: on phones each row becomes a block,
   label above text, rather than a sideways-scrolling table. */
@media (max-width: 880px) {
  .status-table, .status-table tbody, .status-table tr, .status-table th, .status-table td { display: block; width: auto !important; min-width: 0 !important; }
  .status-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .status-table th[scope="row"] { border-bottom: 0; padding-bottom: 0; }
}
.status-table .st { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.st-impl { background: var(--secure-green-soft); color: #1d6b3b; }
.st-dev  { background: var(--secure-cyan-soft); color: var(--secure-cyan-dark); }
.st-plan { background: var(--secure-amber-soft); color: #8a5500; }
.st-lic  { background: #fdecec; color: var(--brand-red-dark); }
.st-no   { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--line); }

/* ---------- the walkthrough ---------- */
.trust {
  --t-top: 104px;
  --t-ink: var(--ink);
  --t-muted: var(--brand-grey);
  --t-line: var(--line);
  --t-surface: #fff;
  --t-paper: var(--brand-soft);
  --t-trust: var(--secure-cyan);
  --t-trust-ink: var(--secure-cyan-dark);
  --t-trust-soft: var(--secure-cyan-soft);
  --t-stop: var(--brand-red);
  --t-ok: var(--secure-green);
  --t-asphalt: var(--brand-dark);
  --t-marking: #E8B23A;
  --t-chip: #C9A23C;
  --t-chip-ink: #2A2108;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px;
}
.trust-stage-wrap {
  grid-column: 2; grid-row: 1; position: sticky; top: var(--t-top);
  height: calc(100vh - var(--t-top) - 24px); height: calc(100svh - var(--t-top) - 24px);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.trust-counter { display: flex; align-items: center; gap: 12px; font: 500 12.5px/1 'JetBrains Mono', monospace; color: var(--t-muted); }
.trust-counter b { color: var(--t-ink); font-weight: 500; }
.trust-bar { flex: 1; height: 2px; background: var(--t-line); overflow: hidden; }
.trust-bar i { display: block; height: 100%; background: var(--brand-red); transform-origin: 0 50%; transform: scaleX(.0909); transition: transform .4s ease; }
.trust-stage { width: 100%; aspect-ratio: 640 / 600; max-height: calc(100% - 26px); background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--radius-card); overflow: hidden; }
.trust-stage svg { display: block; width: 100%; height: 100%; overflow: hidden; }

.trust-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 4vh 0 30vh; min-width: 0; counter-reset: none; }
.trust-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; max-width: 32rem; margin: 0; }
.trust.is-live .trust-step { opacity: .3; transition: opacity .4s ease; }
.trust.is-live .trust-step.is-active { opacity: 1; }
.trust-step .trust-label { display: flex; align-items: center; gap: 12px; font: 600 11.5px/1 'JetBrains Mono', monospace; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand-red-dark); }
.trust-step .trust-label::after { content: ""; height: 1px; width: 40px; background: var(--t-line); }
.trust-step h3 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.3px; color: var(--t-ink); }
.trust-step p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--t-muted); }
.trust-step p strong { color: var(--t-ink); }
.trust-step .trust-note { align-self: flex-start; font: 400 12.5px/1.45 'JetBrains Mono', monospace; color: var(--brand-dark); padding: 7px 11px; border-radius: 4px; background: var(--t-trust-soft); }
.trust-step .trust-region { font-size: 14.5px; line-height: 1.65; padding-left: 12px; border-left: 2px solid var(--t-line); }
.trust-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--t-line); }
.trust-checks li { display: grid; grid-template-columns: 30px 1fr; padding: 9px 0; border-bottom: 1px solid var(--t-line); color: var(--t-ink); font-size: 15.5px; }
.trust-checks li span { font: 600 12.5px/1.9 'JetBrains Mono', monospace; color: var(--secure-cyan-dark); }

/* SVG: fills and type, all from the tokens above */
.trust svg text { font-family: 'Source Sans 3', 'Segoe UI', sans-serif; }
.trust .grid-dot { fill: var(--t-line); }
.trust .verge { fill: #E7EAEB; }
.trust .road { fill: var(--t-asphalt); }
.trust .edge { stroke: #E6EAE8; stroke-width: 2.5; opacity: .7; }
.trust .centre { stroke: var(--t-marking); stroke-width: 3.5; stroke-dasharray: 30 24; animation: trust-drive 1.1s linear infinite; }
@keyframes trust-drive { to { stroke-dashoffset: 54; } }
.trust .shell { fill: var(--shell); }
.trust .car-a { --shell: #2F6DB0; }
.trust .car-b { --shell: #E2DFD5; }
.trust .car-c { --shell: #8C4A44; }
.trust .roof { fill: rgba(0,0,0,.16); }
.trust .glass { fill: #172126; }
.trust .lamp { fill: #FFF6D6; }
.trust .brake { fill: #5B201C; transition: fill .3s; }
.trust .se { fill: var(--t-chip); stroke: var(--t-chip-ink); stroke-width: 1; transition: fill .4s; }
.trust .car .body { transition: transform 1s cubic-bezier(.3,.7,.3,1); }
.trust .carlabel { fill: #E6EAE8; font-weight: 600; font-size: 15px; }
.trust .pseudo { fill: var(--t-marking); font: 500 13px 'JetBrains Mono', monospace; opacity: 0; transition: opacity .4s; }
.trust svg.late .pseudo { opacity: 1; }
.trust .bad .carlabel { fill: #FFB4AA; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.trust svg[data-step="2"] #carB .body { transform: translateX(-34px); }
.trust svg[data-step="2"] #carB .brake { fill: #FF3B2F; }
.trust svg.anchored .se { fill: #56D39A; }

.trust [data-on] { opacity: 0; transition: opacity .45s ease; }
.trust [data-on].on { opacity: 1; }

.trust .rings circle { fill: none; stroke: var(--t-trust); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.trust .rings.x circle { stroke: var(--t-stop); }
.trust .rings.on circle { animation: trust-ring 2.4s ease-out infinite; }
.trust .rings circle:nth-child(2) { animation-delay: .8s; }
.trust .rings circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes trust-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(5.2); opacity: 0; } }

.trust .card-s { fill: var(--t-surface); stroke: var(--t-line); stroke-width: 1.5; }
.trust .cap { fill: var(--t-muted); font: 500 12px 'JetBrains Mono', monospace; letter-spacing: .1em; }
.trust .big { fill: var(--t-ink); font-weight: 600; font-size: 18px; }
.trust .mono { fill: var(--t-ink); font: 400 18px 'JetBrains Mono', monospace; }
.trust .wire { stroke: #9AA2A4; stroke-width: 1.5; fill: none; }
.trust .dash { stroke-dasharray: 4 5; }
.trust .wire.red { stroke: var(--t-stop); }
.trust .node rect { fill: var(--t-trust-ink); }
.trust .node text { fill: #fff; font-weight: 600; font-size: 16px; text-anchor: middle; }
.trust .node { transition: opacity .4s; }
.trust svg[data-step="4"] .aa, .trust svg[data-step="5"] .ea { opacity: .28; }
.trust .attacker rect { fill: var(--t-surface); stroke: var(--t-stop); stroke-width: 1.5; stroke-dasharray: 5 4; }
.trust .attacker line { stroke: var(--t-stop); stroke-width: 2; }
.trust .attacker circle { fill: var(--t-stop); }
.trust .attacker text { fill: var(--brand-red-dark); font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; text-anchor: middle; }
.trust .warn { fill: var(--brand-red-dark); font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .1em; }
.trust .ticket { fill: var(--t-surface); stroke: var(--t-trust-ink); stroke-width: 1.5; }
.trust .ticket-t { fill: var(--t-trust-ink); font: 500 14px 'JetBrains Mono', monospace; text-anchor: middle; }
.trust .chipbig { fill: var(--t-chip); }
.trust .chip-line { stroke: var(--t-chip-ink); stroke-width: 1.8; fill: none; }
.trust .chip-t { fill: var(--t-chip-ink); font: 500 13px 'JetBrains Mono', monospace; text-anchor: middle; }
.trust .pin { stroke: var(--t-chip); stroke-width: 6; stroke-linecap: round; }
.trust .arrow-l { stroke: var(--t-ink); stroke-width: 2; fill: none; }
.trust .arrowhead { fill: var(--t-ink); }
.trust .arrowhead-red { fill: var(--t-stop); }
.trust .lbl { fill: var(--t-ink); font: 500 14px 'JetBrains Mono', monospace; }
.trust .strong { fill: var(--t-ink); font-weight: 600; font-size: 18px; }
.trust .seg-hdr { fill: var(--brand-grey); }
.trust .seg-msg { fill: var(--t-paper); stroke: var(--t-line); stroke-width: 1.5; }
.trust .seg-tkt { fill: var(--t-surface); stroke: var(--t-trust-ink); stroke-width: 1.5; }
.trust .seg-sig { fill: var(--t-trust-ink); }
.trust .seg-t { font: 500 14px 'JetBrains Mono', monospace; text-anchor: middle; fill: var(--t-ink); }
.trust .seg-t.inv, .trust .seg-t.on-dark { fill: #fff; }
.trust .seg-u { font: 400 12px 'JetBrains Mono', monospace; text-anchor: middle; fill: var(--t-muted); }
.trust .pk { fill: var(--t-surface); stroke: var(--t-ink); stroke-width: 1.2; }
.trust .pk-sig { fill: var(--t-trust-ink); }
.trust .pk-bad { fill: var(--t-surface); stroke: var(--t-stop); stroke-width: 1.5; stroke-dasharray: 3 2; }
.trust .pk-move { transform: translate(440px, 452px); }
.trust .packet.on .pk-move { animation: trust-travel 2.4s ease-in-out infinite; }
@keyframes trust-travel {
  0% { transform: translate(214px, 510px); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translate(440px, 452px); opacity: 1; }
  78%, 100% { transform: translate(440px, 452px); opacity: 0; }
}
.trust .fk-move { transform: translate(508px, 428px); }
.trust .fake.on .fk-move { animation: trust-fake 2.2s ease-in infinite; }
@keyframes trust-fake {
  0% { transform: translate(560px, 354px); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translate(508px, 428px); opacity: 1; }
  80%, 100% { transform: translate(508px, 428px); opacity: 0; }
}
.trust .fake9.on .fk-move { animation: trust-fakedrop 2.6s ease-in forwards; }
@keyframes trust-fakedrop {
  0% { transform: translate(560px, 354px); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: translate(530px, 396px); opacity: 1; }
  70%, 100% { transform: translate(530px, 396px) scale(.4); opacity: 0; }
}
.trust .xmark { stroke: var(--t-stop); stroke-width: 3.5; stroke-linecap: round; opacity: 0; }
.trust .fake9.on .xmark { animation: trust-show .3s 1.2s forwards; }
.trust .check .reveal { opacity: 0; }
.trust .check.on .reveal { animation: trust-show .3s forwards; animation-delay: calc(var(--i) * .4s + .5s); }
@keyframes trust-show { to { opacity: 1; } }
.trust .mark-ok { fill: var(--t-ok); }
.trust .mark-bad { fill: var(--t-stop); }
.trust .mark-path { stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trust .row-t { fill: var(--t-ink); font-size: 16px; }
.trust .res-ok { fill: #1d6b3b; font-weight: 700; font-size: 18px; }
.trust .res-bad { fill: var(--brand-red-dark); font-weight: 700; font-size: 18px; }
.trust .divider { stroke: var(--t-line); stroke-width: 1.5; }
.trust .sum-key { fill: var(--brand-red-dark); font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .12em; }
.trust .sum-val { fill: var(--t-ink); font-weight: 600; font-size: 19px; }
.trust .sum-dot { fill: var(--brand-red); }

/* Phones and small tablets: the stage pins under the navbar, the steps
   scroll beneath it. */
@media (max-width: 880px) {
  .trust { grid-template-columns: minmax(0, 1fr); gap: 0; --t-top: 80px; }
  .trust-stage-wrap { grid-column: 1; grid-row: 1; height: auto; z-index: 2; background: var(--bg); padding: 8px 0 10px; }
  section.alt .trust-stage-wrap { background: var(--brand-soft); }
  /* Explicit width: with auto margins in a flex column the SVG would fall
     back to its 300px intrinsic width. Height capped at 42% of the screen. */
  .trust-stage { width: min(100%, calc(42vh * 640 / 600)); width: min(100%, calc(42svh * 640 / 600)); max-height: none; margin: 0 auto; }
  .trust-steps { grid-row: 2; padding: 2vh 0 30vh; }
  .trust-step { min-height: 58vh; }
  .trust-step h3 { font-size: 22px; }
}
/* No script: nothing is pinned or dimmed, and the diagram shows step 1. */
.trust:not(.is-live) .trust-stage-wrap { position: static; height: auto; }
.trust:not(.is-live) .trust-step { min-height: 0; padding: 18px 0; }

@media (prefers-reduced-motion: reduce) {
  .trust *, .trust *::before, .trust *::after { animation: none !important; transition: none !important; }
  .trust .check .reveal, .trust .xmark { opacity: 1; }
  .trust .rings circle { opacity: .4; transform: scale(2.4); }
  .trust.is-live .trust-step { opacity: 1; }
}