/* =====================================================================================================================
 * MAGIC PTT SL DESKTOP · D6 THE RADAR, WITH THE MESH (2026-11-06). The Magic Grid radar window's layout, in SL colours.
 * ===================================================================================================================== */

.sldr {
  position: fixed; inset: 0; z-index: 92; display: flex; flex-direction: column; background: #040308; color: #efe6d6;
  font-family: "JetBrains Mono", var(--font-mono), monospace;
}
.sldr[hidden] { display: none; }
body.sld-radar { overflow: hidden; }

.sldr__top {
  height: 58px; flex: none; display: flex; align-items: center; gap: 18px; padding: 0 18px;
  border-bottom: 1px solid rgba(var(--sl-rgb), 0.18); background: linear-gradient(180deg, #071114, #040308);
}
.sldr__word { display: flex; flex-direction: column; line-height: 1.05; }
.sldr__word small { font-size: 10px; letter-spacing: 0.24em; color: var(--sl); }
.sldr__word b { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 0.16em; }
.sldr__lbl { font-size: 11px; letter-spacing: 0.2em; color: #8a8174; }
.sldr__net {
  height: 34px; padding: 0 10px; border: 1px solid rgba(var(--sl-rgb), 0.35); border-radius: 6px; background: #071114; color: #efe6d6;
  font: 700 15px var(--font-display);
}
.sldr__follow { padding: 7px 12px; border-radius: 6px; background: var(--sl); color: #040308; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.sldr__stat { font-size: 12px; letter-spacing: 0.14em; white-space: nowrap; }
.sldr__stat i { font-style: normal; }
.sldr__stat i.ok { color: #3dffc5; }
.sldr__stat i.acc { color: var(--sl); }
.sldr__stat i.dim { color: #8a8174; }
.sldr__utcl { margin-left: auto; font-size: 11px; letter-spacing: 0.2em; color: #8a8174; }
.sldr__utc { font-size: 28px; font-weight: 700; color: var(--sl); letter-spacing: 0.04em; }
.sldr__local { font-size: 11px; letter-spacing: 0.2em; color: #8a8174; }
.sldr .sldr__back {
  all: unset; cursor: pointer; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; font: 700 12px var(--font-display); letter-spacing: 0.14em; color: #efe6d6; background: none !important;
}

.sldr__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.sldr__main { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(60% 70% at 50% 50%, #08181a 0%, #040308 75%); }
.sldr__cv, .sldr__mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sldr__mesh { pointer-events: none; }
.sldr__hud { position: absolute; left: 18px; top: 14px; z-index: 2; font-size: 12px; letter-spacing: 0.12em; color: #8a8174; line-height: 1.7; pointer-events: none; }
.sldr__hud b { color: var(--sl); font-weight: 700; }
.sldr__note {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; padding: 8px 14px; border-radius: 6px;
  border: 1px solid rgba(var(--sl-rgb), 0.35); background: rgba(4, 3, 8, 0.85); font-size: 12px; letter-spacing: 0.1em; color: var(--sl);
}
.sldr__note[hidden] { display: none; }

.sldr__side { border-left: 1px solid rgba(var(--sl-rgb), 0.18); background: #05080a; display: flex; flex-direction: column; min-height: 0; }
.sldr__ph { padding: 14px 16px 8px; font-size: 12px; letter-spacing: 0.24em; color: var(--sl); }
.sldr__ph span { color: #8a8174; margin-left: 6px; }
.sldr__thead, .sldr__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 72px 56px 38px 40px; gap: 6px; padding: 0 16px; }
.sldr__thead { padding-bottom: 8px; font-size: 10px; letter-spacing: 0.14em; color: #8a8174; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.sldr__rows { flex: 1; min-height: 0; overflow-y: auto; }
.sldr .sldr__row {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) 72px 56px 38px 40px;
  gap: 6px; padding: 9px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 12px; color: #efe6d6; background: none !important;
}
.sldr__row:hover { background: rgba(var(--sl-rgb), 0.06) !important; }
.sldr__row.sel { background: rgba(var(--sl-rgb), 0.12) !important; }
.sldr__row .i { color: #8a8174; }
.sldr__row .cs { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sldr__row .gr { color: var(--sl); overflow: hidden; text-overflow: ellipsis; }
.sldr__row.box .c { color: var(--sl); }
.sldr__row.drop, .sldr__row.drop .gr { color: #f5c542; }
.sldr__row.tx, .sldr__row.tx .gr { color: #ff6e3c; }
.sldr .r { text-align: right; }
.sldr .c { text-align: center; }
.sldr__hint { margin: 10px 16px; font-size: 12px; line-height: 1.55; color: #8a8174; }
.sldr__cursor, .sldr__locked { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 12px; }
.sldr__crow { display: flex; justify-content: space-between; padding: 0 16px; font-size: 12px; color: #8a8174; }
.sldr__crow b { color: #efe6d6; font-weight: 700; }
.sldr__lk { padding: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.sldr__lkcs { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.sldr__lkcs.tx { color: #ff6e3c; }
.sldr__lkcs i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: #8a8174; margin-left: 6px; }
.sldr__lkgrid { font-size: 11px; color: var(--sl); }
.sldr__kv { display: flex; justify-content: space-between; font-size: 12px; color: #8a8174; }
.sldr__kv b { color: #efe6d6; font-weight: 700; }
.sldr .sldr__open {
  all: unset; cursor: pointer; margin-top: 6px; padding: 9px 12px; border-radius: 8px; border: 1px solid #f5c542; color: #f5c542; text-align: center;
  font: 800 13px var(--font-display); letter-spacing: 0.14em; background: none !important;
}

.sldr__bottom {
  flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 18px;
  border-top: 1px solid rgba(var(--sl-rgb), 0.18); background: #05080a;
}
.sldr__group { display: flex; align-items: center; gap: 8px; }
.sldr__seg { display: flex; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 4px; overflow: hidden; }
.sldr .sldr__seg button {
  all: unset; cursor: pointer; padding: 6px 10px; font-size: 11px; letter-spacing: 0.14em; color: #8a8174; background: none !important;
}
.sldr .sldr__seg button + button { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.sldr .sldr__seg button.on { background: var(--sl) !important; color: #040308; }
.sldr__meshgrp .sldr__lbl { color: var(--sl); }
.sldr .sldr__meshgrp button[data-tog="drops"].on { background: #f5c542 !important; }
.sldr__fine { margin: 0 0 0 auto; font-size: 10px; letter-spacing: 0.06em; color: #8a8174; }

/* the way in, on the command desk */
body.sld .sld-btn[data-k="r"] { margin-left: auto; }
body.sld .sld-btn[data-k="m"] { margin-left: 0; }
body.sld .sld-btn[data-k="n"] { margin-left: 0; }

/* header fit: nothing wraps, the net picker stays its size; the readout sits above the scope */
.sldr__top { overflow: hidden; white-space: nowrap; }
.sldr__net { width: 170px; flex: none; }
.sldr__follow, .sldr__local, .sldr__utcl { white-space: nowrap; flex: none; }
.sldr__word { flex: none; }
.sldr__cv { z-index: 0; }
.sldr__mesh { z-index: 1; }
.sldr__hud, .sldr__note { z-index: 3; }
@media (max-width: 1360px) { .sldr__follow { display: none; } }