/* =====================================================================================================================
 * VISION SCREEN 3 · NO GRID · MESH ONLY (2026-11-06). Mock-up: docs/sl-vision/GridDown.dc.html (390 x 844).
 * body.slv.sl-grid-down: phones only, with no internet. The home screen becomes the mock-up; the pieces it does not
 * show (header, chips, the Nexus talk key, the foot line) step aside and come back with the internet.
 * ===================================================================================================================== */

.slv-gd-banner, .slv-gd-tiles, .slv-gd-key, .slv-gd-scope { display: none; }

body.slv.sl-grid-down {
  background: radial-gradient(120% 70% at 50% 40%, #241304 0%, #040308 64%) fixed, #040308;
}
/* what the mock-up does not show */
body.slv.sl-grid-down .sl-mast,
body.slv.sl-grid-down .sl-grid-banner,
body.slv.sl-grid-down .slv-chips,
body.slv.sl-grid-down .slv-talk,
body.slv.sl-grid-down .slv-foot { display: none !important; }

/* the banner */
body.slv.sl-grid-down .slv-gd-banner {
  display: flex; flex-direction: column; gap: 2px;
  margin: calc(18px + env(safe-area-inset-top, 0px)) 16px 0 16px;
  border: 1px solid #ff7a18; border-radius: 12px; padding: 10px 14px; background: rgba(255, 122, 24, 0.08);
}
.slv-gd-banner b { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: 0.12em; color: #ff7a18; }
.slv-gd-banner small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: #efe6d6; letter-spacing: 0; }

/* the scope: only the mock-up's reach rings, you, and the boxes */
body.slv.sl-grid-down .sl-floor { margin-top: 22px; }
body.slv.sl-grid-down .sl-plot__ring,
body.slv.sl-grid-down .sl-plot::before,
body.slv.sl-grid-down .sl-plot::after,
body.slv.sl-grid-down .sl-ptt__sweep,
body.slv.sl-grid-down .sl-plot__me,
body.slv.sl-grid-down .sl-plot__blips,
body.slv.sl-grid-down .sl-mesh-layer,
body.slv.sl-grid-down .slv-scale,
body.slv.sl-grid-down .sl-floor__core { display: none !important; }
body.slv.sl-grid-down .slv-gd-scope { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the plot fades out when there is no team: with no grid it is the mesh that matters, so it always shows */
body.slv.sl-grid-down #plot { opacity: 1 !important; visibility: visible !important; }

/* VOICE / OUTBOX / DATA USED */
body.slv.sl-grid-down .slv-gd-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 16px 0;
}
.slv-gd-tile {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid rgba(255, 122, 24, 0.4); border-radius: 12px; padding: 10px;
  -webkit-tap-highlight-color: transparent;
}
body.slv .slv-gd-tiles button.slv-gd-tile { cursor: pointer; background: none !important; box-shadow: none !important; transform: none !important; }
.slv-gd-tile span { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: #8a8174; font-weight: 700; }
.slv-gd-tile b { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #ff7a18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* HOLD TO TALK over the radio */
body.slv.sl-grid-down .slv-gd-key {
  display: block; box-sizing: border-box; width: calc(100% - 32px); margin: 12px 16px 22px; height: 130px;
  border-radius: 26px; border: 1px solid #ff7a18;
  background: radial-gradient(80% 120% at 50% 0%, rgba(255, 122, 24, 0.28), rgba(255, 122, 24, 0.05)) !important;
  box-shadow: none !important; transform: none !important;
  color: #efe6d6; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: 0.14em;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.slv.sl-grid-down .slv-gd-key.is-tx {
  background: radial-gradient(80% 120% at 50% 0%, rgba(255, 122, 24, 0.6), rgba(255, 122, 24, 0.15)) !important;
}