/* =====================================================================================================================
 * VISION SCREEN 1 · THE SCOPE IS THE APP (2026-11-06, his order: every vision screen, exactly as the mock-up, even
 * over the current look). Mock-up: docs/sl-vision/Main.dc.html (390 x 844).
 * Phone layout only (body.slv, set by vision-home.js at the phone breakpoint, max-width 640px). Desktop keeps its look.
 * Every control underneath is the same element as before (pttBtn, plot, rooms, roster, mark): only placed and dressed.
 * Fonts are inside the app (fonts/), so it looks the same with no internet.
 * ===================================================================================================================== */

@font-face { font-family: "Saira Semi Condensed"; font-weight: 500; font-display: swap; src: url("/fonts/saira-500.woff2") format("woff2"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/saira-600.woff2") format("woff2"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/saira-700.woff2") format("woff2"); }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 800; font-display: swap; src: url("/fonts/saira-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500 700; font-display: swap; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); }

body.slv {
  --font-display: "Saira Semi Condensed", Bahnschrift, "Arial Narrow", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --slv-dim: #8a8174;
  background: radial-gradient(120% 70% at 50% 30%, #0c1a1c 0%, #040308 62%) fixed, #040308;
}
/* the mock-up is a still, clean field: no ambience, scan lines or vignette (also lighter on the phone) */
body.slv .sl-bg, body.slv .sl-ambience, body.slv .sl-scan, body.slv .sl-vignette { display: none; }

/* ---------------------------------------------------------------- header: MAGIC PTT / SL left, three status lines right */
body.slv .sl-mast {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 0 20px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
body.slv .sl-mast .sl-flags, body.slv .sl-mast .sl-mast__end { display: none; }
body.slv .sl-word { display: flex; flex-direction: column; gap: 2px; }
body.slv .sl-word__magic { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.24em; color: var(--slv-dim); font-weight: 600; }
body.slv .sl-word__sl {
  font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: 0.04em; color: var(--sl); line-height: 1;
  border: 0; text-shadow: none; padding: 0; margin: 0;
}
body.slv .sl-word__sl::after, body.slv .sl-word__sl::before { display: none; }
.slv-status { display: none; }
body.slv .slv-status {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-align: right;
}
.slv-status span { color: var(--slv-dim); white-space: nowrap; }
.slv-status .slv-mesh { color: var(--sl); }
.slv-status button {
  all: unset; cursor: pointer; color: var(--slv-dim); font: inherit; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* the net name is the button that opens the nets sheet: bigger than the status line and marked as tappable
   (his "way too small", 2026-11-09) */
.slv-status .slv-net {
  font-size: 15px; font-weight: 700; color: var(--sl); padding: 4px 2px; letter-spacing: 0.04em;
}
.slv-status .slv-net::after { content: " \25BE"; }

/* ---------------------------------------------------------------- the nets: off the home screen, a sheet from the header line */
body.slv #roomRail { display: none; }
body.slv.slv-rooms #roomRail {
  display: flex; position: fixed; z-index: 70; left: 12px; right: 12px; top: calc(70px + env(safe-area-inset-top, 0px));
  flex-wrap: wrap; justify-content: center; gap: 0.4rem; padding: 0.7rem;
  background: rgba(4, 3, 8, 0.96); border: 1px solid rgba(var(--sl-rgb), 0.35); border-radius: 14px;
}

/* ---------------------------------------------------------------- the scope: full width, rings only, as drawn */
body.slv .sl-stage { display: block; height: auto; min-height: 0; position: relative; inset: auto; }
body.slv .sl-floor {
  position: relative; left: auto; top: auto; transform: none;
  width: min(calc(100vw - 30px), 360px, 58vh); height: min(calc(100vw - 30px), 360px, 58vh);
  margin: 26px auto 0;
}
/* Fit the screen, no scrolling (his word 2026-11-08): the scope gives up height first on short phones; everything
   else on the home screen is about 380px plus the notch and home bar. */
/* sl.css keeps the page box at least 100vh minus a 3.35rem bar, but this header is ~101px, so every phone could scroll
   ~48px with nothing under the tiles (his "it scrolls up and down a little bit", 2026-11-08). Phone width only. */
@media (max-width: 640px) {
  body.slv.sl-in .sl-desk { min-height: 0; }
}
@supports (height: 100dvh) {
  body.slv .sl-floor {
    width: min(calc(100vw - 30px), 360px, 58vh, calc(100dvh - 380px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    height: min(calc(100vw - 30px), 360px, 58vh, calc(100dvh - 380px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
}
body.slv .sl-floor__halo, body.slv .sl-ptt__rings, body.slv .sl-ptt__ripple, body.slv .sl-ptt__cross { display: none; }
body.slv .sl-floor__disc {
  background: none; border: 0; box-shadow: none; overflow: visible;
}
body.slv .sl-floor__scope { overflow: visible; }
/* the four rings of the mock-up: 180 / 130 / 80 / 34 of 180 */
body.slv .sl-plot__ring { border: 1px solid rgba(var(--sl-rgb), 0.18); box-shadow: none; background: none; }
body.slv .sl-plot__ring--outer { border-color: rgba(var(--sl-rgb), 0.28); }
body.slv .sl-plot__ring[style*="0.25"] { border-color: rgba(var(--sl-rgb), 0.12); }
body.slv .sl-plot__ring[style*="0.5"] { border-color: rgba(var(--sl-rgb), 0.14); }
/* the crosshair */
body.slv .sl-plot::before, body.slv .sl-plot::after {
  content: ""; position: absolute; background: rgba(var(--sl-rgb), 0.1); pointer-events: none;
}
body.slv .sl-plot::before { left: 0; right: 0; top: 50%; height: 1px; }
body.slv .sl-plot::after { top: 0; bottom: 0; left: 50%; width: 1px; }
/* the sweep: the mock-up's wedge, turning once every 8 s, steady (his word 2026-11-09: "keep it steady"; it was
   still from 11-06). A smooth turn, nothing that blinks. Same speed while you talk. The radios still hide it
   (sl.css low-power block, display:none !important): it cost the B8000 a whole core. */
body.slv .sl-ptt__sweep {
  display: block; position: absolute; inset: 0; border-radius: 50%; animation: sl-sweep 8s linear infinite;
  background: radial-gradient(circle closest-side, rgba(var(--sl-rgb), 0) 0%, rgba(var(--sl-rgb), 0.22) 100%);
  -webkit-mask-image: conic-gradient(from 0deg, #000 0deg 56deg, transparent 56deg);
  mask-image: conic-gradient(from 0deg, #000 0deg 56deg, transparent 56deg);
  opacity: 1;
}
body.slv.sl-tx .sl-ptt__sweep { animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) { body.slv .sl-ptt__sweep { animation: none; } }
/* zoom by pinch on the plot (already there); the scale shows as one quiet label at the rim, tap it for MI / KM */
body.slv .sl-plot__scalebar { display: none; }
.slv-scale { display: none; }
body.slv .slv-scale {
  display: block; position: absolute; left: calc(50% + 50% * 0.86); top: calc(50% - 15px);
  font-family: var(--font-mono); font-size: 10px; color: var(--slv-dim); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* the middle only speaks when someone is on the air */
body.slv .sl-floor__core { display: none; }
body.slv[data-air="onair"] .sl-floor__core, body.slv[data-air="tx"] .sl-floor__core { display: flex; }
body.slv .sl-ptt__air-lab { display: none; }

/* you: the green dot with its ring */
body.slv .sl-plot__me {
  width: 14px; height: 14px; background: #3dffc5; border: 0; box-shadow: 0 0 0 7px transparent; border-radius: 50%;
}
body.slv .sl-plot__me::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(61, 255, 197, 0.5);
}
/* the team: bone dots, name up and left */
body.slv .sl-blip { color: #efe6d6; }
body.slv .sl-blip__dot { width: 10px; height: 10px; background: #efe6d6; box-shadow: none; border: 0; animation: none; }
body.slv .sl-blip__tag {
  font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0; color: #efe6d6; text-shadow: 0 0 6px #000;
}

/* ---------------------------------------------------------------- REACH / FAR / NEED HELP */
.slv-chips, .slv-foot { display: none; }
body.slv .slv-chips { display: flex; gap: 8px; margin: 12px 20px 0; }
body.slv .slv-chips .slv-chip {
  background: none !important; box-shadow: none !important; transform: none !important;
  all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 8px 10px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; font-weight: 700; color: var(--slv-dim);
  -webkit-tap-highlight-color: transparent;
}
body.slv .slv-chips .slv-chip.on { border-color: rgba(var(--sl-rgb), 0.35); color: var(--sl); }
body.slv .slv-chips .slv-chip.help { border-color: rgba(255, 45, 58, 0.6); color: #ff2d3a; }
body.slv .slv-chips .slv-chip.ok { border-color: rgba(61, 255, 197, 0.45); color: #3dffc5; }

/* ---------------------------------------------------------------- HOLD TO TALK: one wide key
   Half its first height (150 -> 76) on his word 2026-11-08: the home screen did not fit an iPhone, the tiles under
   the key were cut off, "it does not need to be that big". */
body.slv .slv-talk { margin: 12px 20px 0; }
body.slv #pttBtn {
  position: relative; left: auto; right: auto; bottom: auto; transform: none; width: 100%; height: 76px;
  border-radius: 26px; border: 1px solid rgba(var(--sl-rgb), 0.5);
  background: radial-gradient(80% 120% at 50% 0%, rgba(var(--sl-rgb), 0.22), rgba(var(--sl-rgb), 0.04));
  color: #efe6d6; box-shadow: 0 0 40px rgba(var(--sl-rgb), 0.18) inset; animation: none;
}
body.slv #pttBtn .ptt-key__word { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 0.14em; color: #efe6d6; }
body.slv #pttBtn .ptt-key__sub { display: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sl); }
body.slv.sl-tx #pttBtn .ptt-key__sub { display: block; }
body.slv #pttBtn:disabled { opacity: 0.55; }
body.slv.sl-tx #pttBtn {
  background: radial-gradient(80% 120% at 50% 0%, rgba(var(--sl-rgb), 0.5), rgba(var(--sl-rgb), 0.12));
  box-shadow: 0 0 60px rgba(var(--sl-rgb), 0.4) inset;
}

/* ---------------------------------------------------------------- the foot line */
body.slv .slv-foot {
  display: flex; justify-content: space-between; gap: 12px; margin: 14px 20px 22px;
  font-family: var(--font-mono); font-size: 11px; color: var(--slv-dim);
}
.slv-foot button { all: unset; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
/* the radio link mark: big enough to notice, steady colour only (no animation) */
.slv-foot .slv-radio {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.slv-foot .slv-radio.is-linked { color: #4ade80; border-color: rgba(74, 222, 128, 0.6); background: rgba(74, 222, 128, 0.1); }
.slv-foot .slv-radio.is-linking { color: #f5c542; border-color: rgba(245, 197, 66, 0.55); }
body.slv .slv-foot { align-items: center; }

/* ---------------------------------------------------------------- Magic Mesh on the scope, as drawn: boxes are triangles,
   Dead Drops outlined diamonds, names to the right in the display face (scope-mesh.js places them) */
body.slv .sl-mesh-box, body.slv .sl-mesh-drop { flex-direction: row; gap: 6px; transform: translate(-6px, -50%); }
body.slv .sl-mesh-drop { transform: translate(-7px, -50%); gap: 8px; }
body.slv .sl-mesh-box i {
  width: 12px; height: 12px; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: none; background: var(--sl);
}
body.slv .sl-mesh-box.off i { background: var(--slv-dim); opacity: 1; }
body.slv .sl-mesh-box span, body.slv .sl-mesh-drop span {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0; opacity: 1; text-shadow: 0 0 6px #000;
}
body.slv .sl-mesh-box span { color: #efe6d6; }
body.slv .sl-mesh-drop i { width: 10px; height: 10px; border: 2px solid #f5c542; box-shadow: none; background: none; }
body.slv .sl-mesh-drop span { color: #f5c542; }

/* ---------------------------------------------------------------- Desktop and wide windows (his order 2026-11-06:
   the Desktop gets every vision screen with the phone). The same screen, as a centred phone-width column between
   the TRAFFIC and OPERATORS drawers; the drawers stay as they are. */
@media (min-width: 641px) {
  body.slv .sl-stage,
  body.slv .slv-chips,
  body.slv .slv-talk,
  body.slv .slv-foot,
  body.slv .slv-gd-banner,
  body.slv .slv-gd-tiles,
  body.slv .slv-gd-key {
    width: min(390px, calc(100% - 40px));
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.slv.sl-grid-down .slv-gd-key { width: min(390px, calc(100% - 40px)) !important; margin-left: auto !important; margin-right: auto !important; }
  body.slv.sl-grid-down .slv-gd-banner, body.slv.sl-grid-down .slv-gd-tiles { margin-left: auto !important; margin-right: auto !important; }
  body.slv .sl-stage { position: relative; inset: auto; }
  body.slv .sl-floor { margin-top: 18px; }
  body.slv .slv-talk #pttBtn { height: 76px; }
}

/* the scope's rings always show, as drawn (the old scope hid itself until a position was shared, leaving an empty
   field on the Desktop); with no position a quiet line under the middle says how to place the mesh */
body.slv .sl-plot { opacity: 1; }
.slv-nofix { display: none; }
body.slv .slv-nofix {
  display: block; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); z-index: 4;
  all: unset; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); z-index: 4; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--slv-dim); text-align: center;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body.slv .slv-nofix[hidden] { display: none; }
body.slv.sl-grid-down .slv-nofix { display: none; }

/* Desktop / web: EXIT SL back at the top right (his 11-06: "i dont understand how to exit sl"). The phone app hides
   it itself (app.js, IN_SL_APP): there you leave by closing the app. */
@media (min-width: 641px) {
  body.slv .sl-mast .sl-mast__end { display: flex; align-items: center; gap: 10px; order: 2; margin-left: 22px; align-self: center; }
  body.slv .slv-status { order: 1; margin-left: auto; }
}