/* =====================================================================================================================
 * VISION · THE LOWER AREA, CLEANED UP (2026-11-06). TRAFFIC · OPERATORS · STATION tiles; each panel as a sheet.
 * ===================================================================================================================== */

/* the old desk under the foot line: gone in the vision layout on a phone. STATION always opens as a sheet. */
body.slv #radioPane { display: none !important; }
@media (max-width: 640px) {
  body.slv #chatPane,
  body.slv #opsPane,
  body.slv #logPane,
  body.slv .sl-desk-bar { display: none !important; }
}
/* Desktop: the TRAFFIC and OPERATORS panels and the bottom bar (STATION, LOG) stay where they were, beside the
   vision column (his 11-06 Desktop picture: "no way to do much"). The NET / DISPATCH / RESET layout buttons
   rearrange the old desk, so they step aside; so do the TRAFFIC and OPERATORS tiles, the panels are right there. */
@media (min-width: 641px) {
  body.slv .sl-desk-bar .sl-preset,
  body.slv .sl-desk-bar .sl-presets__split { display: none !important; }
  body.slv .slv-more { grid-template-columns: minmax(0, 1fr); }
  body.slv .slv-more [data-sheet="traffic"],
  body.slv .slv-more [data-sheet="here"] { display: none !important; }
}

/* the three tiles, the NO GRID tiles' look in the theme colour */
.slv-more { display: none; }
body.slv .slv-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 20px 28px; }
body.slv .slv-more .slv-more__tile {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0;
  border: 1px solid rgba(var(--sl-rgb), 0.3); border-radius: 12px; padding: 10px;
  background: none !important; box-shadow: none !important; transform: none !important;
  -webkit-tap-highlight-color: transparent;
}
.slv-more__tile span { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: #8a8174; font-weight: 700; }
.slv-more__tile b { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--sl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.slv.sl-grid-down .slv-more { margin: 0 16px 28px; }

/* a sheet: the panel full screen under a slim head with CLOSE */
.slv-sheet-head { display: none; }
body.slv[data-slv-sheet] .slv-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  position: fixed; z-index: 93; left: 0; right: 0; top: 0;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 12px;
  background: #040308; border-bottom: 1px solid rgba(var(--sl-rgb), 0.25);
}
.slv-sheet-head b { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.24em; font-weight: 800; color: var(--sl); }
body.slv .slv-sheet-head button {
  all: unset; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: #8a8174; padding: 4px 0 4px 12px;
  background: none !important; box-shadow: none !important;
}
body.slv[data-slv-sheet] { overflow: hidden; }
body.slv[data-slv-sheet="traffic"] #chatPane,
body.slv[data-slv-sheet="here"] #opsPane,
body.slv[data-slv-sheet="radio"] #radioPane {
  display: flex !important; flex-direction: column; position: fixed !important; z-index: 92; inset: 0 !important;
  width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; transform: none !important;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  background: radial-gradient(110% 60% at 50% 0%, #0c1a1c 0%, #040308 60%), #040308 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow-y: auto !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.slv[data-slv-sheet] .sl-drawer > .sl-drawer__tab { display: none !important; }
body.slv[data-slv-sheet="traffic"] #chatPane .sl-drawer__body,
body.slv[data-slv-sheet="here"] #opsPane .sl-drawer__body,
body.slv[data-slv-sheet="radio"] #radioPane .sl-drawer__body {
  display: flex !important; flex-direction: column; flex: 1; min-height: 0; max-height: none !important; overflow: visible !important;
  padding: 0 !important; background: none !important;
}
body.slv[data-slv-sheet="traffic"] #log { flex: 1; min-height: 8rem; overflow-y: auto; }

/* HOLD TO TALK pinned to the bottom of STATION (2026-11-07, his thumb covered the Voice in flight drawing when the key
   sat mid-screen): the key stays under the thumb at the bottom, above Voice in flight, and the sheet scrolls above it */
body.slv[data-slv-sheet="radio"] #radioPane { padding-bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important; }
body.slv[data-slv-sheet="radio"] #mcTalk {
  position: fixed; z-index: 97; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: auto !important; margin: 0 !important; min-height: 96px;
}
@media (min-width: 641px) {
  body.slv[data-slv-sheet="radio"] #mcTalk { left: 50%; right: auto; width: calc(min(430px, 100%) - 32px) !important; transform: translateX(-50%); }
}

/* No radio link on this device (Desktop, a browser): the radio's HOLD TO TALK is hidden so the real talk key under it works */
html.sl-no-meshvoice #mcTalk { display: none !important; }

/* the account corner inside STATION */
.slv-account { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; }
.slv-account #who { font-family: var(--font-mono); font-size: 11px; color: #8a8174; }
.slv-account .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (min-width: 641px) {
  body.slv .slv-more { width: min(390px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
  body.slv[data-slv-sheet] .slv-sheet-head,
  body.slv[data-slv-sheet="traffic"] #chatPane,
  body.slv[data-slv-sheet="here"] #opsPane,
  body.slv[data-slv-sheet="radio"] #radioPane {
    left: 50% !important; right: auto !important; width: min(430px, 100%) !important; transform: translateX(-50%) !important;
  }
}

/* while a sheet is open the home screen behind it steps aside (the panels sit in the desk's own layer, under the header) */
body.slv[data-slv-sheet] .sl-mast,
body.slv[data-slv-sheet] .sl-stage,
body.slv[data-slv-sheet] .slv-chips,
body.slv[data-slv-sheet] .slv-talk,
body.slv[data-slv-sheet] .slv-foot,
body.slv[data-slv-sheet] .slv-more,
body.slv[data-slv-sheet] .slv-gd-banner,
body.slv[data-slv-sheet] .slv-gd-tiles,
body.slv[data-slv-sheet] .slv-gd-key { visibility: hidden !important; }

/* the way out of a sheet, as a real button you cannot miss (11-07: "the way out is extremely hard to see") */
body.slv .slv-sheet-head button {
  all: unset; cursor: pointer; padding: 9px 16px; border: 1px solid var(--sl); border-radius: 8px; color: var(--sl);
  font: 800 12px var(--font-display); letter-spacing: 0.14em; background: none !important; box-shadow: none !important;
}
body.slv .slv-sheet-head button:hover { background: rgba(var(--sl-rgb), 0.12) !important; }
body.sld .slv-sheet-head button::after { content: " · ESC"; }