* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #e9e9e9;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; color: #1a1a1a;
  overscroll-behavior: none; }
#view { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
button, input { -webkit-tap-highlight-color: transparent; }

/* floating finish/cancel while drawing a road */
#touchbar { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 35; }
#touchbar.hidden { display: none; }
#touchbar button { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 20px;
  border-radius: 24px; border: 1px solid #0d6e6e; background: #0d6e6e; color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); cursor: pointer; }
#touchbar #tb-cancel { background: #fff; color: #a11; border-color: #d9b3b3; }

/* ===================== Bottom HUD (bar + flyouts + tool options) ===================== */
#hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 12px 12px; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* --- the bar --- */
#bottombar { display: flex; align-items: stretch; gap: 6px; width: 100%; max-width: 980px;
  background: #fff; border: 1px solid #c4c4c4; border-radius: 12px; padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.16); }
#bottombar .bb-title { align-self: center; font-weight: 800; letter-spacing: .06em; font-size: 12px;
  color: #15212b; margin-right: 4px; white-space: nowrap; }
#bottombar .bb-title b { color: #0d6e6e; }
#bottombar button { font: inherit; cursor: pointer; border: 1px solid transparent; background: none;
  border-radius: 9px; color: #222; }
#bottombar .bb-tool, #bottombar .bb-cat { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; min-width: 64px; padding: 5px 10px 4px; position: relative; }
#bottombar .bb-ico { display: flex; align-items: center; justify-content: center; height: 22px; }
#bottombar .bb-ico svg { width: 19px; height: 19px; }
#bottombar .bb-tool.active { color: #fff; }
#bottombar .bb-lab { font-size: 11px; font-weight: 600; color: #444; line-height: 1.1; }
#bottombar .bb-caret { position: absolute; top: 2px; right: 5px; font-size: 8px; color: #9ab0b0; }
#bottombar .bb-tool:hover, #bottombar .bb-cat:hover { background: #f0f4f4; border-color: #d5dde0; }
#bottombar .bb-tool.active { background: #0d6e6e; border-color: #0d6e6e; }
#bottombar .bb-tool.active .bb-lab { color: #fff; }
#bottombar .bb-cat.open { background: #e4efef; border-color: #0d6e6e; }
#bottombar .bb-cat.has-active { box-shadow: inset 0 -3px 0 #0d6e6e; }
#bottombar .bb-cat.open .bb-caret { transform: rotate(180deg); color: #0d6e6e; }
#bottombar .bb-sep { width: 1px; background: #e2e2e2; margin: 4px 2px; }
#bottombar .bb-flex { flex: 1; }
#bottombar #simctl { display: flex; align-items: center; gap: 5px; }
/* speed DIAL: a horizontal slider (click / drag the track to set the sim speed) */
#bottombar .sim-dial { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #d0d0d0;
  background: #f7f7f7; border-radius: 8px; user-select: none; }
#bottombar .sim-dial.active { border-color: #0d6e6e; }
#bottombar .sim-dial.paused { opacity: 0.55; }
#bottombar .sim-dial .sd-track { position: relative; width: 104px; height: 16px; display: flex; align-items: center;
  cursor: pointer; touch-action: none; flex: none; }
#bottombar .sim-dial .sd-track::before { content: ''; position: absolute; left: 1px; right: 1px; top: 50%;
  height: 4px; transform: translateY(-50%); background: #d8dadc; border-radius: 2px; }
#bottombar .sim-dial .sd-fill { position: absolute; left: 1px; top: 50%; height: 4px; transform: translateY(-50%);
  background: #0d6e6e; border-radius: 2px; pointer-events: none; }
#bottombar .sim-dial .sd-handle { position: absolute; top: 50%; width: 13px; height: 13px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 2px solid #0d6e6e;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25); pointer-events: none; }
#bottombar .sim-dial .sd-label { font-size: 13px; font-weight: 700; color: #1a1a1a; min-width: 34px; text-align: right; }
#bottombar .bb-mini { padding: 7px 12px; font-size: 13px; font-weight: 700; border: 1px solid #d0d0d0;
  background: #f7f7f7; border-radius: 8px; min-width: 44px; }
#bottombar .bb-mini:hover { background: #ececef; }
#bottombar .bb-mini.active { background: #0d6e6e; color: #fff; border-color: #0d6e6e; }
#bottombar #menu-btn { align-self: center; padding: 9px 14px; background: #1a1a1a; color: #fff;
  border-color: #1a1a1a; font-weight: 600; font-size: 12.5px; border-radius: 9px; }
#bottombar #menu-btn:hover { background: #000; }

/* --- flyout submenus --- */
#flyouts { position: relative; width: 100%; max-width: 980px; height: 0; }
.flyout { position: absolute; bottom: 6px; left: 0; min-width: 290px; max-width: 96vw;
  background: #fff; border: 1px solid #c4c4c4; border-radius: 12px; padding: 10px 10px 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.fly-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-btn { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 86px; padding: 10px 4px 8px; border: 1px solid #d6dbde; border-radius: 10px;
  background: #f8fafa; cursor: pointer; color: #222; transition: background .1s, border-color .1s; }
.ft-btn:hover { background: #eef4f4; border-color: #8fb5b5; }
.ft-btn.active { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
.ft-btn.active .ft-lab { color: #fff; }
.ft-ico { display: flex; align-items: center; justify-content: center; height: 28px; color: #33545c; }
.ft-ico svg { width: 25px; height: 25px; }
.ft-btn.active .ft-ico { color: #fff; }
.seg-ico { width: 13px; height: 13px; vertical-align: -2px; }
.ft-lab { font-size: 11px; font-weight: 600; color: #344; line-height: 1.15; text-align: center; }
.ft-btn:disabled, .ft-btn.locked { opacity: .4; cursor: not-allowed; }
.ft-btn:disabled:hover, .ft-btn.locked:hover { background: #f8fafa; border-color: #d6dbde; }
.fly-desc { margin-top: 8px; border-top: 1px solid #eee; padding-top: 7px; font-size: 11.5px;
  color: #667; line-height: 1.35; min-height: 16px; }
.fly-desc b { color: #1a1a1a; }

/* --- terrain style controls (Data flyout) --- */
#terrainctl { margin-top: 9px; border-top: 1px solid #eee; padding-top: 7px; }
#terrainctl .tc-head { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin-bottom: 5px; }
#terrainctl .tc-head .tc-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #99a; font-size: 10px; }
#terrainctl .fly-tools { margin-bottom: 7px; }
.tc-row { display: block; margin: 5px 2px 2px; cursor: pointer; }
.tc-row span { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 600; color: #2a3540; margin-bottom: 2px; }
.tc-row em { font-style: normal; font-weight: 700; color: #0d6e6e; font-variant-numeric: tabular-nums; }
.tc-row input[type="range"] { width: 100%; height: 16px; accent-color: #0d6e6e; cursor: pointer; }

/* --- saved designs registry (Design flyout) --- */
#designctl { margin-top: 9px; border-top: 1px solid #eee; padding-top: 7px; }
#designctl .dc-head { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin-bottom: 5px; }
#designctl .dc-head .dc-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #99a; font-size: 10px; }
#dc-list { display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow-y: auto; }
.dc-row { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #dfe3e6;
  border-radius: 8px; background: #fbfcfd; cursor: pointer; transition: border-color .12s, background .12s; }
.dc-row:hover { border-color: #8fb5b5; background: #f2f7f7; }
.dc-row.active { border-color: #0d6e6e; background: #e8f3f3; box-shadow: 0 0 0 1.5px rgba(13,110,110,.25); }
.dc-kind { flex: none; font-size: 13px; }
.dc-name { flex: 1; font-size: 12px; font-weight: 700; color: #1a2630; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-meta { flex: none; font-size: 10.5px; color: #889; font-variant-numeric: tabular-nums; }
.dc-del { flex: none; font: inherit; font-size: 14px; line-height: 1; padding: 1px 6px; border: 1px solid transparent;
  border-radius: 6px; background: none; color: #b66; cursor: pointer; }
.dc-del:hover { background: #ffecec; border-color: #d9b3b3; color: #a11; }
.dc-empty { font-size: 11.5px; color: #99a; padding: 3px 1px; }
.dc-new { display: flex; gap: 6px; margin-top: 6px; }
.dc-new input { flex: 1; font: inherit; font-size: 12px; padding: 6px 9px; border: 1px solid #c4ccd1; border-radius: 8px; min-width: 0; }
.dc-new input:focus { outline: none; border-color: #0d6e6e; }
.dc-new button { flex: none; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #0d6e6e; background: #0d6e6e; color: #fff; cursor: pointer; }
.dc-new button:hover { background: #0a5858; }
/* toggles get a teal "on" look distinct from the active tool */
#oneway-toggle.active, #grid-toggle.active, #heat-toggle.active, #day-toggle.active, #cond-toggle.active {
  background: #e2f1f1; border-color: #0d6e6e; color: #0b3b3b; }
#oneway-toggle.active .ft-lab, #grid-toggle.active .ft-lab,
#heat-toggle.active .ft-lab, #day-toggle.active .ft-lab, #cond-toggle.active .ft-lab,
#oneway-toggle.active .ft-ico, #grid-toggle.active .ft-ico,
#heat-toggle.active .ft-ico, #day-toggle.active .ft-ico, #cond-toggle.active .ft-ico { color: #0b3b3b; }

/* --- contextual tool options strip --- */
#toolopts { display: none; align-items: center; justify-content: center; gap: 10px; max-width: 96vw;
  background: #fff; border: 1px solid #c4c4c4; border-radius: 10px; padding: 6px 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,.14); flex-wrap: wrap; }
#toolopts:has(.show) { display: flex; }
#toolopts .to-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #0d6e6e;
  text-transform: uppercase; margin-right: 2px; }
#toolopts button { font: inherit; font-size: 12px; padding: 5px 11px; border: 1px solid #bdbdbd;
  background: #f7f7f7; border-radius: 6px; cursor: pointer; color: #222; }
#toolopts button:hover { background: #efefef; border-color: #9a9a9a; }
#toolopts button.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
#toolopts button:disabled { opacity: .4; cursor: default; }
#toolopts input { font: inherit; font-size: 12px; width: 42px; padding: 4px 6px;
  border: 1px solid #bdbdbd; border-radius: 4px; text-align: right; }
#toolopts input:disabled { opacity: .4; }
#erasectl, #vegctl, #drainctl, #lanebctl, #road-options,
#lanectl, #levelctl, #dirctl, #spdctl, #bridgectl { display: none; align-items: center; gap: 5px; }
#erasectl.show, #vegctl.show, #drainctl.show, #lanebctl.show, #road-options.show,
#lanectl.show, #levelctl.show, #dirctl.show, #spdctl.show, #bridgectl.show { display: inline-flex; }
#drainctl .seg.active { background: #2c6e9e; border-color: #2c6e9e; color: #fff; }
#lanectl, #levelctl, #dirctl, #spdctl, #bridgectl { padding-left: 6px; margin-left: 2px; border-left: 1px solid #ddd; }
#bridgectl #br-info { font-size: 11px; color: #444; font-variant-numeric: tabular-nums; max-width: 240px; }
#bridgectl #br-draw.active, #bridgectl #br-design.active { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }

/* ===== Bridge Designer panel ===== */
#bridgepanel { width: 348px; }
#br-elev { width: 100%; height: auto; display: block; border: 1px solid #c9c9c9; border-radius: 8px;
  background: #eaf2f6; margin: 6px 0; touch-action: none; cursor: crosshair; }
.bp-foot { font-size: 12px; color: #333; line-height: 1.5; margin: 2px 0 8px; }
.bp-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; flex-wrap: wrap; }
.bp-row .to-label { min-width: 38px; }
.bp-row button { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #bdbdbd;
  background: #f7f7f7; border-radius: 6px; cursor: pointer; color: #222; }
.bp-row button:hover:not(:disabled) { background: #efefef; border-color: #9a9a9a; }
.bp-row button:disabled { opacity: .4; cursor: default; }
.bp-val { min-width: 92px; text-align: center; font-size: 12px; color: #333; font-variant-numeric: tabular-nums; }
.bp-del { color: #a11 !important; border-color: #d9b3b3 !important; background: #fff5f5 !important; }
.bp-actions { justify-content: space-between; margin-top: 8px; }
.bp-apply { background: #0d6e6e !important; border-color: #0d6e6e !important; color: #fff !important; font-weight: 700; }
.bp-steelfix { background: #b5651d !important; border-color: #b5651d !important; color: #fff !important; font-weight: 700; }
.bp-steel { font-size: 12px; line-height: 1.5; margin: -2px 0 8px; padding: 6px 8px; border-radius: 6px; background: #f6f1ea; border: 1px solid #e2d7c6; }
.bp-steel .st-ok { color: #2e7d46; font-weight: 700; }
.bp-steel .st-mid { color: #b5651d; font-weight: 700; }
.bp-steel .st-bad { color: #c0392b; font-weight: 700; }
.bp-hint { margin-top: 6px; }
#spdctl #spd-n { min-width: 64px; text-align: center; color: #333; font-variant-numeric: tabular-nums; font-size: 12px; }
#spdctl #spd-n.spd-hot { color: #c0392b; font-weight: 700; }
#erasectl .seg.active { background: #c0392b; border-color: #c0392b; color: #fff; }
#vegctl .seg.active { background: #2e7d32; border-color: #2e7d32; color: #fff; }
#vegctl #veg-remove.active { background: #c0392b; border-color: #c0392b; color: #fff; }
#dirctl .seg.active { background: #7c3ab4; border-color: #7c3ab4; color: #fff; }
#lanectl #lane-n, #levelctl #level-n { min-width: 52px; text-align: center; color: #333;
  font-variant-numeric: tabular-nums; font-size: 12px; }
#lanectl #lane-rm { color: #a11; border-color: #d9b3b3; background: #fff5f5; font-weight: 700; }
#lanectl .wsep { color: #ccc; }
#lanectl .lc-sub { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #777; }
/* armed add-lane preview: dim everything but the side buttons + the confirm bar, highlight the chosen shoulder */
#lanectl.pending #lane-dec, #lanectl.pending #lane-inc, #lanectl.pending #lane-n, #lanectl.pending #lane-flip,
#lanectl.pending #lane-width, #lanectl.pending #lane-rm, #lanectl.pending #lane-drop, #lanectl.pending #lane-merge,
#lanectl.pending #lane-clrtaper { opacity: .35; pointer-events: none; }
#lanectl #lane-add-l.armed, #lanectl #lane-add-r.armed { background: #2e7d32; color: #fff; border-color: #2e7d32; font-weight: 700; box-shadow: 0 0 0 2px rgba(46,125,50,.35); }
#lanectl #lane-confirm-bar { display: inline-flex; align-items: center; gap: 5px; }
#lanectl .lc-pend { color: #2e7d32; }
#lanectl #lane-confirm { color: #fff; background: #2e7d32; border-color: #2e7d32; font-weight: 700; }
#lanectl #lane-cancel { color: #fff; background: #c0392b; border-color: #c0392b; font-weight: 700; }
#lanebctl #laneb-info { font-size: 11px; color: #555; font-variant-numeric: tabular-nums; min-width: 56px; }

/* ===== Map-object settings panels (traffic lights, toll booths) ===== */
.sidepanel { position: absolute; top: 54px; left: 12px; width: 318px; z-index: 20;
  background: #fff; border: 1px solid #c4c4c4; border-radius: 10px; padding: 12px 14px 11px;
  box-shadow: 0 6px 18px rgba(0,0,0,.20); font-size: 12.5px; }

/* ===== Alert log window (top-left, minimizable) ===== */
.alertwin { position: absolute; top: 10px; left: 12px; width: 320px; z-index: 28;
  background: rgba(26,28,34,.93); color: #eceef2; border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,.38); overflow: hidden;
  font-size: 12px; pointer-events: auto; backdrop-filter: blur(2px); }
.aw-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.05); }
.aw-head:hover { background: rgba(255,255,255,.09); }
.aw-ico { color: #ff6b6b; font-size: 13px; flex: none; }
.aw-latest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8dbe1; }
.aw-latest b { color: #fff; }
.aw-badge { flex: none; background: #e23333; color: #fff; font-weight: 700; font-size: 10.5px;
  min-width: 17px; text-align: center; border-radius: 9px; padding: 1px 5px; line-height: 1.45; }
.aw-caret { flex: none; border: none; background: none; color: #aeb4bd; font-size: 12px; cursor: pointer; padding: 0 2px; }
.aw-body { display: none; border-top: 1px solid rgba(255,255,255,.08); }
.alertwin.open .aw-body { display: block; }
.aw-foot { display: flex; justify-content: space-between; align-items: center; padding: 5px 9px;
  color: #9aa0aa; font-size: 10.5px; letter-spacing: .2px; }
.aw-btn { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #cfd3da;
  font: inherit; font-size: 10.5px; padding: 2px 8px; border-radius: 5px; cursor: pointer; }
.aw-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.aw-list { max-height: 234px; overflow-y: auto; }
.aw-item { padding: 6px 10px; border-top: 1px solid rgba(255,255,255,.06); line-height: 1.34; }
.aw-item.unread { background: rgba(226,51,51,.12); }
.aw-item b { color: #fff; }
.aw-time { color: #868d99; font-size: 10px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.aw-x { color: #9aa0aa; font-size: 10px; }
.aw-empty { padding: 12px; color: #9aa0aa; text-align: center; font-style: italic; }
.sidepanel .sp-head { display: flex; justify-content: space-between; align-items: center; }
.sidepanel .sp-title { font-weight: 700; font-size: 13.5px; }
.sidepanel #sp-close, .sidepanel .sp-x { border: none; background: none; font-size: 18px; line-height: 1; color: #888;
  cursor: pointer; padding: 0 4px; }
.sidepanel #sp-close:hover, .sidepanel .sp-x:hover { color: #000; }
.sidepanel .sp-sub { color: #666; font-size: 11.5px; margin: 3px 0 10px; min-height: 14px; font-variant-numeric: tabular-nums; }
.sidepanel .sp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sidepanel .sp-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; background: #999;
  border: 1px solid rgba(0,0,0,.35); box-shadow: 0 0 4px rgba(0,0,0,.15) inset; }
.sidepanel .sp-name { flex: 1; font-weight: 600; color: #222; }
.sidepanel .sp-btn { width: 25px; height: 25px; border: 1px solid #bdbdbd; background: #f7f7f7;
  border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; }
.sidepanel .sp-btn:hover { background: #ececec; }
.sidepanel input { font: inherit; font-size: 12.5px; width: 48px; padding: 4px 5px; border: 1px solid #bdbdbd;
  border-radius: 5px; text-align: right; }
.sidepanel .sp-unit { color: #777; font-size: 11px; }
.sidepanel .sp-presets { font-size: 11.5px; margin-top: 2px; }
.sidepanel .sp-plabel { color: #777; }
.sidepanel .sp-pre { padding: 4px 9px; border: 1px solid #bdbdbd; background: #f7f7f7; border-radius: 6px;
  cursor: pointer; font-size: 11.5px; }
.sidepanel .sp-pre:hover { background: #e8f3e8; border-color: #6da06d; }
.sidepanel .sp-adv { margin: 4px 0 6px; }
.sidepanel .sp-adv summary { cursor: pointer; color: #777; font-size: 11.5px; margin-bottom: 6px; }
.sidepanel .sp-adv label { display: inline-flex; align-items: center; gap: 4px; color: #555; font-size: 11.5px; }
.sidepanel .sp-adv input { width: 40px; }
.sidepanel .sp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
  border-top: 1px solid #eee; padding-top: 9px; }
.sidepanel #sp-cycle, .sidepanel #tp-earned { color: #555; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sidepanel .sp-remove { color: #a11; border: 1px solid #d9b3b3; background: #fff5f5; border-radius: 6px;
  padding: 5px 11px; cursor: pointer; font: inherit; font-size: 12px; }
.sidepanel .sp-remove:hover { background: #ffe9e9; }

/* town info panel */
#townpanel { width: 340px; max-height: calc(100vh - 140px); overflow-y: auto; }
#townpanel .tn-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin: 10px 0 5px; border-top: 1px solid #eee; padding-top: 8px; }
#townpanel .tn-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #999; font-size: 10px; }
#townpanel .tn-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#townpanel .tn-chip { background: #eef6ee; border: 1px solid #bcd9bc; border-radius: 10px; padding: 2px 8px;
  font-size: 11.5px; color: #2a5a2a; }
#townpanel .tn-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2.5px 0;
  font-size: 12px; border-bottom: 1px dashed #f0f0f0; font-variant-numeric: tabular-nums; }
#townpanel .tn-ok { color: #1d7a3a; font-weight: 600; }
#townpanel .tn-mid { color: #b07a10; font-weight: 600; }
#townpanel .tn-bad { color: #a11; font-weight: 600; }
#townpanel .tn-dim { color: #999; font-size: 11.5px; }

/* traffic stats panel (right side, under the readout) */
#statspanel { left: auto; right: 12px; width: 290px; }
#statspanel .tn-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin: 8px 0 6px; border-top: 1px solid #eee; padding-top: 8px; }
#statspanel .ts-row { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; font-size: 12px;
  font-variant-numeric: tabular-nums; }
#statspanel .ts-name { flex: none; width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#statspanel .ts-bar { flex: 1; height: 9px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
#statspanel .ts-fill { display: block; height: 100%; background: linear-gradient(90deg, #4aa3df, #e2574b); border-radius: 5px; }
#statspanel .ts-val { flex: none; width: 38px; text-align: right; color: #555; }
#statspanel .tn-dim { color: #999; font-size: 11.5px; }

/* road conditions panel */
#condpanel { left: auto; right: 12px; width: 318px; max-height: calc(100vh - 140px); overflow-y: auto; }
#condpanel .tn-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin: 8px 0 6px; border-top: 1px solid #eee; padding-top: 8px; }
#condpanel .tn-dim { color: #999; font-size: 11.5px; }
.cd-row { padding: 5px 7px; margin: 4px 0; border: 1px solid #e7eaec; border-radius: 8px; background: #fbfcfd;
  cursor: pointer; transition: border-color .12s, background .12s; }
.cd-row:hover { border-color: #8fb5b5; background: #f2f7f7; }
.cd-top { display: flex; align-items: center; gap: 8px; }
.cd-name { flex: none; width: 70px; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-bar { flex: 1; height: 9px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.cd-fill { display: block; height: 100%; border-radius: 5px; }
.cd-eta { margin-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }
.cd-eta.tn-ok { color: #1d7a3a; } .cd-eta.tn-mid { color: #b07a10; } .cd-eta.tn-bad { color: #a11; font-weight: 600; }

/* daily statistics panel */
#daypanel { left: auto; right: 12px; width: 322px; }
#daypanel .tn-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin: 8px 0 6px; border-top: 1px solid #eee; padding-top: 8px; }
#daypanel .dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
#daypanel .dp-cell { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 1.5px 0; }
#daypanel .dp-v { font-weight: 700; color: #15212b; font-variant-numeric: tabular-nums; }
#daypanel .dp-l { color: #778; font-size: 11px; }
#daypanel .dp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
#daypanel .dp-m { padding: 3px 8px; border: 1px solid #bdbdbd; background: #f7f7f7; border-radius: 9px;
  cursor: pointer; font-size: 11px; font: inherit; }
#daypanel .dp-m.active { background: #0d6e6e; color: #fff; border-color: #0d6e6e; }
#daypanel #dp-chart { width: 100%; height: 110px; background: #fafbfb; border: 1px solid #ececec; border-radius: 6px; }
#revpanel .dp-v { font-weight: 700; color: #15212b; font-variant-numeric: tabular-nums; }
/* ranged Statistics / Revenue panels */
.rng-tabs { display: flex; gap: 3px; margin: 2px 0 9px; flex-wrap: wrap; }
.rng-t { padding: 4px 8px; border: 1px solid #c4c4c4; background: #f6f6f6; border-radius: 7px; font: inherit; font-size: 11px; color: #555; cursor: pointer; }
.rng-t:hover { background: #ececec; }
.rng-t.active { background: #15212b; color: #fff; border-color: #15212b; }
#revpanel { max-height: calc(100vh - 66px); overflow-y: auto; overflow-x: hidden; }
.rv-summary { display: grid; gap: 2px; margin-bottom: 9px; }
.rv-s { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; padding: 1px 0; }
.rv-sl { color: #667; }
.rv-sv { font-weight: 700; font-variant-numeric: tabular-nums; color: #15212b; }
.rv-sv.pos { color: #1f7d3a; }
.rv-sv.neg { color: #b3402f; }
.rv-sub { font-size: 11.5px; padding: 0 0 0 6px; }
.rv-sub .rv-sl { color: #889; }
.rv-sub .rv-sv { font-weight: 600; color: #445; }
.rv-src { cursor: pointer; border-radius: 5px; padding: 2px 4px; }
.rv-src:hover { background: #eef4ee; }
.rv-src .rv-sl { color: #556; font-size: 11.5px; }
.rv-src .rv-sv { color: #1f7d3a; font-weight: 700; }
.rv-div { height: 1px; background: #e4e4e4; margin: 4px 0; }
.rv-chartwrap { position: relative; margin-bottom: 4px; }
#rv-chart { display: block; background: #fafbfb; border: 1px solid #ececec; border-radius: 6px; }
.rv-tip { position: absolute; pointer-events: none; background: rgba(22,24,30,0.92); color: #fff; font-size: 10.5px; line-height: 1.5; padding: 5px 7px; border-radius: 5px; min-width: 92px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 5; }
.rv-tip b { font-size: 11px; }
.rv-tip i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }
.rv-legend { display: flex; gap: 12px; margin: 2px 0 8px; font-size: 11px; color: #667; }
.rv-lg { display: inline-flex; align-items: center; gap: 4px; }
.rv-lg i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
#daypanel #dp-cap { margin-top: 5px; }

#readout { position: absolute; top: 12px; right: 12px; display: flex; gap: 14px;
  background: #fff; border: 1px solid #c4c4c4; border-radius: 8px; padding: 7px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); font-variant-numeric: tabular-nums; }
#readout span { color: #333; }
#r-money { font-weight: 700; color: #0d6e6e; }
#r-clock { font-variant-numeric: tabular-nums; color: #444; }
#r-towns { color: #555; }
#r-len { color: #777; }

/* Hint line ("Drag to pan…" / tool tips): lives at the BOTTOM, in the HUD stack just above the
   tool options & bar, and shows ONLY tool instructions — alerts never write into it.
   pointer-events:none lets clicks pass through to the map. */
#hint { max-width: min(720px, 96vw); text-align: center; background: rgba(255,255,255,.94);
  border: 1px solid #d2d2d2; border-radius: 8px; padding: 6px 12px; color: #555;
  box-shadow: 0 2px 9px rgba(0,0,0,.14); font-size: 12.5px; pointer-events: none; }
#hint b { color: #1a1a1a; }

/* ALERT TOAST: the red pop-ups ("Yard built", rain warnings, job updates) get their OWN bubble
   at the TOP of the screen — they no longer share the instructions bar, and they linger ~6.5s
   instead of 2.6s. Sits below the alert-log head (top-left) and the readout (top-right) so it
   can't cover either; the full history is always in the alert log. */
#toast { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 33;
  max-width: min(680px, calc(100vw - 24px)); text-align: center; background: #fff8f7;
  border: 1px solid #ddb0ac; border-radius: 9px; padding: 8px 14px; color: #a11;
  box-shadow: 0 3px 12px rgba(0,0,0,.18); font-size: 13px; pointer-events: none;
  opacity: 0; transition: opacity .25s; }
#toast.show { opacity: 1; }
#toast b { color: #7d0e0e; }

/* CHANGE-ORDER NEGOTIATION: a true modal — the sim pauses underneath, the demand takes focus */
#comodal { position: fixed; inset: 0; z-index: 60; background: rgba(20,24,30,0.45);
  display: flex; align-items: center; justify-content: center; }
#comodal.hidden { display: none; }
.co-card { width: min(460px, calc(100vw - 40px)); background: #fff; border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.35); padding: 16px 18px; }
.co-head { font-weight: 800; font-size: 15px; color: #15212b; margin-bottom: 8px; }
.co-bodytext { font-size: 12.5px; color: #444; line-height: 1.45; }
.co-bodytext .tn-hint { color: #888; font-size: 11.5px; }
.co-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.co-actions button { font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid #bdbdbd; background: #fff; cursor: pointer; }
.co-actions button:hover { background: #f2f4f5; }
.co-actions .co-paybtn { background: #0d6e6e; border-color: #0d6e6e; color: #fff; font-weight: 700; }
.co-actions .co-paybtn:hover { background: #0a5a5a; }
.co-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* work crews & repair jobs panels (right side) */
#crewpanel, #jobpanel { left: auto; right: 12px; width: 336px; max-height: calc(100vh - 140px); overflow-y: auto; }
#crewpanel .tn-sec, #jobpanel .tn-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0d6e6e; margin: 10px 0 5px; border-top: 1px solid #eee; padding-top: 8px; }
#crewpanel .tn-hint, #jobpanel .tn-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #999; font-size: 10px; }
#crewpanel .tn-row, #jobpanel .tn-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2.5px 0;
  font-size: 12px; border-bottom: 1px dashed #f0f0f0; font-variant-numeric: tabular-nums; }
#crewpanel .tn-ok, #jobpanel .tn-ok { color: #1d7a3a; font-weight: 600; }
#crewpanel .tn-bad, #jobpanel .tn-bad { color: #a11; font-weight: 600; }
#crewpanel .tn-dim, #jobpanel .tn-dim { color: #999; font-size: 11.5px; }
#cp-yardrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px;
  padding: 7px 9px; background: #fdf6ec; border: 1px solid #e8d3ab; border-radius: 8px; font-size: 11.5px; color: #5a4a30; }
.cp-row, .jp-row { border: 1px solid #e4e7e9; border-radius: 8px; padding: 7px 9px; margin: 6px 0; background: #fafbfb; }
.cp-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.cp-state { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #888; }
.cp-state.busy { color: #d98012; }
.cp-state.idle { color: #1d7a3a; }
.cp-mid { font-size: 11.5px; color: #667; margin-top: 2px; }
.cp-stars { font-size: 10.5px; color: #556; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-stars i, .cp-st { font-style: normal; color: #d98012; letter-spacing: 1px; }
.cp-fire { margin-left: auto; padding: 2px 8px !important; font-size: 11px !important; }
.cp-trait { display: inline-block; background: #f3ecff; border: 1px solid #d4c2ee; color: #5b2d91; border-radius: 9px;
  padding: 1px 7px; font-size: 10px; font-weight: 700; cursor: help; }
.cp-spec { display: inline-flex; align-items: center; gap: 4px; background: #eef5ff; border: 1px solid #bcd4f0; color: #1d4e86;
  border-radius: 9px; padding: 1px 7px 1px 5px; font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle; }
.spec-ico { width: 14px; height: 14px; flex: none; }
.jp-bidname .spec-ico { vertical-align: -3px; }
.cp-term { color: #8a5a10; font-weight: 600; font-size: 11px; }
.cp-term.free { color: #1d7a3a; }
.cp-firm { border: 1px solid #dfe3e6; border-radius: 9px; padding: 8px 9px; margin: 6px 0; background: #fbfcfd;
  transition: border-color .12s, box-shadow .12s; }
.cp-firm:hover { border-color: #0d6e6e; box-shadow: 0 2px 8px rgba(13,110,110,.12); }
.cp-signrow { margin: 6px 0 0 !important; justify-content: space-between; }

/* --- Contractors panel: split into two clearly labelled groups so payroll and the
   open market stop reading as one wall of text --- */
#crewpanel .cp-sec { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 16px 0 8px; padding: 6px 10px; border-top: none; border-radius: 7px; }
#crewpanel .cp-sec:first-of-type { margin-top: 6px; }
#crewpanel .cp-sec-payroll { background: #ecf6ef; color: #1c7a3a; border: 1px solid #cce5d3; }
#crewpanel .cp-sec-market  { background: #eef3fb; color: #1d4e86; border: 1px solid #ccddf2; }
#crewpanel .cp-sec .tn-hint { color: inherit; opacity: .72; }
/* payroll cards carry a green edge (these are YOURS); market offers carry a blue edge */
#crewpanel #cp-rows .cp-row { border-left: 3px solid #2f9e57; background: #f5faf6; }
#crewpanel #cp-market .cp-firm { border-left: 3px solid #2f7fd1; }
.cp-price { font-size: 11.5px; color: #445; font-variant-numeric: tabular-nums; }
.cp-total { border-top: 1px solid #e2e2e2; margin-top: 3px; padding-top: 4px !important; border-bottom: none !important; }
.jp-est { font-size: 11.5px; color: #556; background: #f4f7f7; border: 1px solid #e0e7e7; border-radius: 7px; padding: 6px 8px; margin-bottom: 7px; }
.jp-bar { height: 9px; background: #efefef; border-radius: 5px; overflow: hidden; margin-top: 5px; }
.jp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e8a01e, #d97a12); border-radius: 5px; transition: width .4s; }
.jp-assign { margin: 6px 0 0 !important; }
.jp-assign select.jp-crew { flex: 1; font: inherit; font-size: 11.5px; padding: 4px 5px; border: 1px solid #bdbdbd; border-radius: 5px; min-width: 0; }
.jp-row.jp-hist { opacity: .55; padding: 4px 9px; }
#crewpanel input#cp-name { flex: 1; width: auto; text-align: left; }

/* ---- job lifecycle: phase badges, stepper, bid table, actions ---- */
.jp-headbtns { display: flex; align-items: center; gap: 8px; }
.jp-newrow { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 7px 8px;
  background: #f4f7f7; border: 1px solid #e0e7e7; border-radius: 8px; }
.jp-notice { background: #fff3f0; border: 1.5px solid #e08a6a; color: #8a2a10; border-radius: 8px;
  padding: 7px 10px; margin-bottom: 7px; font-size: 12px; font-weight: 600; }
.jp-newrow .to-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #66777a; }
.jp-row { transition: border-color .15s, box-shadow .15s; }
.jp-row.jp-sel { border-color: #d9a915; box-shadow: 0 0 0 2px rgba(255,210,74,.35); background: #fffdf4; }
.jp-ph { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; padding: 2px 8px; border-radius: 9px; color: #fff; }
.jp-ph.ph-design { background: #2563eb; }
.jp-ph.ph-procure { background: #7c3ab4; }
.jp-ph.ph-active { background: #d98012; }
.jp-ph.ph-done { background: #1d7a3a; }
.jp-ph.ph-dead { background: #9aa0a6; }
.jp-name { margin-left: 8px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.jp-rename { flex: 1; margin-left: 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: #15212b;
  border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; background: transparent; min-width: 0; text-align: left; width: auto; }
input.jp-rename:hover { border-color: #d5d9dc; background: #fff; }
input.jp-rename:focus { border-color: #2563eb; background: #fff; outline: none; }
.jp-steps { display: flex; align-items: center; gap: 5px; margin: 5px 0 2px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #b6bcc2; }
.jp-step.past { color: #6f9c7f; }
.jp-step.cur { color: #15212b; background: #eef2f6; border: 1px solid #d6dde3; border-radius: 8px; padding: 1px 7px; }
.jp-arrow { color: #d3d8dc; font-size: 11px; }
.jp-arrow.past { color: #6f9c7f; }
.jp-actions { margin-top: 7px !important; gap: 7px; }
.jp-btn { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid #c8ced3; background: #f7f9fa; color: #2a3640; transition: background .12s, border-color .12s; }
.jp-btn:hover { background: #eef2f4; border-color: #9fb0b8; }
.jp-btn.primary { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
.jp-btn.primary:hover { background: #0a5858; }
.jp-btn.primary:disabled { background: #b9cccc; border-color: #b9cccc; cursor: default; }
.jp-btn.danger { color: #a11; border-color: #dcb9b9; background: #fff6f6; }
.jp-btn.danger:hover { background: #ffecec; }
.jp-btn.jp-mini { padding: 2px 8px; font-size: 10.5px; }
.jp-bids { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.jp-bid { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #e2e6e9; border-radius: 8px;
  cursor: pointer; background: #fbfcfd; transition: border-color .12s, background .12s; }
.jp-bid:hover { border-color: #b9a6d6; }
.jp-bid.pick { border-color: #7c3ab4; background: #faf6ff; box-shadow: 0 0 0 1.5px rgba(124,58,180,.25); }
.jp-bid.busy { opacity: .5; cursor: default; }
.jp-bid input { accent-color: #7c3ab4; }
.jp-bidname { font-weight: 700; font-size: 12px; flex: none; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-bidq { flex: 1; font-size: 8.5px; color: #d98012; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-bidnum { flex: none; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.2; }
.jp-bidnum i { font-style: normal; color: #889; font-size: 10.5px; }

/* ---- work-zone placement confirm bar ---- */
#zoneconfirm { position: absolute; bottom: 160px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff;
  border: 1.5px solid #2563eb; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,40,90,.28); font-size: 12.5px; }
#zoneconfirm #zc-label { color: #2a3640; }
#zoneconfirm button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
#zoneconfirm #zc-ok { background: #2563eb; color: #fff; }
#zoneconfirm #zc-ok:hover { background: #1c4fc4; }
#zoneconfirm #zc-cancel { background: #fff; color: #a11; border-color: #d9b3b3; }
#zoneconfirm #zc-cancel:hover { background: #ffefef; }

#bridgeprompt { position: absolute; bottom: 160px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff;
  border: 1.5px solid #0d6e6e; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,40,90,.28); font-size: 12.5px; max-width: 92vw; flex-wrap: wrap; }
#bridgeprompt #bpr-label { color: #2a3640; }
#bridgeprompt button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
#bridgeprompt #bpr-design { background: #0d6e6e; color: #fff; }
#bridgeprompt #bpr-design:hover { background: #0a5757; }
#bridgeprompt #bpr-auto { background: #fff; color: #0d6e6e; border-color: #9ec7c7; }
#bridgeprompt #bpr-auto:hover { background: #eef7f7; }

/* ===== Main menu overlay ===== */
.hidden { display: none !important; }
#menu-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(30,46,58,.78), rgba(12,18,24,.92));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#menu-panel { width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 30px 30px 26px; }
#menu-panel h1 { font-size: 30px; font-weight: 800; letter-spacing: .04em; color: #15212b; margin-bottom: 4px; }
#menu-panel h1 span { color: #0d6e6e; }
#menu-panel h2 { font-size: 20px; font-weight: 700; color: #15212b; margin-bottom: 18px; }
#menu-panel .tagline { color: #667; margin-bottom: 22px; font-size: 13px; }

.menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.mm-btn { font: inherit; text-align: left; padding: 13px 16px; border: 1px solid #d3d8dc; border-radius: 10px;
  background: #f6f8f9; color: #1a2630; cursor: pointer; font-weight: 600; font-size: 15px; line-height: 1.25;
  display: flex; flex-direction: column; gap: 2px; transition: background .12s, border-color .12s, transform .04s; }
.mm-btn small { font-weight: 400; font-size: 12px; color: #6b7780; }
.mm-btn:hover { background: #eef2f4; border-color: #9fb0b8; }
.mm-btn:active { transform: translateY(1px); }
.mm-btn.primary { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
.mm-btn.primary small { color: rgba(255,255,255,.82); }
.mm-btn.primary:hover { background: #0a5b5b; }
.mm-btn.ghost { background: transparent; border-color: transparent; color: #6b7780; font-weight: 500; padding: 8px 16px; align-items: center; }
.mm-btn.ghost:hover { background: #f0f3f4; }
.mm-btn:disabled { opacity: .45; cursor: not-allowed; }
.mm-btn:disabled:hover { background: #f6f8f9; border-color: #d3d8dc; transform: none; }
.mm-btn.active { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
.mm-btn.active small { color: rgba(255,255,255,.82); }
.mm-btn.active:hover { background: #0a5b5b; }
#cfg-sandbox { width: 100%; margin: 2px 0 16px; }

.cfg-row { display: block; margin-bottom: 18px; }
.cfg-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 13px; color: #2a3540; margin-bottom: 7px; }
.cfg-label em { font-style: normal; font-weight: 700; color: #0d6e6e; font-variant-numeric: tabular-nums; }
.cfg-row input[type="range"] { width: 100%; accent-color: #0d6e6e; cursor: pointer; }
.cfg-control { display: flex; gap: 8px; }
.cfg-control input[type="number"] { flex: 1; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #c4ccd1; border-radius: 8px; }
.cfg-control button { font: inherit; font-size: 16px; padding: 4px 12px; border: 1px solid #c4ccd1; border-radius: 8px; background: #f6f8f9; cursor: pointer; }
.cfg-control button:hover { background: #eef2f4; }
.cfg-hint { display: block; margin-top: 5px; font-size: 11.5px; color: #8a949b; }

/* ===== touch & small-screen optimisation ===== */
@media (pointer: coarse) {
  #toolopts button { padding: 9px 13px; font-size: 13px; }       /* finger-sized targets */
  .ft-btn { width: 92px; padding: 12px 4px 10px; }
  .sidepanel .sp-btn { width: 36px; height: 36px; font-size: 15px; }
  .sidepanel input { padding: 8px 6px; font-size: 14px; }
  .sidepanel .sp-pre, #daypanel .dp-m { padding: 7px 12px; }
}
@media (max-width: 860px) {
  /* the bar becomes a single horizontally-scrollable strip */
  #hud { padding: 0 8px 8px; gap: 6px; }
  #bottombar { overflow-x: auto; scrollbar-width: none; padding: 4px 6px; gap: 4px; }
  #bottombar::-webkit-scrollbar { display: none; }
  #bottombar > * { flex: none; }
  #bottombar .bb-title { display: none; }
  #bottombar .bb-tool, #bottombar .bb-cat { min-width: 56px; padding: 4px 8px 3px; }
  #bottombar .bb-flex { flex: 1; }
  /* flyouts go full-width above the bar */
  .flyout { left: 0 !important; right: 0; min-width: 0; }
  /* readout stays as a slim strip along the top (the verbose hint is hidden) */
  #readout { left: 8px; right: 8px; top: 8px; gap: 10px; font-size: 11.5px;
    padding: 5px 9px; overflow-x: auto; scrollbar-width: none; justify-content: space-between; }
  #readout::-webkit-scrollbar { display: none; }
  #readout span { white-space: nowrap; }
  #hint { display: none; }
  /* panels become sheets pinned above the HUD */
  .sidepanel { left: 8px !important; right: 8px !important; width: auto !important;
    top: auto; bottom: 78px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #touchbar { bottom: 120px; }
  /* alert window tucks just under the slim top readout strip */
  .alertwin { top: 44px; left: 8px; right: 8px; width: auto; }
}