/* styles.css — Naberius Vendor Management System · v0.2.0 (working-tool type scale) */
:root{
  --bg:#0f1115; --surface:#171a21; --surface-2:#1e222c; --line:#2b303c;
  --text:#e7e9ee; --muted:#9aa3b2; --brand:#c9a24b; --brand-2:#e0be6a;
  --ok:#3fb27f; --warn:#e0a13c; --bad:#d1615b; --info:#5b8fd1;
  --radius:10px; --shadow:0 6px 24px rgba(0,0,0,.35);
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  /* SINGLE SOURCE OF TRUTH for type — change these, everything follows. Nothing bigger than --fs-lg.
     Units are px (on screen pt renders ~1.33x larger: 11pt≈14.7px, which reads as oversized). */
  --fs:11px; --fs-lg:13px; --fs-sm:9.5px; --fs-table:9.5px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--fs);line-height:1.4}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;font-weight:600;letter-spacing:.1px}
h1,h2,h3{font-size:var(--fs-lg)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* shell */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:baseline;gap:8px;padding:6px 8px 16px}
.brand b{color:var(--brand);font-size:var(--fs-lg);letter-spacing:.4px}
.brand span{color:var(--muted);font-size:var(--fs-sm)}
.nav a{display:flex;align-items:center;gap:10px;padding:6px 11px;border-radius:8px;color:var(--text);font-weight:500;font-size:var(--fs)}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.active{background:var(--accent,#4a76c4);color:#fff;box-shadow:none;font-weight:600}
.nav a.grp.active{color:var(--brand-2)}
.nav .nav-head{margin:14px 0 4px;padding:5px 11px;border-radius:6px;background:var(--accent,#4a76c4);color:#fff;font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px}
.nav .sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 14px;padding-left:9px;border-left:2px solid var(--accent,#4a76c4)}
.nav .sub a{font-size:var(--fs-sm);padding:3px 10px;color:var(--muted)}
.nav .sub a.active{color:#fff;background:var(--accent,#4a76c4)}
.side .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.main{padding:20px 24px;max-width:1200px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:16px}
.topbar .who{font-size:var(--fs-sm);color:var(--muted)}

/* cards / grid */
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stat{padding:14px 16px}
.stat .n{font-size:var(--fs-lg);font-weight:700;color:var(--brand-2)}
.stat .l{color:var(--muted);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.6px}

/* table */
table{width:100%;border-collapse:collapse;font-size:var(--fs)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;background:var(--surface)}
tbody tr:hover{background:var(--surface-2)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}

/* pills */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.pill.submitted{background:#25324a;color:#9cc0ff}
.pill.under_review{background:#3a3320;color:#e0c07a}
.pill.approved{background:#1f3a2e;color:#8fe3b8}
.pill.declined{background:#3a2422;color:#f0a49e}
.pill.waitlisted{background:#33303a;color:#c9b8e0}
.pill.withdrawn,.pill.draft{background:#2a2e38;color:#9aa3b2}
.pill.suspended{background:#3a3320;color:#e0c07a}
.pill.cancelled{background:#3a2422;color:#f0a49e}
.pill.available{background:#1f3a2e;color:#8fe3b8}
.pill.planning{background:#25324a;color:#9cc0ff}
.pill.open_for_applications{background:#3a3320;color:#e0c07a}
.pill.placement{background:#33303a;color:#c9b8e0}
.pill.live{background:#1f3a2e;color:#8fe3b8}
.pill.closed{background:#2a2e38;color:#9aa3b2}
.pill.held{background:#3a3320;color:#e0c07a}
.pill.allocated{background:#1f3a2e;color:#8fe3b8}
.pill.blocked{background:#3a2422;color:#f0a49e}
.pill.held{background:#3a3320;color:#e0c07a}
.pill.allocated{background:#25324a;color:#9cc0ff}
.pill.blocked{background:#3a2422;color:#f0a49e}
.pill.yes{background:#1f3a2e;color:#8fe3b8}
.pill.no{background:#2a2e38;color:#9aa3b2}

/* buttons + inputs */
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:6px 12px;border-radius:8px;font-weight:600}
button:hover,.btn:hover{border-color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#1a1408}
.btn-primary:hover{background:var(--brand-2)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#08150e}
.btn-bad{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn-sm{padding:5px 10px;font-size:var(--fs-sm)}
.btn-ghost{background:transparent}
input,select,textarea{font:inherit;width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
label{display:block;font-size:var(--fs-sm);color:var(--muted);margin:0 0 4px;font-weight:600}
.field{margin-bottom:11px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1;min-width:160px}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar input,.toolbar select{width:auto;min-width:180px}
.right{margin-left:auto}

/* toast + modal */
.toast{position:fixed;bottom:22px;right:22px;background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--brand);padding:12px 16px;border-radius:8px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.25s;z-index:60;max-width:340px}
.toast.show{opacity:1;transform:none}
.toast.bad{border-left-color:var(--bad)}
.toast.ok{border-left-color:var(--ok)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:50;overflow:auto}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:620px;padding:20px}
.modal h2{margin-bottom:14px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:380px}
.login .brand{justify-content:center;padding-bottom:22px}

/* public apply */
.public{max-width:760px;margin:0 auto;padding:32px 22px}
.public .head{text-align:center;margin-bottom:26px}
.public .head b{color:var(--brand);font-size:var(--fs-lg)}
.hint{font-size:var(--fs-sm);color:var(--muted);margin-top:-8px;margin-bottom:12px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.lnk{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media(max-width:820px){.app{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap}.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr}}

/* print — mapping sheet: drop the chrome, ink-on-paper table */
@media print{
  .side,.no-print,.topbar .toolbar{display:none !important}
  .app{grid-template-columns:1fr !important}
  .main{padding:0 !important;max-width:none !important}
  body{background:#fff;color:#000}
  h1{font-size:14pt}
  .muted{color:#333}
  .table-wrap{overflow:visible !important;border:none;background:#fff}
  table{font-size:9px;width:100%}
  th{position:static !important;background:#fff;color:#000;border-bottom:1px solid #000}
  td{border-bottom:1px solid #ccc}
  tbody tr{opacity:1 !important}
  .pill{border:1px solid #999;color:#000 !important;background:#fff !important}
}

/* ===== Site-plan / placement editor (ported from Shamsiel PX035) — uses the global --fs/--fs-table ===== */
.btn.small{padding:.28rem .6rem;font-size:var(--fs-sm)}
.btn.secondary{background:var(--surface-2)}
.siteplan-overlay { position: fixed; inset: 0; z-index: 95; background: #0d1014; display: flex; flex-direction: column; }
.siteplan-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.siteplan-area-wrap { display: flex; align-items: baseline; gap: .3rem; }
.siteplan-area-wrap:first-of-type { margin-left: auto; }
.siteplan-area { font-weight: 700; font-size: 1rem; }
.siteplan-obj-lbl { background: #ff8c2a; color: #1a1a1a; border: none; font-weight: 700; font-size: .72rem; padding: .1rem .35rem; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.siteplan-obj-lbl::before { display: none; }
.siteplan-node { background: #ffcf3a; border: 2px solid #000; border-radius: 50%; box-sizing: border-box; cursor: move; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.siteplan-node:hover { background: #fff; }
.siteplan-area-tag { background: rgba(14,16,20,.86); border: 1px solid rgba(255,255,255,.16); color: #f0a500; font-weight: 700; font-size: .72rem; white-space: nowrap; padding: .1rem .4rem; border-radius: 3px; width: auto !important; height: auto !important; margin: 0 !important; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.siteplan-area-tag.active { color: #ffcf3a; background: rgba(20,20,20,.85); }
/* Draggable dimension tag (Phil): grab it and slide it off the shape centre; double-click snaps back. */
.siteplan-area-tag.named, .siteplan-align-tag.named { color: #fff; }   /* a NAME reads white (a label), dimensions stay amber (Phil) */
.siteplan-area-tag.movable { cursor: move; }
.siteplan-area-tag.movable:hover { outline: 1px solid rgba(255,207,58,.6); }
.siteplan-len-tag { background: rgba(14,16,20,.86); border: 1px solid rgba(255,255,255,.16); color: #3ad1ff; font-weight: 700; font-size: .72rem; white-space: nowrap; padding: .1rem .4rem; border-radius: 3px; width: auto !important; height: auto !important; margin: 0 !important; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* alignment total-run label at its END (hot magenta, matches the line) */
.siteplan-align-tag { background: #cf0a9b; border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: .78rem; white-space: nowrap; padding: .12rem .45rem; border-radius: 4px; width: auto !important; height: auto !important; margin: 0 !important; transform: translate(8px, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* Pinned installation NOTE (Phil) — a yellow callout that always shows (not under Dims); draggable. */
.siteplan-note { width: auto !important; height: auto !important; margin: 0 !important; display: flex; align-items: flex-end; gap: 2px; cursor: move; }
.siteplan-note .sp-note-pin { font-size: 16px; line-height: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.siteplan-note .sp-note-txt { background: #ffd54a; color: #201800; font-weight: 700; font-size: .72rem; padding: .12rem .4rem; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.55); max-width: 200px; white-space: normal; line-height: 1.2; }
.siteplan-note .sp-note-empty { opacity: .6; font-style: italic; font-weight: 500; }
.siteplan-note.sel .sp-note-txt { outline: 2px solid #fff; }
/* the OBVIOUS finish button that floats over the map while drawing */
.sp-finish { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 470; padding: .5rem 1.1rem; font-size: .9rem; font-weight: 700; background: var(--accent, #4a76c4); color: #fff; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.sp-finish:hover { filter: brightness(1.12); }
.siteplan-map { background: #14171c; flex: 1; min-height: 0; }
.siteplan-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a94a3; font-size: .95rem; letter-spacing: .02em; pointer-events: none; z-index: 450; }
.siteplan-map .leaflet-container { width: 100%; height: 100%; background: #0d1014; }
/* PLAN mode (aerial off): a clean paper-like ground so the plan reads as a plan and matches the white print.
   REFERENCE mode keeps the dark ground under the faint (40%) aerial. Class toggled on the map node (Phil). */
.leaflet-container.sp-line { background: #f4f3ee; }
.leaflet-container.sp-ref { background: #f4f3ee; }   /* Reference = FAINT aerial over a paper ground (Phil), not muddy over dark */
/* CROSSHAIR while a placement/draw tool is armed — precise targeting on a trackpad, not the imprecise grab hand (Phil) */
.leaflet-container.sp-cross, .leaflet-container.sp-cross .leaflet-grab, .leaflet-container.sp-cross .leaflet-interactive { cursor: crosshair !important; }
.siteplan-pin-lbl { background: #e24b4a; color: #fff; border: none; font-weight: 700; font-size: .8rem; padding: .15rem .45rem; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.siteplan-pin-lbl::before { border-top-color: #e24b4a; }
/* --- Site plan v0.7 side-menu layout --- */
.siteplan-overlay.siteplan-tools { flex-direction: column; }
.sp-body { display: flex; flex: 1; min-height: 0; }
/* TOP MENU with dropdowns (Phil) — tools live along the top; the map gets the whole window below. */
.sp-menubar { display: flex; align-items: center; gap: .3rem; padding: .35rem .6rem; background: #171b21; border-bottom: 1px solid #2a313b; font-size: .78rem; flex: 0 0 auto; flex-wrap: wrap; }
.sp-menubar-sp { flex: 1 1 auto; }
.sp-ver { font-size: .7rem; font-weight: 700; color: #6fcf97; background: #16351f; padding: .1rem .4rem; border-radius: 4px; margin-left: .5rem; }
.sp-menu { position: relative; }
.sp-menu-btn { padding: .32rem .55rem; font-size: .8rem; background: transparent; color: var(--text, #e6e9ee); border: 1px solid transparent; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sp-menu-btn:hover { background: #232a34; }
.sp-menu.open .sp-menu-btn { background: var(--accent, #4a76c4); color: #fff; }
/* ✋ Pan — always-visible exit from a drawing tool; outlined normally, filled accent while in pan mode (Phil, trackpad) */
.sp-pan { border-color: #3a424e; }
.sp-pan.on { background: var(--accent, #4a76c4); color: #fff; border-color: transparent; }
.sp-menu-pop { position: absolute; top: calc(100% + .3rem); left: 0; min-width: 200px; background: #1b2028; border: 1px solid #2a313b; border-radius: 8px; padding: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.55); z-index: 500; display: none; }
.sp-menu.open .sp-menu-pop { display: block; }
.sp-menu-pop .sp-modepanel { gap: .3rem; }
/* Floating readout + bill over the map — the map keeps the window; nothing lost. */
.sp-floatpanel { position: absolute; left: .6rem; bottom: .6rem; width: 210px; max-height: 62%; overflow-y: auto; background: rgba(23,27,33,.94); border: 1px solid #2a313b; border-radius: 8px; padding: .5rem .6rem; font-size: .76rem; display: flex; flex-direction: column; gap: .3rem; z-index: 460; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.btn.small { padding: .28rem .6rem; font-size: .78rem; }
.sp-topbar { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; background: #171b21; border-bottom: 1px solid #2a313b; font-size: .78rem; flex: 0 0 auto; }
.sp-title { margin-right: auto; display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.sp-title strong { font-size: .85rem; }
.sp-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-outtoggle { display: flex; border: 1px solid #2a313b; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.sp-outbtn { padding: .3rem .6rem; font-size: .72rem; background: #1b2028; color: var(--muted, #8a94a3); border: none; cursor: pointer; white-space: nowrap; }
.sp-outbtn.on { background: var(--accent, #4a76c4); color: #fff; }
/* Save button on the site plan (Phil) — a green "Saved ✓" confirmation on the button. SAME BOX as the output
   toggle (Aerial/Reference/Plan): matched height (1px border + .3rem padding = the toggle's border + button pad)
   and font size, so the two blue boxes in the top bar are the same size. Prominence comes from weight, not size. */
.sp-save { font-weight: 700; font-size: var(--fs); line-height: normal; padding: .3rem .7rem; background: var(--brand); color: #1a1408; border: 1px solid var(--brand); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sp-save:hover { filter: brightness(1.08); }
.sp-save.sp-saved { background: #1f9d55; }
.sp-lockpill { font-size: .72rem; padding: .2rem .55rem; border-radius: 12px; background: #1b2028; color: var(--muted, #8a94a3); white-space: nowrap; }
.sp-lockpill.on { background: #16351f; color: #6fcf97; }
.sp-zoomwrap { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.sp-zoom { width: 90px; }
.siteplan-right { width: 178px; flex: 0 0 178px; background: #171b21; border-left: 1px solid #2a313b; padding: .5rem; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; }
.sp-selbox { border: 1px solid #2a313b; border-radius: 6px; padding: .45rem; min-height: 40px; line-height: 1.4; }
.siteplan-side { width: 200px; flex: 0 0 200px; background: var(--surface, #171b21); border-right: 1px solid var(--border, #2a313b); padding: .6rem .55rem .8rem; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; }
.sp-head { display: flex; align-items: baseline; gap: .4rem; }
.sp-head strong { font-size: .82rem; }
/* Mode list — VERTICAL (to the agreed mockup): Shapes/Measure/Anchors/Events stacked, icon + label,
   left-aligned, the active one highlighted. Then a "TOOLS" section with that mode's tools. */
.sp-rail { display: flex; flex-direction: column; gap: .28rem; }
.sp-mode { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: .3rem .5rem; font-size: .78rem; background: #1b2028; color: var(--text, #e6e9ee); border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.sp-mode-i { font-size: .92rem; opacity: .85; width: 1.1em; text-align: center; }
.sp-mode:hover { background: #232a34; }
.sp-mode.on { background: var(--accent, #4a76c4); color: #fff; }
.sp-mode.on .sp-mode-i { opacity: 1; }
.sp-modepanel { display: flex; flex-direction: column; gap: .22rem; padding-left: .5rem; margin-left: .18rem; border-left: 2px solid rgba(74,118,196,.4); }
/* The mode's tools — full-width rows, full label, left-aligned, under the TOOLS header. */
.sp-modepanel .sp-row { flex-direction: row; align-items: stretch; gap: .28rem; }
.sp-addr { word-break: break-word; }
.tiny { font-size: .68rem; }
.sp-row { display: flex; gap: .3rem; }
.sp-row.wrap { flex-wrap: wrap; align-items: baseline; }
.sp-tool { flex: 1; min-width: 0; display: flex; align-items: center; gap: .35rem; text-align: left; padding: .15rem .45rem; font-size: .72rem; line-height: 1.25; background: #1b2028; color: var(--text, #e6e9ee); border: 1px solid transparent; border-radius: 6px; cursor: pointer; white-space: normal; }
.sp-tool:hover { background: #232a34; }
.sp-tool:active { background: var(--accent, #4a76c4); color: #fff; transform: translateY(1px); }
.sp-tool.on { background: rgba(74,118,196,.24); color: var(--text, #e6e9ee); box-shadow: inset 3px 0 0 var(--accent, #4a76c4); font-weight: 600; }
.sp-grp { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #8a94a3); margin: .35rem 0 -.05rem; }
.sp-hint { min-height: 2em; margin-top: .1rem; line-height: 1.3; color: var(--muted, #8a94a3); font-size: .68rem; }
.sp-bill { display: flex; flex-direction: column; gap: .2rem; }
.sp-bill-row { font-size: .8rem; background: #1b2028; border-radius: 4px; padding: .2rem .4rem; }
.sp-foot { margin-top: auto; display: flex; gap: .4rem; padding-top: .7rem; }
.sp-foot .btn { flex: 1; }
.sp-mapwrap { flex: 1; min-width: 0; position: relative; }
.siteplan-tools .siteplan-map { position: absolute; inset: 0; }
/* PERSISTENT LEFT TOOL RAIL (Phil) — every tool always visible, grouped; map fills the rest. */
.sp-toolrail { flex: 0 0 190px; width: 190px; overflow-y: auto; background: #12161c; border-right: 1px solid #2a313b; padding: .4rem .4rem .6rem; display: flex; flex-direction: column; gap: .1rem; }
.sp-rail-grp { font-size: .62rem; text-transform: uppercase; letter-spacing: .6px; color: #fff; font-weight: 700; margin: .45rem 0 .2rem; padding: .15rem .45rem; line-height: 1.25; background: var(--accent, #4a76c4); border-radius: 6px; }
/* Layer headers (Boundaries/Features/Alignment/Vendors) ARE the working-layer selector — click to open one and
   scope selection to it. Muted slate when closed (clearly clickable), accent + white edge bar when active — so a
   selectable layer header never looks like a plain process header (Phil: they must NOT be the same). */
.sp-layerhead { cursor: pointer; background: #263041; color: #c4d0e0; }
.sp-layerhead:hover { background: #2f3b4f; color: #fff; }
.sp-layerhead.on { background: var(--accent, #4a76c4); color: #fff; box-shadow: inset 3px 0 0 #fff; }
/* Sub-labels inside a layer panel — quiet section headers that name a function group (e.g. "Primary site border"). */
.sp-rail-sub { font-size: .58rem; text-transform: uppercase; letter-spacing: .4px; color: #9aa4b2; font-weight: 600; margin: .5rem 0 .1rem; padding: 0 .3rem; }
/* ONE size per role across the whole editor (Phil "sort out the font sizes"): inputs/selects = body; the little
   field labels in the panels = the 11px label size (like the rail group headers). */
.sp-toolrail input, .sp-toolrail select, .sp-floatpanel input, .sp-floatpanel select, .sp-floatpanel textarea { font-size: var(--fs); }
.sp-floatpanel .muted.tiny, .sp-floatpanel .muted.small, .sp-selbox .muted.tiny, .sp-selbox .muted.small { font-size: var(--fs-table); }
.siteplan-ladder { color: #c86bff; font-size: 20px; line-height: 22px; text-align: center; text-shadow: 0 0 3px #000, 0 0 4px #000; cursor: pointer; }
.siteplan-ladder.sel { color: #fff; }
.wo-plan-thumb { display: block; margin-top: .6rem; max-width: 420px; width: 100%; border: 1px solid var(--border, #2a313b); border-radius: 8px; cursor: pointer; }

.siteplan-util { background:#1b2028; color:#ffcc33; border:1px solid #ffcc33; border-radius:5px; padding:1px 5px; font-size:.62rem; font-weight:600; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.55); }
.siteplan-util.over { color:#ff6b6b; border-color:#ff6b6b; }

.siteplan-gate { background:#14210f; color:#7ee06a; border:1px solid #7ee06a; border-radius:5px; padding:1px 6px; font-size:.62rem; font-weight:700; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.6); }

/* Traffic-flow arrows along a walkway (the road phase) — bright, high-contrast, no box. */
.siteplan-flow { color:#ffe14a; font-size:16px; line-height:16px; font-weight:900; text-shadow:0 0 3px #000, 0 0 5px #000; pointer-events:none; }
/* Address input in the rail's Address step. */
.sp-addr { width:100%; box-sizing:border-box; }
/* Event console = the three processes, line-break separated (1 details / 2 site planning / 3 delivery). */
.event-stages{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.stage{border-top:1px solid var(--line);padding:8px 0 4px}
.stage-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#8a94a3);font-weight:700;margin-bottom:6px}
.stage-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:5px}
.stage-sub{font-size:.72rem;color:var(--muted,#8a94a3);min-width:5.2rem}
/* Print-frame edit handles — drag corners/edges to extend the frame, the centre disc to move it. */
.siteplan-fh { width:14px; height:14px; background:#fff; border:2px solid #2b6cff; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.6); cursor:grab; }
.siteplan-fh.move { width:16px; height:16px; border-radius:50%; background:#2b6cff; border-color:#fff; cursor:move; }
/* selected point items (gates, power/water outputs) — one highlight for every selectable point */
.siteplan-gate.sel, .siteplan-util.sel { outline:2px solid #fff; outline-offset:2px; }

/* ── PUBLIC SITE (eventish) — its own readable type scale, still one source of truth (set here, used by .site) ── */
:root{ --site-fs:16px; --site-fs-sm:13.5px; --site-h1:34px; --site-h2:22px; --site-h3:17px; }
.site{max-width:1080px;margin:0 auto;padding:0 20px 40px;font-size:var(--site-fs);line-height:1.55}
.site h1{font-size:var(--site-h1);line-height:1.2;margin:.2em 0}
.site h2{font-size:var(--site-h2);margin:0 0 .4em}
.site h3{font-size:var(--site-h3);margin:0 0 .3em}
.site p,.site li{font-size:var(--site-fs)}
.site .muted{font-size:var(--site-fs-sm)}
.site .btn,.site .btn-primary{font-size:var(--site-fs);padding:10px 18px}
.site-nav{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:28px;flex-wrap:wrap}
.site-nav .mark{font-weight:800;font-size:22px;color:var(--brand);letter-spacing:.5px;margin-right:auto}
.site-nav a{color:var(--text);font-size:var(--site-fs-sm)}
.site-nav a.on{color:var(--brand-2);font-weight:700}
.site-hero{text-align:center;padding:26px 0 34px}
.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.site-foot{text-align:center;margin-top:36px;padding-top:16px;border-top:1px solid var(--line)}