/* SkiMasque visual library. Canonical source of the Alpine tokens: the
   dashboard (skimasque-dev/control) and the website both load this file.
   1 tokens · 2 roles · 3 base utilities · 4+ component layers (appended by later tasks). */

/* tokens */
:root {
  --snow: #F4F3ED; --ice: #E5F2EE; --white: #FFFFFF; --sand: #ECE5DA;
  --mint: #72C7A5; --mint-300: #9FDCC2; --mint-ink: #1D7156;
  --pine: #183C35; --pine-900: #11241F; --pine-950: #0C1A17;
  --forest: #28584C; --forest-300: #8CC2AE; --forest-fill: #14302A;
  --earth: #795C43; --earth-ink: #6D5139; --earth-300: #D2B391; --earth-fill: #2A2118;
  --slate: #66736F; --slate-ink: #56625E; --slate-300: #A9B5B1;
  --deny: #B03A2E; --deny-300: #F0958A;
  --warning-ink: #7D5A00; --warning-300: #E8C874;
  --info-ink: #1D6394; --info-300: #8CC4EA;
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
}
/* end tokens */

/* roles. With no data-theme the OS decides (light when there is no preference); data-theme="light" or
   "dark" on any element forces a theme. The same role set is declared three times (light, dark, OS-dark):
   tests/css.rs fails if the sets drift apart or a text role drops under 4.5:1. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: var(--snow); --surface: var(--white); --surface-raised: var(--ice); --input: var(--white);
  --text: var(--pine); --text-soft: var(--forest); --text-muted: var(--slate-ink);
  --line: rgba(24,60,53,.10); --line-default: rgba(24,60,53,.16); --line-strong: rgba(24,60,53,.28);
  --hover: rgba(114,199,165,.14);
  --accent: var(--mint); --accent-hover: var(--mint-300); --accent-text: var(--mint-ink);
  --accent-soft: rgba(114,199,165,.20); --on-accent: var(--pine); --focus: var(--mint-ink);
  --success: var(--mint-ink); --warning: var(--warning-ink); --danger: var(--deny); --info: var(--info-ink);
  --shadow: 0 12px 32px rgba(24,60,53,.14);
  --v-active: var(--mint-ink); --v-structure: var(--forest); --v-structure-fill: var(--ice);
  --v-edge: var(--earth); --v-edge-fill: var(--sand);
  --v-neutral: var(--slate); --v-deny: var(--deny); --v-info: var(--info-ink); --v-warning: var(--warning-ink);
  --v-structure-text: var(--forest); --v-edge-text: var(--earth-ink); --v-neutral-text: var(--slate-ink);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--pine-950); --surface: var(--pine-900); --surface-raised: var(--pine); --input: var(--forest-fill);
  --text: var(--snow); --text-soft: var(--ice); --text-muted: var(--slate-300);
  --line: rgba(244,243,237,.08); --line-default: rgba(244,243,237,.14); --line-strong: rgba(244,243,237,.22);
  --hover: rgba(114,199,165,.08);
  --accent: var(--mint); --accent-hover: var(--mint-300); --accent-text: var(--mint);
  --accent-soft: rgba(114,199,165,.14); --on-accent: var(--pine); --focus: var(--mint);
  --success: var(--mint); --warning: var(--warning-300); --danger: var(--deny-300); --info: var(--info-300);
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --v-active: var(--mint); --v-structure: var(--forest); --v-structure-fill: var(--forest-fill);
  --v-edge: var(--earth); --v-edge-fill: var(--earth-fill);
  --v-neutral: var(--slate); --v-deny: var(--deny-300); --v-info: var(--info-300); --v-warning: var(--warning-300);
  --v-structure-text: var(--forest-300); --v-edge-text: var(--earth-300); --v-neutral-text: var(--slate-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--pine-950); --surface: var(--pine-900); --surface-raised: var(--pine); --input: var(--forest-fill);
    --text: var(--snow); --text-soft: var(--ice); --text-muted: var(--slate-300);
    --line: rgba(244,243,237,.08); --line-default: rgba(244,243,237,.14); --line-strong: rgba(244,243,237,.22);
    --hover: rgba(114,199,165,.08);
    --accent: var(--mint); --accent-hover: var(--mint-300); --accent-text: var(--mint);
    --accent-soft: rgba(114,199,165,.14); --on-accent: var(--pine); --focus: var(--mint);
    --success: var(--mint); --warning: var(--warning-300); --danger: var(--deny-300); --info: var(--info-300);
    --shadow: 0 12px 32px rgba(0,0,0,.45);
    --v-active: var(--mint); --v-structure: var(--forest); --v-structure-fill: var(--forest-fill);
    --v-edge: var(--earth); --v-edge-fill: var(--earth-fill);
    --v-neutral: var(--slate); --v-deny: var(--deny-300); --v-info: var(--info-300); --v-warning: var(--warning-300);
    --v-structure-text: var(--forest-300); --v-edge-text: var(--earth-300); --v-neutral-text: var(--slate-300);
  }
}

/* base utilities */
.v-sprite { display: none; }
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-tone-active    { --v-tone: var(--v-active); }
.v-tone-structure { --v-tone: var(--v-structure); }
.v-tone-edge      { --v-tone: var(--v-edge); }
.v-tone-neutral   { --v-tone: var(--v-neutral); }
.v-tone-deny      { --v-tone: var(--v-deny); }
.v-tone-info      { --v-tone: var(--v-info); }
.v-tone-warning   { --v-tone: var(--v-warning); }
/* text drawn in a tone uses --v-tone-text (contrast-safe); lines and borders use --v-tone */
.v-tone-active, .v-tone-deny, .v-tone-info, .v-tone-warning { --v-tone-text: var(--v-tone); }
.v-tone-structure { --v-tone-text: var(--v-structure-text); }
.v-tone-edge      { --v-tone-text: var(--v-edge-text); }
.v-tone-neutral   { --v-tone-text: var(--v-neutral-text); }

/* icons */
.v-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--v-tone, var(--text-muted)); }

/* component roots size their padding and borders inside their width */
.v-node, .v-conn, .v-flow-wrap, .v-boundary, .v-status, .v-decision { box-sizing: border-box; }

/* status */
.v-status, .v-decision { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.4 var(--font);
  letter-spacing: .08em; color: var(--v-tone-text, var(--v-tone)); white-space: nowrap; }
.v-decision { font-size: 12px; padding: 4px 10px; border: 1px solid var(--v-tone); border-radius: var(--radius-sm); }

/* node */
.v-node { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; max-width: 100%;
  padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--v-tone) 55%, transparent);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 13px/1.35 var(--font); }
.v-node.v-tone-structure { background: var(--v-structure-fill); }
.v-node.v-tone-edge { background: var(--v-edge-fill); }
.v-node-text { display: grid; min-width: 0; }
.v-node-label { font-weight: 600; overflow-wrap: anywhere; }
.v-node-sub { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.v-node .v-status { margin-left: auto; }

/* connection */
.v-conn { position: relative; display: inline-grid; grid-template-rows: 1fr auto 1fr; align-items: center;
  justify-items: center; min-width: 48px; min-height: 28px; color: var(--text-muted); font: 11px/1.3 var(--font); }
.v-conn-line { grid-row: 2; justify-self: stretch; align-self: center; min-width: 32px; height: 0;
  border-top: 2px solid var(--v-neutral); position: relative; }
.v-conn-line::after { content: "▸"; position: absolute; right: -6px; top: -9px; font-size: 12px; color: inherit; }
/* label text takes the connection's colour via currentColor on .v-conn-*; --v-active/--v-deny are text-safe */
.v-conn-label { grid-row: 1; align-self: end; white-space: nowrap; padding: 0 4px 4px; }
.v-conn-control .v-conn-line { border-top-style: dashed; }
.v-conn-potential .v-conn-line { border-top-style: dotted; opacity: .55; }
.v-conn-active { color: var(--v-active); }
.v-conn-active .v-conn-line { border-top: 3px solid var(--v-active); animation: v-glow 2.4s ease-in-out infinite; }
.v-conn-denied { color: var(--v-deny); }
.v-conn-denied .v-conn-line { border-top: 2px dashed var(--v-deny); }
.v-conn-x { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: 16px; font-weight: 700; color: var(--v-deny); }
@keyframes v-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v-conn-active .v-conn-line { animation: none; } }

/* flow: vertical by default, horizontal once the flow's own width allows it.
   .v-flow-wrap is the inline-size container, so give it the width to measure
   (a block, or a flex item with flex-basis 100%). */
.v-flow-wrap { margin: 0; width: 100%; min-width: 0; container-type: inline-size; }
.v-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.v-flow-step { display: flex; flex-direction: column; align-items: flex-start; }
.v-flow .v-node { min-width: 120px; flex-shrink: 0; }
.v-flow .v-conn { display: inline-flex; min-height: 36px; min-width: 0; margin-left: 20px; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; }
.v-flow .v-conn-line { min-width: 0; min-height: 28px; width: 0; height: auto; border-top: 0; border-left: 2px solid var(--v-neutral); }
.v-flow .v-conn-line::after { content: "▾"; right: auto; left: -5px; top: auto; bottom: -3px; }
.v-flow .v-conn-control .v-conn-line { border-left-style: dashed; }
.v-flow .v-conn-potential .v-conn-line { border-left-style: dotted; }
.v-flow .v-conn-active .v-conn-line { border-left: 3px solid var(--v-active); }
.v-flow .v-conn-denied .v-conn-line { border-left: 2px dashed var(--v-deny); }
.v-flow .v-conn-label { padding: 0; margin-left: 14px; align-self: center; }
/* 7-node "access" flow needs ≈987px in row layout; threshold measured in plan 2 */
@container (min-width: 1040px) {
  .v-flow { flex-direction: row; align-items: center; flex-wrap: nowrap; }
  .v-flow-step { flex-direction: row; align-items: center; }
  .v-flow .v-node { flex-shrink: 1; }
  .v-flow .v-conn { display: inline-grid; justify-content: normal; min-height: 28px; min-width: 48px; margin: 0 2px; gap: 0; }
  .v-flow .v-conn-line { min-height: 0; min-width: 32px; height: 0; width: auto; border-left: 0; border-top: 2px solid var(--v-neutral); }
  .v-flow .v-conn-line::after { content: "▸"; left: auto; right: -6px; bottom: auto; top: -9px; }
  .v-flow .v-conn-control .v-conn-line { border-top-style: dashed; }
  .v-flow .v-conn-potential .v-conn-line { border-top-style: dotted; }
  .v-flow .v-conn-active .v-conn-line { border-left: 0; border-top: 3px solid var(--v-active); }
  .v-flow .v-conn-denied .v-conn-line { border-left: 0; border-top: 2px dashed var(--v-deny); }
  .v-flow .v-conn-label { margin: 0; padding: 0 4px 4px; align-self: end; }
}

/* boundary */
.v-boundary { position: relative; font: 12px/1.4 var(--font); }
.v-boundary-label { font-weight: 600; letter-spacing: .1em; color: var(--v-structure-text); }
.v-boundary-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.v-boundary-region { border: 1px dashed var(--v-structure); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--v-structure-fill) 60%, transparent); padding: 22px 16px 16px; }
.v-boundary-region > .v-boundary-label { position: absolute; top: -9px; left: 14px; padding: 0 6px; background: var(--bg); }
.v-boundary-firewall { padding-top: 4px; }
.v-firewall-rule { border-top: 3px double var(--v-edge); border-bottom: 3px double var(--v-edge);
  height: 10px; margin: 0 0 14px; position: relative; }
.v-firewall-rule .v-boundary-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0 8px; white-space: nowrap; background: var(--bg); color: var(--v-edge-text); }

/* content */
.v-planned { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px dashed var(--v-neutral);
  border-radius: var(--radius-sm); font: 600 10px/1.6 var(--font); letter-spacing: .1em; color: var(--v-neutral-text); white-space: nowrap; }
.v-btn { display: inline-block; padding: 8px 16px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent);
  font: 600 13px/1.4 var(--font); text-decoration: none; }
.v-btn:hover { background: var(--accent-hover); }
.v-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-empty { display: grid; justify-items: start; gap: 8px; padding: 24px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: 13px/1.6 var(--font); max-width: 100%; box-sizing: border-box; }
.v-empty-title { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.v-empty-body { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.v-empty-body span { display: block; }
/* code blocks are Pine in both themes, so they use palette tokens, not roles */
.v-code { margin: 0; border-radius: var(--radius-lg); background: var(--pine-950); color: var(--snow); font: 13px/1.6 var(--font); overflow: hidden; max-width: 100%; }
.v-code-label { padding: 8px 16px; color: var(--slate-300); font-size: 11px; letter-spacing: .08em; border-bottom: 1px solid color-mix(in srgb, var(--snow) 12%, transparent); }
.v-code-body { margin: 0; padding: 12px 16px; overflow-x: auto; white-space: pre; }
.v-code-prompt { color: var(--mint); }
.v-code-cmd { color: var(--snow); }
.v-code-comment { color: var(--slate-300); }
.v-code-out { color: var(--ice); }

/* cards */
.v-card, .v-summary, .v-explorer, .v-diff { box-sizing: border-box; max-width: 100%; font: 13px/1.5 var(--font); color: var(--text); }
.v-card { min-width: 0; padding: 16px; border: 1px solid var(--line-default); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 12px; }
.v-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.v-card-title { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.v-card-title a { color: var(--text); text-decoration-color: var(--v-active); text-underline-offset: 3px; }
.v-card-title a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-card-meta { margin: 0; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }

/* policy summary */
.v-summary { margin: 0; display: grid; gap: 6px; }
.v-summary > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.v-summary dt { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding-top: 2px; }
.v-summary dd { margin: 0; overflow-wrap: anywhere; }

/* policy explorer */
.v-explorer { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.v-layer { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--line-default); border-left: 3px solid var(--v-structure);
  border-radius: var(--radius-md); background: var(--surface); }
.v-layer-title { margin: 0 0 4px; color: var(--v-structure-text); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.v-layer-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.v-layer-lines li, .v-layer-line { overflow-wrap: anywhere; }
.v-layer-line { margin: 4px 0 0; }
.v-layer-any { color: var(--text-muted); font-style: italic; margin: 0; }
.v-layer-link { margin-left: 20px; color: var(--v-neutral-text); line-height: 1; }
.v-explorer-result { border-left-color: var(--accent); background: var(--surface-raised); }

/* policy diff */
.v-diff { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.v-diff li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 4px 10px; border-left: 3px solid var(--v-tone); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.v-diff-added { --v-tone: var(--v-active); background: var(--accent-soft); }
.v-diff-removed { --v-tone: var(--v-deny); }
.v-diff-changed { --v-tone: var(--v-warning); }
.v-diff-glyph { font-weight: 700; color: var(--v-tone); }
.v-diff-field { color: var(--text-muted); }
.v-diff-added .v-diff-field { color: var(--text-soft); }
.v-diff-before { text-decoration: line-through; color: var(--text-muted); }
.v-diff-empty { margin: 0; color: var(--text-muted); }

/* decisions */
.v-explain, .v-audit-event { box-sizing: border-box; max-width: 100%; min-width: 0; font: 13px/1.5 var(--font); color: var(--text); }
.v-checks { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.v-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 4px 10px; border-left: 3px solid var(--v-tone); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.v-check-pass { --v-tone: var(--v-active); }
.v-check-fail { --v-tone: var(--v-deny); background: color-mix(in srgb, var(--v-deny) 8%, transparent); }
.v-check-glyph { font-weight: 700; color: var(--v-tone); }
.v-check-label { font-weight: 600; }
.v-check-word { color: var(--text-muted); }
.v-check-detail { flex: 1 1 100%; color: var(--text-muted); font-size: 12px; }
.v-explain-result { display: grid; gap: 6px; justify-items: start; }
.v-explain-reason { margin: 0; overflow-wrap: anywhere; }
.v-decision-line { margin: 0; overflow-wrap: anywhere; }
.v-decision-who { font-weight: 600; }
.v-audit-event { padding: 16px; border: 1px solid var(--line-default); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 8px; }
.v-audit-event > .v-card { border: 0; padding: 0; background: none; }
.v-audit-reason { margin: 0; color: var(--text-soft); overflow-wrap: anywhere; }
.v-audit-why summary { cursor: pointer; color: var(--accent-text); }
.v-audit-why summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-audit-why[open] summary { margin-bottom: 8px; }

/* access */
.v-session-route { margin: 0; overflow-wrap: anywhere; }
.v-session-time { display: grid; gap: 4px; }
.v-bar { height: 6px; border-radius: 3px; background: var(--line-default); overflow: hidden; }
.v-bar-fill { display: block; height: 100%; background: var(--accent); }
.v-gateway-card { border-color: color-mix(in srgb, var(--v-edge) 55%, transparent); }
.v-facts { margin: 0; display: grid; gap: 4px; }
.v-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.v-facts dt { color: var(--text-muted); font-size: 12px; }
.v-facts dd { margin: 0; overflow-wrap: anywhere; }
.v-timeline { margin: 0; padding: 0; list-style: none; display: grid; }
.v-timeline-event { position: relative; display: grid; grid-template-columns: 16px 88px minmax(0, 1fr); gap: 4px 10px; align-items: baseline;
  padding: 0 0 14px; font: 13px/1.5 var(--font); color: var(--text); }
.v-timeline-event::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; border-left: 2px solid var(--line-strong); }
.v-timeline-event:last-child::before { display: none; }
.v-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--v-tone); align-self: center; box-sizing: border-box; }
.v-timeline-time { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.v-timeline-label { overflow-wrap: anywhere; font-weight: 600; }
.v-timeline-empty { margin: 0; color: var(--text-muted); font: 13px/1.5 var(--font); }
@media (max-width: 480px) { .v-facts > div, .v-summary > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* layout containers */
.v-layers-wrap, .v-compare-wrap, .v-branch-wrap, .v-seq-wrap { margin: 0; width: 100%; min-width: 0; box-sizing: border-box; font: 13px/1.5 var(--font); color: var(--text); }
.v-compare-wrap, .v-branch-wrap { container-type: inline-size; }
.v-layers { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: 2px; }
.v-layer-row { box-sizing: border-box; width: min(100%, 360px); display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line-default);
  border-left: 3px solid var(--v-structure); border-radius: var(--radius-md); background: var(--surface); }
.v-layer-name { font-weight: 600; letter-spacing: .08em; overflow-wrap: anywhere; }
.v-layer-sub { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.v-layer-gap { margin-left: 20px; line-height: 1; color: var(--v-neutral-text); }
.v-compare { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 720px) { .v-compare { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.v-compare-side { min-width: 0; padding: 16px; border: 1px solid var(--line-default); border-top: 3px solid var(--v-tone); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 12px; align-content: start; }
.v-compare-title { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--v-tone-text); }
.v-branch { display: grid; gap: 12px; }
.v-branch-root { min-width: 0; }
.v-branch-arms { list-style: none; margin: 0; padding: 0 0 0 20px; display: grid; gap: 12px; min-width: 0; }
.v-branch-arm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.v-branch-arm .v-flow-wrap { width: auto; flex: 1 1 128px; min-width: 0; }
@container (min-width: 560px) {
  .v-branch { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 16px; }
  .v-branch-arms { padding-left: 0; }
}
.v-seq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 0; padding: 0 0 4px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 25% 0 / 2px 100% no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) 75% 0 / 2px 100% no-repeat; }
.v-seq-actor { justify-self: center; padding: 6px 12px; border: 1px solid var(--line-default); border-radius: var(--radius-md); background: var(--surface); font-weight: 600; overflow-wrap: anywhere; }
.v-seq-msg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 25%; padding: 2px 0; }
.v-seq-left { flex-direction: row-reverse; }
.v-seq-arrow { color: var(--v-active); font-weight: 700; }
.v-seq-label { overflow-wrap: anywhere; }

/* motifs */
.v-contour { display: block; width: 100%; height: 120px; color: var(--v-structure); opacity: .5; }
.v-mountain { display: block; width: 100%; height: 100px; color: var(--v-structure); }
.v-mountain-far { fill: currentColor; opacity: .35; }
.v-mountain-near { fill: currentColor; opacity: .65; }
.v-route { display: block; width: 100%; max-width: 400px; height: auto; color: var(--v-active); }
.v-route-line { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.v-route-start, .v-route-end { fill: currentColor; }
.v-route-end { fill: var(--v-edge); }
.v-trail { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.4 var(--font); letter-spacing: .06em; color: var(--v-tone-text, var(--text)); white-space: nowrap; }
.v-trail-shape { width: 12px; height: 12px; flex: 0 0 auto; fill: var(--v-tone); }
.v-run-card .v-card-title { display: flex; }
.v-run-tech { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.v-run-lines { margin: 0; padding-left: 18px; color: var(--text-soft); }
.v-run-planned { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-soft); }
.v-compare-side > .v-card { border: 0; padding: 0; background: none; }

/* motion: state only */
@keyframes v-route-flow { to { stroke-dashoffset: -28; } }
.v-route-flowing .v-route-line { stroke-dasharray: 4 10; animation: v-route-flow 1.6s linear infinite; }
@keyframes v-reveal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v-reveal .v-flow-step, .v-reveal .v-branch-root, .v-reveal .v-branch-arm { animation: v-reveal-in .5s ease-out both; }
.v-reveal .v-flow-step:nth-child(2) { animation-delay: .25s; }
.v-reveal .v-flow-step:nth-child(3) { animation-delay: .5s; }
.v-reveal .v-flow-step:nth-child(4) { animation-delay: .75s; }
.v-reveal .v-flow-step:nth-child(n+5) { animation-delay: 1s; }
.v-reveal .v-branch-arm:nth-child(1) { animation-delay: .5s; }
.v-reveal .v-branch-arm:nth-child(2) { animation-delay: .75s; }
.v-reveal .v-branch-arm:nth-child(3) { animation-delay: 1s; }
@keyframes v-expire-out { from { opacity: 1; } to { opacity: .45; } }
.v-expire .v-node { border-style: dashed; border-color: color-mix(in srgb, var(--v-tone) 35%, transparent); }
.v-expire .v-icon { opacity: .45; animation: v-expire-out 1.2s ease-out 1s both; }
@media (prefers-reduced-motion: reduce) {
  .v-route-flowing .v-route-line { animation: none; }
  .v-reveal .v-flow-step, .v-reveal .v-branch-root, .v-reveal .v-branch-arm { animation: none; }
  .v-expire .v-icon { animation: none; }
}

/* site content */
.v-wrap { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.v-prose { display: grid; gap: 12px; max-width: 68ch; font: 15px/1.7 var(--font); color: var(--text); }
.v-prose > * { margin: 0; overflow-wrap: anywhere; }
.v-prose h3 { font-size: 15px; font-weight: 600; margin-top: 8px; }
.v-prose ul { padding-left: 20px; display: grid; gap: 4px; }
.v-prose blockquote { padding: 8px 16px; border-left: 3px solid var(--v-active); background: var(--accent-soft); font-weight: 600; }
.v-lead { font-size: 17px; line-height: 1.6; color: var(--text-soft); margin: 0; }
.v-kv { margin: 0; display: grid; gap: 2px; }
.v-kv dt { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.v-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.v-eyebrow { margin: 0 0 8px; font: 600 11px/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.v-hero { padding: 56px 0 40px; background: var(--bg); color: var(--text); font-family: var(--font); }
.v-hero-grid { display: grid; gap: 32px; align-items: center; }
.v-hero h1 { margin: 0 0 16px; font-size: clamp(26px, 5vw, 40px); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.v-hero-copy { display: grid; gap: 12px; align-content: start; min-width: 0; }
.v-hero-aside { min-width: 0; }
@media (min-width: 900px) { .v-hero-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.v-cta-row { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.v-btn-quiet { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.v-btn-quiet:hover { background: var(--hover); }
.v-section { padding: 48px 0; background: var(--bg); color: var(--text); font-family: var(--font); }
.v-section-alt { background: var(--surface-raised); }
.v-section > .v-wrap { display: grid; gap: 20px; }
.v-section h2 { margin: 0; font-size: clamp(20px, 3.5vw, 28px); line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.v-features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.v-feature { min-width: 0; padding: 16px; border: 1px solid var(--line-default); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 8px; align-content: start; }
.v-feature h3 { margin: 0; font-size: 15px; font-weight: 600; }
.v-feature p { margin: 0; color: var(--text-soft); overflow-wrap: anywhere; }
.v-cta-band { padding: 48px 0; background: var(--surface-raised); color: var(--text); font-family: var(--font); }
.v-cta-band .v-wrap { display: grid; gap: 8px; justify-items: start; }
.v-cta-band h2 { margin: 0; font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; }
.v-cta-band p { margin: 0; color: var(--text-soft); }
.v-table-wrap { overflow-x: auto; max-width: 100%; }
.v-table { border-collapse: collapse; width: 100%; min-width: 480px; font: 14px/1.5 var(--font); color: var(--text); }
.v-table th, .v-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-default); overflow-wrap: anywhere; }
.v-table thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.v-row-highlight th, .v-row-highlight td { background: var(--accent-soft); font-weight: 600; }
.v-faq { display: grid; gap: 8px; max-width: 72ch; font: 15px/1.7 var(--font); color: var(--text); }
.v-faq-item { border: 1px solid var(--line-default); border-radius: var(--radius-md); background: var(--surface); padding: 0 16px; }
.v-faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.v-faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-faq-item p { margin: 0 0 12px; color: var(--text-soft); }
.v-tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.v-tier-price { margin: 0; font-size: 22px; font-weight: 600; }
.v-tier-live { color: var(--accent-text); font-size: 12px; font-weight: 600; }
.v-tier-includes { margin: 0; padding-left: 18px; color: var(--text-soft); display: grid; gap: 2px; }
.v-planned-block { padding: 16px; border: 1px dashed var(--v-neutral); border-radius: var(--radius-lg); display: grid; gap: 8px; max-width: 100%; box-sizing: border-box; }
.v-planned-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-soft); }
/* site chrome */
.v-site { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
html { scroll-padding-top: 72px; }
.v-skip { position: absolute; left: -9999px; top: 8px; padding: 8px 12px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); z-index: 10; }
.v-skip:focus { left: 8px; }
.v-site-header { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line-default); font: 14px/1.4 var(--font); }
.v-site-bar { display: flex; align-items: center; gap: 20px; min-height: 56px; }
.v-brand { font-weight: 600; letter-spacing: .04em; color: var(--text); text-decoration: none; }
.v-brand[aria-current="page"] { color: var(--accent-text); }
.v-site-nav { display: none; align-items: center; gap: 4px; margin-left: 8px; }
.v-nav-group { position: relative; }
.v-nav-group summary, .v-nav-top { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); cursor: pointer; list-style: none; text-decoration: none; }
.v-nav-group summary::-webkit-details-marker { display: none; }
.v-nav-group summary:hover, .v-nav-top:hover { background: var(--hover); }
.v-nav-group summary:focus-visible, .v-nav-top:focus-visible, .v-menu summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-nav-group ul { position: absolute; top: 100%; left: 0; z-index: 6; margin: 0; padding: 6px; list-style: none; min-width: 200px; background: var(--surface); border: 1px solid var(--line-default); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.v-nav-group a, .v-menu-panel a:not(.v-btn) { display: block; padding: 6px 10px; color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.v-nav-group a:hover, .v-menu-panel a:not(.v-btn):hover { background: var(--hover); }
.v-site-nav a[aria-current="page"], .v-menu-panel a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.v-site-actions { display: none; margin-left: auto; gap: 8px; }
.v-menu { margin-left: auto; position: relative; }
.v-menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.v-menu summary::-webkit-details-marker { display: none; }
.v-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 40px)); max-height: 80vh; overflow: auto; box-sizing: border-box; padding: 12px; background: var(--surface); border: 1px solid var(--line-default); border-radius: var(--radius-md); box-shadow: var(--shadow); display: grid; gap: 4px; }
.v-menu-panel ul { margin: 0 0 4px; padding: 0; list-style: none; }
.v-menu-title { margin: 8px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.v-menu-nav { margin-left: auto; }
@media (min-width: 980px) { .v-site-nav, .v-site-actions { display: flex; } .v-menu, .v-menu-nav { display: none; } }
/* the footer is Pine in both themes, so it uses palette tokens, not roles */
.v-site-footer { position: relative; overflow: hidden; margin-top: 0; padding: 48px 0 24px; background: var(--pine); color: var(--slate-300); font: 14px/1.6 var(--font); }
.v-footer-art { position: absolute; inset: 0; pointer-events: none; color: var(--forest); }
.v-footer-art .v-contour { position: absolute; inset: 0; height: 100%; opacity: .5; color: var(--forest); }
.v-footer-art .v-mountain { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; color: var(--pine-950); }
.v-footer-grid { position: relative; display: grid; gap: 32px; }
.v-footer-grid nav { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.v-footer-name { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--snow); }
.v-footer-brand p { margin: 0; }
.v-footer-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }
.v-footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.v-site-footer a { color: var(--mint); text-decoration: none; }
.v-site-footer a:hover { text-decoration: underline; }
.v-site-footer a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.v-site-footer .v-planned { color: var(--slate-300); border-color: var(--slate-300); }
.v-footer-legal { position: relative; margin: 32px auto 0; font-size: 12px; }
@media (min-width: 900px) { .v-footer-grid { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); } }