/* Halo Hub web UI. Dark theme only; colours follow docs/UI_COLOURS.md (Dark column):
   quality greens/yellows/reds ONLY for signal quality, amber + icon = needs action, cyan = selected / ON,
   REC has its own red, verdicts have their own green / red and always come with icon + word. */
:root {
  --bg: #05070B; --panel: #0B1018; --panel2: #111824; --line: #1E2A3A; --text: #E8EEF3; --dim: #8CA8BD;
  --cyan: #00E5FF; --amber: #FFB000; --rec: #FF1313;
  --q-good: #22EE7A; --q-fair: #FFE128; --q-poor: #FF3B57; --q-none: #FF2855; --q-na: #737F8C;
  --lq5: #22EE7A; --lq4: #A6EE3C; --lq3: #FFE128; --lq2: #FF7A2E; --lq1: #FF2855; --lq0: #737F8C;
  --v-ok: #3DDC84; --v-over: #FF6B6B; --neutral: #8CA8BD;
  --tap: 44px; --r: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; min-height: 100vh; }
h1 { font-size: 1.35rem; margin: 0; } h2 { font-size: 1.05rem; margin: 0 0 .6rem; } h3 { font-size: 1rem; margin: .8rem 0 .4rem; } h4 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
p { margin: .3rem 0; }
a { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--panel2); padding: .6rem 1rem; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }
.dim { color: var(--dim); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; } .nowrap { white-space: nowrap; } .center { text-align: center; }
.boot { padding: 2rem; color: var(--dim); }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.freq { color: var(--cyan); font-weight: 650; font-variant-numeric: tabular-nums; }

/* shell */
.top { display: flex; align-items: center; gap: 1rem; padding: .4rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-weight: 700; min-height: var(--tap); }
.nav { display: flex; gap: .25rem; flex: 1; }
.nav-link { display: flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: 0 .8rem; border-radius: 8px; color: var(--dim); text-decoration: none; }
.nav-link.on { color: var(--cyan); background: rgba(0,229,255,.08); }
.who { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { padding: 1rem; max-width: 1500px; margin: 0 auto; outline: none; }
@media (max-width: 760px) {
  .top { padding: .2rem .75rem; } .who { margin-left: auto; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel); border-top: 1px solid var(--line); justify-content: space-around; gap: 0; padding-bottom: env(safe-area-inset-bottom); }
  .nav-link { flex: 1; flex-direction: column; justify-content: center; gap: 0; padding: .3rem 0; font-size: .7rem; min-height: 52px; border-radius: 0; }
  .nav-link .ic { width: 1.5rem; height: 1.5rem; }
  body.chrome .main { padding: .75rem .75rem calc(70px + env(safe-area-inset-bottom)); }
}

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap); min-width: var(--tap); padding: 0 .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--dim); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: #0E2A33; border-color: #1B5C6B; color: var(--cyan); font-weight: 600; }
.btn.primary.on, .btn.seg.on { background: var(--cyan); border-color: var(--cyan); color: #00161A; }
.btn.danger { color: var(--v-over); border-color: #5a2a2e; }
.btn.small { padding: 0 .7rem; font-size: .9rem; }
.btn.big { min-height: 52px; font-size: 1.05rem; width: 100%; }
.btn.huge { min-height: 72px; font-size: 1.3rem; width: 100%; max-width: 22rem; }
.btn.icon-btn { padding: 0; }
.btn.rec { border-color: var(--rec); color: var(--rec); box-shadow: inset 0 0 0 1px var(--rec); font-weight: 700; }
input, select, textarea { font: inherit; color: var(--text); background: #070B12; border: 1px solid var(--line); border-radius: 8px; min-height: var(--tap); padding: 0 .7rem; max-width: 100%; }
select { -webkit-appearance: none; appearance: none; padding-right: 2rem; line-height: 1.2; height: var(--tap);
  background: #070B12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238CA8BD' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .7rem center / 12px 8px; }
input[type=checkbox] { min-height: 0; width: 22px; height: 22px; accent-color: var(--cyan); flex: none; padding: 0; }
input[type=range] { padding: 0; accent-color: var(--cyan); }
input.narrow { width: 6.5rem; } input.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .15em; text-transform: uppercase; font-size: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.lbl, legend { color: var(--dim); font-size: .8rem; }
.hint { color: var(--dim); font-size: .8rem; }
.form { display: flex; flex-direction: column; gap: .7rem; }
.inline-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.inline { display: inline-flex; align-items: center; gap: .4rem; }
.check { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); }
.check.rights { align-items: flex-start; background: var(--panel2); border: 1px solid var(--amber); border-radius: 8px; padding: .8rem; font-weight: 600; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0; padding: .3rem .8rem; min-width: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .row.end { justify-content: flex-end; margin-top: 1rem; }
.grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.status { min-height: 1.3em; color: var(--dim); } .status.err { color: var(--v-over); } .status.ok { color: var(--v-ok); } .status.big { font-size: 1.15rem; }
.note { color: var(--dim); border: 1px solid var(--line); border-radius: 6px; display: inline-block; padding: .1rem .5rem; }

/* cards, panels, lists */
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; min-width: 0; }
.panel { margin-bottom: 1rem; }
.plain { list-style: none; margin: 0; padding: 0; } .cards { display: grid; gap: .75rem; }
.rows { list-style: none; margin: 0 0 .6rem; padding: 0; }
.rowitem { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.rows > .rowitem:first-child, .card > .rowitem { border-top: 0; }
.manage { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .4rem; }
.tag { display: inline-block; border: 1px solid var(--line); color: var(--dim); border-radius: 5px; padding: 0 .4rem; font-size: .75rem; margin-left: .4rem; vertical-align: middle; }
.tag.on { color: var(--cyan); border-color: var(--cyan); }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.v-ok { color: var(--v-ok); } .v-warn { color: var(--amber); } .v-over { color: var(--v-over); } .v-na, .v-info { color: var(--neutral); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: .2rem; background: var(--panel2); border-radius: 999px; padding-left: .7rem; }
.chip-x { min-width: var(--tap); min-height: var(--tap); background: none; border: 0; color: var(--dim); font-size: 1.2rem; cursor: pointer; }
.copybox { background: var(--panel2); border: 1px solid var(--cyan); border-radius: 8px; padding: .7rem; margin: .6rem 0; }
.copybox input { flex: 1; min-width: 0; }
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin: .6rem 0; }
.table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--dim); font-weight: 600; } .table td.detail { overflow-wrap: anywhere; min-width: 12rem; }
.legal { margin: 0; padding: .8rem 1rem; border-left: 4px solid var(--amber); background: var(--panel2); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem .9rem; margin: 0; }
.kv dt { color: var(--dim); font-size: .78rem; } .kv dd { margin: 0; overflow-wrap: anywhere; }

/* dialog + toast */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; width: min(32rem, 100%); max-height: 90vh; overflow: auto; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: .6rem 1rem; max-width: calc(100vw - 2rem); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 200; }
.toast.show { opacity: 1; } .toast.err { border-color: var(--v-over); }

/* auth + public */
.auth { max-width: 28rem; margin: 0 auto; padding: 2rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.brand-big { display: flex; align-items: center; gap: .7rem; }
.public { max-width: 30rem; margin: 0 auto; padding: 2rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.public .card { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 1rem; }
.public .freq { font-size: 2rem; } .pub-title h1 { font-size: 1.5rem; }

/* signal meter: zone colour + word + number */
.signal { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.bar { flex: 1; height: 10px; background: #16202E; border-radius: 5px; overflow: hidden; min-width: 3rem; }
.bar-fill { display: block; height: 100%; border-radius: 5px; }
.bar-fill.q-good { background: var(--q-good); } .bar-fill.q-fair { background: var(--q-fair); } .bar-fill.q-poor { background: var(--q-poor); } .bar-fill.q-none { background: var(--q-none); } .bar-fill.q-na { background: var(--q-na); }
.pill { border-radius: 999px; padding: .05rem .55rem; font-size: .78rem; font-weight: 700; color: #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill.q-good { background: var(--q-good); } .pill.q-fair { background: var(--q-fair); } .pill.q-poor { background: var(--q-poor); } .pill.q-none { background: var(--q-none); } .pill.q-na { background: none; color: var(--q-na); border: 1px solid var(--line); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: .4rem; }
.lq-5 { background: var(--lq5); } .lq-4 { background: var(--lq4); } .lq-3 { background: var(--lq3); } .lq-2 { background: var(--lq2); } .lq-1 { background: var(--lq1); } .lq-0 { background: var(--lq0); }
.level { display: inline-block; width: 64px; height: 8px; background: #16202E; border-radius: 4px; overflow: hidden; flex: none; }
.level.wide { width: 100%; max-width: 22rem; height: 10px; }
.level-fill { display: block; height: 100%; width: 0; background: var(--text); transition: width .12s linear; }
.latency { color: var(--text); font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }

/* dashboard */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.btn[aria-pressed=true]:not(.listen):not(.rec):not(.seg) { color: var(--cyan); border-color: var(--cyan); }
.dash-body { display: grid; gap: 1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .75rem; align-content: start; min-width: 0; }
@media (min-width: 1100px) { .dash.with-map .dash-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .85rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.tile-body.clickable { cursor: pointer; }
.tile-head, .tile-station, .tile-foot, .tile-ctl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tile-name { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; min-width: 0; }
.tile .freq { font-size: 1.5rem; }
.np1 { font-weight: 600; overflow-wrap: anywhere; } .np2 { color: var(--dim); overflow-wrap: anywhere; min-height: 1.3em; }
.tile-foot { color: var(--dim); font-size: .85rem; margin: 0; }
.tile-ctl { justify-content: flex-start; } .tile-ctl a.btn { margin-left: auto; }
.map-panel { min-width: 0; }
.map-holder { height: min(56vh, 520px); min-height: 260px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #0b1018; }
.map-holder.small { height: 260px; min-height: 0; }
.map, .map-gl, .map-canvas { width: 100%; height: 100%; display: block; }
.site-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .9rem; }
.mk-legend { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #F2F4F6; margin-right: .4rem; vertical-align: -1px; }
.mk-legend.coarse { background: rgba(140,168,189,.35); border: 1px solid #F2F4F6; } .mk-legend.none { background: none; border: 1px dashed var(--dim); }
.mk { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: #F2F4F6; font: 600 12px system-ui, sans-serif; min-width: 44px; min-height: 44px; justify-content: center; }
.mk-dot { width: 14px; height: 14px; border-radius: 50%; background: #F2F4F6; border: 2px solid #05070B; flex: none; }
.mk.coarse .mk-dot { width: 8px; height: 8px; background: rgba(242,244,246,.55); border-width: 1px; }
.mk-label { background: rgba(5,7,11,.8); border-radius: 4px; padding: 1px 5px; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.maplibregl-ctrl-attrib { font-size: 11px; }

/* host detail */
.host-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.host-head.gone .host-audio { display: none; }
.host-title, .host-sub, .host-audio { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.host-title h1 { overflow-wrap: anywhere; min-width: 0; }
.host-sub .freq { font-size: 1.6rem; }
.volume { width: 7rem; }
.segs { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.host-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.host-grid .panel { margin: 0; }
@media (min-width: 900px) { .host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .host-grid > [data-testid=spectrum] { grid-column: 1 / -1; } }
@media (min-width: 1300px) { .host-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .host-grid > [data-testid=spectrum] { grid-column: 1 / 3; } }
.spectrum { width: 100%; height: 300px; display: block; border-radius: 6px; background: var(--bg); }
@media (max-width: 760px) { .spectrum { height: 220px; } }
.meter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.meter { background: var(--panel2); border-radius: 8px; padding: .5rem .7rem; }
.meter .lbl { display: block; } .meter .val { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.controls { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.stations { list-style: none; margin: 0; padding: 0; }
.station-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .45rem .5rem; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.station-row.sel { border-left-color: var(--cyan); background: rgba(0,229,255,.06); }
.station-row .freq { min-width: 5.2rem; } .st-name { flex: 1; min-width: 8rem; overflow-wrap: anywhere; } .st-actions { display: flex; gap: .4rem; margin-left: auto; }
.qcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .6rem; }
.qcard { background: var(--panel2); border-radius: 8px; padding: .6rem .7rem; min-width: 0; }
.qcard-head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .qcard h4 { margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); }
.qcard-val { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.alerts { list-style: none; margin: 0; padding: 0; }
.alert-row { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--line); } .alert-main { flex: 1; min-width: 0; overflow-wrap: anywhere; } .alert-title { font-weight: 600; }
.removed { border-color: var(--amber); }