/* Fonts: Figtree for everything, JetBrains Mono for times, numbers and ids. Both are bundled (web/fonts, OFL). */
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-ext.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
/* The dispatcher's CAD, styled like the real thing: a Windows application with a title bar,
   menu bar, toolbar, docked windows with their own title bars, dense grids with colour-coded
   status cells, a command line and a status bar. Light by default; the View menu switches to
   the dark skin real CAD products ship for dim comm centres. Status colours never change. */
:root {
  --bg: #3B3F46; --app: #F0F0F0; --chrome: #FFFFFF; --bar: #F7F7F7; --panel: #FFFFFF; --panel-2: #F7F9FC; --inset: #FFFFFF; --inset-ro: #F3F3F3;
  --line: #DADADA; --line-2: #E6E6E6; --frame: #A9A9A9; --ctl: #ABABAB; --text: #1E1E1E; --muted: #555555; --faint: #9A9A9A;
  --head: linear-gradient(#5A6B82, #46566C); --head-on: linear-gradient(#1F5FA8, #164A86); --head-text: #FFFFFF;
  --sel: #CCE4F7; --sel-text: #000000; --focus: #0078D7; --link: #1F5FA8; --status: #0078D7;
  --btn: linear-gradient(#FDFDFD, #E1E1E1); --btn-line: #ADADAD; --tool-on: #E5F1FB; --tool-on-line: #99C9EF;
  --th: #E8E8E8; --th-line: #C8C8C8; --grid-line: #E6E6E6; --pend: #FFF3E0; --alarm: #FFF3E0; --alarm-line: #FB8C00;
  --red: #C62828; --go: linear-gradient(#E6413B, #C62828); --go-line: #A51E1E; --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --sans: 'Figtree', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15171A; --app: #1E2024; --chrome: #2B2E33; --bar: #24272B; --panel: #24272B; --panel-2: #26292E; --inset: #15171A; --inset-ro: #1C1F23;
  --line: #0F1012; --line-2: #1E2024; --frame: #0B0C0E; --ctl: #3A3E45; --text: #E4E6EA; --muted: #B9BEC6; --faint: #6E747E;
  --head: linear-gradient(#3A3F47, #2C3036); --head-on: linear-gradient(#1F4F86, #173C68); --head-text: #E4E6EA;
  --sel: #28446A; --sel-text: #FFFFFF; --focus: #3A8FE0; --link: #7FB2F0; --status: #173C68;
  --btn: linear-gradient(#3C4047, #2B2F35); --btn-line: #0F1012; --tool-on: #1F3A5C; --tool-on-line: #3A6EA8;
  --th: #2E3237; --th-line: #1A1C1F; --grid-line: #1E2024; --pend: #3A2E1A; --alarm: #3A2E1A; --alarm-line: #FB8C00;
  --shadow: 0 10px 30px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 12px/1.3 var(--sans); overflow: hidden; text-transform: uppercase; }
button, input, select, textarea, option { text-transform: uppercase; }
button, input, select, textarea { font: inherit; color: inherit; }
#app { height: 100%; display: flex; flex-direction: column; }
#module { flex: 1; min-height: 0; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-thumb { background: #C1C1C1; border: 3px solid var(--panel); } ::-webkit-scrollbar-track { background: var(--panel-2); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4A4F57; }

/* ---------- controls */
button, .btn { height: 26px; padding: 0 14px; border: 1px solid var(--btn-line); background: var(--btn); color: var(--text); font: 12px var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 2px; cursor: pointer; white-space: nowrap; text-decoration: none; }
button:hover:not(:disabled), .btn:hover { filter: brightness(1.05); border-color: var(--focus); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
button.primary, .btn.primary { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
button.go, .btn.go { background: var(--go); color: #FFF; border-color: var(--go-line); font-weight: 700; }
button.danger { color: var(--red); } button.ghost { background: transparent; border-color: transparent; } button.icon { width: 26px; padding: 0; }
button.big, .btn.big { height: 30px; padding: 0 18px; font-weight: 700; }
input, select, textarea { height: 22px; border: 1px solid var(--ctl); background: var(--inset); color: var(--text); padding: 0 5px; font: 12px var(--sans); width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
input:disabled, input[readonly], select:disabled { background: var(--inset-ro); color: var(--muted); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { height: auto; padding: 4px 5px; resize: vertical; line-height: 1.35; font-family: var(--mono); }
select { width: auto; max-width: 100%; }
select option { background: var(--panel); color: var(--text); }
label { display: block; color: var(--muted); margin: 0 0 6px; }
label input, label select, label textarea { margin-top: 2px; width: 100%; }
label.check { display: flex; align-items: center; gap: 6px; color: var(--text); } label.check input { width: 14px; height: 14px; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; }
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .form3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
.row { display: flex; align-items: center; gap: 8px; } .spacer { flex: 1; } .grow { flex: 1; min-width: 0; } .pad { padding: 8px 10px; }
.k { color: var(--muted); font-size: 11px; } .dim { color: var(--muted); } .warn { color: #B26A00; } .mono { font-family: var(--mono); }
.short { color: var(--red); font-weight: 700; }
h1, h2, h3, h4 { margin: 0; } h2 { font: 700 12px var(--sans); color: var(--link); } h4 { margin: 10px 0 4px; font: 700 11px var(--sans); color: var(--muted); text-transform: uppercase; }
kbd { font: 700 10px var(--mono); border: 1px solid var(--ctl); border-radius: 2px; padding: 0 4px; background: var(--inset-ro); color: var(--text); }
.go kbd { background: rgba(0, 0, 0, .25); color: #FFF; border-color: transparent; }
.empty { height: 100%; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 20px; }
.sect { grid-column: 1 / -1; font-weight: 700; color: var(--link); border-bottom: 1px solid var(--line); padding: 8px 0 2px; margin-top: 2px; }
.sect span { font-weight: 400; color: var(--muted); }

/* status colours: chips and cells. The meaning of each colour is the same in both skins. */
.st, .pri, .tag { display: inline-block; font: 700 11px var(--sans); padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
.st { min-width: 36px; text-align: center; color: #000; background: #BDBDBD; }
.st-UNS { background: #BDBDBD; color: #444; } .st-OOS { background: #757575; color: #FFF; } .st-XS { background: #546E7A; color: #FFF; } .st-CLR { background: transparent; color: var(--muted); border: 1px solid var(--ctl); }
.st-AVL { background: #2E7D32; color: #FFF; } .st-DSP { background: #FDD835; color: #000; } .st-ENR { background: #1E88E5; color: #FFF; }
.st-STG { background: #26A69A; color: #FFF; } .st-ONS { background: #E53935; color: #FFF; } .st-TRN { background: #8E24AA; color: #FFF; } .st-ATH { background: #F4511E; color: #FFF; }
.call-RINGING { background: #E53935; color: #FFF; } .call-ACTIVE { background: #43A047; color: #FFF; } .call-ABANDONED { background: #757575; color: #FFF; }
td.st, th.st { display: table-cell; text-align: center; min-width: 0; padding: 3px 6px; border-radius: 0; }
table.grid td.st.st-UNS { background: #BDBDBD; color: #444; } table.grid td.st.st-XS { background: #546E7A; color: #FFF; } table.grid td.st.st-OOS { background: #757575; color: #FFF; } table.grid td.sttable.grid td.st.st-AVL { background: #2E7D32; color: #FFF; }
table.grid td.st.st-DSP { background: #FDD835; color: #000; } table.grid td.st.st-ENR { background: #1E88E5; color: #FFF; } table.grid td.st.st-STG { background: #26A69A; color: #FFF; } table.grid td.st.st-ONS { background: #E53935; color: #FFF; } table.grid td.st.st-TRN { background: #8E24AA; color: #FFF; } table.grid td.st.st-ATH { background: #F4511E; color: #FFF; }
.pri { color: #FFF; min-width: 20px; text-align: center; } .pri-1 { background: #E53935; } .pri-2 { background: #FB8C00; } .pri-3 { background: #FDD835; color: #000; }
.tag { border: 1px solid var(--ctl); color: var(--text); font-weight: 600; } .tag.det { color: var(--link); border-color: var(--link); }
.lvl-E, .lvl-D { background: #E53935; color: #FFF; border-color: #E53935; } .lvl-C { background: #FB8C00; color: #FFF; border-color: #FB8C00; } .lvl-B, .lvl-A, .lvl-O { background: #FDD835; color: #000; border-color: #FDD835; }
.timer { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .timer.over { color: var(--red); font-weight: 700; }
.flag { font: 700 10px var(--sans); color: #000; background: #FDD835; padding: 1px 4px; margin-left: 4px; } .flag.mayday { background: #E53935; color: #FFF; }
.als { color: var(--link); font: 700 10px var(--sans); }
.status-PENDING, .status-RINGING { color: var(--red); font-weight: 700; } .status-ACTIVE { color: #2E7D32; font-weight: 700; } .status-CLOSED, .status-ENDED, .status-ABANDONED { color: var(--muted); }
.chip { height: 24px; padding: 0 10px; font-weight: 700; } .chip i { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; }
.chip.on { background: #43A047; color: #FFF; border-color: #2E7D32; } .chip.on i { color: #E8F5E9; } .chip.unit:not(.on) { border-style: dashed; }
.chip.need { border-color: #FB8C00; color: #B26A00; } .chip.done { border-color: #43A047; color: #2E7D32; }
.chip.hosp { height: 22px; font-weight: 600; } .chip.hosp.DIVERT { background: #FDD835; color: #000; } .chip.hosp.CLOSED { background: #E53935; color: #FFF; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
@keyframes blink { 50% { opacity: .35; } } .blink { animation: blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .blink, .alarm { animation: none !important; } }

/* grids */
table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
table.grid th { background: var(--th); border-right: 1px solid var(--th-line); border-bottom: 1px solid #B0B0B0; text-align: left; padding: 3px 6px; font-weight: 700; white-space: nowrap; overflow: hidden; position: sticky; top: 0; z-index: 1; }
table.grid td { padding: 3px 6px; border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.grid tbody tr:nth-child(even) td { background: var(--panel-2); }
table.grid.click tbody tr { cursor: pointer; } table.grid.click tbody tr:hover td { background: var(--sel); color: var(--sel-text); }
table.grid tr.sel td { background: var(--sel) !important; color: var(--sel-text); }
table.grid tr.cleared td { opacity: .5; }
table.grid tr.pend td { background: var(--pend) !important; } table.grid tr.sel.pend td { background: var(--sel) !important; }
table.grid td.pri1, table.grid td.pri2, table.grid td.pri3 { text-align: center; font-weight: 700; } td.pri1 { background: #E53935 !important; color: #FFF; } td.pri2 { background: #FB8C00 !important; color: #FFF; } td.pri3 { background: #FDD835 !important; color: #000; }
table.grid td .st { margin-right: 3px; }
table.grid.tight td, table.grid.tight th { padding: 2px 5px; font-size: 11px; }
table.grid td.m { font-family: var(--mono); }

/* ---------- overlays: dialogs, menus, toasts */
#toasts { position: fixed; right: 14px; bottom: 36px; z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.toast { background: var(--panel); border: 1px solid var(--frame); border-left: 4px solid var(--status); padding: 8px 12px; max-width: 420px; box-shadow: var(--shadow); color: var(--text); }
.toast.err { border-left-color: var(--red); color: var(--red); font-weight: 700; }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 60; display: grid; place-items: center; }
.dialog { background: var(--app); border: 1px solid var(--frame); width: min(460px, 94vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.dialog.wide { width: min(880px, 96vw); }
.dialog-title { height: 28px; padding: 0 10px; background: var(--head-on); color: var(--head-text); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.dialog-title .x { background: none; border: none; color: var(--head-text); width: 24px; height: 24px; padding: 0; font-size: 16px; }
.dialog-body { padding: 12px 14px; overflow: auto; background: var(--panel); } .dialog-foot { padding: 8px 12px; display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid var(--line); background: var(--bar); }
.ctx { position: fixed; z-index: 90; background: var(--panel); border: 1px solid var(--frame); padding: 2px; min-width: 200px; box-shadow: var(--shadow); }
.ctx-item { padding: 5px 24px 5px 12px; cursor: pointer; } .ctx-item:hover { background: var(--focus); color: #FFF; } .ctx-item.danger { color: var(--red); } .ctx-item.danger:hover { background: var(--red); color: #FFF; }
.ctx hr { border: none; border-top: 1px solid var(--line); margin: 3px 1px; }
.login { height: 100%; display: grid; place-items: center; background: var(--app); }
.login-box { background: var(--panel); border: 1px solid var(--frame); padding: 30px 40px; text-align: center; max-width: 440px; box-shadow: var(--shadow); }
.login-box h1 { font: 700 18px var(--sans); margin: 0 0 6px; } .login-box p { color: var(--muted); margin: 0 0 16px; }

/* the launcher strip above every module: which program is open and who is signed in */
#modnav { height: 24px; flex: none; background: #1F2733; color: #C9D1DC; display: flex; align-items: center; padding: 0 8px; gap: 2px; font-size: 11px; }
#modnav a { color: #C9D1DC; text-decoration: none; padding: 3px 10px; border-radius: 2px; } #modnav a.on { background: #3A4A5E; color: #FFF; font-weight: 700; } #modnav a:hover:not(.on) { background: #2C3747; }
#modnav .dim { padding: 0 8px; color: #8E9AAA; }

/* ---------- the application shell */
.app { height: 100%; display: flex; flex-direction: column; background: var(--app); }
.title { height: 30px; flex: none; background: var(--chrome); display: flex; align-items: center; padding: 0 0 0 10px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.title .ico { width: 16px; height: 16px; background: var(--red); border-radius: 2px; margin-right: 8px; flex: none; }
.title .win { margin-left: auto; display: flex; } .title .win span { width: 46px; height: 30px; display: grid; place-items: center; font-size: 14px; }
.menu { height: 22px; flex: none; background: var(--app); display: flex; align-items: center; padding: 0 4px; border-bottom: 1px solid var(--line); }
.menu button { height: 22px; padding: 0 8px; border: none; background: none; border-radius: 0; gap: 0; } .menu button:hover { background: var(--sel); color: var(--sel-text); filter: none; } .menu button u { text-decoration: underline; }
.tools { height: 62px; flex: none; background: var(--bar); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 6px; gap: 2px; }
.tool { width: 76px; height: 56px; padding: 0; border: 1px solid transparent; background: none; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 1.1; text-align: center; white-space: normal; }
.tool i { width: 24px; height: 24px; border-radius: 3px; background: var(--c, #6B7A90); display: block; }
.tool:hover:not(:disabled) { background: var(--tool-on); border-color: var(--tool-on-line); filter: none; } .tool.on { background: var(--tool-on); border-color: var(--tool-on-line); }
.tools .sep { width: 1px; height: 44px; background: var(--line); margin: 0 6px; }
.cmdbox { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); position: relative; }
.cmdbox input { width: 520px; height: 28px; border: 1px solid #7A7A7A; font: 13px var(--mono); padding: 0 8px; }
:root[data-theme="dark"] .cmdbox input { color: #7CFF9A; border-color: #4A4F57; }
.cmdbox .hint { position: absolute; right: 8px; top: 7px; pointer-events: none; }
#cmdout { position: absolute; right: 0; top: 32px; z-index: 30; margin: 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--frame); color: var(--text); font: 12px/1.45 var(--mono); white-space: pre; min-width: 620px; max-height: 360px; overflow: auto; box-shadow: var(--shadow); }
#cmdout:empty { display: none; } #cmdout.ok { border-left: 4px solid #43A047; } #cmdout.err { border-left: 4px solid var(--red); color: var(--red); }
.status { height: 24px; flex: none; background: var(--status); color: #FFF; display: flex; align-items: center; padding: 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.status > span { padding: 0 10px; border-right: 1px solid rgba(255, 255, 255, .4); } .status > span:last-child { border: none; margin-left: auto; font-family: var(--mono); }
.status .hot { background: var(--red); font-weight: 700; } .status .ring { background: var(--red); font-weight: 700; animation: blink 1s steps(1) infinite; }
.status .link.down { background: var(--red); font-weight: 700; }
.status button { height: 18px; padding: 0 8px; margin-left: 6px; font-size: 11px; }

/* the workspace: docked windows, arranged for the job in hand */
.stage { flex: 1; min-height: 0; position: relative; }
.work { height: 100%; display: grid; gap: 4px; padding: 4px; }
.work > .win { display: none; }
.work[data-view="board"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(480px, 34%); grid-template-rows: minmax(160px, 30%) minmax(0, 1fr); }
.work[data-view="board"] > .w-inc { display: flex; grid-column: 1 / 3; grid-row: 1; } .work[data-view="board"] > .w-det { display: flex; grid-column: 1; grid-row: 2; }
.work[data-view="board"] > .w-units { display: flex; grid-column: 2; grid-row: 2; } .work[data-view="board"] > .w-map { display: flex; grid-column: 3; grid-row: 1 / 3; }
.work[data-view="units"] { grid-template-columns: minmax(0, 1fr) minmax(420px, 30%); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.work[data-view="units"] > .w-board { display: flex; grid-row: 1 / 3; } .work[data-view="units"] > .w-alarms { display: flex; } .work[data-view="units"] > .w-feed { display: flex; }
.work[data-view="map"] { grid-template-columns: 1fr; } .work[data-view="map"] > .w-map { display: flex; }
.win { background: var(--panel); border: 1px solid var(--frame); display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.win > .hd { height: 24px; flex: none; background: var(--head); color: var(--head-text); display: flex; align-items: center; gap: 8px; padding: 0 8px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.win > .hd .n { margin-left: auto; font-weight: 400; opacity: .9; overflow: hidden; text-overflow: ellipsis; } .win > .hd .x { opacity: .8; flex: none; }
.win.act > .hd { background: var(--head-on); }
.body { flex: 1; min-height: 0; overflow: auto; }
.win.w-map .body { overflow: hidden; }
.page { position: absolute; inset: 0; background: var(--app); z-index: 6; overflow: hidden; }

/* the incident grid */
table.grid.q td { height: 24px; }
table.grid.q td.units .st { min-width: 0; padding: 0 4px; }
table.grid.q tr.none td { color: var(--muted); padding: 10px; }
.sect-row td { background: var(--th) !important; font-weight: 700; color: var(--red); }

/* the unit status grid */
table.grid.u td.unit { font-weight: 700; }
table.grid.u tr.picked td:not(.st) { background: var(--sel) !important; } table.grid.u tr.picked td.unit::before { content: '\2714 '; color: #2E7D32; }
table.grid.u tr.noack td.loc { color: var(--red); font-weight: 700; }

/* the station board (unit status monitor) */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; align-content: start; }
.stn { border: 1px solid var(--frame); background: var(--panel-2); } .stn-head { background: var(--th); font-weight: 700; padding: 3px 6px; display: flex; justify-content: space-between; } .stn-head span:last-child { font-weight: 400; color: var(--muted); } .stn.bare .stn-head span:last-child { color: var(--red); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 4px; }
.tile { height: auto; min-height: 56px; padding: 5px 8px; gap: 2px; line-height: 1.2; border: 1px solid rgba(0, 0, 0, .35); border-radius: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: left; font-weight: 700; font-size: 16px; background: #BDBDBD; color: #444; white-space: nowrap; overflow: hidden; }
.tile .tl { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .tile b { font: inherit; } .tile i { font: 700 10px var(--sans); font-style: normal; }
.tile .ti, .tile .tw, .tile .timer { font: 400 10px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; } .tile .ti { display: block; min-height: 12px; } .tile .timer.over { color: inherit; text-decoration: underline; }
.tile.ut-UNS { background: var(--inset-ro); color: var(--faint); } .tile.ut-XS { background: #546E7A; color: #FFF; } .tile.ut-OOS { background: #757575; color: #FFF; } .tile.ut-AVL { background: #2E7D32; color: #FFF; }
.tile.ut-DSP { background: #FDD835; color: #000; } .tile.ut-ENR { background: #1E88E5; color: #FFF; } .tile.ut-STG { background: #26A69A; color: #FFF; } .tile.ut-ONS { background: #E53935; color: #FFF; } .tile.ut-TRN { background: #8E24AA; color: #FFF; } .tile.ut-ATH { background: #F4511E; color: #FFF; }
.tile.picked { outline: 3px solid var(--focus); outline-offset: -3px; } .tile.mayday { animation: blink 1s steps(1) infinite; } .tile.noack .tw { animation: blink 1s steps(1) infinite; font-weight: 700; }

/* alarms and timers */
.alarm { display: flex; align-items: center; gap: 10px; margin: 6px 8px 0; padding: 6px 8px; background: var(--alarm); border: 1px solid var(--alarm-line); font-size: 12px; }
.alarm b { color: var(--red); white-space: nowrap; } .alarm .grow { min-width: 0; } .alarm .timer { color: var(--muted); } .alarm button { height: 22px; }
.a-MAYDAY { background: #E53935; color: #FFF; border-color: #7F0000; } .a-MAYDAY b, .a-MAYDAY .timer { color: #FFF; }
#alarms { position: absolute; z-index: 8; right: 12px; top: 8px; width: 460px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#alarms .alarm { margin: 0; box-shadow: var(--shadow); pointer-events: auto; animation: blink 1.6s steps(1) infinite; } #alarms .alarm:hover { animation: none; }

/* the activity log */
.feed-row { display: grid; grid-template-columns: 62px 110px 54px minmax(0, 1fr); gap: 8px; padding: 3px 8px; border-bottom: 1px solid var(--grid-line); font-size: 12px; align-items: baseline; }
.feed-row:nth-child(even) { background: var(--panel-2); } .feed-row[data-act] { cursor: pointer; } .feed-row[data-act]:hover { background: var(--sel); color: var(--sel-text); }
.feed-row .t { font-family: var(--mono); color: var(--muted); } .feed-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feed-row .fi { color: var(--link); font-weight: 700; } .feed-row .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the map window */
#map { position: absolute; inset: 0; overflow: hidden; background: #DCE3D5; } #map canvas { display: block; cursor: grab; }
:root[data-theme="dark"] #map { background: #15171A; }
.map-tools { position: absolute; z-index: 4; left: 6px; top: 6px; display: flex; flex-direction: column; gap: 2px; }
.map-tools button, .readout { width: auto; min-width: 26px; height: 26px; padding: 0 8px; background: var(--panel); border: 1px solid #777; color: var(--text); font: 700 11px var(--sans); border-radius: 0; justify-content: flex-start; }
.map-tools button.on { background: var(--sel); color: var(--sel-text); } .readout { display: inline-flex; align-items: center; font-family: var(--mono); }
.pick-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--red); color: #FFF; font-weight: 700; padding: 6px 14px; z-index: 9; white-space: nowrap; pointer-events: none; }
.picker { position: fixed; inset: 5vh 6vw; z-index: 70; border: 1px solid var(--frame); overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
.picker #pickmap { position: absolute; inset: 0; }

/* ---------- incident detail window */
.inc { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.inc .body { padding: 6px 10px 10px; }
.form { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr); gap: 5px 8px; align-items: center; }
.form label { text-align: right; color: var(--muted); margin: 0; white-space: nowrap; }
.form .v { height: 22px; border: 1px solid var(--ctl); background: var(--inset-ro); padding: 0 5px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.form .v > * { flex: none; } .form .v .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.form .v select, .form .v input { border: none; background: transparent; height: 20px; padding: 0; flex: 1; font-weight: 700; }
.form .w { grid-column: span 3; } .form .full { grid-column: 1 / -1; }
.rec .chips { gap: 4px; } .rec .chip { height: 24px; font: 700 12px var(--sans); }
.urow { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 2px 0; border-bottom: 1px solid var(--grid-line); } .urow.cleared { opacity: .55; } .urow .uid { width: 40px; font-weight: 700; }
.urow select { height: 22px; width: 110px; } .urow button { height: 22px; padding: 0 8px; }
.cmdrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .par { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bm { height: 22px; font-size: 11px; } .bm.on { background: #43A047; color: #FFF; border-color: #2E7D32; opacity: 1; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 4px; }
.block-head h2 { font: 700 12px var(--sans); color: var(--link); } .block-head .k { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log { border: 1px solid var(--ctl); background: var(--inset); padding: 4px 6px; font: 12px/1.45 var(--mono); max-height: 240px; overflow: auto; }
.log.tall { max-height: 420px; }
.log-line { display: flex; gap: 8px; align-items: baseline; } .log-line .t { color: var(--muted); flex: none; } .log-line .by { color: var(--muted); flex: none; width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-line .tx { flex: 1; min-width: 0; word-break: break-word; } .k-A .tx { color: var(--red); font-weight: 700; } .k-B .tx { color: #2E7D32; } .k-S .tx, .k-U .tx { color: var(--muted); }
form.note { margin: 4px 0 0; display: flex; gap: 6px; } form.note input { font-family: var(--mono); }
.premise { margin-top: 6px; padding: 6px 8px; border: 1px solid #FB8C00; background: var(--alarm); } .premise-name { font-weight: 700; color: #B26A00; } .premise .k { margin-right: 6px; }
.btns { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--line); background: var(--bar); flex: none; align-items: center; } .btns select { height: 26px; }

/* ---------- call-taking */
.intake { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 32%); grid-template-rows: minmax(0, 1fr) minmax(300px, 40%); gap: 4px; padding: 4px; }
.intake .w-form { grid-row: 1 / 3; }
.intake .form { padding: 8px 10px; grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr); }
.intake .form .v input, .intake .form .v select { font-weight: 600; }
.intake textarea.cmts { grid-column: 1 / -1; height: 140px; font: 12px/1.4 var(--mono); }
.wizard { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.wiz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wiz-head h1 { font: 700 14px var(--sans); color: var(--link); }
.steps { display: flex; gap: 3px; } .steps span { width: 20px; height: 5px; background: var(--ctl); } .steps span.done { background: #43A047; } .steps span.cur { background: var(--focus); }
.det { border: 2px solid var(--red); background: var(--alarm); padding: 8px 10px; display: flex; gap: 14px; align-items: center; } .det b { font: 700 24px var(--mono); color: var(--red); } .det .lvl-E, .det .lvl-D, .det .lvl-C, .det .lvl-B, .det .lvl-A, .det .lvl-O { font: 700 22px var(--mono); padding: 2px 10px; }
.question h2 { font: 700 15px var(--sans); color: var(--text); margin-bottom: 8px; }
.answers { display: flex; gap: 6px; flex-wrap: wrap; } .answers button { height: 32px; padding: 0 16px; font-size: 13px; } .answers button.on { background: var(--head-on); color: #FFF; border-color: #164A86; }
.wiz-nav { display: flex; gap: 6px; align-items: center; }
.complaints { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.complaints button { height: 30px; justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.1; padding: 0 10px; } .complaints button.on { background: var(--head-on); color: #FFF; }
.answered .row { justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--grid-line); cursor: pointer; }
.pai { border-top: 1px solid var(--line); padding-top: 8px; } .pai .k { font-weight: 700; margin-bottom: 4px; }
.pai-line { display: flex; gap: 10px; align-items: center; padding: 4px 0; } .pai-line span { flex: 1; } .pai-line button { height: 22px; }
.ani { display: grid; grid-template-columns: 110px 1fr; gap: 3px 8px; padding: 8px 10px; align-items: baseline; } .ani b { text-align: right; color: var(--muted); font-weight: 400; } .ani span { font-weight: 700; }
.chat-log { padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; font: 12px/1.4 var(--mono); border-top: 1px solid var(--line); }
.msg { padding: 2px 0; } .msg .t { color: var(--muted); margin-right: 8px; } .msg.sys { color: var(--muted); font-style: italic; } .msg.ct .t::after { content: ' >'; }
.chat-send { margin: 0; padding: 6px 10px; border-top: 1px solid var(--line); display: flex; gap: 6px; } .chat-send input { font-family: var(--mono); }

/* ---------- box areas (admin), kept for drawing the box map */
.boxpage { height: 100%; display: grid; grid-template-columns: 420px 1fr; gap: 4px; padding: 4px; }
.boxside { overflow: auto; padding: 10px 12px; background: var(--panel); border: 1px solid var(--frame); } .boxside h2 { margin: 0 0 8px; } .boxside p { margin: 0 0 10px; } .boxside .row { gap: 6px; margin-bottom: 8px; } .boxside .boxsave { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.boxmap { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--frame); background: #DCE3D5; } .boxmap canvas { display: block; }
.boxhint { position: absolute; z-index: 2; left: 10px; top: 10px; background: var(--panel); border: 1px solid var(--frame); padding: 6px 10px; }
.boxnum { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 14px var(--mono); } .boxnum input { width: 64px; margin: 0; font-family: var(--mono); }
.tabpage { height: 100%; display: flex; flex-direction: column; padding: 4px; } .scroll { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--frame); } .bar { display: flex; gap: 6px; align-items: center; padding: 6px 0; flex-wrap: wrap; } .bar input { flex: 1; min-width: 160px; }
fieldset { border: 1px solid var(--line); margin: 10px 0; padding: 8px 12px; } legend { font-weight: 700; color: var(--link); padding: 0 6px; }

/* ---------- top bar */
.mdt-top { flex: none; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--chrome); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; } .clock { font: 700 14px var(--mono); } .user { color: var(--muted); }

/* ---------- in game */
body.game { background: transparent; }
body.game #app { display: block; }

/* ---------- in-game phone, drawn like an iPhone (its own look, not the CAD theme) */
#g-call { position: fixed; inset: 0; pointer-events: none; }
.ip-wrap { position: absolute; right: 3vw; bottom: 3vh; pointer-events: auto; }
.ip-phone { width: 410px; height: 864px; padding: 10px; border-radius: 64px; background: #1B1B1D; box-shadow: 0 0 0 2px #3A3A3C, 0 30px 80px rgba(0, 0, 0, .7); transform-origin: bottom right; }
.ip-screen { position: relative; width: 390px; height: 844px; border-radius: 54px; overflow: hidden; background: #000000; color: #FFFFFF; display: flex; flex-direction: column; font: 400 16px/1.3 var(--sans); }
.ip-screen.ip-ring { background: #1C1C1E; }
.ip-screen button { font-family: inherit; color: #FFFFFF; border: none; background: transparent; height: auto; padding: 0; border-radius: 0; white-space: normal; }
.ip-screen button:focus-visible, .ip-screen input:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
.ip-status { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px; font-size: 16px; font-weight: 600; }
.ip-right { display: flex; align-items: center; gap: 6px; } .ip-right b { font-size: 12px; font-weight: 600; }
.ip-island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 124px; height: 36px; border-radius: 20px; background: #000000; border: 1px solid #1C1C1E; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 12px; font-weight: 600; color: #30D158; }
.ip-island i { width: 8px; height: 8px; border-radius: 4px; background: #30D158; }
.ip-grow { flex: 1; }
.ip-number { flex: none; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 18px; }
.ip-digits { font-size: 44px; letter-spacing: 1px; } .ip-sub { font-size: 15px; color: #8E8E93; } .ip-red { color: #FF453A; }
.ip-keys { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; padding: 0 44px; justify-items: center; align-items: center; }
.ip-callrow { padding-top: 16px; }
.ip-screen .ip-key { width: 80px; height: 80px; border-radius: 40px; background: #333333; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ip-screen .ip-key:active { background: #5A5A5E; }
.ip-key span { font-size: 36px; line-height: 38px; } .ip-key small { font-size: 10px; font-weight: 600; letter-spacing: 2px; line-height: 12px; min-height: 12px; }
.ip-screen .ip-round, .ip-round { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.ip-screen .ip-green, .ip-green { background: #30D158; } .ip-red-fill { background: #FF453A; } .ip-gray { background: #333333; } .ip-white { background: #FFFFFF; }
.ip-screen .ip-round.ip-green { width: 80px; height: 80px; } .ip-screen .ip-76 { width: 76px; height: 76px; }
.ip-plain { width: 56px; height: 44px; display: grid; place-items: center; }
.ip-tabs { flex: none; height: 84px; display: flex; align-items: flex-start; justify-content: space-around; padding: 8px 8px 0; border-top: 1px solid #1C1C1E; background: #121212; }
.ip-tabs span { min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; color: #8E8E93; } .ip-tabs span.on { color: #0A84FF; }
.ip-callhead { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 20px 12px; border-bottom: 1px solid #1C1C1E; text-align: center; }
.ip-name { font-size: 28px; font-weight: 500; } .ip-xl { font-size: 36px; font-weight: 400; line-height: 42px; }
.ip-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.ip-chat::-webkit-scrollbar { width: 0; }
.ip-bubble { align-self: flex-start; max-width: 78%; padding: 8px 13px; border-radius: 19px; background: #262629; font-size: 16px; line-height: 21px; word-break: break-word; }
.ip-bubble.me { align-self: flex-end; background: #30D158; }
.ip-bubble:first-child { margin-top: auto; }
.ip-note { align-self: center; font-size: 12px; color: #8E8E93; padding: 4px 0; }
.ip-compose { flex: none; margin: 0; padding: 6px 12px 10px; display: flex; align-items: center; gap: 8px; }
.ip-compose input { flex: 1; height: 38px; border-radius: 19px; border: 1px solid #3A3A3C; background: #000000; color: #FFFFFF; font: 400 16px var(--sans); padding: 0 14px; }
.ip-screen .ip-send { width: 34px; height: 34px; border-radius: 17px; background: #30D158; display: grid; place-items: center; flex: none; }
.ip-controls { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 8px; padding: 10px 20px 0; }
.ip-screen .ip-ctl { width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.ip-screen .ip-ctl.ip-big { width: 92px; font-size: 15px; gap: 8px; }
.ip-incoming { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 20px 0; text-align: center; } .ip-incoming .ip-sub { font-size: 18px; color: #AEAEB2; }
.ip-badge { flex: 1; display: grid; place-items: center; } .ip-badge span { width: 150px; height: 150px; border-radius: 75px; background: #FF453A; display: grid; place-items: center; font-size: 46px; font-weight: 600; }
.ip-answer { flex: none; display: flex; justify-content: space-between; padding: 0 50px; }
.ip-screen .ip-home { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 170px; height: 22px; display: grid; place-items: center; }
.ip-home::after { content: ''; width: 134px; height: 5px; border-radius: 3px; background: #FFFFFF; }
/* The phone keeps its own fonts and controls. */
.ip-wrap, .ip-wrap button, .ip-wrap input { font-family: var(--sans); }
.ip-screen button { height: auto; border: none; background: transparent; }


/* ---------- phone notifications */
.ip-note-card { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 11px 13px; border-radius: 20px; background: rgba(40, 40, 46, .86); backdrop-filter: blur(16px); color: #FFF; text-align: left; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); letter-spacing: 0; }
.ip-note-ic svg { width: 38px; height: 38px; display: block; }
.ip-note-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; font: 400 14px/1.3 var(--sans); }
.ip-note-top { display: flex; justify-content: space-between; color: #C7C7CC; font-size: 12px; } .ip-note-top b { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.ip-note-title { font-weight: 600; font-size: 15px; } .ip-note-tx span:last-child { color: #E5E5EA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ip-banner { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 50; transform: translateY(-140%); transition: transform .35s cubic-bezier(.2, .9, .3, 1.1); cursor: pointer; }
.ip-banner.in { transform: translateY(46px); }
.ip-peek { position: fixed; right: 3vw; bottom: 0; z-index: 90; pointer-events: none; transform: translateY(100%); transition: transform .55s cubic-bezier(.2, .9, .3, 1); }
.ip-peek.up { transform: translateY(calc(100% - 300px)); } /* only the top shows: the time and the notification */
.ip-peek { zoom: .82; } .ip-peek .ip-phone { transform: none; }
.ip-screen.ip-lock { background: radial-gradient(120% 80% at 30% 10%, #2B4C7E, #0B1B33 55%, #050A14); padding: 0 12px; }
.ip-lock-time { display: flex; flex-direction: column; align-items: center; padding: 34px 0 18px; color: #FFF; font-family: var(--sans); }
.ip-lock-time span { font-size: 17px; font-weight: 500; opacity: .9; } .ip-lock-time b { font-size: 84px; font-weight: 600; line-height: 1; letter-spacing: -1px; }

/* ---------- phone: home screen and the public incident app (keeps the phone's own lettering) */
.ip-screen.ip-homescreen { background: radial-gradient(120% 80% at 30% 10%, #2B4C7E, #0B1B33 55%, #050A14); }
.ip-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 10px; padding: 24px 22px 0; }
.ip-screen .ip-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #FFF; text-transform: none; }
.ip-appicon { width: 62px; height: 62px; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); } .ip-appicon svg { width: 100%; height: 100%; display: block; }
.ip-dock { margin: 0 14px 34px; padding: 14px 18px; border-radius: 30px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); display: flex; justify-content: center; gap: 22px; }
.ip-screen.ip-watch { background: #1B2838; }
.w-head { flex: none; height: 50px; background: #A61E1E; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; color: #FFF; margin-top: -4px; }
.w-head b { text-align: center; font-size: 19px; font-weight: 700; letter-spacing: .02em; } .w-hicons { text-align: center; font-size: 18px; opacity: .9; }
.ip-screen .w-back { font-size: 34px; line-height: 1; color: #FFF; }
.w-body { flex: 1; min-height: 0; overflow-y: auto; background: #1B2838; } .w-body::-webkit-scrollbar { width: 0; }
.w-sect { display: flex; justify-content: space-between; padding: 6px 12px; background: #24354A; color: #C9D3E0; font-size: 12px; font-weight: 600; letter-spacing: .04em; border-bottom: 1px solid #0F1824; }
.w-sect span { color: #8E9BB0; }
.ip-screen .w-row { width: 100%; display: grid; grid-template-columns: 56px 1fr 68px; align-items: center; gap: 6px; padding: 10px 10px 10px 8px; border-bottom: 1px solid #0F1824; background: #1E2C3E; text-align: center; }
.ip-screen .w-row:active { background: #263A52; } .ip-screen .w-row.old { opacity: .78; }
.w-ic { display: grid; place-items: center; }
.w-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .w-mid b { font-size: 15.5px; font-weight: 600; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-addr { font-size: 12.5px; color: #B8C3D1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-units { font-size: 12.5px; font-weight: 600; white-space: normal; line-height: 1.35; } .w-units i { font-style: normal; white-space: nowrap; }
.w-time { font-size: 13px; color: #D5DDE7; text-align: right; } .w-time small { color: #8E9BB0; font-size: 11.5px; }
.w-none { padding: 18px; color: #8E9BB0; font-size: 14px; text-align: center; }
.w-tabs { flex: none; height: 76px; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 12px; background: #F2F2F7; }
.ip-screen .w-tabs button { color: #8E8E93; width: 60px; display: grid; place-items: center; } .ip-screen .w-tabs button.on { color: #A61E1E; }
.w-mapbox { flex: 1; min-height: 0; position: relative; } .w-mapbox canvas { display: block; }
.w-card { position: absolute; left: 10px; right: 10px; bottom: 90px; z-index: 5; display: grid; grid-template-columns: 56px 1fr 64px; gap: 6px; align-items: center; padding: 10px 10px 8px; background: rgba(27, 40, 56, .95); border-radius: 6px; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.w-card.w-empty { display: block; color: #B8C3D1; }
.w-cardbtns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 14px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ip-screen .w-cardbtns button { color: #FFF; font-size: 13px; font-weight: 600; }
.w-set { padding-bottom: 20px; } .w-set .w-sect { background: none; border: none; padding: 16px 16px 6px; color: #8E9BB0; }
.w-group { margin: 0 12px; border-radius: 14px; overflow: hidden; background: #24354A; }
.ip-screen .w-check { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; font-size: 16px; color: #8E9BB0; border-bottom: 1px solid #1B2838; text-align: left; }
.ip-screen .w-check.on { color: #FFF; }
.w-box { width: 26px; height: 26px; border-radius: 4px; background: #E5E5EA; color: #1B2838; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.w-note { padding: 10px 18px; color: #8E9BB0; font-size: 12.5px; }

/* incident app: the agency name fits on one line; map layer switches */
.w-head b { font-size: 14px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.w-layers { position: absolute; right: 8px; top: 8px; z-index: 6; display: flex; flex-direction: column; gap: 4px; }
.ip-screen .w-layers button { padding: 5px 9px; border-radius: 8px; background: rgba(27, 40, 56, .88); color: #8E9BB0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); text-align: left; }
.ip-screen .w-layers button.on { color: #FFF; box-shadow: inset 3px 0 0 #FF453A, 0 2px 8px rgba(0, 0, 0, .4); }

/* line icons from ui.js icon(): drawn with strokes */
svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- phone: Mobile CAD (fire/EMS). Its own look: a black field app with amber addresses */
.ip-screen.ip-mcad { background: #07090C; font-family: var(--sans); text-transform: uppercase; }
.ip-mcad .mc-head { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 12px 8px; background: #0E1319; border-bottom: 3px solid var(--c); }
.ip-mcad .mc-app { font: 700 9px/1.15 var(--mono); color: #5C6B7D; letter-spacing: .08em; width: 40px; }
.ip-screen .mc-back { font-size: 34px; line-height: 1; color: #FFB300; text-align: left; }
.mc-me { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mc-me b { font: 800 26px/1 var(--sans); letter-spacing: .02em; color: #FFFFFF; }
.mc-me small { font-size: 12px; font-weight: 800; color: var(--c); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-link { font: 700 10px var(--mono); color: #E53935; letter-spacing: .1em; } .mc-link.up { color: #43A047; }
.mc-ack { font: 800 12px var(--mono); font-style: normal; color: #000000; background: #FFB300; padding: 4px 8px; border-radius: 3px; animation: mc-blink 1s steps(1) infinite; }
@keyframes mc-blink { 50% { opacity: .3; } }
.mc-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); background: #0E1319; border-bottom: 1px solid #1C242E; }
.ip-screen .mc-tabs button { position: relative; height: 38px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #5C6B7D; border-bottom: 2px solid transparent; }
.ip-screen .mc-tabs button.on { color: #FFB300; border-bottom-color: #FFB300; }
.mc-tabs i { position: absolute; top: 9px; right: 18px; width: 7px; height: 7px; border-radius: 50%; background: #E53935; }
.mc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 30px; } .mc-body::-webkit-scrollbar { width: 0; }
.mc-label { display: flex; justify-content: space-between; padding: 12px 4px 6px; font: 700 11px var(--mono); letter-spacing: .14em; color: #5C6B7D; }
.mc-label span { color: #8A97A8; }
.mc-card { display: block; background: #11171E; border: 1px solid #1F2833; border-radius: 10px; }
.mc-inc { padding: 12px 12px 10px; }
.mc-top { display: flex; align-items: center; gap: 8px; font: 700 12px var(--mono); color: #8A97A8; }
.mc-pri { font: 800 12px var(--mono); padding: 2px 6px; border-radius: 3px; color: #000000; background: #FDD835; }
.mc-pri.p1 { background: #E53935; color: #FFFFFF; } .mc-pri.p2 { background: #FB8C00; }
.mc-age { margin-left: auto; color: #C9D3E0; }
.mc-inc h2 { margin: 8px 0 2px; font: 800 21px/1.12 var(--sans); color: #FFFFFF; letter-spacing: .01em; }
.mc-inc h2 em { font-style: normal; font-size: 13px; color: #E53935; }
.mc-addr { font: 700 16px/1.25 var(--sans); color: #FFB300; letter-spacing: .02em; }
.mc-kvs { margin-top: 8px; display: grid; gap: 3px; }
.mc-kv { display: grid; grid-template-columns: 64px 1fr; font-size: 12.5px; }
.mc-kv span { font: 700 10.5px/1.6 var(--mono); color: #5C6B7D; letter-spacing: .1em; } .mc-kv b { font-weight: 600; color: #DCE3EC; }
.mc-units { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mc-chip { font: 800 12px var(--mono); font-style: normal; padding: 3px 7px; border-radius: 3px; color: #FFFFFF; background: color-mix(in srgb, var(--c) 28%, #0B0F14); border: 1px solid var(--c); }
.mc-dim { font: 700 11px var(--mono); color: #5C6B7D; letter-spacing: .08em; }
.mc-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 12px; }
.ip-screen .mc-tools button { height: 36px; border-radius: 6px; background: #1A222C; border: 1px solid #2A3441; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #DCE3EC; }
.ip-screen .mc-tools button.warn { color: #FF7043; border-color: #5A2A1E; }
.ip-screen .mc-tools button.go { background: #1E88E5; border-color: #1E88E5; color: #FFFFFF; }
.mc-form { display: flex; gap: 6px; margin-bottom: 8px; }
.mc-form input { flex: 1; min-width: 0; height: 38px; border-radius: 6px; border: 1px solid #2A3441; background: #0E1319; color: #FFFFFF; padding: 0 10px; font: 600 13px var(--sans); text-transform: uppercase; }
.ip-screen .mc-form button { padding: 0 14px; border-radius: 6px; background: #FFB300; color: #000000; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.mc-log { border-left: 2px solid #1F2833; margin-left: 6px; }
.mc-entry { display: grid; grid-template-columns: 46px 1fr; gap: 6px; padding: 6px 4px 8px 10px; position: relative; font-size: 13px; color: #DCE3EC; line-height: 1.3; }
.mc-entry::before { content: ''; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #2A3441; }
.mc-entry.hot::before { background: #E53935; }
.mc-entry time { font: 700 11.5px/1.6 var(--mono); color: #8A97A8; }
.mc-entry b { display: block; font: 700 10.5px var(--mono); color: #5C6B7D; letter-spacing: .08em; margin-bottom: 1px; }
.mc-none { padding: 18px; text-align: center; font: 700 11px var(--mono); color: #5C6B7D; letter-spacing: .1em; }
.mc-empty { padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mc-empty b { font: 800 22px var(--sans); color: #FFFFFF; } .mc-empty span { font: 700 11px var(--mono); color: #5C6B7D; letter-spacing: .1em; }
.mc-stat { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 30px; background: #0E1319; border-top: 1px solid #1C242E; }
.ip-screen .mc-stat button { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 6px; background: #151C24; border-left: 5px solid var(--c); font: 800 14px var(--sans); letter-spacing: .06em; color: #DCE3EC; }
.ip-screen .mc-stat button small { font: 700 10px var(--mono); letter-spacing: .1em; }
.ip-screen .mc-stat button.next { background: color-mix(in srgb, var(--c) 32%, #151C24); color: #FFFFFF; box-shadow: 0 0 0 1px var(--c); }
.ip-screen .mc-stat button.cur { background: color-mix(in srgb, var(--c) 18%, #151C24); color: #FFFFFF; }
.ip-screen .mc-stat button:disabled:not(.cur) { opacity: .32; }
.ip-screen .mc-row { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; margin-bottom: 6px; text-align: left; }
.mc-row > b { font: 800 17px/1.15 var(--sans); color: #FFFFFF; } .mc-row .mc-addr { font-size: 14px; } .mc-row .mc-units { margin-top: 4px; }
.mc-list { overflow: hidden; }
.mc-urow { display: grid; grid-template-columns: 56px auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #1A222C; border-left: 4px solid var(--c); }
.mc-urow:last-child { border-bottom: none; }
.mc-urow b { font: 800 15px var(--mono); color: #FFFFFF; } .mc-ust { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--c); white-space: nowrap; }
.mc-uinc { font-size: 11.5px; color: #8A97A8; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-screen .mc-pick { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 14px; font-weight: 700; text-align: left; color: #DCE3EC; border-bottom: 1px solid #1A222C; }
.ip-screen .mc-pick:last-child { border-bottom: none; } .ip-screen .mc-pick.hot { color: #FF7043; } .ip-screen .mc-pick.warn { color: #FFB300; }
.mc-pick small { font: 700 10.5px var(--mono); color: #5C6B7D; }