/* Tiles matched to the iOS app (ConsoleTile.swift), 2026-10-18 */
:root{--law:#4D94FF;--fire:#FF4D40;--air:#40D980;--aviation:#5AC8FA;--gray:#8E8E93;--bg:#000;--s1:#0E1116;--s2:#161A20;--line:#262B33;--line2:#1A1E24;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
html,body{background:#000;font-family:var(--sys);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
header.top{background:rgba(0,0,0,.86)}
.brand,h1,.np-name,.plus h2{font-family:var(--sys)}
.tile,.call{--c:var(--law);--t:#0B1A30}
.tile.fire,.call.fire{--c:var(--fire);--t:#2A0E0C}
.tile.air,.call.air,.tile.ems,.call.ems{--c:var(--air);--t:#0B2416}
.tile.aviation,.call.aviation,.cc.aviation,.tx-item.aviation{--c:var(--aviation);--t:#0A2230}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;min-height:0;border-radius:14px;background:#000;
  border:1px solid rgba(255,255,255,.08);color:#fff;text-align:center;cursor:pointer;animation:none;
  transition:border-color .25s ease-out,box-shadow .25s ease-out}
.tile:hover{border-color:rgba(255,255,255,.2)}
.tile.sel{outline:none;border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.tile.talking{background:#000;border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c),0 0 20px color-mix(in srgb,var(--c) 55%,transparent);animation:none}
.tile:focus-visible{outline:2px solid #fff;outline-offset:3px}
.t-top{display:flex;align-items:center;gap:6px;width:100%}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--gray);flex:none}
.t-status{font:700 11px/1 var(--mono);color:var(--gray)}
.t-icon{margin-left:auto;display:inline-flex;color:var(--gray)}
.t-icon svg{width:15px;height:15px}
.tile.busy .sdot,.tile.sel .sdot,.tile.talking .sdot{background:var(--c)}
.tile.busy .t-status,.tile.sel .t-status,.tile.talking .t-status,.tile.busy .t-icon,.tile.sel .t-icon,.tile.talking .t-icon{color:var(--c)}
.tile.talking .sdot{animation:dlblink .8s ease-in-out infinite}
@keyframes dlblink{0%,100%{opacity:1}50%{opacity:.25}}
.t-name{min-height:44px;display:flex;align-items:center;justify-content:center}
.t-nm{font:600 17px/1.25 var(--sys);color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-meter{height:20px;display:flex;align-items:center;gap:3px}
.t-meter i{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.12)}
.tile.busy .t-meter i{background:color-mix(in srgb,var(--c) 35%,transparent)}
.tile.talking .t-meter i{background:var(--c)}
.t-last{font:11px/1.2 var(--mono);color:rgba(235,235,245,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:13px}
.t-sel{display:block;padding:9px 0;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  font:700 13px/1 var(--sys);letter-spacing:1px;color:rgba(255,255,255,.9)}
.tile.sel .t-sel{background:var(--c);box-shadow:none;color:#000}
@media (prefers-reduced-motion:reduce){.tile.talking .sdot{animation:none}}