/* Spotlight PQC labs — Cisco U. Spotlight design system (light by default; Midnight dark on request)
   Tokens: https://claude.ai/artifact/XhKRuURB9MHVGDyDS125Li  ·  Inter, Midnight Blue ink, outlined containers,
   blues for meaning, no fills / shadows / side stripes. The app aliases (--bg, --panel, --accent, --pqc…) map onto them. */
:root { --fs: 1;
  /* design-system tokens */
  --surface: #ffffff; --ink: #07182d; --ink-muted: #525e6c; --accent-text: #0a60ff; --highlight: #02c8ff;
  --line: #525e6c; --line-subtle: #d6d6d6; --action: #0a60ff; --on-action: #ffffff; --focus-ring: #0a60ff;
  --success: #45991f; --danger: #eb4651; --tint: #f4f5f7;
  --radius-container: 12px; --radius-control: 6px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* app aliases */
  --bg: var(--surface); --panel: var(--surface); --panel-2: var(--tint); --border: var(--line-subtle);
  --text: var(--ink); --muted: var(--ink-muted); --accent: var(--action); --accent-hover: #0848c4; --accent-soft: rgba(10, 96, 255, .08);
  --warn: var(--ink-muted); --success-soft: transparent; --warn-soft: transparent; --danger-soft: transparent; --info-soft: transparent;
  --cisco-primary: var(--ink-muted); --cisco-brand-blue: var(--action);
  /* tunnel meaning: told apart by lightness and by the label, not hue alone */
  --classic: #525e6c; --ppk: #02c8ff; --pqc: #0a60ff; --neg: #b4b9c0; --fail: var(--danger); --gre: #525e6c;
  --router: var(--ink); --router-top: #f2f7ff; --router-arrow: #0a60ff; --link: #8a939e;
  /* device console — light: ink on white, every colour ≥ 5:1 */
  --term-bg: #ffffff; --term-chrome: #f4f5f7; --term-text: #07182d; --term-strong: #07182d; --term-muted: #525e6c;
  --term-log: #0848c4; --term-debug: #46525f; --term-err: #b3121f; --term-ts: #6b6b6b;
  --term-border: #c4c9cf; --term-caret: #0a60ff; --term-tab: #ffffff;
}
:root[data-theme="dark"] {
  --surface: #07182d; --ink: #ffffff; --ink-muted: #b4b9c0; --accent-text: #02c8ff; --line: #b4b9c0; --line-subtle: #2c3d55;
  --action: #02c8ff; --on-action: #07182d; --focus-ring: #02c8ff; --tint: #0c2140; --accent-hover: #63dbff; --accent-soft: rgba(2, 200, 255, .10);
  --classic: #b4b9c0; --ppk: #0a60ff; --pqc: #02c8ff; --neg: #525e6c; --link: #6d7a8b;
  --term-bg: #030e1c; --term-chrome: #0a1d36; --term-text: #e8edf3; --term-strong: #ffffff; --term-muted: #a3adb8;
  --term-log: #8fdcff; --term-debug: #b4b9c0; --term-err: #ff8a91; --term-ts: #8c96a3;
  --term-border: rgba(255,255,255,.2); --term-caret: #02c8ff; --term-tab: #030e1c;
  --router-top: #0c2140; --router-arrow: #02c8ff;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-sans); color: var(--text); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
code, kbd { font-family: var(--font-mono); font-size: .86em; border: 1px solid var(--line-subtle); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
kbd { border-bottom-width: 2px; }

/* ── nav ── */
.lab-nav { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line-subtle); }
.nav-home { font-size: 14px; text-decoration: none; white-space: nowrap; color: var(--ink-muted); }
.nav-home:hover { color: var(--accent-text); }
.nav-sep { width: 1px; height: 20px; background: var(--line-subtle); }
.badge { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); padding: 2px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.nav-title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.nav-spacer { flex: 0 0 0; }
@media (max-width: 1180px) { .edu-badge { display: none; } }
.nav-spacer { flex: 1; }
.nav-progress { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn { font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; border-radius: var(--radius-control); padding: 6px 14px; cursor: pointer; border: 1px solid var(--action); background: var(--action); color: var(--on-action); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn.ghost:hover { border-color: var(--action); color: var(--accent-text); }
.btn.success { background: transparent; border-color: var(--action); color: var(--accent-text); }
.btn.success:hover { background: var(--accent-soft); }
.btn.icon { padding: 3px 9px; }

/* ── layout ── */
.split { flex: 1; display: flex; min-height: 0; }
.tutorial { width: 42%; min-width: 320px; max-width: 70%; display: flex; flex-direction: column; background: var(--surface); min-height: 0; }
.divider { width: 5px; cursor: col-resize; background: var(--line-subtle); flex-shrink: 0; }
.divider:hover, .divider.drag, .divider:focus-visible { background: var(--action); outline: none; }
.labpane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--term-bg); }

/* ── tutorial: header, step navigator ── */
.tut-head { padding: var(--space-3) var(--space-4) var(--space-3); border-bottom: 1px solid var(--line-subtle); }
/* collapse toggle, and the collapsed pane: a column of step numbers (double-click = Show Me) */
.tut-head { position: relative; }
.tut-collapse { position: absolute; top: 8px; right: 10px; font: inherit; font-size: 15px; line-height: 1; width: 26px; height: 24px; border-radius: var(--radius-control); border: 1px solid var(--line-subtle); background: var(--surface); color: var(--ink); cursor: pointer; }
.tut-collapse:hover, .tut-collapse:focus-visible { border-color: var(--action); color: var(--accent-text); outline: none; }
.tutorial.collapsed { width: 60px !important; min-width: 60px; }
.tutorial.collapsed .tut-kicker, .tutorial.collapsed .progress, .tutorial.collapsed #steps { display: none; }
.tutorial.collapsed .tut-head { padding: 40px 0 var(--space-3); border-bottom: 0; flex: 1; overflow-y: auto; }
.tutorial.collapsed .tut-collapse { left: 50%; right: auto; transform: translateX(-50%); }
.tutorial.collapsed .step-nav { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; }
.tutorial.collapsed + .divider { display: none; }
.step-nav button.running { border: 2px solid var(--action); animation: step-busy 1s ease-in-out infinite; }
@keyframes step-busy { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .step-nav button.running { animation: none; } }
.tut-kicker { font-size: 12px; line-height: 16px; color: var(--muted); margin-bottom: var(--space-2); }
.progress { height: 4px; border-radius: var(--radius-pill); background: var(--line-subtle); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--action); transition: width .4s; }
.step-nav { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.step-nav button { font: inherit; font-size: 12px; font-weight: 700; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-subtle); background: var(--surface); color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; position: relative; }
.step-nav button:hover { border-color: var(--action); color: var(--accent-text); }
.step-nav button[data-status="active"] { border: 2px solid var(--action); color: var(--accent-text); }
.step-nav button[data-status="done"] { border-color: var(--success); color: var(--ink); }
.step-nav button[data-status="done"]::after { content: '✓'; position: absolute; right: -4px; top: -5px; font-size: 10px; line-height: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); color: var(--success); border: 1px solid var(--success); }
.step-nav button[aria-current="true"] { box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }

/* ── steps ── */
.steps { list-style: none; margin: 0; padding: var(--space-3) var(--space-3) 48px; overflow-y: auto; flex: 1; }
.step { border: 1px solid var(--line-subtle); border-radius: var(--radius-container); margin-bottom: var(--space-2); background: var(--surface); overflow: hidden; scroll-margin-top: 8px; }
.step[data-status="active"] { border: 2px solid var(--action); }
.step-head { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; cursor: pointer; user-select: none; background: none; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; }
.step-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--line); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.step[data-status="active"] .step-num { background: var(--action); color: var(--on-action); border-color: var(--action); }
.step[data-status="done"] .step-num { border-color: var(--success); color: var(--success); }
.step[data-status="done"] .step-num::before { content: '✓'; }
.step[data-status="done"] .step-num span { display: none; }
.step-title { font-weight: 700; flex: 1; font-size: 16px; line-height: 24px; }
.step[data-status="locked"] .step-title { color: var(--muted); font-weight: 600; }
.tag { font-size: 12px; line-height: 16px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line-subtle); color: var(--muted); white-space: nowrap; }
.tag.base, .tag.verify { border-color: var(--line); color: var(--ink); }
.tag.ppk { border-color: var(--ppk); color: var(--ink); }
.tag.pqc { border-color: var(--pqc); color: var(--accent-text); }
.tag.hub { border-color: var(--line); color: var(--ink); }
.step-body { display: none; padding: 0 var(--space-5) var(--space-4) 52px; font-size: 15px; line-height: 24px; }
.step.open .step-body { display: block; }
.step-body p { margin: 10px 0; }
.step-body ul, .step-body ol { margin: 8px 0; padding-left: 20px; } .step-body li { margin: 4px 0; }
.step-body h4 { margin: 18px 0 6px; font-size: 16px; line-height: 24px; font-weight: 700; }
.step-body .src { font-size: 13px; line-height: 20px; color: var(--muted); }

/* goal: the one highlighted box of a step, shown first */
.goal { margin: 4px 0 14px; padding: 10px 14px; border-radius: var(--radius-container); border: 2px solid var(--action); font-size: 15px; line-height: 22px; font-weight: 500; }
.goal-label { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--accent-text); margin-bottom: 2px; }

/* tables */
.t { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; line-height: 20px; }
.t th, .t td { border-bottom: 1px solid var(--line-subtle); padding: 7px 10px 7px 0; text-align: left; vertical-align: top; }
.t th { font-weight: 700; border-bottom: 2px solid var(--line); }
.t td + td, .t th + th { padding-left: 10px; }
.t.mono td { font-family: var(--font-mono); font-size: 13px; }
.t td:first-child code { overflow-wrap: normal; word-break: normal; }
.t td:first-child { max-width: 45%; }
.step-body { overflow-wrap: anywhere; }
.pill { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); border: 1.5px solid; color: var(--ink); white-space: nowrap; }
.pill.classic { border-color: var(--classic); } .pill.ppk { border-color: var(--ppk); } .pill.pqc { border-color: var(--pqc); color: var(--accent-text); } .pill.hub { border-color: var(--line); }

/* "what each line does" tables fold away */
details.why { margin: 10px 0; border: 1px solid var(--line-subtle); border-radius: var(--radius-container); padding: 0 14px; }
details.why > summary { cursor: pointer; padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--accent-text); list-style: none; }
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::before { content: '+'; display: inline-block; width: 16px; font-weight: 700; }
details.why[open] > summary::before { content: '−'; }
details.why .t { margin-top: 0; }

/* config snippets (to type) and output (to expect) */
.cfg { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--radius-container); overflow: hidden; position: relative; background: var(--surface); }
.cfg-head { display: flex; gap: var(--space-2); align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line-subtle); font-size: 12px; line-height: 16px; color: var(--muted); }
.dev-chip { font-weight: 700; font-size: 12px; line-height: 16px; padding: 0 7px; border-radius: 4px; color: var(--ink); border: 1.5px solid var(--pqc); }
.dev-chip.dev-r2 { border-color: var(--line); } .dev-chip.dev-r3 { border-color: var(--ppk); }
.cfg pre, pre.out { margin: 0; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink); overflow-x: auto; white-space: pre; background: transparent; }
pre.out { border: 1px dashed var(--line); border-radius: var(--radius-container); margin: 10px 0; color: var(--ink-muted); }
pre.out::before { content: 'Expected output'; display: block; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }

/* callouts: outlined, labelled, icon first */
.callout { position: relative; border-radius: var(--radius-container); padding: 10px 14px 10px 42px; margin: 12px 0; font-size: 14px; line-height: 21px; border: 1px solid var(--line-subtle); }
.callout::before { position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid; }
.callout.info::before { content: 'i'; color: var(--accent-text); }
.callout.tip::before { content: '✓'; color: var(--success); }
.callout.warn::before { content: '!'; color: var(--danger); }
.callout.edu { border-color: var(--line); }
.callout.edu::before { content: 'i'; color: var(--ink); }
.callout b:first-child { font-weight: 700; }

/* hints, actions, finish */
.step-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.step-hint { display: none; margin-top: 12px; padding: 10px 14px 10px 42px; position: relative; border-radius: var(--radius-container); border: 1px solid var(--action); font-size: 14px; line-height: 21px; }
.step-hint::before { content: 'Hint'; position: absolute; left: 12px; top: 10px; font-size: 11px; font-weight: 700; color: var(--accent-text); }
.step-hint.show { display: block; }
.step-done { display: none; color: var(--success); font-weight: 700; font-size: 14px; }
.step[data-status="done"] .step-done { display: inline; }
.finish { margin: 8px 0 16px; padding: 16px 18px; border-radius: var(--radius-container); border: 2px solid var(--success); display: none; }
.finish.show { display: block; }
.finish h3 { margin: 0 0 6px; font-size: 20px; line-height: 28px; }

/* ── topology ── */
.topo-wrap { height: 300px; min-height: 150px; flex-shrink: 0; background: var(--surface); display: flex; flex-direction: column; }
.topo-toolbar { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 7px 14px; font-size: 13px; line-height: 18px; color: var(--ink); border-bottom: 1px solid var(--line-subtle); }
.legend { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.sw.classic { background: var(--classic); } .sw.ppk { background: var(--ppk); } .sw.pqc { background: var(--pqc); height: 5px; }
.sw.neg { background: repeating-linear-gradient(90deg, var(--neg) 0 4px, transparent 4px 7px); }
.sw.fail { background: repeating-linear-gradient(90deg, var(--fail) 0 4px, transparent 4px 7px); }
.topo-hint { margin-left: auto; }
#topo { flex: 1; width: 100%; min-height: 0; display: block; }
#topo text { font-family: var(--font-sans); fill: var(--ink); }
#topo .lbl-ip { font-family: var(--font-mono); font-size: calc(17px * var(--fs)); font-weight: 600; fill: var(--ink); }
#topo .lbl-port { font-size: calc(15px * var(--fs)); font-weight: 500; fill: var(--ink-muted); }
#topo .lbl-link { font-size: calc(15px * var(--fs)); fill: var(--ink-muted); }
#topo .host { font-size: calc(22px * var(--fs)); font-weight: 700; }
#topo .role { font-size: calc(15px * var(--fs)); fill: var(--ink-muted); }
#topo .router { cursor: pointer; }
#topo .router .ring { fill: none; stroke: transparent; stroke-width: 2; }
#topo .router .r-body, #topo .router .r-top { fill: var(--surface); stroke: url(#g-router); stroke-width: 2.2; }
#topo .router .r-top { fill: var(--router-top); }
#topo .router .r-arrow { stroke: var(--router-arrow); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#topo .router:hover .r-top { fill: var(--accent-soft); }
#topo .router:hover .ring { stroke: var(--line-subtle); }
#topo .router.active .ring { stroke: var(--action); }
#topo .router:focus { outline: none; }
#topo .router:focus-visible .ring { stroke: var(--focus-ring); stroke-dasharray: 3 3; }
#topo .link { stroke: var(--link); stroke-width: 2; }
#topo .dot-up { fill: var(--success); } #topo .dot-down { fill: var(--fail); }
#topo .tun { fill: none; stroke-width: 3; stroke-linecap: round; cursor: pointer; }
#topo .tun-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
#topo .tun.gre { stroke: var(--gre); stroke-width: 2; stroke-dasharray: 2 5; }
#topo .tun.classic { stroke: var(--classic); } #topo .tun.ppk { stroke: var(--ppk); } #topo .tun.pqc { stroke: var(--pqc); stroke-width: 5; }
#topo .tun.neg, #topo .tun.half { stroke: var(--neg); stroke-dasharray: 7 6; animation: dash 1s linear infinite; }
#topo .tun.fail { stroke: var(--fail); stroke-dasharray: 7 6; }
@keyframes dash { to { stroke-dashoffset: -26; } }
#topo .tun-label rect { fill: var(--surface); stroke-width: 1.5; }
#topo .tun-label text { font-size: calc(15px * var(--fs)); font-weight: 600; fill: var(--ink); }
#topo .tun-label .st { font-weight: 700; }
#topo .tun-label { cursor: pointer; }
#topo .tun-label text.lbl-tun-net { font-family: var(--font-mono); font-size: calc(13px * var(--fs)); font-weight: 500; fill: var(--ink-muted); }
#topo .lbl-tun { font-family: var(--font-mono); font-size: calc(15px * var(--fs)); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
#topo .pkt { pointer-events: none; }
#topo .lbl-drop { font-family: var(--font-mono); font-size: calc(14px * var(--fs)); font-weight: 700; fill: var(--fail); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
/* triangle layout (GRE lab): the WAN cloud around R2 — outlined with a faint tint, never louder than the tunnels */
#topo .cloud { fill: var(--tint); stroke: var(--line-subtle); stroke-width: 1.5; }
#topo .cloud-lbl { font-size: calc(14px * var(--fs)); font-weight: 700; fill: var(--ink-muted); letter-spacing: .06em; }
#topo .cloud-note { font-size: calc(13px * var(--fs)); fill: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { #topo .tun.neg, #topo .tun.half { animation: none; } }
.hresizer { height: 6px; flex-shrink: 0; background: var(--term-chrome); cursor: row-resize; border-top: 1px solid var(--line-subtle); }
.hresizer:hover, .hresizer.drag { background: var(--action); }

/* ── console ── */
.console { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; align-items: flex-end; gap: 2px; padding: 6px 8px 0; background: var(--term-chrome); flex-shrink: 0; border-bottom: 1px solid var(--term-border); }
.tab { font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--term-muted); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; padding: 6px 14px; cursor: pointer; position: relative; }
.tab:hover { color: var(--term-text); }
.tab[aria-selected="true"] { background: var(--term-tab); color: var(--term-strong); border-color: var(--term-border); margin-bottom: -1px; padding-bottom: 7px; }
.tab .role { font-weight: 400; opacity: .7; margin-left: 5px; }
.tab .unread { position: absolute; top: 6px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--term-caret); display: none; }
.tab.has-unread .unread { display: block; }
.term-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; padding-bottom: 5px; }
.term-tool { font: inherit; font-size: 12px; line-height: 16px; color: var(--term-muted); background: transparent; border: 1px solid var(--term-border); border-radius: var(--radius-control); padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.term-tool:hover { color: var(--term-strong); border-color: var(--term-muted); }
.term-tool:focus-visible { outline: 2px solid var(--term-caret); outline-offset: 1px; }
.terms { flex: 1; min-height: 0; position: relative; }
.term { position: absolute; inset: 0; overflow: auto; padding: 10px 14px; font-family: var(--font-mono); font-size: calc(14px * var(--fs)); line-height: 1.55; color: var(--term-text); cursor: text; display: none; }
.term.active { display: block; }
.term .ln { white-space: pre; min-height: 1.5em; }
.term .ln.log, .term .ln.debug, .term .ln.term-banner { white-space: pre-wrap; word-break: break-word; }
.term .ln.cmd { color: var(--term-strong); font-weight: 700; margin-top: 8px; }
.term .ln.cmd .pr { color: var(--term-muted); font-weight: 400; }
.term .err { color: var(--term-err); } .term .log { color: var(--term-log); } .term .debug { color: var(--term-debug); }
.term .ts { color: var(--term-ts); }
.term .sys { color: var(--term-muted); font-style: italic; }
.term-input { display: flex; white-space: pre; margin-top: 6px; }
.term-input input { flex: 1; min-width: 40px; font: inherit; color: var(--term-strong); font-weight: 600; background: transparent; border: 0; outline: none; padding: 0; caret-color: var(--term-caret); }
.term-input span { color: var(--term-muted); }
.term-banner { color: var(--term-muted); }

/* ── modal / handshake inspector ── */
.modal-bg { position: fixed; inset: 0; background: rgba(7, 24, 45, .55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-bg[hidden] { display: none; }
.modal { background: var(--surface); color: var(--text); border-radius: var(--radius-container); border: 1px solid var(--line); width: min(780px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-subtle); }
.modal-head h2 { font-size: 16px; line-height: 24px; margin: 0; flex: 1; font-weight: 700; }
.modal-body { padding: 14px 18px 20px; overflow-y: auto; line-height: 1.55; font-size: 14px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 12px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-family: var(--font-mono); font-size: 13px; }
.status-chip { display: inline-block; font-weight: 700; font-size: 12px; line-height: 16px; padding: 2px 10px; border-radius: var(--radius-pill); color: var(--ink); background: transparent !important; border: 1.5px solid var(--line); }
.ladder { display: grid; grid-template-columns: 70px 1fr 70px; gap: 0; margin: 10px 0; font-size: 13px; }
.ladder .end { text-align: center; font-weight: 700; padding: 4px 0; border-bottom: 1.5px solid var(--line); }
.ladder .msg { grid-column: 1 / 4; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; padding: 5px 0; }
.ladder .msg .arrow { position: relative; padding: 0 6px; }
.ladder .msg .line { height: 1.5px; background: var(--line); position: relative; margin: 4px 0; }
.ladder .msg.rtl .line::before, .ladder .msg.ltr .line::after { content: ''; position: absolute; top: -4px; border: 5px solid transparent; }
.ladder .msg.ltr .line::after { right: -2px; border-left-color: var(--line); }
.ladder .msg.rtl .line::before { left: -2px; border-right-color: var(--line); }
.ladder .msg.pq .line { background: var(--pqc); height: 2px; } .ladder .msg.pq.ltr .line::after { border-left-color: var(--pqc); } .ladder .msg.pq.rtl .line::before { border-right-color: var(--pqc); }
.ladder .name { font-weight: 700; font-family: var(--font-mono); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chip { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-subtle); }
.chip.pq { border-color: var(--pqc); color: var(--accent-text); }
.chip.ppk { border-color: var(--ppk); }
.formula { font-family: var(--font-mono); font-size: 13px; border: 1px solid var(--line-subtle); border-radius: var(--radius-control); padding: 8px 10px; margin: 6px 0; white-space: pre-wrap; }
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.verdict > div { border: 1px solid var(--line-subtle); border-radius: var(--radius-container); padding: 8px 12px; }
.verdict .ok { color: var(--success); font-weight: 700; } .verdict .no { color: var(--danger); font-weight: 700; } .verdict .meh { color: var(--ink-muted); font-weight: 700; }
.err-box { border: 1.5px solid var(--danger); padding: 9px 13px; border-radius: var(--radius-container); margin: 10px 0; }

/* ── text size (A A A) ── */
.fs-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }
.fs-btn { font: inherit; font-weight: 700; background: transparent; color: var(--ink); border: 0; padding: 2px 9px; cursor: pointer; line-height: 1.3; }
.fs-btn[data-fs="s"] { font-size: 11px; } .fs-btn[data-fs="m"] { font-size: 13.5px; } .fs-btn[data-fs="l"] { font-size: 16px; }
.fs-btn + .fs-btn { border-left: 1px solid var(--line); }
.fs-btn[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.fs-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.tut-head, #steps, .modal-body, .tabs { zoom: var(--fs); }
.edu-badge { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 10px; text-decoration: none; white-space: nowrap; }
.edu-badge:hover { border-color: var(--action); color: var(--accent-text); }

/* ── per-snippet run button (▶, bottom right) ── */
.cfg.runnable pre { padding-bottom: 34px; }
.cfg-run { position: absolute; right: 10px; bottom: 9px; width: 30px; height: 24px; border-radius: var(--radius-control); border: 1px solid var(--action); background: var(--surface); color: var(--accent-text); font-size: 11px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 0 2px; }
.cfg-run:hover, .cfg-run:focus-visible { background: var(--action); color: var(--on-action); outline: none; }
.cfg-run.running { animation: cfg-pulse 1s ease-in-out infinite; }
.cfg-run.ran::after { content: '✓'; position: absolute; right: 36px; color: var(--success); font-size: 13px; font-weight: 700; }
.cfg-run:disabled { cursor: progress; }
@keyframes cfg-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cfg-run.running { animation: none; } }

/* ── phones / narrow ── */
@media (max-width: 900px) {
  body { overflow: auto; height: auto; }
  html { height: auto; }
  .split { flex: none; flex-direction: column; }
  .tutorial { width: 100% !important; max-width: none; min-width: 0; height: 60vh; flex: none; border-bottom: 5px solid var(--term-chrome); }
  .divider { display: none; }
  .tutorial.collapsed { width: 100% !important; height: auto; min-width: 0; }
  .tutorial.collapsed .tut-head { padding: var(--space-2) 44px var(--space-2) var(--space-3); }
  .tutorial.collapsed .tut-collapse { left: auto; right: 10px; transform: none; }
  .tutorial.collapsed .step-nav { flex-direction: row; flex-wrap: wrap; }
  .labpane { flex: none; height: 88vh; }
  .topo-wrap { height: 230px !important; }
  .topo-hint { display: none; }
  .nav-title { font-size: 14px; }
  .badge, .nav-sep, .edu-badge { display: none; }
  .btn { white-space: nowrap; }
  .step-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .verdict { grid-template-columns: 1fr; }
}

/* theme toggle */
.theme-btn { font: inherit; font-size: 15px; line-height: 1; width: 32px; height: 30px; border-radius: var(--radius-control); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.theme-btn:hover { border-color: var(--action); color: var(--accent-text); }

.cfg-adapted { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--accent-text); border: 1px solid var(--action); border-radius: var(--radius-pill); padding: 0 8px; }

/* classic VPN configuration split into one sub-block per construct */
.cfg-blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 10px 0; }
.cfg-block { min-width: 0; }
.cfg-block .cfg { margin: 4px 0 12px; }
.cfg-block-title { font-size: 14px; line-height: 20px; font-weight: 700; margin-top: 6px; padding-left: 28px; position: relative; }
.cfg-block-num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--action); color: var(--accent-text); font-size: 11px; }
.cfg-block-sub { display: block; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--muted); }

.t th.num, .t td.num { width: 28px; white-space: nowrap; }
.big-note { font-size: 18px; line-height: 26px; font-weight: 600; margin: 14px 0 6px; }
.t.cmds td:nth-child(2) { width: 48%; }
.t.cmds code { overflow-wrap: normal; word-break: normal; white-space: normal; }
.th-sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.term .warn { color: var(--term-log); }
.sw.gre { background: repeating-linear-gradient(90deg, var(--gre) 0 2px, transparent 2px 6px); }