/* SFRP CAD: classic desktop dispatch console look. */
:root {
  --face: #d4d0c8;
  --face-2: #e4e1db;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #404040;
  --title-a: #0a246a;
  --title-b: #3f78c8;
  --title-in-a: #6f7d92;
  --title-in-b: #aab6c6;
  --grid-bg: #000000;
  --grid-text: #e6e6e6;
  --sel: #0a246a;
  --blue: #0072fb;
  --c-avail: #00c000;
  --c-enrt: #00c8d8;
  --c-onsc: #e00000;
  --c-busy: #ff9900;
  --c-unav: #808080;
  --c-pend: #ffff00;
  --c-act: #33cc33;
  --bg: #0e0f12;
  --muted: #9aa3b2;
  --blue-2: #3d95ff;
  --mono: "Lucida Console", Consolas, "Courier New", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #3a6ea5;
  color: #000;
  font: 12px Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: #0033cc; }

/* ---------- Loader ---------- */
/* boot window, looks like the rest of the cad */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, #2c5d99, #10294d 80%);
}
/* only fade when it goes away, popping in has to be instant or you see the page under it */
.loader.done { opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s; }
.loader.updating { z-index: 1200; }
.loader.updating .boot-bar { overflow: hidden; }
.loader.updating .boot-bar span {
  width: 40%;
  clip-path: none;
  animation: updating-bar 0.9s ease-in-out infinite;
}
.boot { width: min(420px, 100%); padding: 2px; animation: boot-in 0.16s ease-out both; }
.boot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--lo);
  box-shadow: 0 1px var(--hi);
}
.boot-head b { display: block; font-size: 13px; }
.boot-head span { display: block; color: #444; font-size: 11px; margin-top: 2px; }
.boot-head img { width: 40px; height: 40px; flex: none; padding: 3px; background: var(--title-a); border: 1px solid #000; }
.boot-body { padding: 12px 16px 12px; }
.boot-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.boot-steps li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; min-height: 16px; color: var(--lo); text-shadow: 1px 1px var(--hi); }
.boot-steps .mark { display: grid; place-items: center; }
.boot-steps li.cur, .boot-steps li.done, .boot-steps li.bad { color: #000; text-shadow: none; }
.boot-steps li.cur { font-weight: bold; }
/* little arrow on the one thats loading */
.boot-steps li.cur .mark::before { content: ''; border: 5px solid transparent; border-left: 6px solid #000; border-right: 0; }
.boot-steps li.done .mark { color: #008000; }
.boot-steps li.bad .mark, .boot-steps li.bad .word { color: #c00000; font-weight: bold; }
.boot-steps .word { font-size: 11px; color: #008000; }
.boot-bar { height: 20px; padding: 2px; background: #fff; }
.boot-bar span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--sel) 0 8px, transparent 8px 10px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s steps(4);
}
.loader-text { margin: 6px 0 0; color: #444; font-size: 11px; }

@keyframes boot-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes updating-bar { from { transform: translateX(-20%); } to { transform: translateX(280%); } }

@media (prefers-reduced-motion: reduce) {
  .boot { animation: none; }
  .boot-bar span, .loader.updating .boot-bar span { transition: none; animation: none; }
}

/* ---------- Bevels and controls ---------- */
.raised {
  background: var(--face);
  border: 1px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #f1efe9;
}
.sunken {
  border: 1px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 72px;
  height: 23px;
  padding: 0 10px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #f1efe9;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active:not(:disabled), .btn.pressed {
  border-color: var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow: inset 1px 1px var(--lo);
  padding-top: 1px;
}
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn:disabled { color: var(--lo); text-shadow: 1px 1px var(--hi); cursor: default; }
.btn-small { min-width: 0; height: 20px; padding: 0 6px; font-size: 11px; }
.btn-default { outline: 1px solid #000; }
.btn-danger { color: #a00000; font-weight: bold; }

input, select, textarea {
  height: 21px;
  padding: 1px 4px;
  background: #fff;
  color: #000;
  border: 1px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk);
  border-radius: 0;
  outline: none;
  min-width: 0;
}
select { padding: 0 2px; }
textarea { height: auto; min-height: 60px; resize: vertical; padding: 3px 4px; }
input:focus, select:focus, textarea:focus { background: #fffff0; }
input[readonly] { background: var(--face-2); }
input[type=checkbox] { height: auto; box-shadow: none; }
.mono { font-family: var(--mono); }

/* ---------- Windows ---------- */
.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 3px 0 6px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff;
  font-weight: bold;
  user-select: none;
  flex: none;
}
.titlebar.inactive { background: linear-gradient(90deg, var(--title-in-a), var(--title-in-b)); }
.titlebar .t-icon { width: 16px; height: 16px; display: grid; place-items: center; font-size: 12px; }
.titlebar .t-icon img { width: 16px; height: 16px; }
.titlebar .t-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-btn {
  width: 16px;
  height: 14px;
  padding: 0;
  display: grid;
  place-items: center;
  font: bold 9px/1 Tahoma, sans-serif;
  background: var(--face);
  color: #000;
  border: 1px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo);
  cursor: pointer;
}

.mainwin {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--face);
}

.menubar { display: flex; gap: 0; padding: 1px 2px; background: var(--face); flex: none; position: relative; z-index: 30; }
.menu { position: relative; }
.menu > button { padding: 2px 7px; background: none; border: 1px solid transparent; cursor: pointer; }
.menu > button:hover, .menu.open > button { border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
.menu.open > button { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  padding: 2px;
  display: none;
  z-index: 40;
}
.menu.open .menu-list { display: block; }
.menu-list button {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 3px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu-list button:hover:not(:disabled) { background: var(--sel); color: #fff; }
.menu-list button:disabled { color: var(--lo); cursor: default; }
.menu-list hr { border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 3px 1px; }

.toolbar {
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 2px 4px;
  border-top: 1px solid var(--hi);
  border-bottom: 1px solid var(--lo);
  flex: none;
  overflow-x: auto;
}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 58px;
  height: 46px;
  padding: 2px 5px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-size: 11px;
}
.tool .ic { font-size: 19px; line-height: 22px; height: 22px; }
.tool .ic svg { width: 22px; height: 22px; display: block; }
.tool:hover:not(:disabled) { border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
.tool:active:not(:disabled), .tool.pressed { border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: var(--face-2); }
.tool:disabled { opacity: 0.45; cursor: default; }
.tool.red { color: #c00000; font-weight: bold; }
.tool-sep { width: 2px; margin: 4px 3px; border-left: 1px solid var(--lo); border-right: 1px solid var(--hi); flex: none; }
.tool-spacer { flex: 1; min-width: 8px; }
.lines { display: flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 11px; }
.line-lamp { width: 30px; height: 22px; display: grid; place-items: center; color: #fff; font-weight: bold; font-size: 10px; border: 1px solid #000; box-shadow: inset 1px 1px rgba(255, 255, 255, 0.35); }

.cmdrow { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-bottom: 1px solid var(--lo); flex: none; flex-wrap: wrap; }
.cmdrow label { font-weight: bold; }
.cmdrow input { width: min(500px, 60vw); font-family: var(--mono); }
.cmdrow .hint { color: #333; font-size: 11px; }
.cmdrow .hint b { font-weight: bold; }

.banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  color: #fff;
  font-weight: bold;
  flex: none;
  flex-wrap: wrap;
}
.banner.panic { background: #7a0000; }
.banner.panic.unacked { animation: panic-flash 0.8s steps(2) infinite; }
.banner.s100 { background: #b36b00; }
.banner.lpr { background: #0e5a3c; }
.banner .code { padding: 0 6px; border: 1px solid #fff; background: #c00000; font-family: var(--mono); }
.banner .msg { flex: 1; min-width: 200px; max-width: none; margin: 0; padding: 0; background: none; border: 0; }
@keyframes panic-flash { 50% { background: #c00000; } }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 50fr 50fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
}
.workspace.dispatch { grid-template-columns: 27fr 25fr 22fr 26fr; }
.workspace.dispatch > .w-calls { grid-column: 1 / 3; }
.workspace.dispatch > .w-units { grid-column: 3 / 5; }
.workspace.dispatch > .w-911 { grid-column: 1 / 2; }
.workspace.dispatch > .w-viewer { grid-column: 2 / 4; }
.workspace.dispatch > .w-map { grid-column: 4 / 5; }
.workspace.mdt { grid-template-columns: 52fr 48fr; grid-template-rows: minmax(0, 1fr); }
.workspace.civ { grid-template-columns: 30fr 70fr; grid-template-rows: minmax(0, 1fr); }
.workspace.law { grid-template-columns: 58fr 42fr; grid-template-rows: minmax(0, 1fr); }
.workspace .col-stack { display: grid; gap: 4px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }

.child { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.child-tools { display: flex; align-items: center; gap: 3px; padding: 3px; flex-wrap: wrap; flex: none; }
.child-tools .sep { width: 6px; }
.child-tools label { display: inline-flex; align-items: center; gap: 4px; }
.child-tools select { height: 20px; }
.child-body { flex: 1; min-height: 0; overflow: auto; margin: 0 3px 3px; }
.child-body.black { background: var(--grid-bg); color: var(--grid-text); }
.child-body.white { background: #fff; }
.child-body.face { background: var(--face); padding: 6px; }
.counters { display: inline-flex; gap: 2px; margin-left: auto; font: bold 11px var(--mono); }
.counters span { padding: 1px 4px; color: #000; border: 1px solid #000; }

.statusbar { display: flex; gap: 2px; padding: 2px; border-top: 1px solid var(--hi); flex: none; overflow: hidden; }
.statusbar > span { padding: 1px 6px; white-space: nowrap; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.statusbar > .grow { flex: 1; }
.statusbar .on { color: #fff; background: #c00000; font-weight: bold; }
.statusbar .train { color: #c00000; font-weight: bold; }

/* ---------- Grids ---------- */
table.grid { width: 100%; border-collapse: collapse; font: 12px var(--mono); color: var(--grid-text); table-layout: auto; }
table.grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 5px;
  background: var(--face);
  color: #000;
  font: 12px Tahoma, sans-serif;
  text-align: left;
  white-space: nowrap;
  border: 1px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
}
table.grid td { padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; border-bottom: 1px solid #141414; }
table.grid tbody tr { cursor: default; }
table.grid tbody tr:hover td { background-color: #161616; }
table.grid tbody tr.sel td { background-color: var(--sel); color: #fff; }
table.grid tbody tr.sel { outline: 1px dotted #fff; outline-offset: -1px; }
table.grid tr.group td { background: #1c1c1c; color: #fff; font-weight: bold; font-family: Tahoma, sans-serif; padding: 3px 5px; }
table.grid tr.p1 td.pri { color: #fff; font-weight: bold; }
table.grid tr.pending td { color: #ffff66; }
table.grid tr.closed td { color: #777; }
table.grid tr.mine td:first-child { box-shadow: inset 3px 0 #3f78c8; }
table.grid tbody tr td.cell { text-align: center; font-weight: bold; color: #000; }
table.grid tr.sel td.cell { color: #000; }
.grid-empty { padding: 8px; color: #999; font: 12px var(--mono); }

.st-active { background: var(--c-act) !important; }
.st-pending { background: var(--c-pend) !important; }
.st-closed { background: #555 !important; color: #ddd !important; }
.st-available { background: var(--c-avail) !important; }
.st-enroute { background: var(--c-enrt) !important; }
.st-onscene { background: var(--c-onsc) !important; color: #fff !important; }
.st-busy { background: var(--c-busy) !important; }
.st-unavailable { background: var(--c-unav) !important; color: #000 !important; }
.st-panic { background: #ff0000 !important; color: #fff !important; animation: panic-cell 0.8s steps(2) infinite; }
@keyframes panic-cell { 50% { background: #800000 !important; } }
.tx-available { color: #33ff33; }
.tx-enroute { color: #33e6ff; }
.tx-onscene { color: #ff4040; }
.tx-busy { color: #ffad33; }
.tx-unavailable { color: #9a9a9a; }
.tx-panic { color: #ff3030; font-weight: bold; }

/* ---------- Forms, tabs and group boxes ---------- */
.tabs { display: flex; gap: 0; padding: 4px 4px 0; flex: none; }
.tab {
  padding: 2px 10px;
  margin-right: -1px;
  background: var(--face);
  border: 1px solid;
  border-bottom: 0;
  border-color: var(--hi) var(--dk) transparent var(--hi);
  cursor: pointer;
  position: relative;
  top: 2px;
}
.tab.active { top: 0; padding-bottom: 4px; font-weight: bold; z-index: 1; background: var(--face); }
.tab-page { flex: 1; min-height: 0; overflow: auto; margin: 0 4px 4px; padding: 8px; border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); }

fieldset.group { margin: 0 0 8px; padding: 4px 8px 8px; border: 1px solid var(--lo); box-shadow: 1px 1px var(--hi), inset 1px 1px var(--hi); min-width: 0; }
fieldset.group legend { padding: 0 3px; color: #0a246a; }
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.groups > .full { grid-column: 1 / -1; }
.frow { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 4px; margin-top: 3px; }
.frow > label { text-align: right; white-space: nowrap; }
.frow.wide { grid-template-columns: 1fr; }
.frow.wide > label { text-align: left; }
.btnrow { display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; flex-wrap: wrap; }
.btnrow.left { justify-content: flex-start; }
.mini-grid { background: #000; max-height: 140px; overflow: auto; }
.side-btns { display: grid; gap: 4px; align-content: start; }
.unit-box { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 6px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 10px; }
.kv div { display: flex; gap: 4px; }
.kv b { white-space: nowrap; }
.flag { display: inline-block; padding: 0 4px; margin: 0 2px; font: bold 11px var(--mono); border: 1px solid #000; color: #000; }
.flag.red { background: #ff4040; color: #fff; }
.flag.amber { background: #ffcc00; }
.flag.green { background: #33cc33; }
.flag.gray { background: #c0c0c0; }
.flag.blue { background: #66b3ff; }
.flag.purple { background: #b38cff; }
.result { margin-bottom: 8px; padding: 6px; background: #fff; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.result h4 { margin: 0 0 4px; font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.result .sec { margin: 6px 0 2px; font-weight: bold; color: #0a246a; border-bottom: 1px solid #c0c0c0; }
.result table.grid { font-size: 11px; }
.result .mini-grid { max-height: none; }
.empty { color: #555; padding: 6px; }
.notes-list { font: 12px var(--mono); background: #000; color: #e6e6e6; padding: 4px; min-height: 80px; }
.notes-list div { padding: 1px 0; }
.notes-list b { color: #66b3ff; font-weight: normal; }

/* ---------- Live map ---------- */
.map-wrap { position: relative; flex: 1; min-height: 0; margin: 0 3px; background: #0d1a12; overflow: hidden; cursor: grab; }
.map-wrap:active { cursor: grabbing; }
.map-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; color: #8fb39a; font: 12px var(--mono); pointer-events: none; }
.map-foot { display: flex; gap: 2px; padding: 2px 3px 3px; flex: none; }
.map-foot span { padding: 0 5px; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); white-space: nowrap; }

/* ---------- Dialog windows ---------- */
.dlg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.dlg-layer.modal { pointer-events: auto; background: rgba(0, 0, 0, 0.15); }
.dlg {
  position: fixed;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 8px);
  pointer-events: auto;
  padding: 2px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35), inset -1px -1px var(--lo), inset 1px 1px #f1efe9;
}
.dlg .titlebar { cursor: move; }
.dlg-body { padding: 8px; overflow: auto; min-height: 0; }
.dlg-body p { margin: 0 0 8px; }

/* ---------- Center screens (sign in, console picker) ---------- */
.desktop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: radial-gradient(circle at 50% 40%, #2c5d99, #10294d 80%);
  overflow: auto;
}
.desk-logo { position: fixed; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.75); font-weight: bold; pointer-events: none; }
.desk-logo img { width: 40px; height: 40px; opacity: 0.85; }
.signin { width: min(430px, 100%); padding: 2px; }
.signin-body { display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; padding: 14px 12px 12px; }
.signin-body img { width: 48px; height: 48px; background: #0a246a; border: 1px solid #000; padding: 3px; }
.signin-body h1 { margin: 0; font-size: 13px; }
.signin-body p { margin: 2px 0 0; }
.signin-body .err { color: #c00000; font-weight: bold; }
.signin-body .btnrow { grid-column: 1 / -1; }
.picker { width: min(680px, 100%); padding: 2px; }
.picker-body { padding: 10px; }
/* log on screen for units and dispatch, sits under the loader */
.logon-screen { z-index: 900; }
.logon { width: min(440px, 100%); padding: 2px; }
.logon-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(90deg, var(--title-a), #10294d); color: #fff; }
.logon-banner img { width: 48px; height: 48px; flex: none; }
.logon-banner b { display: block; font-size: 18px; }
.logon-banner span { display: block; color: #c7d3ea; font-size: 12px; margin-top: 1px; }
.logon-strip { height: 4px; background: var(--cb, var(--title-b)); }
.logon-body { padding: 12px 16px; }
.logon-body .frow { grid-template-columns: 80px minmax(0, 1fr); margin-top: 6px; }
.logon-body input[readonly] { color: #444; }
.logon-note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding: 6px 8px; background: #ffffe1; border: 1px solid var(--lo); }
.logon-note.ok { background: #eef8ee; }
.logon-body .btnrow { padding-top: 12px; }
.consoles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 8px; bottom: 30px; z-index: 1100; display: grid; gap: 4px; max-width: calc(100vw - 16px); pointer-events: none; }
.toasts > * { pointer-events: auto; }
.toast { padding: 6px 10px; background: #ffffe1; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); animation: toast-in 0.15s ease-out; }
.toast.error { background: #ffe1e1; color: #800000; font-weight: bold; }
.toast.ok { background: #e6ffe6; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Small screens ---------- */
/* phones (and phone landscape) stack the panels and scroll the page, same test as STACK in cad-pip.js */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  body { overflow: auto; }
  .mainwin { position: static; min-height: 100vh; }
  .workspace, .workspace.dispatch, .workspace.mdt, .workspace.civ, .workspace.law { display: flex; flex-direction: column; }
  .workspace .child { min-height: 320px; }
  .workspace .col-stack { display: flex; flex-direction: column; }
  .groups { grid-template-columns: 1fr; }
  .consoles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmdrow .hint { display: none; }
  .lines { display: none; }
}

.dlg .frow { grid-template-columns: 105px minmax(0, 1fr); }
.dlg .groups { gap: 0 12px; }
.dlg .check-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ref-table { max-height: 60vh; overflow: auto; background: #000; }
.tone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tone-grid .btn { height: 34px; }
.timer-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.timer-row .t { font: bold 16px var(--mono); min-width: 80px; }
.timer-row .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   Round 3: custom icons, one-color console buttons, MDTs, civilian
   ===================================================================== */

.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.ic svg { display: block; }
.grow { flex: 1; }
.muted { color: #555; font-size: 11px; margin: 4px 0 0; }
.neg { color: #c00000 !important; }
html[data-font=large] body { font-size: 14px; }
html[data-font=large] table.grid { font-size: 14px; }
html[data-font=large] .tool { font-size: 12px; }

/* ---------- Console picker: one solid color per console ---------- */
.picker-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--lo); box-shadow: 0 1px var(--hi); }
.picker-head .avatar { width: 40px; height: 40px; border: 1px solid #000; background: #0a246a; }
.picker-head b { display: block; font-size: 13px; }
.picker-head small { color: #444; }
.console-btn {
  --cb: #555;
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
  text-align: left;
  color: #fff;
  background: var(--cb);
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: filter 0.12s, transform 0.06s;
}
.console-btn:hover:not(:disabled) { filter: brightness(1.12); }
.console-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4); }
.console-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.console-btn .cb-icon { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); }
.console-btn .cb-icon svg { width: 32px; height: 32px; }
.console-btn b { display: block; font-size: 14px; letter-spacing: 0.02em; }
.console-btn small { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.85); font-size: 11px; }
.console-btn .cb-lock { position: absolute; top: 5px; right: 6px; padding: 0 4px; font: bold 9px var(--mono); color: #fff; background: rgba(0, 0, 0, 0.45); }
.console-btn:disabled { cursor: not-allowed; filter: grayscale(0.85) brightness(0.9); opacity: 0.6; }
.cb-civilian { --cb: #2e8b47; }
.cb-dispatcher { --cb: #6a3db0; }
.cb-police { --cb: #1f58b8; }
.cb-fire { --cb: #c0281f; }
.cb-dot { --cb: #dc7400; }
.cb-law { --cb: #7d6220; }

/* ---------- Chrome extras ---------- */
.menu-list .mi-ic { width: 18px; display: inline-flex; justify-content: center; margin: 0 4px 0 -14px; }
.menu-list button { justify-content: flex-start; }
.menu-list button > span:nth-child(2) { flex: 1; }
.titlebar .t-icon .ic svg { width: 16px; height: 16px; }
.statusbar .click { cursor: pointer; }
.statusbar .click:hover { background: var(--face-2); }
.statusbar .warn { color: #a00000; font-weight: bold; }
.banner.notice { background: #0a5aa8; }
.counters.plain { margin-left: auto; font: 11px Tahoma, sans-serif; color: #000; }
.child-tools .st-btn { color: #000; background: var(--st); font-weight: bold; }
.btn .ic svg { width: 16px; height: 16px; }
.inline-form { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.inline-check { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; white-space: nowrap; }
.empty.big { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: #444; }
.empty.big .ic svg { width: 40px; height: 40px; }
.acts { display: inline-flex; gap: 2px; }
.notes-list .pub b { color: #ffcc33; }
.notes-list.tall { max-height: 220px; overflow: auto; }
.mini-grid.tall { max-height: none; }
.tab-page.flush { margin: 0; padding: 0; border: 0; }
.tabs.sub { padding: 6px 0 0; flex-wrap: wrap; }
.tabs.sub .tab { font-size: 11px; }
.kv.one { grid-template-columns: 1fr; }
.notepad { width: 100%; min-height: 320px; font-family: var(--mono); background: #fffde8; }

/* ---------- Grids: drag to assign, 911 lines ---------- */
body.dragging-unit table.grid tr.p1, body.dragging-unit table.grid tr.p2, body.dragging-unit table.grid tr.p3, body.dragging-unit table.grid tr.p4 { outline: 1px dashed #3f78c8; outline-offset: -1px; }
table.grid tr[draggable=true] { cursor: grab; }
table.grid tbody tr.drop td { background: #1e4d1e !important; color: #fff; }
.drop-zone { outline: 1px dashed #3f78c8; }
table.grid tr.idle td { color: #555; }
.blink { animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
table.grid tr.p4 td.pri { color: #9a9a9a; }
td.tri-red { background: #e01e1e !important; color: #fff !important; }
td.tri-yellow { background: #ffd400 !important; }
td.tri-green { background: #2fbf4a !important; }
td.tri-black { background: #111 !important; color: #fff !important; border: 1px solid #555; }

/* ---------- Suggested units ---------- */
.suggest { margin: 0 0 8px; padding: 6px; background: #f6f9ff; border: 1px solid #9fb6d8; }
.suggest-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.suggest-head small { color: #555; }
.suggest-row { display: grid; grid-template-columns: 20px 70px minmax(0, 1fr) 50px auto; align-items: center; gap: 6px; padding: 2px 0; font-family: var(--mono); border-top: 1px solid #dfe7f3; }
.suggest-row .rank { width: 18px; height: 18px; display: grid; place-items: center; background: #0a246a; color: #fff; font-size: 10px; }
.suggest-row .cs { font-weight: bold; background: #000; padding: 0 4px; }
.suggest-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-row .dist { text-align: right; color: #333; }

/* ---------- Dispatcher top right ---------- */
.lines .line-lamp { cursor: pointer; padding: 0; }
.line-lamp.idle { background: #3a3a3a; color: #888; }
.line-lamp.ringing { background: #e00000; animation: blink 0.7s steps(2) infinite; }
.line-lamp.ring311 { background: #1f6fd6; animation: blink 1.2s steps(2) infinite; }
.line-lamp.answered { background: #00a000; }
.line-lamp.hold { background: #e0a000; color: #000; }
.status-box { display: flex; align-items: center; gap: 6px; margin: 2px 6px; padding: 3px 8px; background: #101820; color: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #000; }
.status-box .sb-unit { display: flex; align-items: center; gap: 5px; }
.status-box .sb-unit b { font: bold 14px var(--mono); }
.status-box .sb-unit small { color: #9fb6d8; }
.status-box .sb-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.status-box .sb-label { font: bold 11px var(--mono); color: #ffcc33; }
.status-box select { height: 20px; }

.workspace.dispatch.layout-map { grid-template-columns: 26fr 24fr 50fr; grid-template-rows: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.workspace.dispatch.layout-map > .w-calls { grid-column: 1 / 3; grid-row: 1; }
.workspace.dispatch.layout-map > .w-units { grid-column: 1 / 3; grid-row: 2; }
.workspace.dispatch.layout-map > .w-911 { grid-column: 1 / 2; grid-row: 3; }
.workspace.dispatch.layout-map > .w-viewer { grid-column: 2 / 3; grid-row: 3; }
.workspace.dispatch.layout-map > .w-map { grid-column: 3 / 4; grid-row: 1 / 4; }
.workspace.dispatch.layout-nomap { grid-template-columns: 30fr 25fr 45fr; }
.workspace.dispatch.layout-nomap > .w-calls { grid-column: 1 / 3; }
.workspace.dispatch.layout-nomap > .w-units { grid-column: 3 / 4; }
.workspace.dispatch.layout-nomap > .w-911 { grid-column: 1 / 2; }
.workspace.dispatch.layout-nomap > .w-viewer { grid-column: 2 / 4; }

/* ---------- Live map ---------- */
.map-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.map-tools { display: flex; align-items: center; gap: 4px; padding: 3px; flex-wrap: wrap; flex: none; }
.map-tools label { display: inline-flex; align-items: center; gap: 3px; }
.map-view.compact .map-tools { gap: 2px; font-size: 11px; }
.map-wrap { background: #1b2a33; }
.map-dialog { height: min(72vh, 760px); display: flex; flex-direction: column; }
.child > .map-view { margin: 0 0 0; }

/* ---------- Lookup returns ---------- */
.lookup-results { margin-top: 6px; }
.term { margin: 0 0 6px; padding: 6px 8px; background: #000; color: #33ff66; font: 12px/1.45 var(--mono); border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); white-space: pre-wrap; }
.term-line.miss { color: #ffcc33; }
.term-line.ok { color: #33ff66; }
.term-line.warn { color: #ffad33; }
.hit { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 4px 8px; font: bold 12px var(--mono); color: #fff; border: 1px solid #000; }
.hit.red { background: #c00000; animation: hit-flash 1s steps(2) 3; }
.hit.amber { background: #e0a000; color: #000; }
.hit.purple { background: #7a2fc0; }
@keyframes hit-flash { 50% { background: #ff3030; } }
.person-top { display: flex; gap: 10px; align-items: flex-start; }
.mug { width: 84px; height: 100px; object-fit: cover; background: #e3e8ee; border: 1px solid #000; flex: none; }
.mug.blank { display: grid; place-items: center; }
.card-head { font-size: 11px; color: #555; font-weight: bold; margin-bottom: 2px; }

/* ---------- Unit MDT top bar ---------- */
.mdt-top {
  --accent: #1f58b8;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 5px 6px;
  background: linear-gradient(#1a2430, #0e151d);
  color: #fff;
  border-bottom: 2px solid var(--accent);
  flex: none;
  overflow-x: auto;
}
.mdt-top.role-fire { --accent: #c0281f; }
.mdt-top.role-dot { --accent: #dc7400; }
.unit-badge { display: flex; align-items: center; gap: 8px; padding: 2px 10px 2px 6px; background: var(--accent); border: 1px solid #000; min-width: 170px; }
.unit-badge.off { background: #444; }
.unit-badge .ic svg { width: 28px; height: 28px; }
.unit-badge b { display: block; font: bold 18px var(--mono); letter-spacing: 0.04em; }
.unit-badge small { display: block; font-size: 10px; opacity: 0.9; white-space: nowrap; }
.st-display { display: grid; align-content: center; min-width: 108px; padding: 2px 8px; background: #000; border: 1px solid #444; border-left: 6px solid var(--st); }
.st-display b { font: bold 18px var(--mono); color: var(--st); }
.st-display small { font-size: 10px; color: #ccc; }
.st-display .loc { color: #8fb3ff; }
.st-buttons { display: flex; gap: 3px; }
.st-btn { display: grid; place-content: center; min-width: 54px; padding: 2px 6px; cursor: pointer; color: #000; background: var(--st); border: 1px solid #000; box-shadow: inset 1px 1px rgba(255, 255, 255, 0.45), inset -1px -1px rgba(0, 0, 0, 0.35); text-align: center; }
.mdt-top .st-btn { opacity: 0.55; }
.mdt-top .st-btn:hover { opacity: 0.85; }
.mdt-top .st-btn.on { opacity: 1; outline: 2px solid #fff; outline-offset: -3px; }
.st-btn b { font: bold 13px var(--mono); }
.st-btn small { font-size: 9px; font-weight: bold; }
.mdt-actions { display: flex; gap: 3px; }
.mdt-act { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 76px; padding: 2px 8px; color: #fff; background: #2a3846; border: 1px solid #000; box-shadow: inset 1px 1px rgba(255, 255, 255, 0.18); cursor: pointer; font-size: 11px; white-space: nowrap; }
.mdt-act:hover { background: #364a5e; }
.mdt-act.big { min-width: 110px; background: #1f7a35; font-weight: bold; }
.mdt-call { display: grid; align-content: center; padding: 2px 10px; color: #000; background: #ffd400; border: 1px solid #000; cursor: pointer; text-align: left; }
.mdt-call b { font: bold 15px var(--mono); }
.mdt-call small { font-size: 10px; font-weight: bold; }
.panic-btn { display: flex; align-items: center; gap: 6px; padding: 0 16px; color: #fff; background: #b00000; border: 2px solid #000; box-shadow: inset 1px 1px rgba(255, 255, 255, 0.35), 0 0 0 1px #ff5a5a; cursor: pointer; }
.panic-btn b { font: bold 16px Tahoma, sans-serif; letter-spacing: 0.08em; }
.panic-btn:hover { background: #d40000; }
.panic-btn.on { animation: panic-flash 0.8s steps(2) infinite; }

/* ---------- Tabbed MDT ---------- */
.workspace.mdt-tabbed { grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); grid-template-rows: minmax(0, 1fr); }
.mdt-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mdt-tabs { display: flex; gap: 2px; padding: 4px 4px 0; flex: none; overflow-x: auto; background: #2a3846; }
.mdt-tab { display: flex; align-items: center; gap: 5px; padding: 6px 12px; color: #dbe5f0; background: #1a2430; border: 1px solid #000; border-bottom: 0; cursor: pointer; font-weight: bold; white-space: nowrap; }
.mdt-tab:hover { background: #22303e; }
.mdt-tab.active { color: #000; background: var(--face); }
.mdt-tab .badge { min-width: 16px; padding: 0 4px; font: bold 10px var(--mono); color: #000; background: #ffd400; border: 1px solid #000; }
.mdt-tab .badge.green { background: #33cc33; }
.mdt-page { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.mdt-page > .tab-split { height: 100%; }
.mdt-side { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.mdt-side > .child { flex: 1; }
.tab-split { display: grid; grid-template-rows: minmax(160px, 0.9fr) minmax(0, 1.1fr); gap: 4px; min-height: 480px; }
.tab-win { display: flex; height: 100%; min-height: 360px; }
.tab-win > .child { flex: 1; }

.call-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; color: #fff; background: #1a2430; border: 1px solid #000; border-left: 8px solid #ffd400; }
.call-head.p1 { border-left-color: #ff2020; }
.call-head.p3, .call-head.p4 { border-left-color: #33cc33; }
.call-head .num { font: bold 24px var(--mono); }
.call-head .ttl b { display: block; font: bold 16px Tahoma, sans-serif; }
.call-head .ttl small, .call-head .where small { color: #b9c7d6; }
.call-head .where { text-align: right; }
.call-head .where b { display: block; font: bold 16px var(--mono); color: #ffd400; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.steps .btn.step { border-left: 6px solid var(--st); font-weight: bold; }
.unit-chips { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
.chip { display: inline-flex; gap: 4px; padding: 1px 6px; font: 11px var(--mono); background: #000; color: #fff; border-left: 4px solid var(--st); }
.details-text { white-space: pre-wrap; font-family: var(--mono); background: #fff; padding: 4px; min-height: 36px; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

.bolo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.bolo-card { padding: 6px 8px; background: #fff; border: 1px solid #000; border-top: 6px solid #7a2fc0; }
.bolo-card.vehicle { border-top-color: #1f58b8; }
.bc-head { display: flex; align-items: center; gap: 6px; }
.bc-head small { margin-left: auto; color: #555; }
.bc-subj { margin: 4px 0; font: bold 13px var(--mono); }
.bc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

.triage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 3px 0; }
.tri { padding: 4px 0; font-weight: bold; border: 1px solid #000; cursor: pointer; opacity: 0.5; }
.tri.on { opacity: 1; outline: 2px solid #000; outline-offset: -4px; }
.tri.red { background: #e01e1e; color: #fff; }
.tri.yellow { background: #ffd400; }
.tri.green { background: #2fbf4a; }
.tri.black { background: #111; color: #fff; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 3px 6px; }
.vitals-in input { width: 70px; }
.tow-card h4 .ic svg { width: 20px; height: 20px; }

.backup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.backup-btn { display: grid; height: 60px; justify-items: center; }
.backup-btn.amber { background: #ffd27a; }
.backup-btn.red { background: #ff8a80; }

.messages { display: flex; flex-direction: column; min-height: 300px; height: 100%; }
.msg-list { flex: 1; min-height: 200px; max-height: 60vh; overflow: auto; padding: 6px; background: #fff; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.msg { max-width: 80%; margin: 0 0 6px; padding: 4px 8px; background: #eef2f7; border: 1px solid #c3cdd8; }
.msg.out { margin-left: auto; background: #dff0ff; border-color: #9fc5ea; }
.msg.urgent { background: #ffe1e1; border-color: #c00000; font-weight: bold; }
.msg-meta { font-size: 10px; color: #555; }
.radio { display: flex; flex-direction: column; gap: 6px; min-height: 280px; }
.radio-channels, .radio-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.radio-ch, .radio-code { padding: 3px 8px; background: #e7e7e7; border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); cursor: pointer; }
.radio-ch.on { background: #1f58b8; color: #fff; }
.radio-log { flex: 1; min-height: 160px; max-height: 46vh; overflow: auto; padding: 6px; background: #101820; color: #d6ffe4; font-family: Consolas, "Courier New", monospace; }
.radio-line { margin: 0 0 4px; }
.radio-line.mine { color: #fff3b0; }
.radio-send { display: flex; gap: 4px; }
.radio-send input { flex: 1; }

/* ---------- Civilian ---------- */
.civ-right { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.big-call { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; color: #fff; border: 1px solid #000; box-shadow: inset 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px rgba(0, 0, 0, 0.3); cursor: pointer; text-align: left; }
.big-call b { display: block; font: bold 16px Tahoma, sans-serif; line-height: 1; }
.big-call small { font-size: 10px; }
.big-call .ic svg { filter: brightness(0) invert(1); }
.big-call.red { background: #c0281f; }
.big-call.blue { background: #1f58b8; }
.big-call:hover { filter: brightness(1.12); }
.btn.phone911 { color: #a00000; font-weight: bold; }
.btn.phone311 { color: #0a3a8a; font-weight: bold; }
.workspace.civ { grid-template-columns: minmax(230px, 26fr) 74fr; }
.w-civlist .child-body { padding: 3px; }
.civ-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; margin-bottom: 2px; text-align: left; background: #fff; border: 1px solid #c8ced6; cursor: pointer; }
.civ-row:hover { background: #f1f5fb; }
.civ-row.sel { background: var(--sel); color: #fff; border-color: #000; }
.civ-row img { width: 32px; height: 32px; object-fit: cover; border: 1px solid #000; }
.civ-row .cr-text { min-width: 0; }
.civ-row b, .civ-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civ-row small { font-size: 11px; opacity: 0.8; }
.civ-row .cr-right { text-align: right; }
.civ-row .cr-right small { font-family: var(--mono); }
.active-pill { display: inline-block; padding: 0 5px; font: bold 9px var(--mono); color: #000; background: #33cc33; border: 1px solid #000; }
.w-civ .child-body { display: flex; flex-direction: column; }
.civ-top { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 10px; padding: 6px 4px 8px; }
.civ-side { display: grid; align-content: start; gap: 6px; }
.civ-top { grid-template-columns: minmax(320px, 480px) minmax(0, 1fr); }
/* georgia drivers license, sizes go with the card width */
.dl-wrap { display: grid; gap: 4px; align-content: start; }
.ga-dl { position: relative; isolation: isolate; container-type: inline-size; aspect-ratio: 1.586; overflow: hidden; border-radius: 1.8cqw; border: 1px solid #9aa88c; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); color: #141414; font-family: Arial, Helvetica, sans-serif;
  background:
    repeating-radial-gradient(circle at 30% 60%, rgba(110, 140, 90, 0.08) 0 0.2cqw, transparent 0.2cqw 1.2cqw),
    repeating-linear-gradient(118deg, rgba(120, 150, 100, 0.08) 0 0.2cqw, transparent 0.2cqw 1.5cqw),
    radial-gradient(ellipse at 0% 100%, rgba(150, 190, 140, 0.35), transparent 55%),
    linear-gradient(180deg, #eef2da 0%, #e6efd5 55%, #efe9cf 100%); }
/* the big peach and its leaf, behind everything */
.ga-dl::before { content: ''; position: absolute; z-index: -1; right: -7cqw; bottom: -10cqw; width: 50cqw; height: 47cqw; border-radius: 52% 48% 50% 50%; opacity: 0.6;
  background: radial-gradient(circle at 70% 75%, #f7c27a 0 22%, transparent 55%), radial-gradient(circle at 32% 32%, #f4a07e, #ec7f6a 55%, #e2685f 80%); }
.ga-dl::after { content: ''; position: absolute; z-index: -1; right: 24cqw; top: 19cqw; width: 30cqw; height: 13cqw; border-radius: 0 100% 0 100%; opacity: 0.4; transform: rotate(-18deg); background: linear-gradient(135deg, #a9cf8f, #6f9f58); }
.ga-dl.bad { filter: grayscale(0.35); }
.ga-top { position: relative; display: flex; align-items: center; gap: 2cqw; height: 12.5cqw; padding: 1.2cqw 3cqw 0; border-bottom: 0.25cqw solid rgba(150, 170, 120, 0.45); background: linear-gradient(180deg, rgba(255, 255, 250, 0.7), rgba(240, 244, 222, 0.2)); }
/* faint mountains up top */
.ga-top::after { content: ''; position: absolute; z-index: -1; left: 40cqw; top: 1.5cqw; width: 32cqw; height: 6cqw; opacity: 0.55; background: #d9ceb0; clip-path: polygon(0 100%, 10% 45%, 20% 70%, 33% 12%, 47% 62%, 60% 28%, 74% 72%, 86% 40%, 100% 100%); }
.ga-brand { display: grid; line-height: 1; }
.ga-brand b { display: flex; align-items: center; gap: 0.6cqw; font: bold 6.6cqw Arial, Helvetica, sans-serif; color: #33384a; letter-spacing: 0.01em; }
/* rough georgia shape */
.ga-state { width: 4.2cqw; height: 5.2cqw; background: rgba(214, 74, 96, 0.75); clip-path: polygon(0 0, 62% 0, 64% 10%, 74% 22%, 86% 40%, 100% 58%, 96% 74%, 98% 100%, 18% 96%, 14% 78%, 10% 42%); }
.ga-brand small { margin-top: 0.4cqw; font: bold 2.3cqw Arial, sans-serif; color: #a8243e; letter-spacing: 0.06em; }
.ga-title { margin-left: auto; padding-top: 4cqw; font: bold 3.3cqw Arial, sans-serif; letter-spacing: 0.03em; color: #2a2a2a; }
.ga-corner { display: flex; align-items: center; gap: 1.2cqw; margin-left: 2cqw; }
.ga-dlmark { font: bold 3.6cqw Arial, sans-serif; color: #2a2e3a; }
.ga-star { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5058, #23272d 70%); color: #f3f3f3; font-size: 4.4cqw; line-height: 1; }
.ga-usa { align-self: flex-start; font: bold 2.1cqw/1.1 Arial, sans-serif; color: #c4304e; text-align: center; }
/* where the commissioner would sign */
.ga-side { position: absolute; left: 0.8cqw; top: 16cqw; height: 30cqw; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: bold 1.6cqw Arial, sans-serif; letter-spacing: 0.12em; color: rgba(40, 50, 40, 0.55); }
.ga-main { display: grid; grid-template-columns: 24cqw minmax(0, 1fr); gap: 3cqw; height: 43cqw; padding: 1.2cqw 3cqw 0 4.4cqw; }
.ga-left { display: flex; flex-direction: column; gap: 0.6cqw; min-height: 0; }
.ga-photo { width: 24cqw; flex: 1; min-height: 0; object-fit: cover; object-position: center 20%; background: linear-gradient(180deg, #d4dccf, #aab8a6); border: 1px solid rgba(0, 0, 0, 0.3); }
.ga-photo.blank, .ga-ghost.blank { display: grid; place-items: center; color: #6b7c8e; }
.ga-sig { font: italic 3.8cqw 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive; color: #1d1d24; white-space: nowrap; overflow: hidden; }
.ga-mid { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; padding-right: 15cqw; position: relative; }
.ga-pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2cqw; }
.ga-mid > .ga-pair { margin-right: -15cqw; }
.ga-f { display: flex; align-items: baseline; gap: 0.9cqw; white-space: nowrap; min-width: 0; }
.ga-f i { font: bold 1.9cqw Arial, sans-serif; font-style: normal; color: #2b2b2b; min-width: 2.6cqw; }
.ga-f small { font: bold 2.1cqw Arial, sans-serif; color: #2b2b2b; min-width: 6.4cqw; }
.ga-f b { font: 2.9cqw Arial, sans-serif; color: #1e1e1e; overflow: hidden; text-overflow: ellipsis; }
.ga-f.big b { font-size: 3.5cqw; }
.ga-names { display: grid; gap: 0.2cqw; }
.ga-f.first b { font-size: 3.3cqw; }
.ga-f.last b { font: bold 3.7cqw Arial, sans-serif; }
.ga-f.addr b { font: 2.8cqw/1.15 Arial, sans-serif; white-space: normal; }
.ga-stack { display: grid; gap: 0.3cqw; }
.ga-ghostbox { position: absolute; right: 4cqw; bottom: 7cqw; display: grid; justify-items: center; }
.ga-ghost { width: 11cqw; height: 13.5cqw; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(0.85); opacity: 0.5; mix-blend-mode: multiply; }
.ga-ghostbox small { margin-top: -3.4cqw; font: bold 2cqw Arial, sans-serif; color: rgba(40, 40, 40, 0.6); letter-spacing: 0.04em; }
.ga-bottom { position: absolute; left: 4.4cqw; right: 3cqw; bottom: 2cqw; display: flex; align-items: baseline; gap: 2cqw; }
.ga-dd { display: inline-flex; align-items: baseline; gap: 0.8cqw; font: 2.6cqw Arial, sans-serif; color: #1e1e1e; letter-spacing: 0.02em; }
.ga-dd i { font: bold 1.9cqw Arial, sans-serif; font-style: normal; }
.ga-dd small { font: bold 2.1cqw Arial, sans-serif; }
.ga-vet { font: bold 2.5cqw Arial, sans-serif; color: #a3141c; letter-spacing: 0.06em; }
.ga-donor { font: bold 2.7cqw Arial, sans-serif; color: #a3141c; }
.ga-donor span { font-size: 3.2cqw; }
.ga-stamp { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-14deg); padding: 0.6cqw 3cqw; border: 0.8cqw solid rgba(190, 20, 30, 0.75); color: rgba(190, 20, 30, 0.8); font: bold 8cqw Arial, sans-serif; letter-spacing: 0.08em; pointer-events: none; }
.dl-phone { font: 12px var(--mono); }
.dl-foot { display: flex; align-items: center; gap: 4px; padding: 2px 2px 0; }
.dl-foot .bal { display: inline-flex; align-items: center; gap: 4px; font: bold 13px var(--mono); }
.info-line { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #eef4ff; border: 1px solid #9fb6d8; }
.info-line.ok { background: #eaf8ec; border-color: #8fc79a; }
.info-line.warn { background: #fff6dc; border-color: #d8b860; }
.info-line .btn { margin-left: auto; }
.w-civ .tabs { padding-left: 0; }
.w-civ .tab-page { margin: 0; flex: 1; }
.stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.stat { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #fff; border: 1px solid #b9c2cc; }
.stat small { display: block; font-size: 10px; color: #555; }
.stat b { font: bold 13px var(--mono); }
.stat.green b { color: #1f7a35; }
.stat.red b { color: #b00000; }
.stat.amber b { color: #a06a00; }
.action-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 8px; }
.action-card { display: grid; gap: 6px; justify-items: start; padding: 10px; background: #fff; border: 1px solid #b9c2cc; }
.action-card .ic svg { width: 36px; height: 36px; }
.action-card p { margin: 2px 0 0; color: #444; }
.dmv-banner { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; color: #fff; background: linear-gradient(90deg, #17366c, #2f6fd6); border: 1px solid #000; }
.dmv-banner p { margin: 2px 0 0; color: #dbe5f5; }
.dmv-banner .btn { margin-left: auto; }
.dmv-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-top: 4px; background: #fff; border: 1px solid #c8ced6; border-left: 5px solid #2fbf4a; }
.dmv-row.reg-due { border-left-color: #ffb000; }
.dmv-row.reg-expired { border-left-color: #e01e1e; background: #fff5f5; }
.dmv-row.reg-suspended { border-left-color: #000; background: #f3f3f3; }
.bank-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; color: #fff; background: linear-gradient(90deg, #1f5a32, #2e8b47); border: 1px solid #000; }
.bank-head small { display: block; font-size: 11px; opacity: 0.85; }
.bank-head b { font: bold 24px var(--mono); }
.bank-head b.small { font-size: 15px; }
.bank-head b.neg { color: #ffb4b4 !important; }
.my-call { margin-bottom: 8px; padding: 6px 8px; background: #fff; border: 1px solid #b9c2cc; border-left: 5px solid #ffb000; }
.my-call.active { border-left-color: #2fbf4a; }
.my-call.closed { border-left-color: #999; opacity: 0.85; }
.mc-head { display: flex; align-items: center; gap: 6px; }
.mc-sub { margin: 2px 0 4px; color: #444; font-size: 11px; }
.sms { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; padding: 6px; background: #f1f3f6; border: 1px solid #d0d6de; }
.bubble { max-width: 78%; padding: 4px 8px; border-radius: 10px; background: #fff; border: 1px solid #ccd3dc; white-space: pre-wrap; }
.bubble small { display: block; font-size: 9px; color: #666; }
.bubble.me { align-self: flex-end; background: #2f6fd6; color: #fff; border-color: #17366c; }
.bubble.me small { color: #dbe5f5; }
.svc-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 4px; }
.svc { display: grid; justify-items: center; gap: 2px; padding: 6px; background: var(--face); border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); cursor: pointer; }
.svc.on { background: #fff; outline: 2px solid #c0281f; outline-offset: -2px; font-weight: bold; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .workspace.mdt-tabbed { display: flex; flex-direction: column; }
  .mdt-side { min-height: 360px; }
  .civ-top { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consoles { grid-template-columns: 1fr; }
  .call-head { grid-template-columns: 1fr; }
  .call-head .where { text-align: left; }
  .tab-split { display: flex; flex-direction: column; }
  .civ-right .big-call small { display: none; }
}
.tow-card .kv { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tb-btn svg { display: block; }

/* Map directions */
.map-tools .route-info { display: inline-flex; align-items: center; gap: 4px; }
.map-tools .route-info:empty { display: none; }
.map-tools .route-label { background: #1d63c9; color: #fff; padding: 1px 6px; font-weight: bold; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* flock */
.fx { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 2px; }
.fx-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px; }
.fx-pane > .fx { flex: 1; }
.workspace.mdt-tabbed.fx-wide { grid-template-columns: minmax(0, 1fr); }
.workspace.mdt-tabbed.fx-wide > .mdt-side { display: none; }
.tab-win.fx-tabwin > .fx { flex: 1; }
.fx-title { background: linear-gradient(90deg, #0e5a3c, #2a9a6a); }
.fx-tstat { padding-right: 6px; font-weight: normal; font-size: 11px; white-space: nowrap; }
.fx-tabs .tab { white-space: nowrap; }
.tab-page.fx-page { display: flex; min-height: 0; margin: 0 4px 4px; padding: 4px; border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); }
.fx-page > * { flex: 1; min-width: 0; min-height: 0; }
.fx-muted { color: #555; }
.fx-inline { display: flex; align-items: center; gap: 4px; }
.fx-inline > input:first-child, .fx-inline > select:first-child { flex: 1; }
.fx-sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid #000; vertical-align: -1px; }
.fx-plate { font: bold 14px var(--mono); letter-spacing: 1px; }

.fx-cols { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 4px; min-height: 0; }
.fx-left { min-height: 0; overflow: auto; }
.fx-form { padding: 2px 4px; }
.fx-form .frow { grid-template-columns: 64px minmax(0, 1fr); }
.fx-form input[type="datetime-local"] { width: 100%; }
.fx-right { display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
.fx-right > .child { flex: 1; }
.fx-right.split > .child:first-child { flex: 0.9; }
.fx-right.split > .fx-detail { flex: 1.1; }
.fx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; min-height: 0; }
.fx-two.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.fx-right > .fx-two { flex: 1; }
.fx-three { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fx-stack { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.fx-stack > .child { flex: 1; }
.fx-stack.pad { overflow: auto; }
.fx-two > .child, .fx-two > .map-view { min-height: 260px; }
table.grid tr.fx-hot td { color: #ff6060; }
table.grid tr.fx-warn td { color: #ffcc33; }
table.grid tr.sel td { color: #fff; }
table.grid td .flag { margin: 0 2px 0 0; }

.fx-detail .child-body { overflow: auto; }
.fx-detail-cols { display: grid; grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr); gap: 8px; }
.fx-detail-cols > fieldset { display: flex; flex-direction: column; margin: 0; }
.fx-platebox { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.fx-platebox .flag { margin: 2px 2px 0 0; }
.fx-hitlist { display: grid; gap: 3px; }
.fx-hmap { display: flex; height: 220px; margin: 3px 0; }
.fx-callout { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; margin: 3px 0; background: #ffffe1; }
.fx-callout-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fx-hmap > .map-view { flex: 1; }

.fx-plate-box { display: inline-block; padding: 2px 8px; background: #fff; font: bold 16px var(--mono); letter-spacing: 1px; flex: none; }
.fx-key img { display: block; }

.fx-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fx-why { display: grid; gap: 3px; min-height: 44px; }
.fx-key { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }

.fx-pick { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 8px; height: min(520px, 68vh); }
.fx-pick .mini-grid { max-height: calc(100% - 34px); }
.fx-pickmap { display: flex; }
.fx-pickmap > .map-view { flex: 1; }

.fx-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fx-counts > div { display: grid; padding: 4px 8px; background: #000; color: #33ff33; }
.fx-counts b { font: bold 20px var(--mono); }
.fx-counts small { color: #e6e6e6; }
.fx-bars { display: flex; align-items: flex-end; gap: 2px; height: 130px; padding: 4px 4px 16px; background: #000; }
.fx-bars > div { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.fx-bars i { display: block; width: 100%; min-height: 1px; background: #33cc66; }
.fx-bars small { position: absolute; left: 0; bottom: -14px; color: #c0c0c0; font: 10px var(--mono); white-space: nowrap; }

.fx-pops { position: fixed; top: 96px; right: 10px; z-index: 300; display: grid; gap: 6px; width: 340px; }
.fx-pop { padding: 2px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35), inset -1px -1px var(--lo), inset 1px 1px #f1efe9; }
.fx-alarm { background: linear-gradient(90deg, #7a0000, #c00000); }
.fx-pop-body { display: grid; gap: 4px; padding: 6px; }

@media (max-width: 1000px) {
  .fx-cols, .fx-two, .fx-two.wide-left, .fx-detail-cols, .fx-pick { grid-template-columns: minmax(0, 1fr); }
  .fx-three, .fx-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-page.fx-page { overflow: auto; }
  .fx-tstat { display: none; }
}
.map-view.compact .fx-key { display: none; }
.map-tools .fx-key + .fx-key { margin-left: 6px; }
.fx-right > .child.fx-fixed { flex: none; }
.fx-sum .kv div { align-items: center; }

/* drag between panels to resize */
.rs-on { position: relative; }
.rs-bar { position: absolute; z-index: 6; }
.rs-col { width: 6px; cursor: col-resize; }
.rs-row { height: 6px; cursor: row-resize; }
.rs-bar:hover, .rs-bar:active { background: rgba(10, 36, 106, 0.45); }
body.rs-dragging-col, body.rs-dragging-col * { cursor: col-resize !important; user-select: none; }
body.rs-dragging-row, body.rs-dragging-row * { cursor: row-resize !important; user-select: none; }
.mdt-tabs > .rs-maxbtn { margin: auto 4px auto auto; }
.child.rs-max, .fx.rs-max, .mdt-main.rs-max { position: fixed; z-index: 25; margin: 0; box-sizing: border-box; }
@media (max-width: 900px) { .rs-bar, .rs-maxbtn { display: none; } }

/* right click menu */
.menu-list.ctx-menu { display: block; position: fixed; top: 0; left: 0; z-index: 400; min-width: 200px; }
.ctx-menu button:focus-visible { background: var(--sel); color: #fff; outline: none; }

.fill-row { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; }

/* peach pay */
.pay-ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.pay-ico.big { width: 28px; height: 28px; }
.pay-ico.inv { filter: invert(1); }


/* pos */
.pos-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.pos-key { display: grid; justify-items: center; gap: 4px; min-height: 84px; padding: 8px 6px; background: var(--face); border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); cursor: pointer; text-align: center; }
.pos-key:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.pos-key:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.pos-key .pay-ico { width: 24px; height: 24px; }
.pos-key small { font: 12px var(--mono); }
.pos-receipt { padding: 8px 10px; background: #fffef6; font: 12px var(--mono); }
.pos-rhead { display: grid; justify-items: center; gap: 1px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px dashed #999; text-align: center; }
.pos-lines { display: grid; gap: 2px; align-content: start; min-height: 80px; max-height: 180px; overflow: auto; }
.pos-line { display: grid; grid-template-columns: 1fr auto 20px; gap: 6px; align-items: center; }
.pos-del { border: 0; background: none; color: #a3141c; font-size: 14px; cursor: pointer; }
.pos-tot { display: flex; justify-content: space-between; padding-top: 2px; }
.pos-tot:first-of-type { margin-top: 6px; border-top: 1px dashed #999; padding-top: 6px; }
.pos-tot.big { font-weight: bold; font-size: 14px; }
.pos-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-big { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-weight: bold; }
.pos-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* phone */
.ph-fit { --s: 0.7; width: calc(431px * var(--s)); height: calc(890px * var(--s)); }
.ph {
  --blue: #0a84ff; --green: #30d158; --red: #ff453a; --orange: #ff9f0a;
  --label: #fff; --label2: rgba(235, 235, 245, 0.6); --label3: rgba(235, 235, 245, 0.3);
  --bg: #000; --bg2: #1c1c1e; --bg3: #2c2c2e; --sep: rgba(84, 84, 88, 0.6);
  --snappy: linear(0, 0.12 3%, 0.43 9%, 0.78 17%, 0.96 25%, 1.03 33%, 1.04 40%, 1.02 52%, 1 70%, 1);
  --bouncy: linear(0, 0.09 3%, 0.36 9%, 0.74 17%, 1.04 26%, 1.13 32%, 1.12 38%, 1.04 47%, 0.98 57%, 0.99 68%, 1 80%, 1);
  position: relative; width: 431px; height: 890px; padding: 5px; transform: scale(var(--s)); transform-origin: 0 0;
  border-radius: 68px;
  background: linear-gradient(145deg, #b9b5ad 0%, #6e6b65 28%, #a19d95 52%, #55524d 78%, #8f8b84 100%);
  box-shadow: 0 0 0 1.5px #262523, 0 2px 4px rgba(0, 0, 0, 0.25), 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.45);
  font: 17px/1.29 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; color: var(--label);
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}
.ph.light { --label: #000; --label2: rgba(60, 60, 67, 0.6); --label3: rgba(60, 60, 67, 0.3); --bg: #f2f2f7; --bg2: #fff; --bg3: #e5e5ea; --sep: rgba(60, 60, 67, 0.29); --blue: #007aff; --green: #34c759; --red: #ff3b30; }
.ph-glass { height: 100%; padding: 13px; border-radius: 63px; background: #030303; }
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 55px; background: var(--bg); isolation: isolate; }
.ph-btn { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #4c4944, #95918a); }
.ph-btn.action { left: -4px; top: 156px; height: 40px; }
.ph-btn.volup { left: -4px; top: 226px; height: 74px; }
.ph-btn.voldn { left: -4px; top: 316px; height: 74px; }
.ph-btn.side { right: -4px; top: 250px; height: 116px; padding: 0; border: 0; cursor: pointer; transition: translate 160ms var(--snappy); }
.ph-btn.side::after { content: ''; position: absolute; inset: -8px -22px -8px -18px; }
.ph-btn.side.press { translate: -3px 0; }
.ph-btn.side:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.ph-side-hint { position: absolute; z-index: 5; right: 24px; top: 262px; display: flex; align-items: center; gap: 10px; opacity: 0; translate: 10px 0; transition: opacity 250ms ease, translate 450ms var(--snappy); pointer-events: none; text-align: right; font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.ph-side-hint.on { opacity: 1; translate: 0 0; }
.ph-side-hint i { width: 12px; height: 84px; border-radius: 7px; background: rgba(255, 255, 255, 0.95); animation: ph-nudge 1.1s ease-in-out infinite; }
.ph-status { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 34px 0 50px; pointer-events: none; color: var(--label); }
.ph-time { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ph-sys { display: flex; gap: 6px; }
.ph-sys .pay-ico { width: 19px; height: 19px; }
.ph.light .ph-sys .pay-ico { filter: none; }
/* island */
.ph-island { position: absolute; z-index: 6; left: 50%; top: 11px; width: 126px; height: 37px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; overflow: hidden; border-radius: 22px; background: #000; white-space: nowrap; transition: width 500ms var(--bouncy), height 500ms var(--bouncy), border-radius 500ms var(--bouncy); }
.ph-island > * { opacity: 0; transition: opacity 180ms ease; }
.ph-island.pending { width: 352px; height: 50px; border-radius: 28px; }
.ph-island.pending > *, .ph-island.done > * { opacity: 1; transition-delay: 220ms; }
.ph-island.pending > span:not(.gl) { flex: 1; font: 600 15px -apple-system, sans-serif; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.ph-island.pending b { color: var(--orange); font: 600 15px -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
.ph-island.done { width: 176px; height: 44px; justify-content: center; }
.ph-island.done b { color: #fff; font: 600 15px -apple-system, sans-serif; }
.ph-island .gl { width: 28px; height: 28px; }
.ph-isl-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #000; font: 800 15px -apple-system, sans-serif; }
.ph-view { position: absolute; inset: 0; }
.ph-homebar { position: absolute; z-index: 4; left: 50%; bottom: 8px; width: 134px; height: 5px; translate: -50% 0; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.92); cursor: pointer; }
.ph-homebar::after { content: ''; position: absolute; inset: -20px -10px -8px; }
.ph.light .ph-homebar { background: rgba(0, 0, 0, 0.9); }
/* glass */
.ph-glassy { position: relative; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.18); }
.ph-glassy::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%); pointer-events: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ph-glassy { background: rgba(58, 52, 70, 0.92); } }
@media (prefers-reduced-transparency: reduce) { .ph-glassy { background: rgba(58, 52, 70, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* lock screen */
.ph-lock { position: absolute; inset: 0; display: flex; flex-direction: column; cursor: pointer; color: #fff; isolation: isolate; background: #1a1f1a; }
.ph-lock::before { content: ''; position: absolute; inset: -12px; z-index: -2; background: url(/api/cad/map/fall_blank) var(--wx, -500px) var(--wy, -1600px) / 2678px 2678px no-repeat, #2a3329; filter: blur(3px) saturate(0.85); }
.ph-lock::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 38%, rgba(0, 0, 0, 0.1) 62%, rgba(0, 0, 0, 0.55) 100%); }
.ph-lock-top { display: grid; justify-items: center; margin-top: 76px; }
.ph-lock-top small { font: 600 20px -apple-system, sans-serif; opacity: 0.92; }
.ph-big { margin-top: -4px; font: 700 104px/1 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(80, 20, 60, 0.25); }
.ph-lock-card { display: flex; align-items: center; gap: 14px; margin: auto 16px 0; padding: 14px 16px; border-radius: 26px; animation: ph-rise 600ms var(--bouncy); }
.ph-lock-card .gl { width: 44px; height: 44px; }
.ph-lock-card b { display: block; font: 600 17px -apple-system, sans-serif; }
.ph-lock-card small { display: block; font-size: 15px; opacity: 0.85; }
.ph-lock-bot { display: flex; justify-content: space-between; margin-top: auto; padding: 0 46px 44px; }
.ph-lock-card + .ph-lock-bot { margin-top: 22px; }
.ph-round { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; }
.ph-round .pay-ico { width: 24px; height: 24px; }
/* cards */
.ph-card { position: relative; width: 345px; height: 217px; padding: 18px 20px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.32); }
.ph-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.24) 47%, transparent 60%) 140% 0 / 280% 100% no-repeat; animation: ph-sheen 5s ease-in-out infinite; pointer-events: none; }
.ph-card.peach { background: linear-gradient(135deg, #ffb27c 0%, #f47a4c 36%, #d44a40 70%, #962c3b 100%); color: #fff; }
.ph-card.cash { background: linear-gradient(160deg, #fff, #ececf1); color: #000; }
.ph-card.cash .pay-ico.inv { filter: none; }
.ph-card-top { display: flex; justify-content: space-between; align-items: center; font: 600 20px -apple-system, sans-serif; letter-spacing: -0.01em; }
.ph-card-top .pay-ico { width: 26px; height: 26px; }
.ph-chip { width: 48px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #f8e4a8, #c99a3b 58%, #e8c679); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.ph-cash-amt { font: 700 40px -apple-system, sans-serif; letter-spacing: -0.03em; }
.ph-card-bot { display: flex; justify-content: space-between; align-items: baseline; font: 500 19px 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; }
.ph-card-bot b { font: 700 16px -apple-system, sans-serif; letter-spacing: 0.08em; }
.ph-card.shake { animation: ph-shake 450ms ease-in-out; }
/* wallet */
.ph-wallet { position: absolute; inset: 0; padding: 58px 0 34px; overflow: auto; background: var(--bg); color: var(--label); scrollbar-width: none; }
.ph-wal-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 12px 20px; }
.ph-wal-head b { font: 700 34px -apple-system, sans-serif; letter-spacing: -0.02em; }
.ph-wal-head span { display: flex; gap: 10px; }
.ph-wal-head i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg3); color: var(--blue); font: 600 22px -apple-system, sans-serif; font-style: normal; }
.ph-stack { position: relative; height: 296px; margin: 0 24px; }
.ph-stack-item { position: absolute; left: 0; top: 0; translate: 0 calc(var(--i) * 64px); scale: calc(1 - var(--i) * 0.035); z-index: calc(10 - var(--i)); transition: translate 550ms var(--snappy), scale 550ms var(--snappy); cursor: pointer; }
.ph-stack-item.front { z-index: 20; }
.ph-bal { display: grid; padding: 0 20px 14px; }
.ph-bal small { font-size: 13px; color: var(--label2); }
.ph-bal b { font: 700 28px -apple-system, sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ph-sec { padding: 6px 20px 8px; font: 600 20px -apple-system, sans-serif; letter-spacing: -0.01em; }
.ph-tx-list { margin: 0 16px; border-radius: 12px; overflow: hidden; background: var(--bg2); }
.ph-tx { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 16px; box-shadow: inset 72px -0.5px 0 -0px var(--bg2), inset 0 -0.5px 0 var(--sep); }
.ph-tx:last-child { box-shadow: none; }
.ph-tx b { font-weight: 600; }
.ph-tx small { display: block; font-size: 15px; color: var(--label2); }
.ph-tx > b { font-variant-numeric: tabular-nums; }
.ph-tx-ic { display: grid; place-items: center; width: 44px; height: 44px; }
.ph-tx-ic .gl { width: 40px; height: 40px; }
.ph-tx-empty { padding: 18px 16px; color: var(--label2); text-align: center; font-size: 15px; }
/* pay screen */
.ph-pay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 76px 24px 30px; background: #000; animation: ph-fade 220ms ease-out; }
.ph-pay-top { display: grid; justify-items: center; gap: 12px; perspective: 900px; }
.ph-pay-top .ph-card { animation: ph-float 4.5s ease-in-out infinite; }
.ph-pay-top .ph-card.enter { animation: ph-card-up 700ms var(--snappy), ph-float 4.5s 700ms ease-in-out infinite; }
.ph-pay-top .ph-card.shake { animation: ph-shake 450ms ease-in-out; }
.ph-dots { display: flex; gap: 8px; }
.ph-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--label3); }
.ph-dots i.on { background: #fff; }
.ph-pay-mid { display: grid; justify-items: center; align-content: start; gap: 12px; margin-top: 44px; min-height: 200px; text-align: center; }
.ph-pay-mid b { font: 600 20px -apple-system, sans-serif; letter-spacing: -0.01em; }
.ph-pay-mid small { font-size: 15px; color: var(--label2); max-width: 290px; }
.ph-faceid { position: relative; width: 92px; height: 92px; animation: ph-scan 1.25s var(--snappy); }
.ph-faceid i { position: absolute; width: 26px; height: 26px; border: 5px solid #fff; animation: ph-corner 1.25s ease-in-out; }
.ph-faceid .c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.ph-faceid .c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.ph-faceid .c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.ph-faceid .c4 { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.ph-faceid .eyes { position: absolute; left: 30px; right: 30px; top: 30px; height: 12px; border-left: 5px solid #fff; border-right: 5px solid #fff; }
.ph-faceid .smile { position: absolute; left: 32px; right: 32px; top: 52px; height: 12px; border: 5px solid #fff; border-top: 0; border-radius: 0 0 16px 16px; }
.ph-faceok svg { width: 92px; height: 92px; }
.ph-faceok path { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: ph-draw 280ms ease-out forwards; }
.ph-nfc { position: relative; width: 92px; height: 92px; }
.ph-nfc i { position: absolute; top: 50%; left: 18px; border: 6px solid #fff; border-color: transparent #fff transparent transparent; border-radius: 50%; translate: 0 -50%; opacity: 0.25; animation: ph-arc 1.4s ease-in-out infinite; }
.ph-nfc i:nth-child(1) { width: 24px; height: 24px; left: 26px; }
.ph-nfc i:nth-child(2) { width: 48px; height: 48px; left: 14px; animation-delay: 0.18s; }
.ph-nfc i:nth-child(3) { width: 74px; height: 74px; left: 1px; animation-delay: 0.36s; }
.ph-check svg { width: 100px; height: 100px; }
.ph-check circle { fill: none; stroke: var(--blue); stroke-width: 5; stroke-dasharray: 170; stroke-dashoffset: 170; animation: ph-draw 450ms ease-out forwards; }
.ph-check path { fill: none; stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 46; animation: ph-draw 300ms 360ms ease-out forwards; }
.ph-x { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--red); font: 800 44px -apple-system, sans-serif; }
.ph-pay-merch { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: auto; padding: 12px 16px; border-radius: 16px; background: var(--bg2); }
.ph-pay-merch > span:not(.gl) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.ph-pay-merch b { font-variant-numeric: tabular-nums; }
.ph-pay-merch .gl { width: 32px; height: 32px; }
.ph-cancel { min-height: 44px; margin-top: 12px; padding: 0 28px; border: 0; border-radius: 22px; background: var(--bg3); color: #fff; font: 600 17px -apple-system, sans-serif; cursor: pointer; transition: scale 160ms var(--snappy); }
.ph-cancel:active { scale: 0.97; }
.ph-cancel:focus-visible, .ph-homebar:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* banner */
.ph-notif { position: absolute; z-index: 7; left: 10px; right: 10px; top: 58px; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 26px; color: #fff; translate: 0 -170%; opacity: 0; pointer-events: none; }
.ph-notif.show { animation: ph-notif 4.2s var(--snappy) forwards; }
.ph-notif small { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0; }
.ph-notif b { display: block; font: 600 15px -apple-system, sans-serif; }
.ph-notif span:last-child { font-size: 15px; }
.ph-notif-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(160deg, #ffa66e, #e2533f 60%, #b83a3c); }
.ph-notif-ic .pay-ico { width: 26px; height: 26px; }
@keyframes ph-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes ph-rise { from { translate: 0 30px; opacity: 0; } }
@keyframes ph-sheen { 0%, 55% { background-position: 140% 0; } 100% { background-position: -140% 0; } }
@keyframes ph-shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -12px 0; } 40%, 80% { translate: 12px 0; } }
@keyframes ph-fade { from { opacity: 0; } }
@keyframes ph-card-up { from { translate: 0 120px; scale: 0.9; opacity: 0; } }
@keyframes ph-float { 0%, 100% { transform: rotateX(4deg) rotateY(-3deg); } 50% { transform: rotateX(-2deg) rotateY(3deg); } }
@keyframes ph-scan { 0% { scale: 0.85; opacity: 0.4; } 100% { scale: 1; opacity: 1; } }
@keyframes ph-corner { 0%, 100% { border-color: #fff; } 45% { border-color: rgba(255, 255, 255, 0.45); } }
@keyframes ph-arc { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
@keyframes ph-notif { 0% { translate: 0 -170%; opacity: 0; } 12%, 84% { translate: 0 0; opacity: 1; } 100% { translate: 0 -170%; opacity: 0; } }
/* less motion */
@media (prefers-reduced-motion: reduce) {
  .ph-side-hint i, .ph-card::after, .ph-pay-top .ph-card, .ph-nfc i { animation: none; }
  .ph-nfc i { opacity: 1; }
  .ph-lock-card, .ph-pay-top .ph-card.enter { animation: ph-fade 200ms ease-out; }
  .ph-island, .ph-stack-item, .ph-side-hint { transition-duration: 1ms; }
  .ph-notif.show { animation-timing-function: ease; }
}

.pos-brand { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
.pos-brand small { display: block; color: var(--lo); }


.ph-notif.ph-glassy { background: rgba(28, 20, 38, 0.46); }

.ph-back { display: block; min-height: 44px; margin: 0 0 4px 8px; padding: 0 8px; border: 0; background: none; color: var(--blue); font: 17px -apple-system, sans-serif; cursor: pointer; }
.ph-detail-card { display: grid; justify-items: center; padding: 4px 0 18px; }
.ph-group { margin: 0 16px 18px; border-radius: 12px; overflow: hidden; background: var(--bg2); }
.ph-row { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; box-shadow: inset 0 -0.5px 0 var(--sep); }
.ph-row:last-child { box-shadow: none; }
.ph-row span { color: var(--label); }
.ph-row b { font-weight: 400; color: var(--label2); font-variant-numeric: tabular-nums; }
.ph-pay.auth .ph-pay-top { cursor: pointer; }

.ph-fit { --s: 0.68; }

/* icons */
.gl { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c); }
.gl i { width: 58%; height: 58%; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.gl.sm { width: 24px; height: 24px; }
.gl.lg { width: 44px; height: 44px; }

/* reader */
.rdr { --ease: cubic-bezier(.32, .72, 0, 1); display: grid; justify-items: center; gap: 12px; width: 168px; padding: 12px 12px 16px; border-radius: 28px; background: linear-gradient(180deg, #ffffff, #ececef); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.1); }
.rdr-screen { display: grid; justify-items: center; align-content: center; gap: 4px; width: 100%; height: 124px; border-radius: 16px; background: #0d0e10; color: #f5f5f7; text-align: center; }
.rdr-screen small { font: 500 13px -apple-system, sans-serif; color: #a1a1a6; transition: color 250ms var(--ease); }
.rdr-screen b { min-height: 34px; font: 600 28px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rdr-nfc { position: relative; width: 34px; height: 30px; }
.rdr-nfc i { position: absolute; top: 50%; border: 3px solid transparent; border-right-color: #f5f5f7; border-radius: 50%; translate: 0 -50%; opacity: 0.2; }
.rdr-nfc i:nth-child(1) { left: 11px; width: 10px; height: 10px; }
.rdr-nfc i:nth-child(2) { left: 5px; width: 20px; height: 20px; }
.rdr-nfc i:nth-child(3) { left: -1px; width: 30px; height: 30px; }
.rdr.waiting .rdr-nfc i, .rdr.reading .rdr-nfc i { animation: ph-arc 1.4s ease-in-out infinite; }
.rdr.waiting .rdr-nfc i:nth-child(2), .rdr.reading .rdr-nfc i:nth-child(2) { animation-delay: 0.18s; }
.rdr.waiting .rdr-nfc i:nth-child(3), .rdr.reading .rdr-nfc i:nth-child(3) { animation-delay: 0.36s; }
.rdr.reading .rdr-nfc i { animation-duration: 0.6s; }
.rdr.approved .rdr-screen small { color: #30d158; }
.rdr.declined .rdr-screen small { color: #ff453a; }
.rdr.approved .rdr-nfc, .rdr.declined .rdr-nfc { opacity: 0; }
.rdr-led { width: 24px; height: 4px; border-radius: 2px; background: #c7c7cc; transition: background-color 250ms var(--ease); }
.rdr.waiting .rdr-led, .rdr.reading .rdr-led { background: #0a84ff; }
.rdr.approved .rdr-led { background: #30d158; }
.rdr.declined .rdr-led { background: #ff453a; }
@media (prefers-reduced-motion: reduce) { .rdr .rdr-nfc i { animation: none; opacity: 0.8; } }
/* register keys */
.pos-abbr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--c); color: #fff; font: bold 15px Tahoma, Arial, sans-serif; letter-spacing: 0.02em; }

.ph-pay-merch { gap: 12px; min-height: 64px; padding: 10px 16px; border-radius: 16px; }
.ph-pay-merch .gl { width: 40px; height: 40px; }
.ph-merch-txt { display: grid; flex: 1; min-width: 0; }
.ph-merch-txt b { font: 600 17px/1.25 -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-merch-txt small { font-size: 13px; color: var(--label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-merch-amt { font: 600 17px -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; }

.rdr-screen b.sm { font-size: 22px; }
.rdr-screen b.xs { font-size: 17px; }
.rdr.near .rdr-screen small { color: #64d2ff; }
.rdr.near .rdr-led { background: #64d2ff; }
.rdr.near .rdr-nfc i { animation: ph-arc 0.9s ease-in-out infinite; }

/* phone dock */
.pp-dock { position: fixed; z-index: 45; left: 16px; bottom: 34px; display: grid; justify-items: start; gap: 10px; pointer-events: none; }
.pp-dock > * { pointer-events: auto; }
.pp-dock .ph-fit { --s: 0.56; }
.pp-dock-phone { translate: 0 24px; opacity: 0; visibility: hidden; transition: translate 450ms cubic-bezier(.32, .72, 0, 1), opacity 250ms ease, visibility 0s 450ms; }
.pp-dock.open .pp-dock-phone { translate: 0 0; opacity: 1; visibility: visible; transition-delay: 0s; }
.pp-dock-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 8px; border: 0; border-radius: 20px; background: #1c1c1e; color: #fff; font: 600 15px -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-dock-pill.ask { background: #0a84ff; animation: pp-ask 1.6s ease-in-out infinite; }
.pp-dock-pill:focus-visible { outline: 3px solid #0a84ff; outline-offset: 3px; }
@keyframes pp-ask { 0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(10, 132, 255, 0.5); } 50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(10, 132, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .pp-dock-pill.ask { animation: none; } .pp-dock-phone { transition: opacity 150ms ease, visibility 0s 150ms; translate: 0 0; } }
.ph-live { display: flex; flex-wrap: wrap; }
.ph-live > div { flex: 1; min-width: 0; }
.ph-live-bar { display: block; width: 100%; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.ph-live-bar i { display: block; height: 100%; border-radius: 2px; background: #30d158; transition: width 1s linear; }
.ph-island.shift b { color: #30d158; }
.ph-tx .ph-plus { color: #34c759; }

/* work tab */
.wk-intro { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--face-2, #ece9d8); border: 1px solid var(--lo); }
.wk-intro .pay-ico { width: 28px; height: 28px; margin-top: 2px; }
.wk-intro b { display: block; font-size: 14px; }
.wk-shift { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; background: #fff; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.wk-shift-txt { display: grid; }
.wk-shift-txt small, .wk-shift-txt span { color: var(--lo); }
.wk-shift-txt b { font-size: 16px; }
.wk-shift-num { display: grid; justify-items: end; }
.wk-timer { font: bold 22px var(--mono); }
.wk-pay { display: grid; gap: 4px; margin: 8px 0; font: 12px var(--mono); }
.wk-bar { display: block; height: 10px; background: #fff; border: 1px solid var(--lo); }
.wk-bar i { display: block; height: 100%; background: #2e9b48; transition: width 1s linear; }
.wk-warn { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; background: #fde2e1; border: 1px solid #b3261e; color: #7a1b14; }
.wk-pos { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 8px; align-items: start; }
.wk-pos-left { display: grid; gap: 8px; }
.wk-reader { display: flex; align-items: center; gap: 12px; padding: 8px; background: #fff; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.wk-reader .rdr { width: 140px; flex: none; }
.wk-reader .rdr-screen { height: 104px; }
.wk-reader-txt .btn { justify-self: start; margin-top: 4px; }
.wk-reader-txt { display: grid; gap: 4px; }
.wk-reader-txt span { color: var(--lo); }
@media (max-width: 900px) { .wk-pos, .wk-shift { grid-template-columns: 1fr; } }

/* pay chip */
.statusbar .pay-on { color: #1e6b32; font-weight: bold; }
.statusbar .pay-off { color: #8a5a00; }
.charge-list { max-height: 30vh; margin: 0 0 6px; }
.fine-hint { margin-top: -2px; color: #404040; }
.fx-inline > input.num { flex: none; width: 90px; }
.fine-hint.bad { color: #a00000; font-weight: bold; }

/* home screen app on iphone, stay out of the notch and home bar */
@media (display-mode: standalone) {
  .desk-logo { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* iphone zooms in on anything under 16px when you tap it */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  input, select { height: 40px; }
}
@media (max-width: 900px) { .menubar { flex-wrap: wrap; } }
.ios-tip { margin: 8px 0 0; padding: 6px 8px; background: #ffffe1; border: 1px solid #000; }

/* =====================================================================
   Sizes: discord activity, pop out window, picture in picture, phones
   ===================================================================== */

/* notch and home bar. discord passes its own on mobile, the browser has env() */
:root {
  --sa-t: max(env(safe-area-inset-top, 0px), var(--discord-safe-area-inset-top, 0px));
  --sa-r: max(env(safe-area-inset-right, 0px), var(--discord-safe-area-inset-right, 0px));
  --sa-b: max(env(safe-area-inset-bottom, 0px), var(--discord-safe-area-inset-bottom, 0px));
  --sa-l: max(env(safe-area-inset-left, 0px), var(--discord-safe-area-inset-left, 0px));
}
.mainwin { padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
.desktop { padding: calc(12px + var(--sa-t)) calc(12px + var(--sa-r)) calc(12px + var(--sa-b)) calc(12px + var(--sa-l)); }
.toasts { right: calc(8px + var(--sa-r)); bottom: calc(30px + var(--sa-b)); }
.dlg { max-height: calc(var(--vvh, 100vh) - 8px - var(--sa-t) - var(--sa-b)); }

/* narrow pop out: the unit bar goes onto two rows so panic never scrolls off */
@media (max-width: 1060px) {
  .mdt-top { flex-wrap: wrap; overflow-x: visible; }
  .mdt-tabs { flex-wrap: wrap; overflow-x: visible; }
  .unit-badge { min-width: 0; }
}
/* short activity window: smaller license so the tabs under it get room */
@media (max-height: 700px) and (min-width: 761px) {
  .civ-top { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); }
}
/* pop out between phone and desktop */
@media (min-width: 761px) and (max-width: 1060px) {
  .workspace.dispatch { grid-template-columns: 30fr 22fr 20fr 28fr; }
  .workspace.mdt-tabbed { grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); }
  .workspace.civ { grid-template-columns: minmax(210px, 26fr) 74fr; }
  .civ-top { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Phones ---------- */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .mainwin { min-height: 100vh; min-height: 100dvh; }
  .consoles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .cmdrow input { flex: 1 1 140px; width: auto; }
  .statusbar { flex-wrap: wrap; }
  .statusbar > .grow { display: none; }
  /* 911 and 311 stay on screen while the toolbar scrolls */
  .toolbar .civ-right { position: sticky; right: -4px; margin-right: -4px; padding: 0 4px; background: var(--face); box-shadow: -1px 0 var(--lo); }
  .toolbar .civ-right .big-call small { display: none; }
  /* unit bar: who and status, panic, then the status buttons, then actions */
  .mdt-top { gap: 4px; }
  .mdt-top .unit-badge { order: 1; flex: 1 1 0; overflow: hidden; }
  .mdt-top .unit-badge small { overflow: hidden; text-overflow: ellipsis; }
  .mdt-top .st-display { order: 2; min-width: 96px; }
  .mdt-top .panic-btn { order: 3; padding: 0 10px; }
  .mdt-top .st-buttons { order: 4; flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mdt-top .st-btn { min-width: 0; min-height: 44px; padding: 2px; }
  .mdt-top .mdt-actions { order: 5; }
  .mdt-top .mdt-call { order: 6; flex: 1; min-height: 44px; }
  .mdt-top .grow { display: none; }
  .mdt-tabs { flex-wrap: wrap; overflow: visible; }
  .mdt-page { overflow: visible; }
  .workspace .w-map, .mdt-side > .child, .fx-two > .map-view { min-height: min(70vh, 520px); }
  .rs-bar { display: none; }
  .toasts { left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); bottom: calc(8px + var(--sa-b)); }
  .civ-top { padding: 4px 0 8px; }
  .civ-side .btnrow, .wk-shift { justify-content: flex-start; }
  .action-cards { grid-template-columns: 1fr; }
  .fx-pops { left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); width: auto; top: calc(8px + var(--sa-t)); }
  .pp-dock { left: calc(8px + var(--sa-l)); bottom: calc(8px + var(--sa-b)); }
}
/* dialogs fit the screen: centered, never wider or taller than what you can see */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .dlg { left: 50% !important; top: calc(var(--vvt, 0px) + 4px + var(--sa-t)) !important; transform: translateX(-50%); max-width: calc(100vw - 8px - var(--sa-l) - var(--sa-r)); }
  .dlg .titlebar { cursor: default; }
  .map-dialog { height: calc(var(--vvh, 100vh) - 120px); }
}
html[data-layout=pip] .dlg, html[data-layout=grid] .dlg { left: 50% !important; top: 2px !important; transform: translateX(-50%); max-width: calc(100vw - 4px); max-height: calc(var(--vvh, 100vh) - 4px); }
@media (max-width: 480px) {
  .dlg .frow, .logon-body .frow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dlg .frow > label, .logon-body .frow > label { text-align: left; }
  .dlg .groups { grid-template-columns: minmax(0, 1fr); }
  .backup-grid, .svc-pick { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .call-head .num { font-size: 20px; }
}

/* ---------- Touch: everything you tap is at least 40px ---------- */
@media (pointer: coarse) {
  .btn, .btn-small { min-height: 40px; min-width: 40px; height: auto; }
  .status-box select { height: 40px; }
  .titlebar:has(> .tb-btn) { height: 36px; }
  .tb-btn { position: relative; width: 32px; height: 28px; }
  .tb-btn::after { content: ''; position: absolute; inset: -6px -4px; }
  .tb-btn svg { transform: scale(1.4); }
  .menu > button { min-height: 40px; padding: 2px 10px; }
  .menu-list button, .ctx-menu button { min-height: 40px; align-items: center; }
  .tab, .mdt-tab, .radio-ch, .radio-code { min-height: 40px; display: inline-flex; align-items: center; }
  table.grid td { height: 40px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .child-tools label, .map-tools label, .inline-check, .check-row { min-height: 40px; }
  .child-tools select { height: 40px; }
  .st-btn, .line-lamp { min-height: 40px; }
  .line-lamp { width: 40px; }
  .tri, .svc { min-height: 44px; }
  .map-wrap canvas { touch-action: none; }
  .rs-col { width: 16px; margin-left: -5px; }
  .rs-row { height: 16px; margin-top: -5px; }
}

/* ---------- Picture in picture: small status window ---------- */
.pip { display: none; }
html[data-layout=pip] body, html[data-layout=grid] body { overflow: hidden; }
html[data-layout=pip] .mainwin, html[data-layout=grid] .mainwin,
html[data-layout=pip] .pp-dock, html[data-layout=grid] .pp-dock,
html[data-layout=pip] .fx-pops, html[data-layout=grid] .fx-pops,
html[data-layout=pip] .desk-logo, html[data-layout=grid] .desk-logo { display: none; }
html[data-layout=pip] .pip, html[data-layout=grid] .pip {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 2px;
}
.pip { --accent: #1f58b8; }
.pip.role-fire { --accent: #c0281f; }
.pip.role-dot { --accent: #dc7400; }
.pip.role-civilian { --accent: #2e8b47; }
.pip.role-dispatcher { --accent: #6a3db0; }
.pip.role-law { --accent: #7d6220; }
.pip-alerts .banner { padding: 1px 4px; font-size: 11px; }
.pip-alerts .banner .msg { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pip-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 3px 1px 1px; overflow: auto; }
.pip-row { display: flex; align-items: stretch; gap: 3px; flex: none; }
.pip .unit-badge { min-width: 0; padding: 2px 8px; color: #fff; overflow: hidden; }
.pip .unit-badge > div { min-width: 0; }
.pip .unit-badge b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip .unit-badge small { overflow: hidden; text-overflow: ellipsis; }
.pip .st-display { min-width: 74px; color: #fff; }
.pip .st-display b { font-size: 15px; }
.pip .panic-btn { padding: 0 10px; }
.pip .panic-btn b { font-size: 13px; }
.pip-status { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; flex: none; }
.pip-status .st-btn { min-width: 0; min-height: 34px; padding: 1px; opacity: 0.55; }
.pip-status .st-btn.on { opacity: 1; outline: 2px solid #fff; outline-offset: -3px; }
.pip-status .st-btn b { font-size: 12px; }
.pip-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 8px; color: #fff; background: #1a2430; border: 1px solid #000; border-left: 6px solid #ffd400; flex: none; }
.pip-call.p1 { border-left-color: #ff2020; }
.pip-call.p3, .pip-call.p4 { border-left-color: #33cc33; }
.pip-call.none { grid-template-columns: minmax(0, 1fr); border-left-color: #808080; }
.pip-call > b { font: bold 17px var(--mono); }
.pip-call span { min-width: 0; }
.pip-call span b, .pip-call span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip-call span b { font-size: 13px; }
.pip-call small { color: #b9c7d6; font-size: 10px; }
.pip-call .where { text-align: right; }
.pip-call .where b { font: bold 13px var(--mono); color: #ffd400; }
.pip-off { display: flex; align-items: stretch; gap: 6px; }
.pip-off .unit-badge { flex: 1; }
.pip-disp { align-items: center; }
.pip-disp .lines { display: flex; padding: 0 2px; }
.pip-disp .counters { gap: 6px; }
.pip-grid { flex: 1; min-height: 60px; overflow: auto; background: var(--grid-bg); border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.pip-grid table.grid td { height: auto; max-width: 160px; }
.pip-civ { display: grid; align-content: center; justify-items: end; gap: 2px; padding: 0 4px; font: bold 14px var(--mono); }
.pip-911 .big-call { flex: 1; height: 40px; }
.pip-911 .big-call small { display: none; }
/* a bit roomier once there is space for it */
@media (min-height: 260px) {
  .pip-status .st-btn { min-height: 40px; }
  .pip .unit-badge b { font-size: 18px; }
  .pip-call > b { font-size: 20px; }
}
/* the screens before a console is open, squeezed down */
html[data-layout=pip] .desktop, html[data-layout=grid] .desktop { padding: 2px; place-items: start center; }
html[data-layout=pip] .picker-body, html[data-layout=grid] .picker-body { padding: 4px; }
html[data-layout=pip] .picker-head, html[data-layout=grid] .picker-head { display: none; }
html[data-layout=pip] .consoles, html[data-layout=grid] .consoles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0; }
html[data-layout=pip] .console-btn, html[data-layout=grid] .console-btn { grid-template-columns: 26px 1fr; gap: 6px; min-height: 40px; padding: 4px 6px; }
html[data-layout=pip] .console-btn .cb-icon, html[data-layout=grid] .console-btn .cb-icon { width: 26px; height: 26px; }
html[data-layout=pip] .console-btn .cb-icon svg, html[data-layout=grid] .console-btn .cb-icon svg { width: 18px; height: 18px; }
html[data-layout=pip] .console-btn small, html[data-layout=grid] .console-btn small,
html[data-layout=pip] .ios-tip, html[data-layout=grid] .ios-tip { display: none; }
html[data-layout=pip] .picker .btnrow, html[data-layout=grid] .picker .btnrow { padding-top: 3px; }
html[data-layout=pip] .toast, html[data-layout=grid] .toast { padding: 2px 6px; font-size: 11px; }
html[data-layout=pip] .toasts, html[data-layout=grid] .toasts { left: 4px; right: 4px; bottom: 4px; }
html[data-layout=pip] .loader, html[data-layout=grid] .loader { padding: 4px; }
html[data-layout=pip] .boot-steps, html[data-layout=grid] .boot-steps { display: none; }
/* sizes dragged on a wide window don't hold once the panels stack */
@media (max-width: 1000px) {
  /* one column: the panels keep a real height and the page scrolls */
  .tab-page.fx-page > * { flex: 1 0 auto; }
  .fx-two, .fx-cols { grid-auto-rows: minmax(280px, auto); }
  .fx-two > .fx-stack { min-height: 280px; }
  .fx-cols.rs-on, .fx-two.rs-on { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
}
.pip-notes { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 2px 4px; font-size: 11px; }
.pip-notes div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .workspace .w-civlist { min-height: 0; }
  .w-civlist .child-body { flex: none; max-height: 40vh; }
  .mdt-top .mdt-act.big { order: 3; }
  .menu-list { max-width: calc(100vw - 4px); }
}
/* phone on its side: not much height, so the unit bar takes two rows not three */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 600px) {
  .mdt-top .unit-badge { flex: 0 1 190px; min-width: 150px; }
  .mdt-top .st-buttons { flex: 1 1 300px; }
  .mdt-top .mdt-call { flex: 0 1 auto; }
  .cmdrow { display: none; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .tabs { flex-wrap: wrap; }
}

/* ---------- Phones: one panel at a time ---------- */
.phone-bar, .tool-more { display: none; }
.tool-over { display: none !important; }
.phone-switch .mdt-tab .badge.red { background: #ff4040; color: #fff; }
.phone-assign { display: flex; align-items: center; gap: 4px; padding: 3px 4px; background: #ffffe1; border-bottom: 1px solid #000; }
.phone-assign[hidden] { display: none; }
.phone-assign b { font-family: var(--mono); }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1300; padding: 6px 10px; color: #fff; background: var(--sel); border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); font: 13px var(--mono); pointer-events: none; }
table.grid tbody tr.lift td { background-color: #2a4a7a; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .workspace.ph-split { gap: 0; padding-top: 0; }
  .workspace.ph-split > .phone-bar { display: block; position: sticky; top: 0; z-index: 25; margin: 0 -4px 4px; }
  .workspace.ph-split > .phone-bar .mdt-tabs { flex-wrap: nowrap; padding: 4px 4px 0; }
  .phone-switch .mdt-tab { flex: 1 1 0; justify-content: center; padding: 6px 4px; min-width: 0; }
  .workspace.ph-split > :not(.phone-bar):not(.ph-on) { display: none !important; }
  /* the panel fills the screen under the tab strip */
  .workspace.ph-split > .ph-on { flex: none; height: calc(var(--vvh, 100vh) - 54px - var(--sa-t) - var(--sa-b)); min-height: 300px; }
  .ph-split .mdt-page { overflow: auto; }
  .ph-split .mdt-side > .child, .ph-split .w-map { min-height: 0; }
  .ph-split .w-civlist .child-body { flex: 1; max-height: none; }
  .ph-split .tab-split { min-height: 0; }
  /* toolbars: what doesn't fit goes under More, 911 lines and console status get their own row */
  .mainwin .toolbar { flex-wrap: wrap; overflow: visible; }
  .toolbar .tool-more { display: flex; }
  .toolbar .tool-more[hidden] { display: none; }
  .toolbar .tool-spacer { display: none; }
  .toolbar .civ-right { position: static; order: 6; margin-left: auto; box-shadow: none; }
  .toolbar .lines { display: flex; order: 10; padding: 2px 0; }
  .toolbar .status-box { order: 11; flex: 1 1 150px; min-width: 0; margin: 2px 0 2px 4px; }
  .toolbar .tool-more { order: 5; }
}