/* Radio Greensboro — site styles. Sections: tokens, shell, player bar, about, map, scanner, advanced. */
:root {
  --bg: #0f1216; --panel: #161b21; --panel2: #1c232b; --line: #2a333d; --text: #dde3ea; --muted: #8794a3;
  --accent: #4ea1ff; --priority: #ff4d4d; --fire: #ff9f43; --ems: #f2c94c; --police: #6aa8ff; --traffic: #b58cff;
  --air: #5eead4; --other: #8794a3; --ok: #4cc38a; --bad: #ff5d5d;
  --hdr: 104px;   /* the logo is 88px so its "RADIO GREENSBORO" stays readable */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
button, input, select { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.c-police, .f-police { --c: var(--police); } .c-fire, .f-fire { --c: var(--fire); } .c-ems, .f-ems { --c: var(--ems); }
.c-priority { --c: var(--priority); } .c-traffic { --c: var(--traffic); } .c-other, .f-other { --c: var(--other); }
.f-police, .f-fire, .f-ems, .f-other { color: var(--c); }

/* ---------------------------------------------------------------- shell */
header.site { display: flex; align-items: center; gap: 18px; padding: 8px 16px; background: #0b0e12; border-bottom: 1px solid var(--line); min-height: var(--hdr); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); min-width: 0; }
.brand img.logo { width: 88px; height: 88px; flex: none; border-radius: 50%; }
.brand b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.brand small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; }
nav.views { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
nav.views a { text-decoration: none; color: var(--muted); padding: 10px 16px; border-radius: 9px; font-weight: 600; font-size: 15.5px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
nav.views .ni { font-style: normal; font-size: 20px; line-height: 1; }
nav.views .ni img { width: 1.15em; height: 1.15em; display: block; }   /* sized like the emoji icons beside it */
nav.views a:hover { color: var(--text); }
nav.views a.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.toplinks { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
nav.links { display: flex; gap: 14px; }
.online { font-size: 12.5px; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.online[hidden] { display: none; }
.online b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 6px #4cc38a; }
.daycost { font-size: 11.5px; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 5px; }   /* a touch under Users online */
.daycost[hidden] { display: none; }
.daycost b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.daycost em { font-style: normal; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.daycost em.up { color: #ef4444; } .daycost em.down { color: #22c55e; }   /* spending more is the bad direction */ .daycost em.flat { color: var(--muted); font-size: 9px; }
nav.links a { color: var(--muted); text-decoration: none; font-size: 15px; white-space: nowrap; }
nav.links a:hover, nav.links a.on { color: var(--text); }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- player bar */
.playerbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1000; }
.listen { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; font-weight: 700;
  background: #1f6f45; border-color: #2c8c5a; color: #fff; }
.listen:hover { border-color: #5fd69a; }
.listen.on { background: #3a2226; border-color: var(--bad); }
.listen .ic { width: 14px; text-align: center; }
.svc { display: flex; gap: 6px; flex-wrap: wrap; }
.svc button { border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; }
.svc button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
.s-police { --c: var(--police); } .s-fire { --c: var(--fire); } .s-ems { --c: var(--ems); } .s-air { --c: var(--air); } .s-all { --c: var(--ok); }
.svc button.on { background: #22303d; border-color: var(--c); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 4px 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); }
.chip button { padding: 0 6px; border: 0; background: transparent; font-size: 12px; }
.chip.zone { border-color: var(--ok); }
.where { position: relative; }
.where-btn { border-radius: 999px; white-space: nowrap; }
.where-btn.on { border-color: var(--ok); background: #183326; color: #d7f5e5; }
.where-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 2000; width: 350px; padding: 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.wm-h { font-weight: 700; margin: 2px 4px 8px; }
.where-menu [data-where] { display: block; width: 100%; text-align: left; margin-bottom: 6px; padding: 8px 10px; border-radius: 8px; }
.where-menu [data-where] small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.where-menu [data-where][aria-checked="true"] { border-color: var(--ok); background: #183326; }
.zonepin { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); cursor: move; }
.zonepin.mini { font-size: 18px; cursor: default; }
.wm-note { color: var(--muted); font-size: 12px; margin: 4px 4px 2px; }
.chip.hold { border-color: var(--ems); color: var(--ems); }
.chip.lo { border-color: var(--bad); color: var(--bad); padding-right: 9px; }
.np { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.np-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.np-text .tr { color: var(--text); }
.cnote { opacity: .72; }   /* a 10-code's meaning after it in a transcript */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; opacity: .25; }
.eq i { width: 3px; height: 4px; background: var(--ok); border-radius: 1px; }
.playerbar.live .eq { opacity: .6; }
.playerbar.live.talking .eq { opacity: 1; }
.playerbar.live.talking .eq i { animation: eq .9s ease-in-out infinite; }
.playerbar.live.talking .eq i:nth-child(2) { animation-delay: .15s; } .playerbar.live.talking .eq i:nth-child(3) { animation-delay: .3s; } .playerbar.live.talking .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.vol { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.vol input { width: 90px; padding: 0; accent-color: var(--accent); border: 0; background: none; }
@media (prefers-reduced-motion: reduce) { .playerbar.live.talking .eq i { animation: none; height: 10px; } }

/* ---------------------------------------------------------------- red ticker: priority incidents + squawks */
.ticker { background: #3a0f12; color: #ffd9dc; border-bottom: 1px solid #7a1d24; font-size: 13px; line-height: 1.3; overflow: hidden; white-space: nowrap;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* phones' font boosting blew up the long summary text */
.ticker .track { display: inline-flex; align-items: center; padding: 6px 16px; }
.ticker.scroll .track { padding-left: 0; animation: tick var(--dur, 30s) linear infinite; }
.ticker.scroll:hover .track, .ticker.scroll:focus-within .track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } .ticker.scroll .track { animation: none; } }
.ticker .ti { color: #ffd9dc; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; }
.ticker .ti:hover b { text-decoration: underline; }
.ticker .sq { background: var(--priority); color: #fff; font-weight: 800; border-radius: 4px; padding: 1px 7px; letter-spacing: .02em; font-size: 12px; }
.ticker b { color: #fff; font-weight: 600; font-size: 13px; }
.ticker .ln { color: #f3b6bb; font-size: 12px; }
.ticker .sm { color: #f6cfd3; font-size: 12px; }
.ticker .dot { color: #a8434b; padding: 0 14px; }
.watchpin { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.watchpin .g { font-size: 18px; line-height: 1; color: var(--c); filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 4px var(--c)); }
.watchpin .t { font-size: 11px; font-weight: 600; color: #fff; background: rgba(11, 14, 18, .85); border: 1px solid var(--c);
  border-radius: 4px; padding: 0 5px; }
.watchpin.mini .g { font-size: 13px; }
.airpin { font-size: 22px; line-height: 1; color: var(--priority); text-shadow: 0 0 6px #000, 0 0 2px #000; }

/* ---------------------------------------------------------------- activity strip */
.activity { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 4px 16px; font-size: 12px; color: var(--muted);
  background: #12161b; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; min-height: 26px; }
.act-h span { color: var(--text); }
.act-counts { display: contents; }
.act-win { margin-left: auto; display: none; align-items: center; gap: 6px; white-space: nowrap; }
body[data-view="map"] .act-win, body[data-view="scanner"] .act-win { display: inline-flex; }
.act-heat { display: none; align-items: center; gap: 6px; white-space: nowrap; margin: 0 auto; }   /* centred between counts and window */
body[data-view="map"] .act-heat { display: inline-flex; }
body[data-view="map"] .act-heat + .act-win { margin-left: 0; }
.act-heat select { font-size: 12px; padding: 1px 6px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--line); }
.pager button { min-width: 30px; padding: 3px 7px; font-size: 12px; }
.pager button.on { background: var(--accent); color: #0b0e12; border-color: var(--accent); font-weight: 700; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .muted { margin-left: auto; font-size: 12px; }
/* Heatmap on: incident pins fade almost away (still clickable); aircraft stay. */
.heat-on .leaflet-marker-pane .pin, .heat-on .leaflet-marker-pane .scope-ping { opacity: .1; transition: opacity .2s; }
.heat-on .leaflet-marker-pane .leaflet-marker-icon:hover .pin { opacity: .8; }
.act-win select { font-size: 12px; padding: 1px 6px; }
.act-g { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text);
  font: inherit; background: none; border: 1px solid transparent; border-radius: 999px; padding: 1px 8px; margin: 0 -4px; }
/* Only the Map filters by service: there the counts are buttons, the chosen one outlined. */
body:not([data-view="map"]) .act-g { pointer-events: none; padding: 0; margin: 0; border: 0; }   /* plain counts */
body[data-view="map"] .act-g { cursor: pointer; }
body[data-view="map"] .act-g:hover { border-color: var(--line); }
body[data-view="map"] .act-g.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.act-g b { font-weight: 600; color: var(--muted); margin-right: 2px; }
.act-g i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.act-g em { font-style: normal; font-size: 11px; font-weight: 600; margin-left: 1px; }
.act-g em.up { color: #22c55e; } .act-g em.down { color: #ef4444; } .act-g em.flat { color: var(--muted); font-size: 9px; }
.act-all { --c: var(--ok); } .act-police { --c: var(--police); } .act-fire { --c: var(--fire); } .act-ems { --c: var(--ems); }
@media (max-width: 760px) { .activity { padding: 4px 10px; gap: 2px 12px; }  }

/* ---------------------------------------------------------------- about */
.view[data-view="about"] { overflow-y: auto; }
.about { max-width: 760px; margin: 0 auto; padding: 28px 18px 60px; }
.about h1 { font-size: 30px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -.01em; }
.about h2 { font-size: 17px; margin: 26px 0 8px; }
.about .big { font-size: 17px; color: #c7d0da; }
.about li { margin: 6px 0; }
.about h3 { font-size: 14.5px; margin: 16px 0 4px; color: var(--text); }
.about .toc { font-size: 13px; color: var(--muted); margin: 14px 0 4px; line-height: 1.9; }
.about .steps { padding-left: 22px; }
.about .steps > li { margin: 14px 0; }
.about .note { font-size: 13.5px; color: var(--muted); }
.about .shot { margin: 10px 0 4px; }
.about .shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #0b0f14; }
.about .shot.phone img { max-width: 390px; }
.about span.up, .costbox em.up { color: #ef4444; } .about span.down, .costbox em.down { color: #22c55e; }
.costbox { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0 14px; background: color-mix(in srgb, var(--line) 18%, transparent); }
.costbox .crow { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5em; align-items: baseline; gap: 10px; font-size: 15px; margin: 2px 0; max-width: 460px; }
.costbox .crow span { color: var(--muted); }
.costbox .crow b { font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.costbox em { font-style: normal; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.costbox em.flat { color: var(--muted); }
.costbox .cparts { margin: 10px 0 6px; border-collapse: collapse; font-size: 13.5px; }
.costbox .cparts td { padding: 2px 18px 2px 0; } .costbox .cparts td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.costbox p { font-size: 12.5px; margin: 6px 0 0; }
.contact { display: flex; gap: 10px; flex-wrap: wrap; }
.contact a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel2);
  border: 1px solid var(--line); color: var(--text); transition: background .15s, color .15s, border-color .15s; }
.contact a:hover, .contact a:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.contact svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------- map view */
.view[data-view="map"] { position: relative; }
.mapwrap { position: absolute; inset: 0; }
#bigmap { position: absolute; inset: 0; background: #11161b; }
.mpanel { position: absolute; z-index: 500; background: rgba(22, 27, 33, .95); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.pickbar { top: 12px; left: 50%; transform: translateX(-50%); padding: 10px 14px; display: flex; gap: 12px; align-items: center; border-color: var(--ok); z-index: 1100; }
.evpanel { top: 12px; right: 12px; bottom: 12px; width: 350px; display: flex; flex-direction: column; overflow: hidden; }
.drawer-tab, .drawer-x { display: none; }
.evpanel .head { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.evpanel .head h2 { margin: 0; font-size: 14px; flex: 1; }
.evpanel .head select { padding: 3px 6px; font-size: 12px; }
.evlist { overflow-y: auto; flex: 1; }
.evlistwrap, .evdetail { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.dhead button { padding: 3px 9px; font-size: 13px; }
.dbody { display: flex; flex-direction: column; min-height: 0; flex: 1; border-top: 3px solid var(--c); }
.dtitle { font-weight: 700; font-size: 15px; padding: 10px 12px 0; }
.dbody .a { color: var(--accent); font-size: 13px; padding: 2px 12px 0; }
.dbody .s { font-size: 13px; color: #c3ccd6; padding: 6px 12px 0; line-height: 1.45; }
.dctl { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dctl button { padding: 5px 10px; }
.dctl button.on { border-color: var(--bad); }
.dctl .muted { margin-left: auto; font-size: 12px; }
.dcalls { overflow-y: auto; flex: 1; }
.dc { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.dc:hover { background: var(--panel2); }
.dc.cur { background: #1b2530; }
.dc.playing { background: #17261c; box-shadow: inset 3px 0 0 var(--ok); }
.dc > button { width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 11px; }
.dc .dm { font-size: 11.5px; color: var(--muted); }
.dc .dt { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.dc .dt.none { color: var(--muted); font-style: italic; }
.mev { padding: 10px 12px 10px 15px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.mev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.mev:hover, .mev.sel { background: var(--panel2); }
.mev.inzone { box-shadow: inset 0 0 0 1px rgba(76, 195, 138, .55); }
.mev .t { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.mev .t span { font-weight: 400; color: var(--muted); font-size: 12px; white-space: nowrap; }
.mev .a { color: var(--accent); font-size: 13px; }
.mev .s { font-size: 12.5px; color: #b9c3ce; margin-top: 3px; }
.mev .z { font-size: 11px; color: var(--ok); margin-top: 2px; }
.mev.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #20352a; } to { background: transparent; } }
.legend { left: 64px; bottom: 12px; padding: 7px 10px; font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--c); }
.legend i.rough-i { background: transparent; border: 1.5px dashed #fff; width: 11px; height: 11px; }
.pin { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--c) 85%, transparent); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.pin.hot { animation: ping 1.4s ease-out infinite; }
.pin.approx { background: color-mix(in srgb, var(--c) 40%, transparent); border: 2px dashed rgba(255, 255, 255, .8); }
.rough { opacity: .85; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--c); } 100% { box-shadow: 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) { .evpanel { transition: none; } }
@media (prefers-reduced-motion: reduce) { .pin.hot { animation: none; box-shadow: 0 0 0 4px var(--c); } .mev.flash { animation: none; } }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 10px 12px; min-width: 240px; max-width: 300px; }
.leaflet-popup-content h3 { margin: 0 0 4px; font-size: 14px; }
.leaflet-popup-content .s { margin: 6px 0; font-size: 13px; }
.leaflet-popup-content .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-control-layers, .leaflet-bar a { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }
.crosshair, .crosshair .leaflet-interactive { cursor: crosshair !important; }

/* ---------------------------------------------------------------- scanner view */
.view[data-view="scanner"] { overflow-y: auto; background: radial-gradient(1200px 600px at 50% -200px, #1d252d, var(--bg)); }
.scan { max-width: 1180px; margin: 0 auto; padding: 18px 16px 50px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.radio { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px;
  background: linear-gradient(180deg, #252b31, #1a1e23); border: 1px solid #39424c; border-radius: 20px; padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.radio .face { min-width: 0; }
.lcd { --lcd: #9dffb0; background: #0b1a10; border-radius: 10px; padding: 12px 16px; border: 2px solid #050a06; box-shadow: inset 0 0 30px rgba(0,0,0,.8);
  font-family: "Share Tech Mono", ui-monospace, monospace; color: var(--lcd); text-shadow: 0 0 6px rgba(157,255,176,.45); min-height: 194px; position: relative; overflow: hidden; }
.lcd.pri { --lcd: #ffb4a8; background: #1f0d0b; }
.lcd .top { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.lcd .ind { padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; opacity: .25; }
.lcd .ind.on { opacity: 1; }
.lcd .clock { margin-left: auto; opacity: .85; }
.lcd .qstat { position: absolute; top: 31px; right: 16px; text-align: right; font-size: 11px; line-height: 1.35; opacity: .7; }
.lcd .ch { padding-right: 96px; }   /* clear of Delay / Queued */
.lcd .ch { font-size: 30px; line-height: 1.15; margin: 10px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd .sub { font-size: 13px; opacity: .8; }
.lcd .tx { font-size: 18px; line-height: 1.35; margin-top: 8px; min-height: 48px; color: #d6ffe0; overflow-wrap: anywhere; }
.lcd.pri .tx { color: #ffe1dc; }
.lcd .ev { font-size: 13px; margin-top: 6px; opacity: .85; }
.lcd.idle .ch { opacity: .45; }
.sig { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.sig i { width: 4px; background: var(--lcd); opacity: .2; }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 7px; } .sig i:nth-child(3) { height: 10px; } .sig i:nth-child(4) { height: 14px; }
.lcd.rx .sig i { opacity: 1; }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.fkeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.key { padding: 13px 6px 10px; border-radius: 12px; border: 1px solid #3a434d; background: linear-gradient(180deg, #2d343b, #22272d);
  text-align: center; font-weight: 800; font-size: 14px; letter-spacing: .06em; box-shadow: 0 3px 0 #0d1013, inset 0 1px 0 rgba(255,255,255,.06);
  display: flex; flex-direction: column; align-items: center; gap: 5px; color: #e9eef3; }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d1013; }
.key .led { width: 10px; height: 10px; border-radius: 50%; background: #2b2f33; box-shadow: inset 0 1px 2px #000; }
.key.on .led { background: var(--c); box-shadow: 0 0 10px var(--c); }
.key.on { border-color: var(--c); }
.key small { font-weight: 500; color: var(--muted); font-size: 10.5px; letter-spacing: 0; }
.key.fk { font-size: 12.5px; padding: 9px 6px; --c: var(--ems); }
.key.fk.lo { --c: var(--bad); } .key.fk.pri { --c: var(--priority); } .key.fk.big { --c: var(--ok); }
.knobs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The buttons on the left and the activity graph on the right end on the same line: both columns stretch to the
   radio's full height, with the keys and the graph pushed to the bottom. */
.radio .face { display: flex; flex-direction: column; }
.radio .face .keys { margin-top: auto; padding-top: 14px; }
.knobs .activity-meter { margin-top: auto; }
.speaker { flex: 1; min-height: 120px; border-radius: 14px; background: radial-gradient(circle, #15191d 1.4px, transparent 1.6px) 0 0 / 9px 9px, #1d2227;
  border: 1px solid #333b44; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.speaker.scope { display: block; padding: 0; flex: none; height: 265px; background: #0b0f12;   /* one size, idle or zoomed in */
  box-shadow: inset 0 0 0 3px #15191d, inset 0 0 0 4px #333b44; }
.speaker.scope #s-map { position: absolute; inset: 4px; border-radius: 11px; background: #0b0f12; }
.speaker.scope::after { content: ""; position: absolute; inset: 4px; border-radius: 11px; pointer-events: none; z-index: 450;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .85); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); }
.speaker.scope .brandplate { position: absolute; top: 10px; left: 10px; z-index: 460; font-size: 10px; padding: 2px 7px; opacity: .85; }
.scope-win { position: absolute; top: 10px; right: 12px; z-index: 460; font-family: "Share Tech Mono", monospace; font-size: 10px;
  letter-spacing: .15em; color: #8b96a3; }
.scope-tag { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 460; font-family: "Share Tech Mono", monospace;
  font-size: 12px; color: #9ff0b8; text-shadow: 0 0 6px rgba(76, 195, 138, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-ping { width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: ping 1.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .scope-ping { animation: none; box-shadow: 0 0 0 4px var(--c); } }
.speaker .brandplate { font-family: "Share Tech Mono", monospace; letter-spacing: .3em; color: #8b96a3; font-size: 12px; background: #1d2227; padding: 4px 10px; border-radius: 4px; border: 1px solid #333b44; }
.meter { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 40px; align-items: end; }
.meter i { background: #2b3a31; border-radius: 1px; height: 10%; transition: height .4s; }
.meter i.hi { background: var(--ok); }
.knobrow { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); font-family: "Share Tech Mono", monospace; }
.knobrow input { flex: 1; padding: 0; accent-color: #9dffb0; border: 0; background: none; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; }
.box h2 { margin: 0; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.box h2 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; }
.bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 10px; max-height: 470px; overflow-y: auto; }
.bankgrp { grid-column: 1 / -1; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 6px 2px 0; }
.ch-cell { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 7px 34px 6px 22px; background: var(--panel2); cursor: pointer; text-align: left; min-width: 0; }
.ch-cell .led { position: absolute; left: 8px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #2b2f33; }
.ch-cell.act .led { background: var(--c); box-shadow: 0 0 8px var(--c); }
.ch-cell .nm { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-cell .ct { font-size: 11px; color: var(--muted); font-family: "Share Tech Mono", monospace; }
.ch-cell.held { border-color: var(--ems); box-shadow: inset 0 0 0 1px var(--ems); }
.ch-cell.locked { opacity: .45; text-decoration: line-through; }
.ch-cell .lo { position: absolute; right: 4px; top: 4px; font-size: 10px; padding: 0 4px; border-radius: 3px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.ch-cell .lo:hover { color: var(--bad); border-color: var(--bad); }
.ch-cell.locked .lo { color: var(--bad); border-color: var(--bad); opacity: 1; }
.log { max-height: 520px; overflow-y: auto; }
.lg { display: grid; grid-template-columns: 30px 70px 1fr; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); align-items: start; }
.lg.playing { background: #17261c; }
.lg .pl { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 11px; }
.lg .tm { font-family: "Share Tech Mono", monospace; font-size: 12px; color: var(--muted); padding-top: 4px; }
.lg .tg { font-size: 12px; color: var(--c); font-weight: 600; }
.lg .tx { font-size: 13px; overflow-wrap: anywhere; }
.lg .tx.none { color: var(--muted); font-style: italic; }
.inc { padding: 9px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--c); cursor: pointer; }
.inc:hover { background: var(--panel2); }
.inc .t { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.inc .t span { color: var(--muted); font-weight: 400; font-size: 12px; white-space: nowrap; }
.inc .a { color: var(--accent); font-size: 12px; }
.inc .s { color: #b9c3ce; font-size: 12.5px; margin-top: 2px; }
.empty { padding: 18px; color: var(--muted); text-align: center; font-size: 13px; }
.scan .side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Desktop: the channel bank fills its column down to where the call log and incidents beside it end (its own
   scrollbar inside), instead of stopping at a fixed height. The bank is taken out of the flow so its length never
   sets the row's height: the side column does. */
@media (min-width: 981px) {
  .scan .bankbox { align-self: stretch; display: flex; flex-direction: column; min-height: 420px; }
  .scan .bankbox .bankwrap { position: relative; flex: 1; }
  .scan .bankbox .bank { position: absolute; inset: 0; max-height: none; align-content: start; }
}

/* ---------------------------------------------------------------- advanced view */
.view[data-view="advanced"] { display: grid; grid-template-rows: auto auto 1fr; font-size: 13px; min-height: 0; height: calc(100vh - var(--hdr) - 80px); }
/* Too small for the board (phones either way up, an iPad held upright): a note instead, unless asked for anyway.
   900 x 560 is advanced.js's FIT_W x FIT_H. */
.adv-small { display: none; max-width: 520px; margin: 32px auto; padding: 18px 20px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; font-family: Inter, system-ui, sans-serif; line-height: 1.5; }
.adv-small h2 { margin: 0 0 8px; font-size: 17px; }
.adv-small p { margin: 8px 0; color: var(--muted); } .adv-small b { color: var(--text); }
@media (max-width: 899px), (max-height: 559px) {
  .view[data-view="advanced"]:not(.adv-force) > :not(.adv-small) { display: none !important; }
  .view[data-view="advanced"]:not(.adv-force) > .adv-small { display: block; }
}
.adv-mono, .view[data-view="advanced"] { font-family: "JetBrains Mono", ui-monospace, monospace; }
.adv-stat { display: flex; gap: 14px; flex-wrap: wrap; padding: 5px 12px; background: #0b0e12; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.adv-stat b { color: var(--text); font-weight: 600; } .adv-stat .ok { color: var(--ok); } .adv-stat .bad { color: var(--bad); }
.adv-tools { display: flex; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.adv-tools label { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); font-size: 12px; }
.adv-tools input, .adv-tools select, .adv-tools button { padding: 3px 8px; font-size: 12px; }
.adv-tools input[type=search] { width: 200px; }
.adv-tools .find { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.adv-tools .find input[type=search] { border-color: var(--accent); }
.adv-tools input[type=datetime-local] { color-scheme: dark; }
.seg button { border-radius: 0; margin-left: -1px; } .seg button:first-child { border-radius: 5px 0 0 5px; } .seg button:last-child { border-radius: 0 5px 5px 0; }
.seg button.on { background: #22303d; border-color: var(--accent); position: relative; }
.when.on input { border-color: var(--ems); } .when.on .live { border-color: var(--ok); color: var(--ok); }
.kbd { margin-left: auto; color: var(--muted); font-size: 11px; }
.kbd kbd { border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; background: var(--panel2); font-size: 11px; }
.adv-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 40%); min-height: 0; }
.adv-tbl { overflow: auto; border-right: 1px solid var(--line); }
.adv-tbl table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.adv-tbl th { position: sticky; top: 0; background: var(--panel); text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; z-index: 1;
  text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; }
.adv-tbl th.sorted::after { content: " ▾"; } .adv-tbl th.sorted.asc::after { content: " ▴"; }
.adv-tbl td { padding: 5px 8px 2px; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-tbl tbody { cursor: pointer; border-bottom: 1px solid #222a33; }
.adv-tbl tbody:hover td { background: #141a20; }
.adv-tbl tbody.sel td { background: #1a2633; }
.adv-tbl tbody.hot td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.adv-tbl td.ty { border-left: 3px solid var(--c); font-weight: 600; white-space: normal; }
.adv-tbl td.addr { color: var(--accent); }
.adv-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.adv-tbl tr.sum td { white-space: normal; color: #b9c3ce; font-family: Inter, system-ui, sans-serif; font-size: 13px; line-height: 1.45; padding: 0 8px 8px; }
.adv-tbl tr.sum td.sp { border-left: 3px solid var(--c); }
.age-0 { color: var(--ok); } .age-1 { color: var(--text); } .age-2 { color: var(--muted); }
.alert { color: var(--priority); }
.adv-side { display: grid; grid-template-rows: 210px 1fr; min-height: 0; }
#minimap { background: #11161b; border-bottom: 1px solid var(--line); }
.adv-det { overflow: auto; padding: 10px 12px; }
.adv-det h2 { margin: 0; font-size: 16px; color: var(--c); }
.adv-det .meta { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.adv-det .sumbox { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; margin: 8px 0; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; }
.adv-det .chips { margin: 6px 0; }
.adv-det .chip { font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.adv-det .chip.u { border-color: #345; color: #9cc8ff; }
.cl { display: grid; grid-template-columns: 26px 66px 1fr auto; gap: 6px; padding: 5px 0; border-bottom: 1px solid #1f262e; align-items: start; }
.cl.playing { background: #17261c; }
.cl .pl { width: 24px; height: 24px; padding: 0; font-size: 10px; border-radius: 4px; }
.cl .tm { color: var(--muted); font-size: 11px; padding-top: 4px; }
.cl .tx { overflow-wrap: anywhere; }
.cl .why { font-size: 10px; color: var(--muted); }
.cl .act button { font-size: 10px; padding: 1px 5px; opacity: .6; }
.cl .act button:hover { opacity: 1; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 980px) {
  .radio { grid-template-columns: 1fr; } .speaker.scope { height: 190px; }
  .scan { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  header.site { flex-wrap: wrap; gap: 8px 12px; }
  nav.views { order: 3; width: 100%; justify-content: space-between; }
  nav.views a { flex: 1; text-align: center; padding: 6px 4px; }
  .brand small { font-size: 11px; }
  .adv-main { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; }
  .view[data-view="advanced"] { height: auto; }
  .adv-side { grid-template-rows: 180px auto; }
  .kbd { display: none; }
}
@media (max-width: 760px) {
  /* incidents as a drawer from the right edge (clipped, so the closed drawer doesn't widen the page) */
  .view[data-view="map"], .mapwrap { overflow: hidden; overflow: clip; }   /* clip: not even scrollable from code */
  .evpanel { top: 8px; bottom: 8px; right: 0; left: auto; width: min(88vw, 380px); height: auto; border-radius: 12px 0 0 12px;
    transform: translateX(105%); transition: transform .25s ease; visibility: hidden; }
  .evpanel.open { transform: none; visibility: visible; }
  .drawer-tab { display: block; top: 60px; right: 0; border-radius: 10px 0 0 10px; padding: 9px 10px 9px 12px; font-weight: 600;
    font-size: 13px; color: var(--text); border-right: 0; cursor: pointer; }
  .drawer-tab b { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--accent);
    color: #fff; font-size: 11px; text-align: center; }
  .drawer-tab[aria-expanded="true"] { display: none; }
  .drawer-x { display: block; position: absolute; top: 6px; right: 8px; z-index: 2; padding: 2px 8px; background: transparent; border: 0;
    font-size: 16px; color: var(--muted); }
  .evpanel .head, .evpanel .dhead { padding-right: 40px; }
  .pickbar { left: 8px; right: 8px; transform: none; font-size: 13px; }
  .legend { display: none; }
  .view[data-view="map"] { min-height: calc(100vh - 170px); }
  .keys { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .fkeys { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .key { padding: 10px 2px 8px; font-size: 12px; letter-spacing: .02em; }
  .key small { display: none; }
  .key.fk { font-size: 11px; padding: 8px 2px; }
  .lcd { padding: 10px 12px; min-height: 217px; }
  .lcd .top { gap: 6px; font-size: 12px; }
  .lcd #i-zone, .lcd #i-lo { display: none; }
  .lcd .ch { font-size: 22px; padding-right: 80px; }
  .lcd .qstat { top: 28px; right: 12px; font-size: 10px; }
  .lcd .tx { font-size: 16px; }
  .scan { padding: 12px 10px 40px; }
  .radio { padding: 12px; border-radius: 16px; }
  .playerbar { padding: 7px 10px; gap: 6px 8px; }
  .listen { padding: 6px 12px; }
  .svc button { padding: 3px 9px; }
  .np { flex-basis: 100%; order: 5; }
  .vol { display: none; }
  .view[data-view="map"] .leaflet-bottom.leaflet-left { display: none; }
  nav.links { gap: 10px; }
}
@media (max-width: 600px) {
  .where-menu { position: fixed; left: 8px; right: 8px; top: auto; width: auto; }
  nav.views a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; line-height: 1.2; padding: 7px 2px; min-width: 0; }
  /* every icon in the same box, so the labels line up whether the icon is an emoji or an image */
  nav.views .ni { font-size: 21px; height: 24px; width: 24px; line-height: 24px; display: flex; align-items: center; justify-content: center; }
  nav.views .ni img { width: 22px; height: 22px; }
  nav.views a span { white-space: nowrap; line-height: 14px; }
}
@media (max-width: 860px) { .brand img.logo { width: 60px; height: 60px; } }
@media (max-width: 480px) { .brand { gap: 8px; } .brand img.logo { width: 54px; height: 54px; } .brand b { font-size: 15px; }
  nav.links { gap: 8px; } nav.links a { font-size: 14px; } }
@media (max-width: 480px) { .brand small { display: none; } .svc button { padding: 4px 9px; } }

/* ---------------------------------------------------------------- admin bits + toast */
#rg-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 3000;
  background: #1f2a35; border: 1px solid var(--accent); color: var(--text); padding: 8px 14px; border-radius: 8px; transition: .2s; pointer-events: none; }
#rg-toast.on { opacity: 1; transform: translateX(-50%); }
.adv-pick { padding: 6px 12px; background: #3a3220; border-bottom: 1px solid var(--ems); color: #ffe7a3; font-size: 12px; }
.adv-pick button { margin-left: 8px; padding: 1px 8px; font-size: 12px; }
.adm-ev { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.adm-ev button { font-size: 11px; padding: 2px 8px; }
.cl .act { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }

.dfoot { margin-top: 10px; font-size: 11px; color: var(--muted); opacity: .7; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- call log + roster */
.lg-tools { position: sticky; top: 0; z-index: 5; }
.lg-tools input[type=search] { width: 260px; }
.lg-list { max-width: 1100px; margin: 0 auto; }
.lg-row { display: grid; grid-template-columns: 30px 96px 190px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #1f262e; align-items: start; }
.lg-row.playing { background: #17261c; }
.lg-row .pl { width: 28px; height: 28px; padding: 0; font-size: 11px; border-radius: 50%; }
.lg-row .pl:disabled { opacity: .3; cursor: default; }
.lg-when, .lg-ch { display: flex; flex-direction: column; font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 3px; min-width: 0; }
.lg-when small, .lg-ch small { color: var(--muted); font-size: 11px; }
.lg-ch b { color: var(--text); font-weight: 600; }
.lg-tg { display: flex; align-items: center; gap: 6px; color: var(--c); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-tg i, .ro-cs i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lg-tx { color: var(--text); overflow-wrap: anywhere; padding-top: 2px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.lg-inc { color: var(--accent); text-decoration: none; }
.lg-inc:hover { text-decoration: underline; }
.lg-more { text-align: center; padding: 16px 0 40px; }
.ro-wrap { max-width: 1100px; margin: 0 auto; }
.ro-about { margin: 10px 14px; font-size: 12px; }
.ro-tbl { overflow: auto; border-bottom: 1px solid var(--line); }   /* its own scroll box (roster.js fit): headings stay */
.ro-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.ro-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ro-tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
.ro-tbl td { padding: 6px 14px; border-bottom: 1px solid #1f262e; vertical-align: top; }
.ro-tbl .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.ro-tbl tr { color: var(--text); }
.ro-cs { font-weight: 700; white-space: nowrap; }
.ro-cs i { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.ro-tbl a { color: var(--accent); text-decoration: none; }
@media (max-width: 760px) {
  .lg-row { grid-template-columns: 30px 1fr; gap: 4px 10px; padding: 8px 10px; }
  .lg-when { flex-direction: row; gap: 8px; grid-column: 2; }
  .lg-ch { flex-direction: row; gap: 8px; grid-column: 2; padding-top: 0; }
  .lg-row .pl { grid-row: 1 / span 3; }
  .lg-tx { grid-column: 2; }
  .lg-tools input[type=search] { width: 100%; }
  .ro-tbl th:nth-child(2), .ro-tbl td:nth-child(2), .ro-tbl th:nth-child(3), .ro-tbl td:nth-child(3) { display: none; }
  .ro-tbl td, .ro-tbl th { padding: 6px 10px; }
}
@media (max-width: 760px) { .adv-tools .find { margin-left: 0; width: 100%; justify-content: flex-start; }
  .adv-tools .find input[type=search] { flex: 1 1 100%; width: 100%; } }
@media (max-width: 380px) { .online { font-size: 11px; } .daycost { font-size: 10px; } .brand img.logo { width: 46px; height: 46px; } .brand b { font-size: 14px; } nav.links { gap: 6px; } nav.links a { font-size: 12.5px; } }

/* advanced page: the AI summary thinks the incident type doesn't fit its calls */
.tflag { color: var(--ems); cursor: help; }
.tcheck { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--ems); font-size: 13px; }

/* Roster: a unit that signed off (10-42) and hasn't been heard since: its dot and the 10-42 note in red, the rest as usual */
.ro-off .ro-cs i { background: var(--priority) !important; }
.ro-42 { font-weight: 600; color: var(--priority); }

/* ---------------------------------------------------------------- place history (core.js RG.placeHistory) */
a.place-h { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
a.place-h:hover { text-decoration-style: solid; }
dialog.place-dlg { width: min(560px, calc(100vw - 32px)); max-height: min(78vh, 720px); padding: 0; display: none;
  flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55); font-family: Inter, system-ui, sans-serif; }
dialog.place-dlg[open] { display: flex; }
dialog.place-dlg::backdrop { background: rgba(5, 8, 12, .6); }
.ph-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
.ph-head b { font-size: 15px; } .ph-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ph-head button { padding: 2px 9px; }
.ph-list { overflow: auto; padding: 4px 0; }
.ph-ev { display: flex; gap: 12px; padding: 9px 14px; text-decoration: none; color: var(--text); border-left: 3px solid var(--c);
  border-bottom: 1px solid #222a33; }
.ph-ev:hover { background: var(--panel2); } .ph-ev.this { background: #1a2633; }
.ph-ev .d { flex: 0 0 62px; color: var(--muted); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.ph-ev .b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-ev .t { font-weight: 600; color: var(--c); } .ph-ev .t i { color: var(--muted); font-weight: 400; font-style: normal; }
.ph-ev .s { color: #b9c3ce; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.ph-ev .m { color: var(--muted); font-size: 11.5px; }

/* The business at an incident's address, its call/unit counts, and the incident tags in the map's incident view */
.biz { color: var(--muted); font-weight: 400; }
.mev .n, .inc .n { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.dbody .chips { padding: 8px 12px 0; gap: 4px; }
.dbody .chip { font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.dbody .chip.u { border-color: #345; color: #9cc8ff; }
.dbody .chip.alert { border-color: var(--bad); color: var(--bad); }
/* Address history: past 30 days only the summary is kept (no calls), so the row isn't a link */
.ph-ev.arch { cursor: default; opacity: .85; } .ph-ev.arch:hover { background: none; }

/* Map incident view: the tags pop up from the call count instead of filling the panel */
.dcount { position: relative; cursor: help; white-space: nowrap; }
.dcount .dtag-i { font-style: normal; margin-left: 4px; color: var(--accent); }
.dcount .dtags { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; width: min(320px, 80vw);
  max-height: 50vh; overflow-y: auto; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); white-space: normal; cursor: default; }
.dcount:hover .dtags, .dcount:focus-within .dtags, .dcount.open .dtags { display: block; }
.dcount .dtags .chips { padding: 0; gap: 4px; }
.dcount .dtags .chip { font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.dcount .dtags .chip.u { border-color: #345; color: #9cc8ff; }
.dcount .dtags .chip.alert { border-color: var(--bad); color: var(--bad); }