/* Digital console: cyan accent, decoder image as the hero, compact spectrum,
   and a digital-first control rail. Reuses console.css for shared components. */
body.digital {
  --amber: #5fe0d4;
  --amber-lo: #2b7d75;
}
body.digital .vfo { text-shadow: 0 0 14px rgba(95, 224, 212, 0.35); }
body.digital .mode-badge { color: #04110f; }
/* the connect overlay covers the whole display; keep it opaque so the stage
   content behind it doesn't bleed through */
body.digital .nodevice { background: #070f0e; }

/* ---- display column: readout, image stage, compact spectrum ---- */
.display { gap: 8px; position: relative; }
.stage {
  flex: 1 1 auto; min-height: 160px;
  display: flex; flex-direction: column;
  background: #070f0e; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--plate-edge);
  overflow: hidden;
}
.stage-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: #0c1413; border-bottom: 1px solid #16211f;
}
.stage-title { font: 600 15px var(--ui); letter-spacing: 0.04em; color: var(--amber); }
.stage-sub { font: 400 13px var(--num); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-head .grow { flex: 1; }
.stage-img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px; overflow: auto; background:
  repeating-linear-gradient(45deg, #060d0c 0 10px, #070f0e 10px 20px); }
.stage-img[hidden] { display: none; }
#decImg { max-width: 100%; max-height: 100%; image-rendering: pixelated; background: #05100f; box-shadow: 0 0 0 1px #16211f, 0 6px 24px rgba(0,0,0,0.5); }
.stage-empty { flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; }
.stage-empty[hidden] { display: none; }
.stage-empty p { max-width: 42ch; color: var(--legend); font-size: 15px; margin: 0; }
.stage-empty b { color: var(--amber); font-weight: 600; }
.stage-text { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; background: #060d0c; }
.stage-text[hidden] { display: none; }
#decText { margin: 0; font: 400 15px/1.5 var(--num); color: var(--amber); white-space: pre-wrap; word-break: break-word; letter-spacing: 0.02em; }

.glass-compact { flex: 0 0 34%; min-height: 110px; }

/* ---- decoder tiles ---- */
.panel.decoder .legend { color: var(--amber); }
.panel.decoder .legend::after { background: linear-gradient(90deg, #2b7d75, transparent); }
.dtiles { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.dtiles button { padding: 9px 4px; font-size: 15px; }
#decKeys button[aria-pressed="true"] { color: var(--glass); background: var(--amber); box-shadow: 0 0 10px rgba(95,224,212,0.3), inset 0 1px 0 #bff3ec; }

/* ---- digital services quick list ---- */
.diglist { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.diggroup { font: 600 12px var(--ui); letter-spacing: 0.06em; color: var(--legend); margin: 8px 0 2px; padding-bottom: 2px; border-bottom: 1px solid #1a2422; }
.diggroup:first-child { margin-top: 0; }
.digitem {
  text-align: left; border: 1px solid #0d1514; background: #0e1716; border-radius: 2px;
  padding: 5px 8px; cursor: pointer; color: #c2c9cc;
}
.digitem:hover { background: #142120; }
.digitem.on { border-color: var(--amber-lo); box-shadow: 0 0 0 1px var(--amber-lo); }
.digitem b { display: block; font: 600 14px var(--ui); letter-spacing: 0.02em; }
.digitem.on b { color: var(--amber); }
.digitem small { color: var(--legend); font: 400 11px var(--num); }

/* ---- trunking ---- */
.panel.trunk .legend { color: var(--amber); }
.panel.trunk .legend::after { background: linear-gradient(90deg, #2b7d75, transparent); }
.trunk-calls { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-height: 140px; overflow-y: auto; scrollbar-width: thin; }
.trunk-calls:empty::after { content: "No calls yet."; color: #5a6266; font-size: 13px; padding: 4px 2px; }
#trunkStat.live { color: var(--amber); }

/* ---- advanced drawer ---- */
details.adv { padding: 0; }
details.adv > summary { cursor: pointer; padding: 8px 10px; margin: 0; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: "▸"; float: right; color: var(--legend); }
details.adv[open] > summary::after { content: "▾"; }
.adv-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }

.devbadge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 2px; font: 500 10px var(--ui); letter-spacing: 0.06em; color: #04110f; background: var(--amber); vertical-align: 1px; }

/* Resources overlay styling is shared in console.css; digital just retints the
   glow to the cyan accent and uses a green-black panel edge. */
body.digital { --res-glow: 95, 224, 212; }
body.digital .btn-res { background: #0e1716; }
body.digital .btn-res:hover,
body.digital .res-close:hover { background: #142120; }
body.digital .res-sign { background: radial-gradient(120% 120% at 50% 0%, #0f1c1a 0%, #070f0e 70%); }

@media (max-width: 900px) {
  .glass-compact { flex: 0 0 180px; }
  .diglist { max-height: none; }
}