/* salto.css - SALTO Network, the featured sixth vertical (2026-11-03). Loaded last. The page keeps its night blue, its
 * cyan brain and its type; SALTO is set apart by its S mark and the lime of its envelope path (#ceff54). */

/* ---------- the S mark wherever a vertical symbol appears ---------- */
.vertical-mark { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; color: var(--accent, #ceff54); }
.orbit-node .vertical-mark, .vertical-selector .vertical-mark, .mega-vertical-list .vertical-mark, .eco-vertical .vertical-mark { width: 1.05em; height: 1.05em; }
.featured-tag { font: 600 8px/1 var(--mono, monospace); letter-spacing: 1px; color: #0a1406; background: #ceff54; border-radius: 3px; padding: 3px 5px; margin-inline-start: 6px; vertical-align: middle; font-style: normal; }

/* ---------- hero: six orbit positions (one hexagon around the brain) ---------- */
.orbit-nodes .orbit-node { right: auto; translate: -50% -50%; }
.orbit-nodes .orbit-node:nth-child(1) { left: 31%; top: 12%; }
.orbit-nodes .orbit-node:nth-child(2) { left: 86%; top: 38%; }
.orbit-nodes .orbit-node:nth-child(3) { left: 84%; top: 65%; }
.orbit-nodes .orbit-node:nth-child(4) { left: 16%; top: 65%; }
.orbit-nodes .orbit-node:nth-child(5) { left: 14%; top: 38%; }
.orbit-nodes .orbit-node:nth-child(6) { left: 69%; top: 12%; }
.orbit-node.is-featured { border-color: #ceff54a8; box-shadow: 0 0 0 1px #ceff5440, 0 0 34px #ceff5426; }
.orbit-node.is-featured.active { border-color: #ceff54; box-shadow: 0 0 0 1px #ceff54, 0 0 40px #ceff5440; }
.orbit-featured { position: absolute; top: -9px; inset-inline-end: 10px; font: 600 8px/1 var(--mono, monospace); letter-spacing: 1.2px; color: #0a1406; background: #ceff54; border-radius: 3px; padding: 4px 6px; font-style: normal; }
body:not(.paused) .orbit-node.is-featured::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid #ceff5466; animation: salto-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes salto-ring { from { opacity: .9; transform: scale(.97); } to { opacity: 0; transform: scale(1.12); } }
.hero-insight.is-featured { border-color: #ceff5470; }
.hero-insight .salto-insight-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hero-insight .salto-insight-actions button { line-height: 1.2; white-space: nowrap; font: 600 11px var(--mono, monospace); letter-spacing: .4px; color: #0a1406; background: #ceff54; border: 0; border-radius: 4px; padding: 7px 10px; cursor: pointer; }
.hero-insight .salto-insight-actions button + button { color: #e8f6d0; background: transparent; border: 1px solid #ceff5480; }
@media (max-width: 950px) {
  .orbit-nodes .orbit-node:nth-child(1) { left: 30%; top: 11%; }
  .orbit-nodes .orbit-node:nth-child(6) { left: 70%; top: 11%; }
  .orbit-nodes .orbit-node:nth-child(2) { left: 85%; top: 38%; }
  .orbit-nodes .orbit-node:nth-child(5) { left: 15%; top: 38%; }
}
/* Small screens: six cards would overlap the brain, so the orbit becomes a compact selector, SALTO first. */
@media (max-width: 700px) {
  .orbit-nodes { position: absolute; left: 0; right: 0; top: 30px; z-index: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .orbit-nodes .orbit-node { position: relative; left: auto !important; top: auto !important; right: auto; translate: none; transform: none; width: auto !important; min-width: 0; max-width: none; padding: 8px 6px; }
  .orbit-nodes .orbit-node:hover { transform: none; }
  .orbit-nodes .orbit-node.is-featured { order: -1; }
  .orbit-nodes .orbit-node small { display: block; font-size: 7px; }
  .orbit-featured { top: -7px; font-size: 7px; padding: 3px 4px; }
}

/* ---------- mega menu ---------- */
.mega-vertical-list button.is-featured { border-color: #ceff5470; }
.salto-menu-link { color: #dff7a8; }

/* ---------- #verticals: the featured block ---------- */
.featured-vertical { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 28px; margin: 0 0 30px; padding: 26px; border: 1px solid #ceff5455; border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, #ceff5412, transparent 55%), linear-gradient(140deg, #10213a, #081428); box-shadow: 0 0 60px #ceff540d; scroll-margin-top: 120px; }
.featured-copy .eyebrow { color: #dff7a8; display: flex; align-items: center; gap: 8px; }
.featured-copy .eyebrow .vertical-mark { width: 18px; height: 18px; color: #ceff54; }
.featured-copy h3 { font: 500 34px/1.1 var(--display, inherit); margin: 12px 0 6px; color: #f2f7ff; }
.featured-category { font: 500 12px var(--mono, monospace); letter-spacing: .6px; color: #a9c1da; margin: 0 0 14px; }
.featured-copy h4 { font: 500 20px/1.35 var(--display, inherit); color: #e6f1ff; margin: 0 0 10px; }
.featured-copy p { color: #9fb7d1; line-height: 1.6; }
.featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 12px; }
.featured-actions .btn.primary { background: #ceff54; color: #0a1406; border-color: #ceff54; }
.featured-note { display: block; color: #7d97b4; font: 500 10px var(--mono, monospace); letter-spacing: .5px; }
.external-site { color: #dff7a8; }
.featured-preview { min-width: 0; }
#verticals:has(#vtab-salto[aria-selected="true"]) .featured-preview { display: none; }
#verticals:has(#vtab-salto[aria-selected="true"]) .featured-vertical { grid-template-columns: 1fr; }
/* The featured tab is marked by a small "featured" dot; only the selected tab looks selected (2026-11-04 fix). */
.vertical-selector button.is-featured::before { content: ''; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #ceff54; box-shadow: 0 0 8px #ceff5499; }
.vertical-selector button.is-featured[aria-selected="true"] { border-color: #ceff5488; }
#vertical-selector { scroll-margin-top: 140px; }
.vertical-stage .external-site { display: inline-block; margin-top: 12px; }
@media (max-width: 900px) { .featured-vertical { grid-template-columns: 1fr; padding: 20px; gap: 18px; } .featured-copy h3 { font-size: 28px; } }

/* ---------- the shared demonstration component ---------- */
.salto-demo { --lime: #ceff54; display: block; border: 1px solid #2c4566; border-radius: 12px; background: #071225; padding: 14px; color: #d7e6f7; font-size: 13px; }
.salto-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.salto-tabs button, .salto-segment button, .salto-transport button, .salto-tasks button, .salto-roles button, .salto-regions button, .salto-family-list button { font: 500 11px var(--mono, monospace); letter-spacing: .3px; color: #b9cde3; background: #0d1d35; border: 1px solid #2c4566; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.salto-tabs button[aria-selected="true"], .salto-segment button[aria-pressed="true"], .salto-transport button[aria-pressed="true"], .salto-tasks button[aria-pressed="true"], .salto-roles button[aria-pressed="true"], .salto-regions button[aria-pressed="true"], .salto-family-list button[aria-pressed="true"] { color: #0a1406; background: var(--lime); border-color: var(--lime); }
.salto-demo :focus-visible, .salto-sheet :focus-visible, .featured-vertical :focus-visible { outline: 2px solid var(--lime, #ceff54); outline-offset: 2px; }
.salto-panel h4 { font: 500 17px/1.3 var(--display, inherit); color: #f2f7ff; margin: 6px 0; }
.salto-panel h5 { font: 600 12px var(--mono, monospace); letter-spacing: .4px; color: #dff7a8; margin: 10px 0 6px; }
.salto-panel p { line-height: 1.55; margin: 6px 0; }
.salto-panel .eyebrow { color: #9fd0ff; }
.salto-note, .salto-stage-note { color: #8ea8c4; font-size: 12px; }
.salto-stage-note { font: 500 10px var(--mono, monospace); letter-spacing: .3px; color: #7f9bb9; border-top: 1px dashed #233a5a; padding-top: 8px; margin-top: 10px; }
.salto-credit { font: 500 10px/1.5 var(--mono, monospace); color: #8aa6c2; margin: 10px 2px 0; }
.salto-quote { font: 500 15px/1.45 var(--display, inherit); color: #eef6ff; }
.salto-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 10px 0; }
.salto-steps button { width: 100%; text-align: start; font: 500 10px/1.3 var(--mono, monospace); color: #9db6d2; background: #0b1a31; border: 1px solid #23395a; border-radius: 6px; padding: 7px 6px; cursor: pointer; }
.salto-steps button span { display: block; color: #6f8cab; margin-bottom: 3px; }
.salto-steps button.done { border-color: #4f6f3a; color: #cfe7a7; }
.salto-steps button[aria-current="step"] { border-color: var(--lime); color: #f4ffe0; box-shadow: 0 0 0 1px #ceff5440; }
.salto-stage { border: 1px solid #1f3554; border-radius: 10px; padding: 12px; background: #091729; }
.salto-choice { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.salto-choice legend, .salto-select, .salto-range, .salto-status-grid small, .salto-queue small, .salto-compare small, .salto-layers small, .salto-inbox small, .salto-result small, .salto-inspector small, .salto-bars small, .salto-ai-grid > div > small, .salto-family dt { font: 500 10px var(--mono, monospace); letter-spacing: .5px; color: #84a0bf; text-transform: uppercase; }
.salto-choice label { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid #23395a; border-radius: 8px; cursor: pointer; }
.salto-choice input:checked + span { color: #f4ffe0; }
.salto-select select { display: block; margin-top: 4px; background: #0d1d35; color: #e6f1ff; border: 1px solid #2c4566; border-radius: 6px; padding: 6px 8px; }
.salto-plan ol { margin: 4px 0 8px; padding-inline-start: 18px; color: #cfe0f3; }
.salto-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.salto-status-grid div { border: 1px solid #23395a; border-radius: 8px; padding: 8px; }
.salto-status-grid b { display: block; margin-top: 4px; font-weight: 500; }
.is-on { color: #b9f27a; } .is-off { color: #ffb39b; }
.salto-toggle { display: flex; gap: 8px; align-items: center; margin: 6px 0; cursor: pointer; }
.salto-toggle input, .salto-choice input { accent-color: #ceff54; }
.salto-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.salto-btn { font: 600 11px var(--mono, monospace); letter-spacing: .3px; color: #dfefff; background: #0f2240; border: 1px solid #36547d; border-radius: 6px; padding: 8px 11px; cursor: pointer; }
.salto-btn.primary { color: #0a1406; background: var(--lime); border-color: var(--lime); }
.salto-btn[aria-pressed="true"] { border-color: var(--lime); color: #f4ffe0; }
.salto-nav { display: flex; justify-content: space-between; margin-top: 10px; }
.salto-devices { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: center; gap: 4px; margin: 10px 0; }
.salto-device { text-align: center; border: 1px solid #27405f; border-radius: 10px; padding: 9px 6px; background: #0b1a31; }
.salto-device i { display: block; font-style: normal; font-size: 18px; color: #9fd0ff; }
.salto-device b { display: block; font-size: 12px; } .salto-device small { display: block; font-size: 10px; color: #8aa6c2; }
.salto-device.relay { opacity: .55; border-style: dashed; } .salto-device.relay.in-range { opacity: 1; border-style: solid; border-color: var(--lime); }
.salto-hop { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #3d5b84 0 6px, transparent 6px 10px); }
.salto-envelope { position: absolute; top: -5px; left: 0; width: 14px; height: 10px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px #ceff5499; opacity: 0; }
.salto-devices[data-delivery="relay"] .salto-hop:not(.second) .salto-envelope, .salto-devices[data-delivery="confirmed"] .salto-hop .salto-envelope { opacity: 1; left: calc(100% - 14px); }
body:not(.paused) .salto-devices[data-relay="inRange"] .salto-hop:not(.second) .salto-envelope { animation: salto-hop 1.6s ease-in-out 1; }
@keyframes salto-hop { from { left: 0; opacity: 1; } to { left: calc(100% - 14px); opacity: 1; } }
.salto-delivery { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; margin: 8px 0; }
.salto-delivery li { border: 1px solid #23395a; border-radius: 8px; padding: 8px; color: #7f9bb9; }
.salto-delivery li.done { border-color: #4f6f3a; color: #cfe7a7; } .salto-delivery li.current { border-color: var(--lime); color: #f4ffe0; }
.salto-delivery b { display: block; font-size: 12px; font-weight: 500; } .salto-delivery small { font-size: 10px; }
.salto-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.salto-compare > div, .salto-remote, .salto-relay-view, .salto-queue, .salto-result, .salto-inspector, .salto-guest, .salto-plan { border: 1px solid #23395a; border-radius: 8px; padding: 9px; margin-top: 8px; }
.salto-remote { border-color: #f4bc7266; background: #1a1712; }
.salto-remote dl, .salto-relay-view dl, .salto-family dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0; }
.salto-remote dt, .salto-relay-view dt { color: #9fb5cf; font-size: 11px; } .salto-remote dd, .salto-relay-view dd { margin: 0; }
.salto-relay-view { border-color: #ceff5455; background: #0c1a12; }
.salto-relay-view code { font: 500 11px var(--mono, monospace); color: #dff7a8; word-break: break-all; }
.salto-real { font: 600 8px var(--mono, monospace); letter-spacing: .6px; color: #0a1406; background: #8be9ff; border-radius: 3px; padding: 2px 4px; margin-inline-start: 4px; }
.salto-sim { font: 600 8px var(--mono, monospace); letter-spacing: .6px; color: #2a1d06; background: #f4bc72; border-radius: 3px; padding: 2px 4px; }
.salto-layers { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.salto-layers small { width: 100%; }
.salto-layer, .eco-layer-chip { font: 500 10px var(--mono, monospace); color: #cfe7ff; border: 1px solid #3a6491; border-radius: 999px; padding: 4px 8px; background: #0e2242; }
.salto-layer.remote { border-color: #f4bc72; color: #ffd9a6; }
.eco-layers-label { display: block; width: 100%; font: 500 9px var(--mono, monospace); letter-spacing: .6px; color: #8aa6c2; margin-bottom: 4px; }
.salto-chip { font: 500 10px var(--mono, monospace); border: 1px solid #36547d; border-radius: 999px; padding: 3px 8px; color: #cfe0f3; display: inline-block; }
.salto-chip.stage { border-color: #f4bc7280; color: #ffd9a6; }
/* previews */
.salto-preview-head p { color: #9fb7d1; }
.salto-mesh-grid, .salto-ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.salto-contact { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; border-bottom: 1px solid #1c3150; padding: 7px 0; }
.salto-contact span { grid-column: 1; color: #9fb7d1; font-size: 12px; } .salto-contact em { grid-row: 1 / 3; grid-column: 2; font: 500 9px var(--mono, monospace); color: #dff7a8; font-style: normal; align-self: center; }
.salto-mesh-path { position: relative; border: 1px solid #23395a; border-radius: 10px; padding: 58px 10px 10px; background: radial-gradient(80% 70% at 50% 20%, #ceff540d, transparent); }
.salto-mesh-path .salto-node { position: absolute; top: 10px; font: 600 10px var(--mono, monospace); color: #dfefff; border: 1px solid #36547d; border-radius: 6px; padding: 4px 6px; background: #0b1a31; }
.salto-node.a { left: 8px; } .salto-node.b { left: 50%; translate: -50% 0; } .salto-node.c { right: 8px; }
.salto-mesh-path .travel { top: 36px; opacity: 1; left: 34px; transition: left .8s cubic-bezier(.2, .75, .25, 1); }
.salto-mesh-path[data-hop="1"] .travel { left: calc(50% - 7px); } .salto-mesh-path[data-hop="2"] .travel { left: calc(100% - 48px); }
body.paused .salto-mesh-path .travel { transition: none; }
.salto-path-state { color: #f4ffe0; }
.salto-transport { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; } .salto-transport small { width: 100%; color: #8ea8c4; }
.salto-segment, .salto-tasks, .salto-roles, .salto-regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.salto-pack { border-bottom: 1px solid #1c3150; padding: 7px 0; } .salto-pack b { display: block; font-weight: 500; } .salto-pack span, .salto-pack em { display: block; font-size: 11px; color: #9fb7d1; font-style: normal; } .salto-pack em { color: #dff7a8; }
.salto-guest ol { margin: 6px 0; padding-inline-start: 20px; color: #7f9bb9; } .salto-guest li.done { color: #cfe7a7; } .salto-guest li.current { color: #f4ffe0; }
.salto-range { display: block; margin: 8px 0; } .salto-range input { width: 100%; accent-color: #ceff54; }
.salto-bars { display: grid; gap: 6px; margin: 8px 0; } .salto-bars div { display: grid; grid-template-columns: 80px 1fr 70px; gap: 8px; align-items: center; }
.salto-bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #5ebdff var(--w), #12253f var(--w)); }
.salto-bars i.reserved { background: linear-gradient(90deg, #8aa8ff var(--w), #12253f var(--w)); }
.salto-bars i.verified { background: linear-gradient(90deg, #ceff54 var(--w), #12253f var(--w)); }
.salto-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.salto-atlas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.salto-atlas svg { width: 100%; height: auto; display: block; }
.salto-atlas .sea { fill: #08172c; stroke: #20385a; stroke-width: .3; }
.salto-atlas .halo { fill: #5ebdff22; stroke: #5ebdff66; stroke-width: .3; }
.salto-atlas[data-layer="storage"] .halo { fill: #ceff5422; stroke: #ceff5466; }
.salto-atlas .dot { fill: #9fe3ff; } .salto-atlas[data-layer="storage"] .dot { fill: #ceff54; }
.salto-atlas .masked .halo { fill: none; stroke: #6f86a3; stroke-dasharray: 1 1; } .salto-atlas .masked .dot { fill: #6f86a3; }
.salto-atlas .selected .halo { stroke-width: .7; }
body:not(.paused) .salto-atlas .region:not(.masked) .halo { animation: salto-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes salto-pulse { 50% { transform: scale(1.18); opacity: .7; } }
.salto-regions { flex-direction: column; align-items: stretch; } .salto-regions button.masked { opacity: .7; border-style: dashed; }
.salto-figure { display: block; font: 500 26px var(--display, inherit); color: #f4ffe0; }
@media (prefers-reduced-motion: reduce) { .salto-envelope, .salto-atlas .halo, .orbit-node.is-featured::after { animation: none !important; transition: none !important; } }
@media (max-width: 760px) {
  .salto-steps { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .salto-mesh-grid, .salto-ai-grid, .salto-atlas, .salto-compare { grid-template-columns: 1fr; }
  .salto-devices { grid-template-columns: 1fr 22px 1fr 22px 1fr; }
  .salto-delivery { grid-template-columns: 1fr; }
}
.salto-demo.is-compact { padding: 10px; }
.salto-demo.is-compact .salto-mission-head .salto-quote { font-size: 13px; }

/* ---------- the enlarged demonstration and the SALTO sheet ---------- */
.salto-dialog-demo { margin-top: 12px; }
.salto-sheet-hero { display: flex; gap: 16px; align-items: center; }
.salto-sheet-mark { font-style: normal; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: #0c1a12; border: 1px solid #ceff5466; }
.salto-sheet-mark .vertical-mark { width: 30px; height: 30px; color: #ceff54; }
.salto-sheet-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.salto-signature { font: 500 26px/1.2 var(--display, inherit); color: #f4ffe0; margin: 4px 0 10px; }
.salto-signature span { display: block; font: 500 12px var(--mono, monospace); letter-spacing: .6px; color: #dff7a8; margin-top: 6px; }
.salto-sheet-demo { margin-top: 16px; }
.salto-families { display: block; }
.salto-family-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.salto-family { border: 1px solid #1f3554; border-radius: 10px; padding: 14px; font-size: 14px; line-height: 1.6; color: #c4d6ea; }
.salto-family h3 { margin-top: 0; } .salto-family dd { margin: 0 0 6px; } .salto-family ul { padding-inline-start: 18px; color: #c4d6ea; }
.salto-catalogue { display: grid; gap: 8px; }
.salto-catalogue article { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: start; border: 1px solid #1f3554; border-radius: 10px; padding: 10px; }
.salto-catalogue h3 { margin: 0 0 4px; font-size: 14px; } .salto-catalogue p { margin: 0; color: #9fb7d1; font-size: 12px; line-height: 1.5; }
.salto-code { font: 600 12px var(--mono, monospace); color: #ceff54; }
.salto-glossary { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 16px; }
.salto-glossary dt { font: 600 12px var(--mono, monospace); color: #dff7a8; } .salto-glossary dd { margin: 0; color: #c4d6ea; }
.current-verticals { margin-inline-start: auto; color: #dff7a8; }
@media (max-width: 760px) { .salto-catalogue article { grid-template-columns: 1fr; } .salto-glossary { grid-template-columns: 1fr; } }
/* Dialog buttons carry their own theme: the SALTO controls keep theirs inside the dialogs. */
dialog .salto-family-list button[aria-pressed="true"], dialog .salto-demo .salto-tabs button[aria-selected="true"], dialog .salto-demo button[aria-pressed="true"] { color: #0a1406; background: #ceff54; border-color: #ceff54; }
.salto-family .salto-chip.stage { display: block; border-radius: 8px; padding: 8px 10px; line-height: 1.5; font-size: 11px; }
@media (max-width: 700px) {
  .hero-insight.is-featured > div > span:not(.salto-insight-actions) { display: none; }
  .hero-insight.is-featured .salto-insight-actions { flex-wrap: nowrap; margin-top: 6px; }
  .hero-insight.is-featured .salto-insight-actions button { font-size: 10px; padding: 6px 8px; }
}
/* Six verticals: on tablets the selector is a 3 x 2 grid instead of a horizontal scroller, so every tab (SALTO
   included) is visible without scrolling. */
@media (min-width: 701px) and (max-width: 1100px) {
  .vertical-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .vertical-selector button { min-width: 0; }
}
/* Language selector (docs/I18N.md section 3, item 10): built only when two or more locales are published. */
.lang-switch { display: flex; gap: 2px; border: 1px solid #7c9ad655; border-radius: 8px; padding: 2px; }
.lang-switch a { font: 600 12px/1 var(--body); letter-spacing: .6px; color: #c9dcf5; padding: 9px 8px; border-radius: 6px; text-decoration: none; }
.lang-switch a:hover { background: #213451; color: #fff; }
.lang-switch a[aria-current="true"] { background: #1f3a58; color: #a9f3ff; }
.lang-switch a:focus-visible { outline: 2px solid #7ef4ff; outline-offset: 1px; }
/* Phones: one compact menu (the current code; the list by native name) instead of the row of codes. */
.lang-menu { display: none; position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; font: 600 11px/1 var(--body); letter-spacing: .6px; color: #c9dcf5; padding: 10px 7px; border: 1px solid #7c9ad655; border-radius: 8px; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after { content: ' \25BE'; color: #81eaff; }
.lang-menu[open] > summary { background: #1f3a58; color: #a9f3ff; }
.lang-menu > summary:focus-visible { outline: 2px solid #7ef4ff; outline-offset: 1px; }
.lang-menu-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 140px; display: grid; gap: 2px; padding: 6px; border: 1px solid #779bda99; border-radius: 10px; background: #0b1730; box-shadow: 0 18px 40px #000a; }
.lang-menu-list a { font: 500 14px/1.2 var(--body); color: #dbe8fb; padding: 10px 12px; border-radius: 7px; text-decoration: none; }
.lang-menu-list a:hover, .lang-menu-list a:focus-visible { background: #213451; color: #fff; }
.lang-menu-list a[aria-current="true"] { color: #a9f3ff; background: #1f3a58; }
@media (max-width: 700px) {
  .lang-switch { display: none; }
  .lang-menu { display: block; }
}
/* Phones: brand, language, pause, access and menu stay inside 360 px (the access button may wrap on two lines). */
@media (max-width: 480px) {
  .header-actions { gap: 5px; }
  .header-actions .btn.compact { max-width: 96px; white-space: normal; line-height: 1.15; text-align: center; padding: 6px 8px; }
}