/* =====================================================================================================================
 * VISION SCREEN · NIGHT OPS (2026-11-06). Mock-up: docs/sl-vision/NightRed.dc.html (390 x 844).
 * Red on black only, no glow, no movement (memory no-flashing-ui), over everything until DAY MODE.
 * ===================================================================================================================== */

.slv-night {
  position: fixed; inset: 0; z-index: 95; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: #000; color: #b3121c; font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
}
.slv-night[hidden] { display: none; }
body.slv-night-on { overflow: hidden; background: #000; }

.slv-night__top { display: flex; justify-content: space-between; align-items: center; }
.slv-night__top b { font-size: 13px; letter-spacing: 0.24em; font-weight: 800; }
.slv-night__top small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; }
.slv-night__net { display: flex; flex-direction: column; gap: 2px; }
.slv-night__net span { font-size: 15px; letter-spacing: 0.14em; font-weight: 700; }
.slv-night__notes { display: flex; flex-direction: column; gap: 6px; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 12px; }

.slv-night__key {
  all: unset; box-sizing: border-box; margin-top: auto; flex: 0 1 420px; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 40px; border: 2px solid #b3121c; background: #0c0000 !important; box-shadow: none !important;
  color: #b3121c; font-family: inherit; font-size: 46px; font-weight: 800; letter-spacing: 0.16em; line-height: 1.15;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.slv-night__key.is-tx { background: #2a0004 !important; }

.slv-night__row { display: flex; gap: 10px; }
.slv-night__row button {
  all: unset; box-sizing: border-box; flex: 1; height: 64px; border-radius: 16px; text-align: center; cursor: pointer;
  border: 2px solid #b3121c; background: transparent !important; box-shadow: none !important; color: #b3121c;
  font-family: inherit; font-size: 18px; font-weight: 800; letter-spacing: 0.14em;
  -webkit-tap-highlight-color: transparent;
}
.slv-night__row .slv-night__day { border-color: #4a0a10; }

/* the way in: the clock line on the home screen is a quiet button */
body.slv .slv-status .slv-clock { cursor: pointer; }

/* Desktop and wide windows: the phone screen, centred. In this file, after its own "inset: 0", so it wins. */
@media (min-width: 641px) {
  .slv-night { padding-left: max(18px, calc((100vw - 430px) / 2)); padding-right: max(18px, calc((100vw - 430px) / 2)); }
}