* { 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 --- */
/* shrink-to-fit its buttons (so the white container's border always wraps every item, incl. the
   Menu button) while never growing wider than the viewport. */
/* solid, full-width bar flush to the bottom edge (negative margins cancel #hud's 12px padding so it spans
   the whole window and never bleeds past a rounded pill). The stretch spacer (.bb-flex) pushes the sim/menu
   cluster to the right, leaving room for more options. */
#bottombar { display: flex; align-items: stretch; gap: 6px; align-self: stretch; width: auto; max-width: none;
  margin: 0 -12px -12px; box-sizing: border-box;
  background: #fff; border: 1px solid #c4c4c4; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; padding: 6px 16px;
  box-shadow: 0 -3px 14px 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 1 auto; min-width: 12px; }   /* stretch spacer: pushes the sim/menu cluster to the right edge of the full-width bar */
#bottombar #simctl { display: flex; align-items: center; gap: 5px; }
#bottombar #zoomctl { display: flex; align-items: center; gap: 4px; }
#bottombar #zoomctl .bb-mini { min-width: 36px; text-align: center; }   /* finger-sized +/− on touch */
#bottombar #zoomctl .bb-zfit { font-size: 11px; font-weight: 700; min-width: 40px; }
/* 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; }
/* imported-interchange stamp buttons + delete badge */
.ixn-preset { position: relative; }
/* built-in presets ship with the game — a subtle teal star marks them apart from a player's own imports */
.ixn-builtin::after { content: "★"; position: absolute; top: 1px; right: 4px; font-size: 9px; line-height: 1; color: #0d6e6e; opacity: .65; pointer-events: none; }
.ixn-del { position: absolute; top: 2px; right: 3px; width: 16px; height: 16px; line-height: 14px; text-align: center;
  font-size: 13px; font-weight: 700; color: #b04a4a; border-radius: 50%; opacity: 0; transition: opacity .1s, background .1s; }
.ixn-preset:hover .ixn-del { opacity: .85; }
.ixn-del:hover { background: #f3dada; opacity: 1; }
.ixn-locked .ft-btn { opacity: .4; pointer-events: none; }
/* import modal */
#ixnimport { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(20,28,30,.42); backdrop-filter: blur(2px); }
#ixnimport.hidden { display: none; }
.ixni-card { width: min(460px, calc(100vw - 32px)); background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.32); animation: walkPop .18s ease-out; }
.ixni-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  background: #0d6e6e; color: #fff; font-weight: 700; font-size: 15px; }
.ixni-x { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: .85; }
.ixni-x:hover { opacity: 1; }
.ixni-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.ixni-hint { margin: 0; font-size: 12.5px; color: #4a5a5a; line-height: 1.45; }
.ixni-hint code { background: #eef4f4; padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.ixni-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #344; }
.ixni-row input { flex: 1; padding: 7px 9px; border: 1px solid #cfd6d6; border-radius: 8px; font: inherit; }
.ixni-pick { padding: 9px; border: 1px dashed #8fb5b5; border-radius: 9px; background: #f4fafa; color: #0d6e6e;
  font: inherit; font-weight: 600; cursor: pointer; }
.ixni-pick:hover { background: #e8f4f4; }
.ixni-or { text-align: center; font-size: 11px; color: #8a9a9a; letter-spacing: .3px; }
#ixni-text { width: 100%; min-height: 92px; resize: vertical; padding: 9px 10px; border: 1px solid #cfd6d6;
  border-radius: 9px; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; box-sizing: border-box; }
.ixni-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 2px; }
.ixni-foot button { padding: 8px 16px; border-radius: 9px; border: 1px solid #cfd6d6; background: #f4f6f6;
  font: inherit; font-weight: 600; cursor: pointer; }
.ixni-foot .ixni-go { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
.ixni-foot .ixni-go:hover { background: #0b5d5d; }
.ft-btn:disabled:hover, .ft-btn.locked:hover { background: #f8fafa; border-color: #d6dbde; }
/* FIXED HEIGHT so swapping the per-tool description never resizes the (bottom-anchored) flyout —
   reserves room for the longest blurb; shorter ones just leave whitespace, longer ones clamp. */
.fly-desc { margin-top: 8px; border-top: 1px solid #eee; padding-top: 7px; font-size: 11.5px;
  color: #667; line-height: 1.35; height: 86px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.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; overflow-x: hidden; }
.dc-row { display: flex; flex-wrap: wrap; 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; min-width: 0; 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-bid { flex: none; font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 8px;
  border: 1px solid #0d6e6e; border-radius: 6px; background: #0d6e6e; color: #fff; cursor: pointer;
  white-space: nowrap; transition: background .12s, border-color .12s; }
.dc-bid:hover { background: #0b5d5d; border-color: #0b5d5d; }
.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-exp { flex: none; font: inherit; font-size: 14px; line-height: 1; padding: 2px 7px; border: 1px solid #cdd6d6;
  border-radius: 6px; background: #f4f8f8; color: #0d6e6e; cursor: pointer; transition: background .12s, border-color .12s; }
.dc-exp:hover { background: #e3f1f1; border-color: #8fb5b5; }
.dc-ren { flex: none; font: inherit; font-size: 12.5px; line-height: 1; padding: 3px 7px; border: 1px solid #cdd6d6;
  border-radius: 6px; background: #f4f8f8; color: #4a7a6a; cursor: pointer; transition: background .12s, border-color .12s; }
.dc-ren:hover { background: #e9f3ee; border-color: #8fb5b5; }
.dc-name { user-select: none; cursor: default; }
.dc-empty { font-size: 11.5px; color: #99a; padding: 3px 1px; }
/* ===== desktop right-side dock for design controls (Photoshop-style panel) ===== */
#designdock { position: fixed; top: 50px; left: 12px; bottom: 80px; width: 320px; z-index: 27;
  display: flex; flex-direction: column; gap: 9px; padding: 12px; box-sizing: border-box;
  background: rgba(249,251,251,0.98); border: 1px solid #d2d9dc; border-radius: 12px;
  box-shadow: 0 12px 36px rgba(20,40,45,0.18); overflow-x: hidden; overflow-y: auto; }
#designdock * { max-width: 100%; box-sizing: border-box; }   /* nothing may push the panel wider → no horizontal scroll */
#designdock.hidden { display: none; }
.dock-head { font: 800 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #0d6e6e; padding-bottom: 8px; border-bottom: 1px solid #e3e9e9; flex: none; }
#designdock .flyout { position: static; left: auto; width: auto; max-width: none; background: none; border: none;
  box-shadow: none; padding: 0; margin: 0; display: block; }
#designdock .flyout.hidden { display: none; }
#designdock .fly-tools { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
#designdock .fly-tools .ft-btn { width: auto; min-width: 0; padding: 9px 3px 7px; }
#designdock .fly-tools .ft-lab { font-size: 10px; }
#designdock #designctl { margin-top: 2px; }
#designdock .fly-desc { margin-top: 2px; font-size: 11px; line-height: 1.4; color: #5a6a6a; }
/* --- segment-edit panel: a clean stack of labelled sections, fully wrapped to the panel width --- */
#designdock #road-options { position: static; display: none; margin: 0; padding: 8px 0 0; border-top: 1px solid #e3e9e9; left: auto; width: 100%; }
#designdock #road-options.show { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
#designdock #road-options > .to-label {                               /* the "Edit segment" title */
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0d6e6e; margin: 0 0 2px; }
/* Lanes / Level / Direction buttons become full-width SECTION HEADERS */
#designdock #road-options > .seg[data-tool] {
  width: 100%; text-align: left; padding: 8px 11px; margin: 9px 0 0; border: 1px solid #d3dadd; border-radius: 8px;
  background: #eef3f3; font-weight: 700; font-size: 12px; color: #2a3b3b; }
#designdock #road-options > .seg[data-tool]:hover { background: #e4eeee; border-color: #b6cccc; }
#designdock #road-options > .seg[data-tool].active { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
/* the control group following each header — a soft-bordered body */
#designdock #lanectl, #designdock #levelctl, #designdock #dirctl, #designdock #bridgectl, #designdock #curvectl {
  display: none; flex-direction: column; align-items: stretch; gap: 9px; width: 100%; max-width: 100%;
  border: 1px solid #e6ecec; border-top: 0; border-radius: 0 0 8px 8px; margin: 0 0 1px; padding: 9px 10px;
  background: #fbfdfd; }
#designdock #lanectl.show, #designdock #levelctl.show, #designdock #dirctl.show, #designdock #bridgectl.show, #designdock #curvectl.show { display: flex; }
#designdock #curvectl #cv-slider { width: 100%; }
#designdock #curvectl .cv-readout { white-space: normal; font-size: 13px; }
#designdock #road-options .lc-grp { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
#designdock #road-options .lc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#designdock #road-options .lc-sub { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5a8a8a; }
#designdock #road-options .wsep { display: none; }
#designdock #road-options .lc-desc { width: 100%; font-size: 10.5px; color: #6a7878; line-height: 1.4;
  margin: 2px 0 0; padding-top: 7px; border-top: 1px solid #ebf0f0; min-height: 0; order: 0; }
#designdock #road-options button { font-size: 12px; padding: 6px 10px; white-space: nowrap; }
#designdock #road-options #lane-n, #designdock #road-options #level-n { min-width: 48px; }
#designdock #road-options #seg-finalize { width: 100%; margin: 12px 0 2px; padding: 10px; border-radius: 8px;
  background: #0d6e6e; border-color: #0d6e6e; color: #fff; font-weight: 700; text-align: center; }
#designdock #road-options #seg-finalize:hover { background: #0b5d5d; }
#designdock #bridgectl #br-info { font-size: 11px; color: #445; width: 100%; }
/* never dock on narrow windows or touch devices — the bottom HUD owns those */
@media (max-width: 1099px), (pointer: coarse) { #designdock { display: none !important; } }
.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 button#seg-finalize { background: #0d6e6e; border-color: #0d6e6e; color: #fff; font-weight: 700; margin-left: 4px; }
#toolopts button#seg-finalize:hover { background: #0b5d5d; border-color: #0b5d5d; }
#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, #upgctl, #bridgectl, #curvectl { 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, #upgctl.show, #bridgectl.show, #curvectl.show { display: inline-flex; }
#curvectl #cv-slider { width: 150px; accent-color: #0d6e6e; vertical-align: middle; cursor: pointer; }
#curvectl .cv-readout { font-size: 12px; color: #2a3b3b; font-variant-numeric: tabular-nums; white-space: nowrap; }
#curvectl .cv-dim { color: #889; font-weight: 400; }
#drainctl .seg.active { background: #2c6e9e; border-color: #2c6e9e; color: #fff; }
#upg-median.active, #upg-shoulder.active { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
#lanectl, #levelctl, #dirctl, #spdctl, #upgctl, #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 — large centered modal ===== */
#bridgepanel { position: fixed; inset: 0; z-index: 60; width: auto;
  background: rgba(18,26,36,0.42); display: flex; align-items: center; justify-content: center;
  padding: 24px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#bridgepanel .bp-card { position: static; top: auto; left: auto; right: auto;
  width: min(920px, 96vw); max-width: 920px; max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 22px 70px rgba(8,14,22,.45); }
#bridgepanel .sp-title { font-size: 16px; }
#br-elev { width: 100%; height: auto; display: block; border: 1px solid #c9c9c9; border-radius: 8px;
  background: #eaf2f6; margin: 8px 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; align-self: stretch; }
/* redesigned Lanes panel: each group is a labelled column (tiny caption over its row of buttons) */
#lanectl.show { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 8px; max-width: 92vw; }
#lanectl .lc-grp { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#lanectl .lc-row { display: inline-flex; align-items: center; gap: 4px; }
#lanectl .lc-sub { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0d6e6e; white-space: nowrap; }
#lanectl #lane-median.active, #lanectl #lane-shoulder-l.active, #lanectl #lane-shoulder-r.active {
  background: #0d6e6e; border-color: #0d6e6e; color: #fff; font-weight: 700; }
/* armed add-lane preview: the chosen side button glows green to match the ghost on the map */
#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.lc-ok { color: #fff; background: #2e7d32; border-color: #2e7d32; font-weight: 700; }
#lanectl #lane-cancel.lc-no { color: #fff; background: #c0392b; border-color: #c0392b; font-weight: 700; }
#lanectl #lane-confirm:disabled, #lanectl #lane-cancel:disabled { background: #f7f7f7; color: #bbb; border-color: #ddd; }
/* the live description line: its OWN row under the controls. width:0 + min-width:100% makes it FILL the
   controls' width without ever widening the panel, and a reserved min-height stops the text from
   resizing the panel as it changes on hover (both horizontally and vertically). */
#lanectl .lc-desc { order: 99; width: 0; min-width: 100%; box-sizing: border-box; min-height: 2.6em;
  font-size: 10.5px; color: #555; line-height: 1.25; white-space: normal;
  padding-top: 4px; margin-top: 2px; border-top: 1px solid #eee; }
#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; }

/* ===== Walk-off acknowledgment modal (pauses the game) — reuses .co-card with a red alarm band ===== */
#walkmodal { position: fixed; inset: 0; z-index: 61; background: rgba(20,24,30,0.5);
  display: flex; align-items: center; justify-content: center; }
#walkmodal.hidden { display: none; }
.walk-card { width: min(460px, calc(100vw - 32px)); animation: walkPop .18s ease-out; }
@keyframes walkPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.walk-head { background: #8c2a16; }   /* alarm-red header band */
#walk-body { padding: 14px 16px 4px; }
#walk-body p { margin: 0 0 10px; font-size: 12.5px; color: #3b4853; line-height: 1.5; }
.walk-stats { display: flex; gap: 10px; margin: 12px 0; }
.walk-stat { flex: 1; text-align: center; background: #faf3f1; border: 1px solid #ecd3cc; border-radius: 10px; padding: 9px 8px; }
.walk-stat b { display: block; font-size: 19px; font-weight: 800; color: #8c2a16; line-height: 1.1; font-variant-numeric: tabular-nums; }
.walk-stat span { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #9a857f; }
.walk-guide { background: #f6f8fa; border-left: 3px solid #d98012; border-radius: 0 8px 8px 0; padding: 9px 11px !important;
  font-size: 11.5px !important; color: #4a5560 !important; }
.walk-actions { padding: 4px 16px 14px; }
.co-card { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 36px); overflow: auto; position: relative;
  background: #fff; border-radius: 12px; box-shadow: 0 14px 52px rgba(0,0,0,.4); padding: 0; }
/* full-bleed dark header band — used for both the RFI form and the change order */
.co-head { background: #15212b; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .03em;
  padding: 11px 16px; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.co-head .co-hsub { font-weight: 600; font-size: 11.5px; color: #aebcc8; margin-left: 4px; }
.co-head .co-no { font: 600 11px ui-monospace, Menlo, Consolas, monospace; background: #2c3a47; color: #d8e2ea;
  padding: 2px 8px; border-radius: 5px; letter-spacing: .04em; white-space: nowrap; }
.co-bodytext { font-size: 12.5px; color: #3b4853; line-height: 1.5; padding: 12px 16px 2px; }
.co-bodytext .tn-hint { color: #8a949d; font-size: 11.5px; }

/* ---- RFI field-form ---- */
.rfi-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0 0 2px; }
.rfi-meta .cell { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted #e4ddca; }
.rfi-meta .k { font: 700 9.5px ui-monospace, Menlo, monospace; letter-spacing: .05em; color: #9a8f73; min-width: 70px; }
.rfi-meta .v { font-size: 12px; color: #2b3946; font-weight: 600; }
.rfi-meta .v.warn { color: #b06a0e; }
.rfi-stamp { position: absolute; top: 60px; right: 16px; transform: rotate(-11deg); border: 2.5px solid #c0392b;
  color: #c0392b; font: 800 15px system-ui; letter-spacing: .08em; padding: 2px 10px; border-radius: 5px; opacity: .85; pointer-events: none; }
.rfi-sec { font: 700 10px ui-monospace, Menlo, monospace; letter-spacing: .09em; color: #0d6e6e; margin: 12px 0 5px; }
.rfi-sec .sec-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: #a59c86; }
.rfi-fieldbody { font-size: 12.5px; line-height: 1.5; color: #3b4853; }
.co-chip { display: inline-block; font: 700 10.5px system-ui; padding: 2px 9px; border-radius: 20px; margin-left: 4px; vertical-align: middle; }
.co-chip.warn { background: #fbeede; color: #9a5a00; border: 1px solid #efcf9c; }
.co-chip.grey { background: #eef0f3; color: #5b6570; border: 1px solid #d6dbe1; }
.co-chip.ok { background: #e9f7ee; color: #1c7a3a; border: 1px solid #b9e2c7; }

/* ---- spreadsheet cost matrix (RFI snapshot + CO worksheet) ---- */
.co-mx { width: 100%; border-collapse: collapse; font-size: 12px; border: 1px solid #d7d0bf; margin-top: 2px; }
.co-mx th { background: #eef1ea; text-align: left; font: 700 10px ui-monospace, Menlo, monospace; letter-spacing: .05em;
  color: #7c8a78; padding: 5px 9px; border: 1px solid #d7d0bf; }
.co-mx td { padding: 5px 9px; border: 1px solid #e6e0d0; color: #33414c; }
.co-mx td.num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; }
.co-mx tr:nth-child(even) td { background: #faf8f1; }
.co-mx td.bad { color: #c0392b; } .co-mx td.ok { color: #1d7a3a; } .co-mx td.dim { color: #9aa3ab; font-weight: 500; }
.co-mx tr.hot td { background: #fcefe9; }

/* ---- RFI resolution options — checkbox-style form rows (no cost shown) ---- */
.co-options { display: flex; flex-direction: column; gap: 7px; padding: 2px 16px 0; }
.co-options:empty { display: none; }
.co-opt { text-align: left; font: inherit; cursor: pointer; border: 1px solid #d6cfbd; background: #fff;
  border-radius: 8px; padding: 9px 11px; display: flex; gap: 10px; align-items: flex-start; transition: border-color .12s, background .12s; }
.co-opt:hover { border-color: #0d6e6e; background: #f4faf9; }
.co-opt:active { transform: translateY(1px); }
.co-opt:disabled { opacity: .5; cursor: not-allowed; }
.co-opt .co-box { width: 14px; height: 14px; border: 1.6px solid #b3a98f; border-radius: 3px; margin-top: 2px; flex: 0 0 auto; }
.co-opt:hover .co-box { border-color: #0d6e6e; }
.co-opt .co-opt-h { font-weight: 700; font-size: 12.5px; color: #1c2a35; display: block; }
.co-opt .co-opt-h .sch { font: 600 10px ui-monospace, Menlo, monospace; color: #8a7f64; margin-left: 6px; }
.co-opt .co-opt-b { font-size: 11.5px; color: #5a6570; line-height: 1.4; display: block; margin-top: 1px; }

/* ---- change-order negotiation: contractor speech bubble + engineer advisory ---- */
.co-talk { display: flex; gap: 12px; align-items: flex-start; margin-top: 2px; }
.co-silho { flex: 0 0 auto; }
.co-bubble { position: relative; background: #f1f5f6; border: 1px solid #dde4e7; border-radius: 12px; padding: 9px 13px; flex: 1; }
.co-bubble:before { content: ""; position: absolute; left: -8px; top: 18px; border: 7px solid transparent; border-right-color: #f1f5f6; border-left: 0; }
.co-bubble:after { content: ""; position: absolute; left: -9px; top: 17px; border: 8px solid transparent; border-right-color: #dde4e7; border-left: 0; z-index: -1; }
.co-who { font-size: 11.5px; font-weight: 800; color: #1c2a35; margin-bottom: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.co-bubble p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #33414c; }
.co-ask { margin-top: 5px; font-size: 11.5px; color: #5a6570; }
.co-advis { display: flex; gap: 11px; margin-top: 11px; padding: 11px 13px; background: #fbf7ef; border: 1px solid #ecdcc0; border-radius: 9px; }
.co-advis .adv-av { flex: 0 0 auto; align-self: flex-start; }
.co-advis .adv-h { font: 800 11px system-ui; letter-spacing: .03em; color: #7a5a1e; margin-bottom: 4px; }
.co-advis .adv-row { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: #54483a; margin-top: 6px; }
.co-advis .adv-row .adv-ico { flex: 0 0 auto; margin-top: 1px; }
.co-mxwrap { margin-top: 11px; }
.co-bad { color: #c0392b; } .co-ok { color: #1d7a3a; }

.co-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 11px 16px 14px; }
.co-actions button { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 8px;
  border: 1px solid #cfd6dd; background: #fff; color: #33414c; cursor: pointer; }
.co-actions button:hover { background: #f2f4f5; }
.co-actions .co-paybtn { background: #0d6e6e; border-color: #0d6e6e; color: #fff; }
.co-actions .co-paybtn:hover { background: #0a5a5a; }
.co-actions button:disabled { opacity: .45; cursor: not-allowed; }
.co-standstill { text-align: right; font-size: 10.5px; color: #9aa3ab; padding: 0 16px 12px; }

/* work crews & repair jobs — now rendered inside the dashboard MODALS */
#crewmodal .tn-sec, #jobmodal .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; }
#crewmodal .tn-hint, #jobmodal .tn-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #999; font-size: 10px; }
#crewmodal .tn-row, #jobmodal .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; }
#crewmodal .tn-ok, #jobmodal .tn-ok { color: #1d7a3a; font-weight: 600; }
#crewmodal .tn-bad, #jobmodal .tn-bad { color: #a11; font-weight: 600; }
#crewmodal .tn-dim, #jobmodal .tn-dim { color: #999; font-size: 11.5px; }

/* ===== dashboard MODALS (Contractors & Jobs): light, centered, live (game keeps running) ===== */
.gamemodal { position: fixed; inset: 0; z-index: 58; background: rgba(20,28,38,0.28);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.gamemodal.hidden { display: none; }
.gm-card { display: flex; flex-direction: column; background: #f7f9fb; color: #1b2530;
  border: 1px solid #d4dbe2; border-radius: 14px; box-shadow: 0 18px 60px rgba(10,20,30,.34);
  width: 100%; max-height: calc(100vh - 48px); overflow: hidden; }
.cm-card { max-width: 880px; }
.ym-card { max-width: 440px; }
.ym-body { padding: 16px; }
.ym-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #2a3540; }
.ym-step { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: #4a5560; }
.ym-actions { display: flex; gap: 8px; }
.ym-actions .jp-btn { flex: 1; padding: 9px 12px; font-size: 13px; }

/* design-phase actions row — Undo / Finalize, centered just above the bottom bar (in the HUD
   stack, not pinned to the viewport corners). The row collapses entirely when both are hidden. */
#design-actions { display: flex; gap: 10px; align-items: center; justify-content: center; }
#design-actions.empty { display: none; }

/* design-phase Undo button (hidden until there's history) */
#undo-btn { display: none;
  font: 700 13px "Segoe UI", Arial, sans-serif; padding: 9px 14px; border-radius: 9px;
  border: 1px solid #c2ccd4; background: rgba(255,255,255,0.95); color: #1b2530; cursor: pointer;
  box-shadow: 0 3px 12px rgba(10,20,30,.18); backdrop-filter: blur(2px); }
#undo-btn.show { display: inline-block; }
#undo-btn:hover { background: #fff; border-color: #0d6e6e; color: #0d6e6e; }
#undo-btn:active { transform: translateY(1px); }

/* Finalize-Design button (shows whenever the active design has work in it) */
#finalize-btn { display: none;
  font: 700 13px "Segoe UI", Arial, sans-serif; padding: 10px 16px; border-radius: 9px;
  border: 1px solid #0d6e6e; background: #0d6e6e; color: #fff; cursor: pointer;
  box-shadow: 0 3px 14px rgba(10,20,30,.22); }
#finalize-btn.show { display: inline-block; }
#finalize-btn:hover { background: #0b5d5d; border-color: #0b5d5d; }
#finalize-btn:active { transform: translateY(1px); }
.jm-card { max-width: 1180px; height: calc(100vh - 48px); }
.gm-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #e2e7ec;
  background: #fff; border-radius: 14px 14px 0 0; flex: none; }
.gm-title { font-weight: 800; font-size: 15px; color: #14202b; white-space: nowrap; }
.gm-sub { flex: 1; color: #6b7682; font-size: 11.5px; line-height: 1.35; min-width: 0; }
.gm-sub .jp-notice { color: #a11; font-weight: 600; }
.gm-x { flex: none; border: none; background: none; font-size: 22px; line-height: 1; color: #8a95a0; cursor: pointer; padding: 0 4px; }
.gm-x:hover { color: #14202b; }
.gm-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px; }

/* Contractors: roster + market, side by side (stacks on narrow screens) */
.cm-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-col { display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid #e4e9ee;
  border-radius: 10px; padding: 8px 10px; transition: box-shadow .2s, border-color .2s; }
.cm-col.cm-focus { border-color: #0d6e6e; box-shadow: 0 0 0 2px rgba(13,110,110,.25); }
.cm-colhead { font-weight: 800; font-size: 12px; padding: 4px 2px 8px; border-bottom: 1px solid #eef1f4; margin-bottom: 6px; }
.cm-head-mine { color: #1c7a3a; }
.cm-head-market { color: #1d4e86; }
.cm-colhead .tn-hint { font-weight: 400; }
.cm-scroll { overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px; }
#crewmodal #cp-rows .cp-row { border-left: 3px solid #2f9e57; background: #f5faf6; }
#crewmodal #cp-market .cp-firm { border-left: 3px solid #2f7fd1; }

/* Jobs: 3 live panes (Open Bids widest) + Project History in a slide-in drawer */
.jm-body { position: relative; }
.jm-grid { display: grid; grid-template-columns: 0.82fr 1.32fr 1.06fr; gap: 12px; height: 100%; }
.jm-pane { display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid #e4e9ee; border-radius: 10px; }
.jm-panehead { font-weight: 800; font-size: 11.5px; letter-spacing: .02em; padding: 9px 10px; border-bottom: 2px solid #eef1f4;
  border-radius: 10px 10px 0 0; position: sticky; top: 0; background: #fff; z-index: 1; }
.jph-ongoing  { color: #b06a12; border-bottom-color: #f0d8b4; }
.jph-bids     { color: #7c3ab4; border-bottom-color: #e0cdf2; }
.jph-designs  { color: #0d6e6e; border-bottom-color: #c4e6e6; }
.jph-history  { color: #5a6470; border-bottom-color: #e2e7ec; }
.jm-scroll { overflow-y: auto; min-height: 0; flex: 1; padding: 8px; }
.jm-empty { color: #99a3ad; font-size: 11.5px; text-align: center; padding: 18px 8px; line-height: 1.5; }

/* History toggle button in the modal header */
.jm-histbtn { flex: none; font: 700 11px "Segoe UI", Arial, sans-serif; color: #5a6470; letter-spacing: .02em;
  background: #f1f4f7; border: 1px solid #dde3e9; border-radius: 7px; padding: 5px 11px; cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.jm-histbtn:hover { background: #e7ebef; color: #14202b; }
.jm-card.hist-open .jm-histbtn { background: #5a6470; color: #fff; border-color: #5a6470; }
.jm-histcount { font-weight: 800; opacity: .7; }
.jm-card.hist-open .jm-histcount { opacity: .85; }

/* Project History drawer + scrim (slides over the live panes) */
.jm-scrim { position: absolute; inset: -12px; background: rgba(18,28,38,.20); opacity: 0;
  pointer-events: none; transition: opacity .26s ease; z-index: 4; }
.jm-card.hist-open .jm-scrim { opacity: 1; pointer-events: auto; }
.jm-drawer { position: absolute; top: -12px; right: -12px; bottom: -12px; width: 348px; max-width: 90%;
  display: flex; flex-direction: column; background: #fff; border-left: 1px solid #e2e7ec;
  box-shadow: -12px 0 32px rgba(10,20,30,.18);
  transform: translateX(106%); transition: transform .28s cubic-bezier(.33,0,.2,1); z-index: 5; }
.jm-card.hist-open .jm-drawer { transform: translateX(0); }
.jm-drawer .jm-panehead { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: 0; position: static; }
.jm-drawer-x { border: none; background: none; font-size: 18px; line-height: 1; color: #8a95a0; cursor: pointer; padding: 0 2px; }
.jm-drawer-x:hover { color: #14202b; }

/* tablet: stack the live panes, body scrolls; drawer becomes a full sheet */
@media (max-width: 1000px) {
  .jm-card { max-width: 820px; }
  .jm-body { overflow-y: auto; }
  .jm-grid { display: block; height: auto; }
  .jm-pane { margin-bottom: 12px; }
  .jm-scroll { overflow: visible; }
  .jm-drawer { width: 100%; max-width: 100%; }
}
@media (max-width: 620px) {
  .gamemodal { padding: 0; }
  .gm-card, .cm-card, .jm-card { max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .cm-body { display: block; overflow-y: auto; }    /* single column, vertical scroll on phones */
  .cm-col { margin-bottom: 12px; }
  .cm-scroll { overflow: visible; }
  .jm-panehead { position: static; }
}
#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 #e6eaee; border-radius: 10px; padding: 7px 9px; margin: 6px 0; background: #fff; }
.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; }
.cp-home { color: #556; }

/* --- six-trade SKILL BARS (contractor cards & market offers) --- */
.cp-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin: 7px 0 2px; }
.cp-skill { display: grid; grid-template-columns: 15px 22px 1fr 22px; align-items: center; gap: 5px; cursor: help; }
.cp-skl-ico { width: 14px; height: 14px; color: #5a6470; }
.cp-skl-ico .spec-ico { width: 14px; height: 14px; }
.cp-skl-name { font-size: 9px; font-weight: 800; letter-spacing: .03em; color: #8a93a0; text-transform: uppercase; }
.cp-skl-bar { height: 6px; border-radius: 4px; background: #e7ebee; overflow: hidden; }
.cp-skl-bar i { display: block; height: 100%; border-radius: 4px; background: #9aa6b2; transition: width .25s; }
.cp-skill.lo  .cp-skl-bar i { background: #c2853a; }
.cp-skill.mid .cp-skl-bar i { background: #3f86c4; }
.cp-skill.hi  .cp-skl-bar i { background: #2f9e57; }
.cp-skl-val { font-size: 10px; font-weight: 700; color: #5a6470; text-align: right; font-variant-numeric: tabular-nums; }

/* --- relationship LEDGER (the four headline contractor stats) --- */
.cp-ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 7px 0 2px;
  border-top: 1px dashed #e0e4e7; padding-top: 6px; }
.cp-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: help; }
.cp-stat b { font-size: 12px; color: #243; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cp-stat i { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #97a0ab; }
.cp-rowfoot { display: flex; justify-content: flex-end; margin-top: 6px; }

/* --- negotiation STANCE (pill + dot), driven by relationship history --- */
.cp-stance { font-size: 9.5px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 9px; cursor: help; white-space: nowrap; }
.cp-stance.st-hungry   { background: #e9f7ee; border: 1px solid #b9e2c7; color: #1c7a3a; }
.cp-stance.st-fair     { background: #eef3fb; border: 1px solid #ccddf2; color: #1d4e86; }
.cp-stance.st-entitled { background: #fdecec; border: 1px solid #f0c2c2; color: #a8332b; }
.cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 5px; vertical-align: middle; }
.cp-dot.st-hungry   { background: #2f9e57; }
.cp-dot.st-fair     { background: #3f86c4; }
.cp-dot.st-entitled { background: #cf473c; }

/* --- job card: primary-trade chip & per-bid trade-fit badge --- */
.jp-trade { display: inline-flex; align-items: center; gap: 4px; background: #f1f4f7; border: 1px solid #d8dee4; color: #4a5560;
  border-radius: 8px; padding: 0 6px 0 4px; font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle; }
.jp-trade .spec-ico { width: 13px; height: 13px; }
.jp-fit { display: inline-flex; align-items: center; gap: 3px; border-radius: 8px; padding: 0 6px 0 4px; font-size: 10.5px;
  font-weight: 800; font-variant-numeric: tabular-nums; cursor: help; }
.jp-fit .spec-ico { width: 13px; height: 13px; }
.jp-fit.hi  { background: #e9f7ee; border: 1px solid #b9e2c7; color: #1c7a3a; }
.jp-fit.mid { background: #eef3fb; border: 1px solid #ccddf2; color: #1d4e86; }
.jp-fit.lo  { background: #fbf0e6; border: 1px solid #eccfac; color: #99571a; }
.jp-bidq { display: flex; align-items: center; justify-content: flex-end; }

/* --- 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; }

/* ===== redesigned contractor cards: iconified, color-coded by status, deployed crews indented =====
   (scoped under #crewmodal so they outrank the base "#crewmodal #cp-rows .cp-row" accent above) */
#crewmodal #cp-rows .cp-card { position: relative; border-left-width: 4px;
  transition: margin-left .18s ease, border-color .18s ease, background .18s ease; }
#crewmodal #cp-rows .cp-card .cp-top { align-items: center; }
#crewmodal #cp-rows .cp-name { font-size: 13px; font-weight: 800; color: #1a2630; }
/* status line — the headline "what are they doing & where" */
.cp-statusrow { display: flex; align-items: center; gap: 6px; margin: 6px 0; padding: 4px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.cp-status-ico { font-size: 13px; line-height: 1; flex: none; }
.cp-statusrow b { font-weight: 800; }
/* deployed (working / en route): amber accent + indented away from the yard, with an elbow connector */
#crewmodal #cp-rows .cp-card.cp-deployed { border-left-color: #e08a2a; background: #fffaf2; margin-left: 20px; }
#crewmodal #cp-rows .cp-card.cp-deployed::before { content: ''; position: absolute; left: -14px; top: 20px;
  width: 10px; height: 10px; border-left: 2px solid #e3a85c; border-bottom: 2px solid #e3a85c; border-radius: 0 0 0 3px; }
#crewmodal #cp-rows .cp-card.st-working .cp-statusrow,
#crewmodal #cp-rows .cp-card.st-enroute .cp-statusrow { background: #fbeeda; color: #9a5a0d; }
/* returning home: blue accent */
#crewmodal #cp-rows .cp-card.st-home { border-left-color: #3f86c4; background: #f4f8fc; }
#crewmodal #cp-rows .cp-card.st-home .cp-statusrow { background: #e9f0fa; color: #2f5a8c; }
/* idle / available: keep the green payroll edge; tint the status pill green */
#crewmodal #cp-rows .cp-card.st-idle .cp-statusrow { background: #e9f6ee; color: #1c7a3a; }
/* chip + fact rows */
.cp-chips, .cp-firm-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cp-chips { display: flex; margin: 2px 0 4px; }
.cp-meta { display: flex; flex-wrap: wrap; gap: 4px 13px; margin: 5px 0 2px; font-size: 11px; color: #5a6470; }
.cp-fact { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cp-fact .cp-fi { font-size: 10.5px; line-height: 1; }
.cp-fact b { font-weight: 800; color: #34404b; }
.cp-fact.tn-bad { color: #a8332b; font-weight: 700; }
#crewmodal #cp-market .cp-firm .cp-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: space-between; }
.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, transform .1s; box-shadow: 0 1px 3px rgba(22,32,45,.06); }
.jp-row.jp-sel { border-color: #d9a915; box-shadow: 0 0 0 2px rgba(255,210,74,.35); background: #fffdf4; }
.jp-row.jp-flash { animation: jpFlash 2.6s ease-out; }
@keyframes jpFlash {
  0%, 18% { border-color: #0d6e6e; box-shadow: 0 0 0 3px rgba(13,110,110,.45); background: #e8f6f6; }
  100% { border-color: #e6eaee; box-shadow: 0 1px 3px rgba(22,32,45,.06); background: #fff; }
}
.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 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px !important; padding-top: 10px; border-top: 1px solid #edf0f3; }
.jp-actions .jp-btn.primary { flex: 1 1 auto; min-width: 140px; }   /* the main action dominates the row */
/* === Construction Manager add-on (bid panel) — a warm amber "hard-hat" card. PREFIX cmsvc- (NOT cm-, which is the Contractors modal's). === */
.cmsvc-box { margin: 8px 0 6px; border: 1.5px solid #e0922a; border-radius: 12px; background: #fff7ea; padding: 8px 9px; box-shadow: 0 1px 5px rgba(176,109,18,.12); }
.cmsvc-head { font-weight: 800; font-size: 12.5px; color: #a9650f; display: flex; flex-direction: column; gap: 1px; margin-bottom: 3px; }
.cmsvc-head .cmsvc-sub { font-weight: 500; font-size: 9.5px; color: #b48a52; letter-spacing: 0; line-height: 1.25; }
.cmsvc-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; margin-top: 5px; padding: 6px 8px; border: 1px solid #eecfa1; border-radius: 9px; background: #fff; cursor: pointer; font: inherit; transition: background .1s, border-color .1s, box-shadow .1s; }
.cmsvc-opt:hover { border-color: #e0922a; background: #fffaf2; }
.cmsvc-opt.active { background: #fce4c6; border-color: #e0922a; box-shadow: 0 0 0 1.5px rgba(224,146,42,.30); }
.cmsvc-check { flex: 0 0 19px; width: 19px; height: 19px; border: 1.6px solid #d9b682; border-radius: 6px; background: #fff; color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; line-height: 1; }
.cmsvc-opt.active .cmsvc-check { background: #e0922a; border-color: #e0922a; }
.cmsvc-body { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.22; min-width: 0; }
.cmsvc-body b { font-size: 11.5px; color: #3c2f1b; }
.cmsvc-body i { font-style: normal; font-size: 10px; color: #8a7355; }
.cmsvc-fee { flex: 0 0 auto; font-weight: 800; font-size: 11.5px; color: #b06d12; }
.cmsvc-foot { margin-top: 9px; font-size: 10.5px; color: #6e5a38; }
.cmsvc-foot .cmsvc-sub { color: #a98c5e; }
.cmsvc-foot.cmsvc-empty { color: #a98c5e; font-style: italic; }
/* === Contractor card (bid panel) — teal, parallel to the amber CM card; wraps the bid list === */
.ctr-box { margin: 7px 0; border: 1.5px solid #0d6e6e; border-radius: 12px; background: #f3faf9; padding: 8px 9px; box-shadow: 0 1px 5px rgba(13,110,110,.10); }
.ctr-head { font-weight: 800; font-size: 12.5px; color: #0b5757; display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.ctr-head .ctr-sub { font-weight: 500; font-size: 9.5px; color: #5a8a87; letter-spacing: 0; line-height: 1.25; }
.ctr-box .jp-bids { margin: 0; }
.jp-btn { font: inherit; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid #d3d9de; background: #fff; color: #2a3640; box-shadow: 0 1px 2px rgba(20,30,40,.05);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s; }
.jp-btn:hover { background: #f3f6f8; border-color: #a6b2ba; box-shadow: 0 2px 7px rgba(20,30,40,.10); transform: translateY(-1px); }
.jp-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(20,30,40,.06); }
.jp-btn.primary { background: #0d6e6e; border-color: #0d6e6e; color: #fff; box-shadow: 0 2px 7px rgba(13,110,110,.24); }
.jp-btn.primary:hover { background: #0b5d5d; border-color: #0b5d5d; box-shadow: 0 3px 11px rgba(13,110,110,.30); }
.jp-btn.primary:disabled { background: #b9cccc; border-color: #b9cccc; cursor: default; box-shadow: none; transform: none; }
.jp-btn.danger { color: #b3261e; border-color: #e6c3c3; background: #fff7f7; }
.jp-btn.danger:hover { background: #ffeceb; border-color: #dba0a0; }
.jp-btn.jp-mini { padding: 3px 9px; font-size: 10.5px; font-weight: 700; box-shadow: none; }
.jp-btn.jp-mini:hover { transform: none; box-shadow: none; }
.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: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; line-height: 1.2; }
.jp-bidq { flex: 0 0 auto; font-size: 8.5px; color: #d98012; letter-spacing: 0; white-space: nowrap; }
.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; }
/* tighter vertical rhythm INSIDE each Open Bids card (cards themselves get more separation below) */
#jp-bids .jp-est { margin-bottom: 6px; }
#jp-bids .jp-steps { margin: 4px 0 1px; }
#jp-bids .cp-mid { margin-top: 3px; }

/* ===== job cards read as separated dashboard tiles, not a wall of text ===== */
/* tint the scroll track so the white cards lift off it */
.jm-pane .jm-scroll { background: #f3f5f8; border-radius: 0 0 10px 10px; }
/* roomier, clearly-bounded tiles with breathing room between them (white bg comes from the base .jp-row
   rule so the .jp-sel highlight isn't overridden) */
.jm-pane .jp-row { border-radius: 10px; padding: 11px 12px; margin: 0 0 12px; }
.jm-pane .jp-row:last-child { margin-bottom: 4px; }
/* a phase-colored left edge ties each card to its column heading (Designs/Bids/Ongoing) */
#jp-designs .jp-row { border-left: 3px solid #2563eb; }
#jp-bids     .jp-row { border-left: 3px solid #7c3ab4; }
#jp-ongoing  .jp-row { border-left: 3px solid #d98012; }

/* ---- 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; }

/* ===== Road Planner control bar ===== */
#plannerbar { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff;
  border: 1.5px solid #2563eb; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,40,90,.28);
  font-size: 12.5px; flex-wrap: wrap; max-width: 94vw; }
#plannerbar.hidden { display: none; }
#plannerbar .pl-title { font-weight: 800; color: #1d4e86; margin-right: 4px; white-space: nowrap; }
#plannerbar button { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px;
  cursor: pointer; border: 1px solid #cdd5dd; background: #f6f8fa; color: #2a3640; white-space: nowrap; }
#plannerbar button:hover { background: #eef2f6; border-color: #9fb0b8; }
#plannerbar .pl-mode.active { background: #2563eb; border-color: #2563eb; color: #fff; }
#plannerbar #pl-clear { color: #a11; border-color: #dcb9b9; background: #fff6f6; }
#plannerbar #pl-clear:hover { background: #ffecec; }
#plannerbar #pl-close { border: none; background: none; font-size: 18px; color: #8a95a0; padding: 0 4px; }
#plannerbar #pl-close:hover { color: #14202b; }
#plannerbar .pl-sep { width: 1px; align-self: stretch; background: #e2e7ec; margin: 2px; }

/* ===== 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; }
.cfg-seg { display: flex; gap: 0; border: 1px solid #d3d8dc; border-radius: 8px; overflow: hidden; }
.cfg-seg button { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 6px; border: 0; border-left: 1px solid #d3d8dc; background: #f6f8f9; color: #46535d; cursor: pointer; }
.cfg-seg button:first-child { border-left: 0; }
.cfg-seg button:hover { background: #eef2f4; }
.cfg-seg button.sel { background: #0d6e6e; color: #fff; }

/* ===== 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; }
  /* bridge designer modal: near-full-width card on phones (overrides the .sidepanel sheet rule) */
  #bridgepanel { padding: 10px; }
  #bridgepanel .bp-card { position: static; width: 100% !important; left: auto !important;
    right: auto !important; bottom: auto; max-height: calc(100vh - 86px); }
}