/* =====================================================================================================================
 * VISION SCREEN · NEED HELP BEACON (2026-11-06). Mock-up: docs/sl-vision/SOS.dc.html (390 x 844).
 * Over everything while your own mark is NEED HELP. Still rings, no pulse (memory no-flashing-ui).
 * ===================================================================================================================== */

.slv-sos {
  position: fixed; inset: 0; z-index: 94; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(110% 60% at 50% 38%, #2a0508 0%, #040308 64%), #040308;
  color: #efe6d6; font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
  overflow-y: auto;
}
.slv-sos[hidden] { display: none; }
body.slv-sos-on { overflow: hidden; }

.slv-sos__top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.slv-sos__top b { font-size: 12px; letter-spacing: 0.24em; color: #ff2d3a; font-weight: 800; }
.slv-sos__back {
  all: unset; cursor: pointer; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174;
  padding: 2px 0 6px 12px; -webkit-tap-highlight-color: transparent;
}
.slv-sos__rings { width: 300px; height: 300px; max-width: 80vw; max-height: 80vw; flex: none; }
.slv-sos__name { font-family: "Saira Semi Condensed", var(--font-display), sans-serif; }
.slv-sos__every { font-family: "JetBrains Mono", var(--font-mono), monospace; }

.slv-sos__rows { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.slv-sos__row {
  border: 1px solid rgba(255, 45, 58, 0.4); border-radius: 12px; padding: 10px 12px;
  display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700;
}
.slv-sos__row b { font-weight: 700; text-align: right; }
.slv-sos__row b.ok { color: #3dffc5; }
.slv-sos__note { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; text-align: center; line-height: 1.5; }

.slv-sos__ok {
  all: unset; box-sizing: border-box; margin-top: auto; align-self: stretch; height: 72px; border-radius: 18px; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2); background: transparent !important; box-shadow: none !important; cursor: pointer;
  color: #efe6d6; font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: 0.14em; flex: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 641px) {
  .slv-sos { left: 50%; right: auto; width: min(430px, 100%); transform: translateX(-50%); border-left: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06); }
}