:root {
  --bg: #f6f7f8; --fg: #1d2125; --muted: #5f6b76; --card: #fff; --line: #d9dee3; --accent: #1f6feb;
  --warn-bg: #fff4d6; --warn-fg: #7a4b00; --danger: #c62828;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
body { display: flex; flex-direction: column; }
#toolbar { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; padding: 6px 8px; background: #22272e; color: #fff; position: relative; z-index: 1100; }
#toolbar .brand { font-weight: 700; margin-right: 8px; white-space: nowrap; flex: none; }
#toolbar button, #toolbar .btn { background: #39414b; color: #fff; border: 1px solid #4b5561; border-radius: 4px; padding: 4px 8px; cursor: pointer; font: inherit; }
#toolbar .btn input { display: none !important; }
#toolbar button.on { background: var(--accent); border-color: var(--accent); }
#toolbar button:disabled { opacity: .45; cursor: default; }
#toolbar .sep { width: 10px; }
#toolbar .save { margin-left: auto; font-size: 12px; opacity: .85; }
#toolbar .save.error { color: #ff8a80; opacity: 1; font-weight: 700; }
#toolbar .save.pending { color: #ffd54f; }
main { flex: 1; display: flex; min-height: 0; }
#map { flex: 1; min-width: 0; background: #333; }
aside { width: 440px; max-width: 48vw; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); }
#tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: #eceff2; }
#tabs button { flex: 1; border: 0; background: transparent; padding: 7px 4px; cursor: pointer; font: inherit; color: var(--muted); }
#tabs button.on { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
#panel { flex: 1; overflow: auto; padding: 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.card.zone { border-left: 6px solid #888; }
.selcard { outline: 2px solid var(--accent); }
.zh { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.zh input[type=color] { width: 26px; height: 22px; padding: 0; border: 0; }
.w-name { flex: 1; min-width: 90px; } .w-plant { width: 96px; } .w-s { width: 64px; }
.zbtns { display: inline-flex; gap: 2px; margin-left: auto; } .zbtns button { padding: 0 6px; min-width: 24px; }
.card.ctl .grid2 input { width: 100%; box-sizing: border-box; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 4px 0; }
label { display: block; font-size: 12px; color: var(--muted); }
label input:not([type=checkbox]):not([type=range]):not([type=color]), label select, label textarea { display: block; width: 100%; margin-top: 1px; }
input, select, textarea { font: inherit; padding: 2px 4px; border: 1px solid #c3cad1; border-radius: 3px; background: #fff; color: var(--fg); }
input[type=number] { max-width: 100%; }
fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 6px 0; padding: 4px 8px 6px; }
legend { font-weight: 600; font-size: 12px; }
.unk { display: inline-block; background: #eef1f4; color: #6a737d; border: 1px dashed #9aa4ae; border-radius: 3px; padding: 0 4px; font-size: 11px; font-style: italic; }
.warn { background: var(--warn-bg); color: var(--warn-fg); border-radius: 3px; padding: 2px 5px; margin: 2px 0; font-size: 12px; }
.banner { background: #ffe0e0; color: #7a0000; padding: 5px 8px; border-radius: 4px; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 12px; margin: 3px 0; }
.early { background: #eef6ee; border-radius: 4px; padding: 5px 7px; margin: 6px 0; }
table.kv { width: 100%; border-collapse: collapse; font-size: 12px; }
table.kv td { padding: 1px 3px; border-bottom: 1px solid #eef0f2; } table.kv td:first-child { color: var(--muted); white-space: pre; }
table.list { width: 100%; border-collapse: collapse; font-size: 12px; }
table.list th, table.list td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #eef0f2; }
table.list tr[data-click] { cursor: pointer; } table.list tr.sel { background: #e3eeff; }
button { font: inherit; cursor: pointer; } button.danger { color: var(--danger); }
.help ol li { margin-bottom: 4px; }
.calib { background: #fbe9ff; padding: 6px; border-radius: 4px; margin: 4px 0; }
.calib input { width: 90px; }
.fitres { margin-top: 6px; background: #eef3ff; padding: 5px; border-radius: 4px; }
pre.fatal { background: #300; color: #fcc; padding: 10px; margin: 0; white-space: pre-wrap; }
/* map widgets */
.head-icon { overflow: visible; }
.head-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; box-shadow: 0 0 0 1px #fff; margin: 1px; }
.head-dot.sel { border-color: #fff; box-shadow: 0 0 0 2px #1f6feb; }
.head-label { position: absolute; left: 16px; top: -2px; white-space: nowrap; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 3px; pointer-events: none; }
.head-label .hw { color: #ffd54f; margin-right: 3px; }
.arc-handle { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; }
.arc-handle.start { background: #00c853; } .arc-handle.end { background: #ff1744; }
.vertex { background: #fff; border: 2px solid #1f6feb; border-radius: 2px; }
.vertex.mid { background: rgba(255,255,255,.5); border-style: dashed; border-radius: 50%; }
.cup-icon div { width: 12px; height: 12px; background: #fff; border: 2px solid #000; }
.cup-icon.sel div { border-color: #1f6feb; }
.measure-tip { font-weight: 600; }
.measure-tip small { display: block; font-weight: 500; color: #087f8c; }
.legend { background: rgba(255,255,255,.92); padding: 6px 8px; border-radius: 5px; width: 250px; font-size: 12px; }
.legend .ramp { height: 12px; margin-top: 4px; border: 1px solid #999; }
.legend .ticks { position: relative; height: 14px; font-size: 10px; margin: 0 6px; }
.legend .ticks span { position: absolute; transform: translateX(-50%); }
.legend .cnt { display: flex; gap: 6px; margin-top: 3px; } .legend .cnt i { display: inline-block; width: 12px; height: 12px; margin-right: 2px; vertical-align: -2px; border: 1px solid #555; }
.readout { background: rgba(255,255,255,.93); padding: 5px 7px; border-radius: 5px; font-size: 11px; min-width: 220px; pointer-events: none; }
.readout table { border-collapse: collapse; } .readout td { padding: 0 3px; }
/* narrow layout: see the bottom-sheet rules at the end of the file */
.badge-assumed { display: inline-block; background: #fde2c4; color: #8a4500; border: 1px solid #e5a35a; border-radius: 3px; padding: 0 4px; font-size: 10.5px; margin-right: 3px; }
.badge-default { display: inline-block; background: #e8e8ff; color: #33337a; border: 1px solid #9a9ad8; border-radius: 3px; padding: 0 4px; font-size: 10.5px; }
.head-label .ha { color: #ffb366; font-style: normal; margin-right: 3px; font-weight: 700; }

/* ---------------------------------------------------------------- toolbar: one row at any width */
#toolbar .tb-tools { display: flex; gap: 4px; align-items: center; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
#toolbar .tb-tools::-webkit-scrollbar { display: none; }
#toolbar .tb-tools button, #toolbar .tb-sec button, #toolbar .tb-sec .btn { flex: none; white-space: nowrap; }
#toolbar .tb-sec { display: flex; gap: 4px; align-items: center; }
#toolbar .tb-morebtn { display: none; flex: none; font-weight: 700; }
#toolbar .sh { display: none; }
#toolbar .tool.tgl:not(.on) { text-decoration: line-through; opacity: .75; }
#toolbar .save { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
@media (max-width: 1440px) {
  #toolbar .tb-morebtn { display: inline-block; }
  #toolbar .tb-sec { display: none; position: absolute; right: 6px; top: 100%; flex-direction: column; align-items: stretch; background: #22272e; padding: 6px; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
  #toolbar .tb-sec.open { display: flex; }
}
@media (max-width: 900px) {
  #toolbar .lg, #toolbar .brand { display: none; }
  #toolbar .sh { display: inline; }
  #toolbar button, #toolbar .btn { padding: 4px 6px; }
  #toolbar .save { max-width: 64px; font-size: 11px; }
}

/* ---------------------------------------------------------------- side panel -> bottom sheet */
#sheetGrip { display: none; }
@media (max-width: 800px) {
  main { flex-direction: column; }
  aside { width: 100%; max-width: none; height: var(--sheet-h, 33vh); max-height: 42vh; min-height: 40px; border-left: 0; border-top: 1px solid var(--line); }
  #sheetGrip { display: flex; justify-content: center; align-items: center; height: 16px; flex: none; cursor: ns-resize; touch-action: none; background: #e4e8ec; }
  #sheetGrip i { width: 44px; height: 4px; border-radius: 2px; background: #8a96a3; }
  #tabs { flex-wrap: nowrap; overflow-x: auto; flex: none; }
  #tabs button { flex: none; padding: 6px 9px; }
}

/* ---------------------------------------------------------------- on-map editing */
.head-icon { touch-action: none; cursor: move; }
.head-dot.sel2 { border-color: #fff; box-shadow: 0 0 0 2px #ff9800; }
.head-dot.locked { border-style: double; border-width: 3px; }
.head-label .hl { color: #9fd0ff; font-style: normal; margin-right: 3px; font-weight: 700; }
.eh { touch-action: none; cursor: grab; }
.eh i { position: absolute; left: 7px; top: 7px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #000, 0 1px 4px rgba(0,0,0,.6); }
.eh-start i { background: #00c853; }
.eh-end i { background: #ff1744; }
.eh-rotate i, .eh-group i { background: #2979ff; }
.eh-rotate i::after, .eh-group i::after { content: ""; position: absolute; inset: 3px; border: 2px solid #fff; border-radius: 50%; border-right-color: transparent; }
.eh-radius i { background: #fff; border-color: #222; border-radius: 3px; transform: rotate(45deg); }
.eh:hover i { box-shadow: 0 0 0 2px #00e5ff, 0 1px 4px rgba(0,0,0,.6); }
@media (pointer: coarse) { .eh i { left: 3px; top: 3px; width: 24px; height: 24px; } }
.editing, .editing .leaflet-interactive { cursor: grabbing !important; }
.noheat .leaflet-heat-pane { visibility: hidden; }
.drag-tip { position: absolute; z-index: 1200; pointer-events: none; background: rgba(20,24,28,.93); color: #fff; font: 12px/1.35 system-ui, sans-serif; padding: 4px 8px; border-radius: 5px; border: 1px solid #5a6570; white-space: nowrap; font-variant-numeric: tabular-nums; }
.drag-tip small { display: block; opacity: .8; }
.drag-tip small.snap { color: #00e5ff; opacity: 1; }
.drag-tip.snapped { border-color: #00e5ff; box-shadow: 0 0 0 1px #00e5ff; }
.drag-tip.bad { border-color: #ff5252; box-shadow: 0 0 0 1px #ff5252; }
.drag-tip .bad { color: #ffb3b3; opacity: 1; }
.sel-box { position: absolute; z-index: 1100; border: 1px dashed #fff; background: rgba(31,111,235,.15); pointer-events: none; }
.bearing-ctl { background: rgba(255,255,255,.93); border-radius: 5px; padding: 2px 6px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg); }
.bearing-ctl .seg { display: inline-flex; }
.bearing-ctl .seg button { border: 1px solid #9aa4ae; background: #fff; padding: 1px 7px; font-size: 11px; }
.bearing-ctl .seg button + button { border-left: 0; }
.bearing-ctl .seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 800px) { .bearing-ctl small { display: none; } }

/* floating inspector */
.inspector { position: absolute; z-index: 1000; width: max-content; max-width: min(340px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; background: rgba(255,255,255,.97); border: 1px solid #9aa4ae; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.35); font-size: 12px; padding: 3px 6px 4px; color: var(--fg); }
.inspector.open { width: 260px; padding-bottom: 6px; }
/* compact readout: two lines, values are click-to-edit */
.inspector .ro1 { display: flex; align-items: center; gap: 3px; white-space: nowrap; min-width: 0; }
.inspector .zsw { width: 10px; height: 10px; border-radius: 2px; flex: none; border: 1px solid rgba(0,0,0,.35); }
.inspector .zn { flex: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.inspector .md { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; margin: 0 2px; }
.inspector .wb { flex: none; font-size: 10px; font-weight: 700; color: var(--warn-fg); background: var(--warn-bg); border-radius: 3px; padding: 0 3px; cursor: help; }
.inspector .ic { flex: none; width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 3px; color: var(--muted); cursor: pointer; font: 700 13px/1 system-ui, sans-serif; }
.inspector .ic:hover { background: #eef1f4; border-color: #c3cad1; color: var(--fg); }
.inspector .ic.on { background: #ffe9b0; border-color: #d9a400; color: var(--fg); }
.inspector .ic.danger:hover { color: var(--danger); border-color: var(--danger); }
.inspector .ic svg { width: 14px; height: 14px; }
.inspector .ro2 { margin-top: 1px; font-variant-numeric: tabular-nums; line-height: 1.7; white-space: normal; }
.inspector .ro2 small { color: var(--muted); }
.inspector .ro2 .sep { color: #9aa4ae; margin: 0 1px; }
.inspector .iv { font: inherit; font-weight: 600; padding: 0 2px; margin: 0; border: 0; border-bottom: 1px dashed #8a96a3; border-radius: 2px; background: transparent; color: var(--fg); cursor: text; white-space: nowrap; }
.inspector .iv:hover, .inspector .iv:focus-visible { background: #e6eeff; border-bottom-color: var(--accent); outline: none; }
.inspector .dv { white-space: nowrap; }
.inspector .ied { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; white-space: nowrap; }
.inspector .ied em { font-style: normal; color: var(--muted); }
.inspector .iv-in { width: 64px; text-align: right; font: inherit; font-weight: 600; padding: 1px 3px; margin: 0; display: inline-block; border: 1px solid var(--accent); border-radius: 3px; }
.inspector .ied .st { width: 18px; height: 20px; }
.inspector.open .ro { border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 4px; }
.inspector .ia small { flex: 1; color: var(--muted); align-self: center; }
.inspector .ih { display: flex; align-items: center; gap: 4px; }
.inspector .ih .iz { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.inspector .ir { display: flex; align-items: center; gap: 3px; margin: 2px 0; color: var(--fg); font-size: 12px; }
.inspector .ir > span { width: 46px; flex: none; color: var(--muted); }
.inspector label.ir input[data-f]:not([type=checkbox]), .inspector .ir input[data-f]:not([type=checkbox]), .inspector .ir select { display: block; flex: 1; min-width: 0; width: auto; margin: 0; }
.inspector label.ir input[data-f]:not([type=checkbox]), .inspector .ir input[data-f]:not([type=checkbox]) { text-align: right; font-variant-numeric: tabular-nums; }
.inspector .ir em { width: 20px; flex: none; font-style: normal; color: var(--muted); }
.inspector .st { width: 22px; height: 22px; flex: none; padding: 0; border: 1px solid #c3cad1; background: #f2f4f6; border-radius: 3px; line-height: 1; }
.inspector .ib, .place-bar .ib { font-size: 11px; padding: 2px 6px; border: 1px solid #c3cad1; background: #f2f4f6; border-radius: 3px; color: var(--fg); }
.inspector .ib.on, .place-bar .ib.on { background: #ffe9b0; border-color: #d9a400; }
.inspector .ib:disabled { opacity: .45; }
.inspector .chk { justify-content: space-between; }
.inspector .chk label { display: inline; color: var(--fg); white-space: nowrap; }
.inspector .chk input[type=checkbox] { display: inline; width: auto; margin: 0 3px 0 0; vertical-align: -2px; }
.inspector .dim { opacity: .45; }
.inspector .inote { color: var(--muted); font-size: 11px; margin: 0 0 3px 49px; }
.inspector .iread { background: #eef3ff; border-radius: 4px; padding: 3px 5px; margin: 4px 0; }
.inspector .warnc { color: var(--warn-fg); }
.inspector .ia { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.inspector .bad, .place-bar .bad, .place-input .bad { color: var(--danger); }
.inspector input.bad, .place-input.bad input { border-color: var(--danger); background: #fff0f0; }
@media (pointer: coarse) { .inspector .st { width: 30px; height: 30px; } .inspector .ir input[data-f] { padding: 5px 4px; } .inspector .ic { width: 30px; height: 30px; } .inspector .iv { padding: 3px 3px; } }
/* placement: one-line hint bar + a small field at the point on the map */
.place-bar { position: absolute; z-index: 1001; left: 52px; top: 48px; max-width: min(620px, calc(100% - 64px)); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: rgba(255,255,255,.97); border: 1px solid #9aa4ae; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.35); padding: 4px 6px; font-size: 12px; color: var(--fg); }
.place-bar .phint { flex: 1 1 220px; min-width: 0; padding: 0 4px; }
.place-bar .phint small { color: var(--muted); margin-left: 4px; white-space: nowrap; }
.place-input { position: absolute; z-index: 1002; background: rgba(20,24,28,.93); color: #fff; border: 1px solid #00e5ff; border-radius: 5px; padding: 3px 6px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.place-input label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.place-input input { width: 104px; font: 600 13px/1.2 system-ui, sans-serif; padding: 2px 4px; border-radius: 3px; border: 1px solid #5a6570; font-variant-numeric: tabular-nums; }
.place-input [data-o="err"] { display: block; color: #ffb3b3; max-width: 240px; white-space: normal; }
.place-input [data-o="err"]:empty { display: none; }
.corner-lbl { background: rgba(20,24,28,.9); color: #fff; font: 11px/1.2 system-ui, sans-serif; padding: 2px 5px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.edge-arrow { color: #ff9800; font: 700 16px/18px system-ui, sans-serif; text-align: center; text-shadow: 0 0 2px #000; }
.edge-arrow i { display: inline-block; font-style: normal; }
.ref-pin { background: #ff9800; color: #000; font-weight: 700; border-radius: 50%; text-align: center; line-height: 16px; font-size: 11px; border: 1px solid #000; }
.cand-pin { background: #ffeb3b; color: #000; font-weight: 700; border-radius: 50%; text-align: center; line-height: 22px; border: 2px solid #000; cursor: pointer; font-size: 13px; }
.cand-pin.near { background: #ffb74d; }
.cand-pin.pulse { animation: candPulse 1.2s ease-out infinite; }
@keyframes candPulse { 0% { box-shadow: 0 0 0 0 rgba(255,235,59,.9); } 100% { box-shadow: 0 0 0 14px rgba(255,235,59,0); } }
@media (prefers-reduced-motion: reduce) { .cand-pin.pulse { animation: none; box-shadow: 0 0 0 4px rgba(255,235,59,.6); } }

/* ---------------------------------------------------------------- Schedule tab */
.conf { border-left: 6px solid #888; }
.conf-low { border-left-color: var(--danger); background: #fff5f5; }
.conf-medium { border-left-color: #e0a100; background: #fffbea; }
.conf-ok { border-left-color: #2e7d32; }
.conf ul { margin: 4px 0 4px 16px; padding: 0; } .conf li { margin: 2px 0; font-size: 12px; }
.conf li.lvl-high::marker { color: var(--danger); }
table.sched td, table.sched th, table.cmp td, table.cmp th { padding: 2px 3px; font-size: 11.5px; }
table.sched td.pick { font-weight: 700; }
table.sched tr.excl td { color: var(--muted); }
table.cmp td:first-child { color: var(--muted); }
td.naive { color: var(--muted); font-style: italic; }
tr.sum td { border-top: 1px solid var(--line); font-weight: 600; }
#panel button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.zones-by { margin-top: 3px; font-size: 12px; }
label.chk { display: inline-block; margin-right: 6px; }
label.chk input[type=number] { display: inline-block; width: 64px; }
pre.sheet { white-space: pre-wrap; font-size: 11px; background: #f6f8fa; padding: 6px; border-radius: 4px; max-height: 340px; overflow: auto; }
.unc-sw { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; background: repeating-linear-gradient(45deg, #5a5a5a 0 3px, #969696 3px 6px); border: 1px solid #555; }
/* per-head flow split (zone card) */
.splitbox { margin-top: 4px; }
ul.rules { margin: 2px 0 4px 16px; padding: 0; font-size: 11.5px; color: var(--muted); }
ul.rules li.on { color: inherit; font-weight: 600; }
table.split tr.auto td:nth-child(2) { color: #1f6f3f; font-weight: 600; }
small.gb { color: var(--muted); } small.gb-auto { color: #1f6f3f; } small.gb-unknown { color: #a33; font-weight: 600; }

.handoff .ho-h { font-weight: 600; margin: 6px 0 2px; }
.handoff table.runtimes td.pick { font-weight: 700; }
.handoff details.smart { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.brandtabs { display: flex; gap: 4px; margin: 6px 0; }

/* fractional zoom: overlap imagery tiles by half a pixel so no hairline seams show between them */
.leaflet-tile-pane img.leaflet-tile[style*="width: 256px"] { width: 256.5px !important; height: 256.5px !important; }
.leaflet-tile-pane img.leaflet-tile[style*="width: 512px"] { width: 512.5px !important; height: 512.5px !important; }