/* Septic Site Design — application styles (audit H3).
   Extracted verbatim from static/index.html's two <style> blocks so the
   monolith carries markup+logic, not 1,780 lines of CSS. Loaded via
   <link rel="stylesheet"> in index.html <head>. No rule changed. */

  :root {
    /* Z-INDEX SCALE — every layer gets a token; never invent a number.
       map UI < hint < panel chrome < header < drawer < manuals < assistant
       < modal < context menu < shortcuts < preview < banner < export check */
    --z-map-ui: 800;
    --z-hint: 790;
    --z-panel-chrome: 900;
    --z-header: 1000;
    --z-drawer: 1100;
    --z-manuals: 1300;
    --z-assistant: 1500;
    --z-modal: 2000;
    --z-ctx: 2500;
    --z-shortcuts: 3000;
    --z-preview: 3500;
    --z-banner: 4000;
    --z-export-check: 4200;
    --bg: #0e1117;
    --surface: #161b27;
    --surface2: #1e2535;
    --border: #2a3448;
    --accent: #4a9eff;
    --accent2: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;
    --text: #e2e8f0;
    --text2: #94a3b8;
    --text3: #64748b;
    --mono: 'DM Mono', monospace;
    --serif: 'Playfair Display', serif;
    --sans: 'DM Sans', sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    height: 100dvh;                  /* iOS URL-bar-aware viewport */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── HEADER ── */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    padding-top: env(safe-area-inset-top);   /* notch/dynamic island */
    height: calc(52px + env(safe-area-inset-top));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    z-index: var(--z-header);
    position: relative;
    z-index: 1000;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .logo-badge {
    background: var(--accent);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 1px;
  }
  .logo-title {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--text);
    letter-spacing: 0.3px;
  }
  .logo-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3);
    letter-spacing: 1px;
  }

  .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* ── LAYOUT ── */
  .app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* ── LEFT PANEL ── */
  .left-panel {
    width: clamp(240px, 18vw, 320px);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow: visible;              /* chevron protrudes; scrolling moved to .panel-scroll */
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .panel-scroll {
    flex: 1 1 0;                    /* flex-sized, not %-of-auto — must CLIP */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  .panel-section {
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
  }
  .panel-section:last-child { border-bottom: none; }

  .section-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }
  .field-row:last-child { margin-bottom: 0; }

  label {
    font-size: 11px;
    color: var(--text2);
    font-weight: 400;
  }

  input, select, textarea {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
  }
  /* Checkboxes/radios must not inherit the 100% field width — a stretched
     (invisible) checkbox shoves its label text far right (the Sizing page's
     System Sand Extension row). Placed directly after the base rule so any
     later, more specific checkbox sizing still wins. */
  input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
  input:focus, select:focus { border-color: var(--accent); }
  select option { background: var(--surface2); }

  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* ── BUTTONS ── */
  .btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
  }
  .btn-primary {
    background: var(--accent);
    color: #fff;
  }
  .btn-primary:hover { background: #2d87f0; }
  .btn-success {
    background: var(--accent2);
    color: #fff;
  }
  .btn-success:hover { background: #16a34a; }
  .btn-ghost {
    background: transparent;
    color: var(--text2);
    border: 1px solid var(--border);
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
  }
  .btn-danger:hover { background: var(--danger); color: #fff; }
  .btn-full { width: 100%; }
  .btn-sm { padding: 5px 10px; font-size: 10px; }

  .btn-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }

  /* ── RESULTS PANEL ── */
  .results-panel {
    background: var(--surface2);
    border-radius: 6px;
    padding: 12px;
    margin-top: 10px;
  }

  .result-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
  }
  .result-row:last-child { border-bottom: none; padding-bottom: 0; }
  .result-label { color: var(--text2); }
  .result-val {
    font-family: var(--mono);
    color: var(--text);
    text-align: right;
  }
  .result-val.ok { color: var(--accent2); }
  .result-val.warn { color: var(--warn); }
  .result-val.fail { color: var(--danger); }

  /* ── COMPLIANCE BADGE ── */
  .compliance-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 500;
  }
  .compliance-bar.pass { background: rgba(34,197,94,0.12); color: var(--accent2); border: 1px solid rgba(34,197,94,0.3); }
  .compliance-bar.fail { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
  .compliance-bar.pending { background: rgba(74,158,255,0.1); color: var(--accent); border: 1px solid rgba(74,158,255,0.25); }

  /* ── SETBACK TABLE ── */
  .setback-table {
    width: 100%;
    font-size: 10px;
    border-collapse: collapse;
    margin-top: 8px;
  }
  .setback-table th {
    color: var(--text3);
    font-family: var(--mono);
    font-weight: 400;
    text-align: left;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.5px;
  }
  .setback-table td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(42,52,72,0.5);
    font-family: var(--mono);
    color: var(--text2);
  }
  .setback-table td:last-child { color: var(--accent2); }
  .setback-table tr:last-child td { border-bottom: none; }

  /* ── COMPONENT TOOLBAR ── */
  .component-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    max-height: 76px;               /* never more than ~2 rows on desktop */
    overflow-y: auto;
    scrollbar-width: thin;
  }
  @media (max-width: 960px) {
    .component-toolbar { max-height: 112px; }   /* 3 rows before the phone sheet takes over */
  }
  @media (pointer: coarse) {
    .component-toolbar { max-height: 104px; }   /* two 44px rows */
  }
  .notes-ta { font-size: 11px; }                 /* CSS (not inline) so coarse-pointer 16px wins */
  .comp-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
  }
  .comp-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(74,158,255,0.08); }
  .comp-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(74,158,255,0.15); }
  .comp-btn .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── MAP AREA ── */
  .map-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  #map {
    flex: 1;
    background: #141a24;
    position: relative;
    z-index: 0;   /* contains Leaflet's internal z:1000 controls — app overlays always win */
  }
  .leaflet-control-attribution {
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Topo contour lines: smooth rendering for WMS vector contours */
  .leaflet-pane.leaflet-topoPane-pane .leaflet-tile {
    image-rendering: auto;
  }
  .leaflet-pane.leaflet-basemapPane-pane .leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  /* Stream/parcel overlay tiles: smooth so lines stay sharp when overzoomed */
  .leaflet-pane.leaflet-parcelsPane-pane .leaflet-tile {
    image-rendering: auto;
  }

  .map-overlay-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: var(--z-map-ui);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100% - 64px);   /* 24+ buttons must never run off-screen */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
  }
  .map-tool-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--mono);
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    min-width: 80px;
    letter-spacing: 0.3px;
  }
  .map-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
  .map-tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .map-coords {
    position: absolute;
    bottom: 30px;
    left: 12px;
    z-index: 800;
    background: rgba(14,17,23,0.85);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3);
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
  }

  /* ── IMAGERY ↔ STATE PLANE calibration badge + pins ── */
  .imgcal-badge {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 460px;
    z-index: 810;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.4;
    padding: 5px 10px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
    display: none;
  }
  .imgcal-badge.ok {
    background: rgba(20,60,35,0.9);
    border: 1px solid #22c55e;
    color: #b8f0cd;
  }
  .imgcal-badge.warn {
    background: rgba(70,45,10,0.92);
    border: 1px solid var(--warn);
    color: #ffe0a3;
  }
  .imgcal-true-pin .imgcal-pin-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(34,197,94,0.35);
    border: 2px solid #22c55e;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 6px rgba(34,197,94,0.8);
  }
  .imgcal-obs-pin .imgcal-obs-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(245,158,11,0.4);
    border: 2px solid var(--warn);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
    cursor: move;
  }
  /* Minimized modal: let the user reach the map (click-to-pick / drag-to-align)
     while keeping the instruction + Lock button visible in a corner. */
  .modal-overlay.imgcal-min {
    background: transparent;
    pointer-events: none;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .modal-overlay.imgcal-min .modal {
    pointer-events: auto;
    width: 340px;
    max-width: 90vw;
    max-height: 78vh;
    overflow-y: auto;
    margin: 0 14px 46px 0;
    box-shadow: 0 6px 28px rgba(0,0,0,0.65);
    border-color: var(--accent);
  }

  /* ── CAD PRECISION UI ── */
  /* Floating distance/angle readout that follows the cursor while drawing */
  #cad-readout {
    position: absolute;
    z-index: 1200;
    pointer-events: none;
    display: none;
    background: rgba(14,17,23,0.92);
    border: 1px solid var(--accent);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    letter-spacing: 0.3px;
  }
  #cad-readout .cad-ro-typed { color: var(--warn); font-weight: 700; }
  #cad-readout .cad-ro-dim { color: var(--text3); }
  #cad-readout .cad-ro-snap { color: var(--accent2); font-weight: 700; }

  /* Snap-marker square (rendered as a Leaflet divIcon) */
  .cad-snap-icon {
    width: 14px; height: 14px;
    border: 2px solid var(--accent2);
    background: rgba(34,197,94,0.18);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  }
  .cad-snap-icon.cad-snap-cen { border-radius: 50%; }
  .cad-snap-label {
    position: absolute; left: 16px; top: -2px;
    font: 700 9px var(--mono); color: var(--accent2);
    text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap;
  }

  /* SNAP / ORTHO toggle chips in the status bar */
  .cad-chip {
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 7px;
    font: 600 10px var(--mono);
    color: var(--text3);
    letter-spacing: 0.5px;
    user-select: none;
    transition: all 0.12s;
  }
  .cad-chip:hover { border-color: var(--accent); color: var(--text2); }
  .cad-chip.on { background: var(--accent2); border-color: var(--accent2); color: #06210f; }

  /* Persistent newbie hint bar under the toolbar */
  #cad-hint {
    position: absolute;
    top: 12px; left: 50%; transform: translateX(-50%);
    z-index: var(--z-hint);
    max-width: max(260px, min(80vw, calc(100% - 320px)));   /* readable floor; clears the layer buttons when room allows */
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(14,17,23,0.92);
    border: 1px solid var(--accent);
    color: var(--text);
    font-family: var(--sans);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 18px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
  }
  #cad-hint.show { display: flex; }
  #cad-hint .cad-hint-icon { font-size: 14px; }
  #cad-hint .cad-hint-key {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 3px; padding: 0 5px; font: 600 10px var(--mono); color: var(--text2);
  }
  #cad-hint .cad-hint-x {
    cursor: pointer; color: var(--text3); margin-left: 4px; font-weight: 700;
  }
  #cad-hint .cad-hint-x:hover { color: var(--danger); }

  /* ── RIGHT PANEL ── */
  .right-panel {
    width: clamp(210px, 15vw, 280px);
    flex-shrink: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow: visible;              /* chevron protrudes; scrolling moved to .panel-scroll */
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* ── COMPONENT LIST ── */
  .component-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .component-item:hover { background: var(--surface2); }
  .component-item.selected { background: rgba(74,158,255,0.1); }

  .comp-info { display: flex; flex-direction: column; gap: 2px; }
  .comp-name { color: var(--text); font-weight: 500; }
  .comp-desc { color: var(--text3); font-family: var(--mono); font-size: 10px; }

  .comp-actions { display: flex; gap: 4px; }
  .icon-btn {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s;
  }
  .icon-btn:hover { color: var(--danger); }

  /* ── DESIGN SUMMARY ── */
  .summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text2);
    margin: 3px 2px;
  }

  /* ── PERC ENTRY GRID ── */
  .perc-entry {
    display: grid;
    grid-template-columns: 60px 60px 1fr 28px;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
  }
  .add-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    cursor: pointer;
    margin-top: 6px;
    letter-spacing: 0.3px;
  }
  .add-link:hover { text-decoration: underline; }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  /* ── PANEL COLLAPSE TOGGLE ── */
  .panel-collapse-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-panel-chrome);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text3);
    font-size: 14px;
    width: 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .panel-collapse-btn:hover { color: var(--accent); border-color: var(--accent); }
  .panel-collapse-btn.left { right: -24px; border-radius: 0 6px 6px 0; border-left: none; }
  .panel-collapse-btn.right { left: -24px; border-radius: 6px 0 0 6px; border-right: none; }

  .left-panel { position: relative; transition: width 0.25s ease, min-width 0.25s ease; }
  .left-panel.collapsed { width: 0; min-width: 0; border-right: none; }
  .left-panel.collapsed .panel-scroll { display: none; }
  .left-panel.collapsed .panel-collapse-btn.left { right: -24px; }

  .right-panel { position: relative; transition: width 0.25s ease, min-width 0.25s ease; }
  .right-panel.collapsed { width: 0; min-width: 0; border-left: none; }
  .right-panel.collapsed .panel-scroll { display: none; }
  .right-panel.collapsed .panel-collapse-btn.right { left: -24px; }

  /* ── DESIGN PROGRESS BAR ── */
  .design-progress {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .progress-bar-track {
    width: 100%;
    height: 5px;
    background: var(--surface2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
  }
  .progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.3s;
    background: var(--accent);
  }
  .progress-bar-fill.good { background: var(--accent2); }
  .progress-bar-fill.warn { background: var(--warn); }
  .progress-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text3);
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.5px;
  }
  .progress-steps {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .progress-step {
    font-family: var(--mono);
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--text3);
    letter-spacing: 0.3px;
  }
  .progress-step.done { border-color: var(--accent2); color: var(--accent2); background: rgba(34,197,94,0.08); }
  .progress-step.active { border-color: var(--accent); color: var(--accent); background: rgba(74,158,255,0.08); }

  /* ── KEYBOARD SHORTCUTS OVERLAY ── */
  .shortcuts-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
  }
  .shortcuts-overlay.open { display: flex; }
  .shortcuts-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 32px;
    min-width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
  }
  .shortcuts-panel h3 {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--text);
    margin-bottom: 16px;
  }
  .shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(42,52,72,0.4);
    font-size: 12px;
  }
  .shortcut-row:last-child { border-bottom: none; }
  .shortcut-keys {
    display: flex;
    gap: 4px;
  }
  .kbd {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 7px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text2);
    min-width: 22px;
    text-align: center;
  }
  .shortcut-desc { color: var(--text2); }
  .shortcut-group {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 14px;
    margin-bottom: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .shortcut-group:first-child { border-top: none; margin-top: 0; padding-top: 0; }

  /* ── QUICK ACTIONS STRIP ── */
  .quick-actions {
    display: flex;
    gap: 4px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--mono);
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--text3);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .qa-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(74,158,255,0.06); }

  /* ── CONTEXT MENU ── */
  .ctx-menu {
    position: fixed;
    z-index: 2500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
  }
  .ctx-menu.visible { display: block; }
  .ctx-item {
    padding: 7px 14px;
    font-size: 11px;
    font-family: var(--sans);
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
  }
  .ctx-item:hover { background: var(--surface2); color: var(--text); }
  .ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

  /* ── CUT/FILL PANEL ── */
  /* ── Editable plan-PDF preview modal ─────────────────────────── */
  #plan-preview-modal {
    position: fixed; inset: 0;
    z-index: 3500;  /* above the app header (1000) and all modals (2000-3000) */
    background: rgba(10,12,16,0.92);
    display: none;
    flex-direction: column;
  }
  #plan-preview-modal.open { display: flex; }
  .sv-pick-card {
    position: relative; text-align: left; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px;
    cursor: pointer; display: flex; flex-direction: column; gap: 4px;
    color: var(--text); font: inherit;
  }
  .sv-pick-card:hover { border-color: var(--accent); }
  .sv-pick-card.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .sv-pick-thumb { height: 96px; background: #fff center/contain no-repeat; border: 1px solid var(--border); border-radius: 4px; }
  .sv-pick-name { font-weight: 600; font-size: 12px; line-height: 1.25; }
  .sv-pick-tags { font-size: 10px; color: var(--text3); }
  .sv-pick-rec { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 3px; z-index: 1; }
  .sv-pick-badge { font-weight: 400; font-size: 9px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 3px; }
  .sv-pick-badge.whole { color: var(--text3); border-color: var(--border); }
  .sv-pick-badge.edit { color: #1f9d55; border-color: #1f9d55; }
  /* on-sheet editable-vector detail */
  .pp-sv-vec { position: absolute; inset: 0; pointer-events: none; }
  .pp-sv-vec svg { width: 100%; height: 100%; display: block; }
  .pp-sv-editbtn {
    position: absolute; top: 3px; right: 3px; z-index: 4;
    font: 600 10px/1 system-ui, sans-serif; cursor: pointer;
    background: #1f9d55; color: #fff; border: 0; border-radius: 4px; padding: 3px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
  }
  .pp-sv-editbtn:hover { background: #17864a; }
  /* field editor rows */
  .sv-edit-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 9px; }
  .sv-edit-tag { font: 10px/1.2 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); text-align: right; }
  .sv-edit-row.cat-elev .sv-edit-tag { color: #2b8fb0; }
  .sv-edit-row.cat-dim .sv-edit-tag { color: var(--accent); }
  .sv-edit-row input { width: 100%; font: 13px 'DM Mono', monospace; padding: 6px 9px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; }
  .sv-edit-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74,158,255,.25); }
  /* row bound to the label selected on the canvas — unmistakable + flashes on select */
  .sv-edit-row.sv-row-sel { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 5px; background: rgba(224,149,74,.12); animation: svRowFlash .6s ease-out; }
  .sv-edit-row.sv-row-sel input { border-color: var(--accent); }
  @keyframes svRowFlash { 0% { background: rgba(224,149,74,.45); } 100% { background: rgba(224,149,74,.12); } }
  .sv-edit-row.cat-title input { font-weight: 600; }
  .pp-toolbar {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; row-gap: 4px;              /* buttons wrap to a second row instead of running off-screen */
    padding: 8px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  .pp-toolbar .btn { white-space: nowrap; flex: 0 0 auto; }   /* never squish labels into vertical wraps */
  .pp-body { flex: 1 1 auto; overflow: auto; padding: 18px; }
  .pp-sheet { position: relative; margin: 0 auto; box-shadow: 0 8px 32px rgba(0,0,0,0.6); background: #fff; }
  #pp-canvas { display: block; }
  #pp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #pp-items { position: absolute; inset: 0; }
  .pp-item {
    position: absolute;
    cursor: move;
    user-select: none;
    color: #000;
    white-space: pre-wrap;
    line-height: 1.25;
  }
  .pp-item.selected { outline: 2px solid #4a9eff; outline-offset: 1px; background: rgba(74,158,255,0.08); }
  .pp-item.pp-detail {
    /* outline is an EDITOR affordance only (never prints) — shown on hover/selection */
    border: 1.5px dashed transparent;
    background: rgba(74,158,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font: bold 12px 'DM Mono', monospace; color: #2b6cb0; text-align: center;
  }
  .pp-item.pp-detail:hover, .pp-item.pp-detail.selected { border-color: #4a9eff; }
  .pp-sheet.pp-placing { cursor: crosshair; }

  /* ── Design-manuals reference drawer (AES / ES) ─────────────── */
  #manuals-drawer {
    position: fixed;
    top: 52px; right: 0;
    height: calc(100% - 52px);
    width: 44%;
    min-width: 420px;
    z-index: var(--z-manuals);  /* below nothing it needs; header stays usable above it */
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
  }
  #manuals-drawer.open { display: flex; }
  #manuals-drawer.wide { width: 88%; min-width: 700px; }
  /* Soil Logs drawer — mirrors the manuals drawer shell */
  #soil-logs-drawer {
    position: fixed; top: 52px; right: 0; height: calc(100% - 52px);
    width: 40%; min-width: 380px; z-index: var(--z-manuals);
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.5); display: none; flex-direction: column;
  }
  #soil-logs-drawer.open { display: flex; }
  .sl-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--border); background: var(--surface2); }
  .sl-title { font-weight: 700; font-size: 13px; flex: 0 0 auto; }
  .sl-header .btn { flex: 0 0 auto; }
  .sl-close { margin-left: auto; cursor: pointer; padding: 4px 8px; color: var(--text3); font-size: 14px; }
  .sl-close:hover { color: var(--text); }
  .sl-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
  .sl-list-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px;
    cursor: pointer; background: var(--surface2); }
  .sl-list-item:hover { border-color: var(--accent); }
  .sl-list-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .sl-list-act { display: flex; gap: 2px; flex: 0 0 auto; }
  .sl-note { font-size: 10px; color: var(--text3); margin-bottom: 10px; }
  .sl-sub { font-size: 10px; color: var(--text3); margin: 6px 0; }
  .sl-secttitle { font-weight: 700; font-size: 11px; margin: 14px 0 6px; color: var(--text);
    border-bottom: 1px solid var(--border); padding-bottom: 3px; }
  .sl-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
  .sl-grid label { font-size: 11px; color: var(--text3); }
  .sl-in { width: 100%; font-size: 13px; padding: 5px 6px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 4px; color: var(--text); box-sizing: border-box; }
  .sl-hz-head, .sl-hz-row { display: grid; grid-template-columns: 52px 52px 1fr 1fr 52px 32px;
    gap: 4px; align-items: center; margin-bottom: 4px; }
  .sl-hz-head { font-size: 9px; color: var(--text3); }
  .sl-hz { border-left: 2px solid var(--border); padding-left: 8px; margin-bottom: 10px; }
  .sl-hz .sl-hz-row { margin-bottom: 4px; }
  .sl-hz-detail { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 2px 0 2px 2px; }
  .sl-hz-detail .f { display: flex; flex-direction: column; gap: 2px; flex: 1 1 96px; min-width: 88px; }
  .sl-hz-detail .f label { font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); font-family: var(--mono); }
  .sl-hz-detail .f .sl-in { font-size: 12px; padding: 4px 6px; }
  .sl-chk { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
  .sl-chkitem { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text2); cursor: pointer; }
  .sl-chkitem input { width: auto; min-height: 0; }
  @media (pointer: coarse) { .sl-hz-detail .f { flex-basis: 120px; } }
  #sl-toast { display: none; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: #16351f; color: #4ade80; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; }
  @media (pointer: coarse) { .sl-in { font-size: 16px; min-height: 40px; } }
  @media (max-width: 640px) { #soil-logs-drawer { width: 100%; min-width: 0; } }
  .manuals-body { flex: 1 1 auto; display: flex; }
  .manuals-body iframe { flex: 1 1 50%; border: 0; width: 100%; height: 100%; background: #525659; }
  .manuals-body iframe + iframe { border-left: 2px solid var(--border); }
  .manuals-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono); font-size: 11px; color: var(--text2);
    flex: 0 0 auto;
  }
  .manuals-tab {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 5px;
    cursor: pointer; color: var(--text2); background: var(--surface2);
    font-family: var(--mono); font-size: 11px; user-select: none;
  }
  .manuals-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
  .manuals-header a { color: var(--text2); text-decoration: none; font-size: 12px; }
  .manuals-header a:hover { color: var(--text); }
  .manuals-close {
    margin-left: auto; cursor: pointer;
    font-family: var(--mono); font-size: 12px; color: var(--text);
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2);
  }
  .manuals-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

  .cutfill-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 860;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    width: 320px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    display: none;
    font-family: var(--mono);
    font-size: 11px;
  }
  .cutfill-panel.visible { display: block; }
  .cutfill-panel h4 { font-family: var(--serif); font-size: 14px; color: var(--text); margin-bottom: 10px; }
  .cf-mode-tabs { display: flex; gap: 0; margin-bottom: 10px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
  .cf-mode-tab {
    flex: 1; text-align: center; padding: 6px 4px; font-size: 9px;
    font-family: var(--mono); cursor: pointer; background: var(--surface2);
    color: var(--text3); letter-spacing: 0.3px; transition: all 0.15s;
  }
  .cf-mode-tab.active { background: var(--accent); color: #fff; }
  .cf-mode-tab:hover:not(.active) { color: var(--text); }
  .cf-results {
    background: var(--surface2); border-radius: 6px; padding: 10px; margin-top: 10px;
    border: 1px solid var(--border);
  }
  .cf-result-row {
    display: flex; justify-content: space-between; padding: 4px 0;
    border-bottom: 1px solid rgba(42,52,72,0.4); font-size: 11px;
  }
  .cf-result-row:last-child { border-bottom: none; }
  .cf-result-label { color: var(--text2); }
  .cf-result-val { color: var(--accent); font-weight: 500; }
  .cf-result-val.cut { color: var(--danger); }
  .cf-result-val.fill { color: var(--accent2); }

  /* ── ANNOTATION & DRAWING TOOLS ── */
  .anno-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: center;
  }
  .anno-toolbar .section-divider {
    width: 1px; height: 20px; background: var(--border); margin: 0 4px;
  }

  /* ── TITLE BLOCK MODAL ── */
  .tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tb-full { grid-column: 1 / -1; }
  .rev-entry { display: grid; grid-template-columns: 60px 80px 1fr 30px; gap: 6px; align-items: center; margin-bottom: 4px; }

  /* ── SPOT ELEVATION LABEL ── */
  .spot-elev-icon {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: #000;
    background: rgba(255,255,255,0.85);
    padding: 0px 3px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.3;
    text-shadow: 0 0 2px #fff;
  }

  /* ── GPS IMPORT STATUS ── */
  .gps-points-summary {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text2);
    max-height: 120px;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px;
  }

  /* ── TOUCH ERGONOMICS (iPhone/iPad) ── */
  @media (pointer: coarse) {
    input, select, textarea { font-size: 16px; }   /* <16px triggers iOS auto-zoom */
    textarea.notes-ta { font-size: 16px; }          /* class specificity beats the bare-element rule */
    .btn, .comp-btn, .map-tool-btn, .icon-btn, button, select { min-height: 44px; }
    .map-tool-btn { padding: 10px 12px; }
    .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 20px !important; }
    input[type="checkbox"] { width: 22px; height: 22px; }
    .panel-collapse-btn { width: 32px; height: 56px; }
  }

  /* ── DRAW-MODE PILL (touch has no double-click / Esc / Enter) ── */
  #touch-draw-pill {
    position: absolute;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    z-index: var(--z-panel-chrome);
    display: none; gap: 8px;
    background: rgba(14,17,23,0.95);
    border: 1px solid var(--accent);
    border-radius: 24px;
    padding: 8px 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
  #touch-draw-pill.show { display: flex; }
  #touch-draw-pill button {
    border: 0; border-radius: 18px; padding: 8px 16px;
    font: 600 13px var(--sans); cursor: pointer; min-height: 40px;
  }
  #touch-draw-pill .tdp-done { background: var(--accent2, #22c55e); color: #08130b; }
  #touch-draw-pill .tdp-undo { background: var(--surface2, #222); color: var(--text); }
  #touch-draw-pill .tdp-cancel { background: transparent; color: var(--danger, #f87171); }

  /* ── LIVE GPS FIELD PANEL (touch-first, bottom-right; goes bottom-sheet on phones) ── */
  #livegps-panel {
    position: absolute;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(90px + env(safe-area-inset-bottom));
    z-index: var(--z-panel-chrome, 1400);
    width: 300px; max-width: calc(100vw - 24px);
    max-height: calc(100vh - 150px); overflow-y: auto;   /* never taller than the viewport (short/landscape phones) */
    background: rgba(14,17,23,0.97); color: var(--text);
    border: 1px solid var(--accent); border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
    padding: 12px 14px; display: none;
  }
  #livegps-panel.show { display: block; }
  #livegps-panel h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
  #livegps-panel .lg-close { background: none; border: 0; color: var(--text3); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
  .lg-readout { font: 600 12px var(--mono, monospace); line-height: 1.7; background: var(--surface2, #1a1f28); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
  .lg-readout .lg-row { display: flex; justify-content: space-between; gap: 8px; }
  .lg-readout .lg-lbl { color: var(--text3); }
  .lg-fix { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; }
  .lg-fix.good { background: #16351f; color: #4ade80; }
  .lg-fix.warn { background: #3a2f12; color: #fbbf24; }
  .lg-fix.bad  { background: #3a1717; color: #f87171; }
  /* Traffic-light signal-quality indicator (combined fix + hrms + satellites). */
  .lg-light { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    margin-right: 7px; vertical-align: middle; background: #555;
    box-shadow: 0 0 0 2px rgba(255,255,255,.06); transition: background .2s, box-shadow .2s; }
  .lg-light.green  { background: #22c55e; box-shadow: 0 0 9px 1px rgba(34,197,94,.75); }
  /* EXCELLENT: a true sub-centimetre RTK fix — green with a glowing ring. */
  .lg-light.excellent::after { content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid #22c55e; box-shadow: 0 0 7px 1px rgba(34,197,94,.7), inset 0 0 4px rgba(34,197,94,.5);
    animation: lgRing 1.6s ease-in-out infinite; }
  @keyframes lgRing { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .55; } }
  .lg-light.yellow { background: #fbbf24; box-shadow: 0 0 9px 1px rgba(251,191,36,.75); }
  .lg-light.red    { background: #f87171; box-shadow: 0 0 9px 1px rgba(248,113,113,.8); animation: lgPulse 1.1s ease-in-out infinite; }
  .lg-light.off    { background: #555; box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
  @keyframes lgPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
  #lg-signal-txt { font-weight: 700; font-size: 11px; }
  #livegps-panel select, #livegps-panel input { width: 100%; margin-bottom: 8px; }
  .lg-btn-row { display: flex; gap: 8px; }
  .lg-btn-row .btn { flex: 1; min-height: 46px; font-size: 14px; }
  #lg-drop { background: var(--accent2, #22c55e); color: #08130b; font-weight: 700; }
  .lg-note { font-size: 10px; color: var(--text3); margin-top: 8px; line-height: 1.4; }
  @media (max-width: 640px) {
    #livegps-panel {
      left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right));
      bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; max-width: none;
    }
  }

  /* ── TABLET PORTRAIT (iPad): panels become drawers with a scrim ── */
  .panel-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: calc(var(--z-drawer) - 1);
  }
  .panel-backdrop.show { display: block; }
  @media (max-width: 1024px) and (orientation: portrait) {
    .left-panel, .right-panel { position: fixed; z-index: var(--z-drawer); height: calc(100dvh - 52px); top: 52px; }
    .left-panel { left: 0; width: min(360px, 85vw); transform: translateX(-100%); transition: transform 0.25s; }
    .left-panel.mobile-open { transform: translateX(0); }
    .right-panel { right: 0; width: min(320px, 80vw); transform: translateX(100%); transition: transform 0.25s; }
    .right-panel.mobile-open { transform: translateX(0); }
    /* chevrons become fixed edge tabs — the only way INTO the drawers */
    .panel-collapse-btn { position: fixed; top: 50%; width: 30px; height: 64px; }
    .panel-collapse-btn.left { left: 0; right: auto; border-radius: 0 8px 8px 0; }
    .panel-collapse-btn.right { right: 0; left: auto; border-radius: 8px 0 0 8px; }
    .left-panel .panel-collapse-btn.left { left: auto; right: -30px; position: absolute; }
    .right-panel .panel-collapse-btn.right { right: auto; left: -30px; position: absolute; }
  }

  /* ── PHONE (≤640): map-first + bottom tab bar + bottom sheet ── */
  .mobile-tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-drawer);
    background: var(--surface);
    border-top: 1px solid var(--border);
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabbar button {
    flex: 1; border: 0; background: transparent; color: var(--text2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font: 500 10px var(--sans); cursor: pointer; min-height: 56px;
  }
  .mobile-tabbar button .mt-ico { font-size: 20px; line-height: 1; }
  .mobile-tabbar button.active { color: var(--accent); }
  .mobile-sheet {
    display: none;
    position: fixed; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    z-index: var(--z-drawer);
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    max-height: 58dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
  }
  .mobile-sheet.open { display: block; }
  .mobile-sheet-grab {
    position: sticky; top: 0;
    background: var(--surface);
    padding: 8px 0 4px;
    display: flex; justify-content: center;
  }
  .mobile-sheet-grab::before {
    content: ''; width: 42px; height: 4px; border-radius: 2px; background: var(--border);
  }
  @media (max-width: 640px) {
    .mobile-tabbar { display: flex; }
    .left-panel, .right-panel { display: none !important; }
    .status-bar { display: none; }
    .component-toolbar { display: none; }      /* lives in the Place tab */
    .map-overlay-toolbar { display: none; }    /* lives in the Layers tab */
    #cad-hint { top: auto; bottom: calc(140px + env(safe-area-inset-bottom)); max-width: 92vw; }
    header .btn { display: none; }
    header .btn.mobile-keep { display: inline-flex; }
    .claude-panel.claude-panel { display: none !important; }   /* base rule is later in the sheet */
    .map-legend { bottom: calc(76px + env(safe-area-inset-bottom)); max-height: 30dvh; }
    .mobile-sheet .component-toolbar { display: flex !important; flex-wrap: wrap; max-height: none; }
    .mobile-sheet .map-overlay-toolbar {
      display: flex !important; position: static; flex-direction: row; flex-wrap: wrap;
      max-height: none; overflow: visible; padding: 10px;
    }
    .mobile-sheet .panel-section { border-bottom: 1px solid var(--border); }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 1200px) {
    .logo-title span.logo-sub, .logo-sub { display: none; }
    header .btn { padding: 4px 8px; font-size: 10px; }
  }
  @media (max-width: 1024px) and (orientation: landscape) {
    .left-panel { width: 260px; }
    .right-panel { width: 220px; }
    .logo-title { font-size: 13px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }
  @media (max-width: 768px) {
    .left-panel, .right-panel { position: fixed; z-index: var(--z-drawer); height: calc(100vh - 52px - 26px); top: 52px; }
    .left-panel { left: 0; width: 300px; transform: translateX(-100%); transition: transform 0.3s; }
    .left-panel.mobile-open { transform: translateX(0); }
    .right-panel { right: 0; width: 260px; transform: translateX(100%); transition: transform 0.3s; }
    .right-panel.mobile-open { transform: translateX(0); }
    .component-toolbar { overflow-x: auto; flex-wrap: nowrap; max-height: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .comp-btn { flex-shrink: 0; }
    .map-overlay-toolbar { max-height: 60vh; overflow-y: auto; }
    header { padding: 0 10px; }
    .logo-title { font-size: 14px; }
    .btn-sm { padding: 4px 8px; font-size: 9px; }
  }

  /* ── TOOLTIP ── */
  .tip {
    display: inline-block;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 10px;
    font-family: var(--mono);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    cursor: help;
  }

  /* ── STATUS BAR ── */
  .status-bar {
    height: 22px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 12px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text3);
    flex-shrink: 0;
    letter-spacing: 0.3px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .status-item { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .status-item#mode-indicator.active-mode { color: var(--warn); font-weight: 600; }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); }
  .status-dot.warn { background: var(--warn); }

  /* ── MAP LEGEND ── */
  .map-legend {
    position: absolute;
    bottom: 56px;
    left: 12px;
    right: auto;
    max-height: calc(100% - 120px);
    overflow-y: auto;
    z-index: var(--z-map-ui);
    background: rgba(14,17,23,0.9);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    backdrop-filter: blur(4px);
  }
  .map-legend.collapsed { padding: 0; }
  .map-legend.collapsed .legend-body { display: none; }
  .legend-toggle {
    padding: 5px 10px;
    cursor: pointer;
    color: var(--text3);
    font-size: 9px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
  }
  .legend-toggle:hover { color: var(--accent); }
  .legend-body { padding: 4px 12px 8px 12px; }
  .legend-title { color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; font-size: 9px; }
  .legend-row { display: flex; align-items: center; gap: 7px; color: var(--text2); margin-bottom: 4px; }
  .legend-row:last-child { margin-bottom: 0; }
  .legend-swatch { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }

  /* ── DRAWING CANVAS ── */
  #draw-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 600;
  }

  /* Modal */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
  }
  .modal-overlay.open { display: flex; }
  /* iPad-friendly account modal: 16px inputs stop iOS's zoom-on-focus, and
     44px min touch targets meet the Apple HIG (login is the first thing a field
     user hits on the tablet). */
  #account-modal input { font-size: 16px; min-height: 44px; }
  #account-modal #acct-submit { min-height: 44px; font-size: 15px; }
  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    width: 480px;
    max-width: 95vw;
    /* dvh: on iOS the URL bar shrinks the REAL viewport — 80vh overflowed
       off-screen and read as "can't scroll" */
    max-height: min(84vh, calc(100dvh - 24px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* modal scroll never bleeds into the page */
  }
  /* ── iPhone / iPad touch pass ─────────────────────────────── */
  @media (pointer: coarse) {
    .modal { max-height: calc(100dvh - max(16px, env(safe-area-inset-bottom))); }
    .btn, .comp-btn, .wsn { min-height: 40px; }
    .btn-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
    .modal input, .modal select, .modal textarea,
    #field-panel input, #field-panel select { font-size: 16px; min-height: 40px; }  /* stops iOS zoom-on-focus */
    #field-panel { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    #sv-edit-modal .modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0; padding: 12px; }
    .pp-toolbar .btn { min-height: 36px; }
  }
  nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .modal h2 {
    font-family: var(--serif);
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--text);
  }
  .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

  /* Tabs */
  .tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    gap: 0;
  }
  .tab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    color: var(--text3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
  }
  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .tab:hover:not(.active) { color: var(--text2); }

  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* Perc table */
  .perc-entry {
    display: grid;
    grid-template-columns: 60px 80px 80px 30px;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
  }
  .perc-entry label { font-size: 10px; color: var(--text3); }

  .add-link {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
  }
  .add-link:hover { text-decoration: underline; }
  /* ── PARCEL INFO POPUP ── */
  .parcel-popup {
    position: absolute;
    z-index: 900;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    min-width: 260px;
    max-width: 340px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    display: none;
    font-family: var(--mono);
    font-size: 11px;
  }
  .parcel-popup.visible { display: block; }
  .parcel-popup-title {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .parcel-popup-close {
    background: none; border: none; color: var(--text3);
    cursor: pointer; font-size: 16px; padding: 0 2px;
  }
  .parcel-popup-close:hover { color: var(--danger); }
  .parcel-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid rgba(42,52,72,0.4);
    gap: 8px;
  }
  .parcel-row:last-child { border-bottom: none; }
  .parcel-row-label { color: var(--text3); white-space: nowrap; }
  .parcel-row-val { color: var(--text); text-align: right; word-break: break-word; }

  /* ── ELEVATION PROFILE PANEL ── */
  .elev-panel {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-map-ui);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    width: 560px;
    max-width: 90vw;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    display: none;
  }
  .elev-panel.visible { display: block; }
  .elev-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .elev-header h4 {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--text);
  }
  .elev-canvas {
    width: 100%;
    height: 160px;
    background: var(--surface2);
    border-radius: 6px;
    border: 1px solid var(--border);
  }
  .elev-stats {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text2);
  }
  .elev-stat { display: flex; flex-direction: column; gap: 2px; }
  .elev-stat-val { color: var(--accent); font-size: 12px; font-weight: 500; }

  /* ── BOUNDARY DRAWING ── */
  .boundary-toolbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 850;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    display: none;
    gap: 8px;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .boundary-toolbar.visible { display: flex; }

  /* ── IMPORT MODAL ── */
  .import-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    color: var(--text3);
    font-family: var(--mono);
    font-size: 11px;
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 12px;
  }
  .import-drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(74,158,255,0.08);
    color: var(--accent);
  }

  /* ── CLAUDE AI PANEL ─────────────────────────────────────────── */
  .claude-panel {
    position: fixed; bottom: 0; right: 0; width: 220px;
    background: var(--surface); border: 1px solid var(--border);
    border-bottom: none; border-right: none;
    border-radius: 10px 0 0 0; z-index: var(--z-assistant);
    bottom: 26px;
    display: flex; flex-direction: column;
    box-shadow: -3px -3px 12px rgba(0,0,0,0.3);
    transition: height 0.2s ease;
  }
  .claude-panel.collapsed { height: 38px; overflow: hidden; }
  .claude-panel.expanded  { height: 380px; }
  .claude-header {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; cursor: pointer;
    border-bottom: 1px solid var(--border);
    border-radius: 10px 0 0 0; flex-shrink: 0;
  }
  .claude-logo { width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(135deg,#cc785c,#e8a87c);
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:bold;color:#fff;flex-shrink:0; }
  .claude-header h4 { font-size:10px;font-weight:600;color:var(--text);flex:1; }
  .collab-dot { width:6px;height:6px;border-radius:50%;background:#22c55e;
    box-shadow:0 0 4px #22c55e; display:none; }
  .collab-dot.active { display:block; }
  .claude-messages {
    flex:1;overflow-y:auto;padding:6px;
    display:flex;flex-direction:column;gap:5px;
    font-family:var(--sans);font-size:11px;
  }
  .cmsg { padding:5px 7px;border-radius:6px;line-height:1.4;max-width:92%;font-size:10px; }
  .cmsg.user { background:rgba(74,158,255,0.15);border:1px solid rgba(74,158,255,0.2);align-self:flex-end;color:var(--text); }
  .cmsg.ai { background:var(--surface2);border:1px solid var(--border);align-self:flex-start;color:var(--text); }
  .cmsg.sys { background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);align-self:center;color:var(--warn);font-size:9px;font-style:italic; }
  .cmsg.collab { background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);align-self:flex-start;color:#86efac; }
  .cmsg pre { white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:9px; }
  .claude-input-area {
    display:flex;gap:4px;padding:5px 7px;
    border-top:1px solid var(--border);flex-shrink:0;
  }
  .claude-input-area textarea {
    flex:1;background:var(--surface2);border:1px solid var(--border);
    border-radius:5px;color:var(--text);font-family:var(--sans);
    font-size:10px;padding:5px;resize:none;height:40px;outline:none;
  }
  .claude-input-area textarea:focus { border-color:var(--accent); }
  .csend { background:var(--accent);border:none;border-radius:5px;
    color:#fff;font-size:14px;width:28px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;align-self:flex-end;height:28px; }
  .csend:disabled { opacity:0.4;cursor:not-allowed; }
  .claude-toolbar { display:flex;gap:3px;padding:3px 7px;
    border-top:1px solid var(--border);flex-shrink:0;flex-wrap:wrap; }
  .ctbtn { font-size:8px;padding:1px 4px;border-radius:3px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--text3);cursor:pointer;white-space:nowrap; }
  .ctbtn:hover { color:var(--accent);border-color:var(--accent); }
  .api-key-row { padding:3px 7px;border-top:1px solid var(--border);flex-shrink:0; }
  .api-key-row input { width:100%;background:var(--surface2);border:1px solid var(--border);
    border-radius:3px;color:var(--text);font-family:var(--mono);font-size:9px;padding:2px 5px; }
  /* ── COLLAB BANNER ── */
  .collab-banner { position:fixed;top:0;left:50%;transform:translateX(-50%);
    background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);
    border-top:none;border-radius:0 0 8px 8px;padding:3px 14px;
    font-size:10px;color:#86efac;font-family:var(--mono);z-index:9998;display:none; }
  .collab-banner.active { display:block; }


/* ---- workspace shell styles (was <style id="ws-shell-style">) ---- */
  /* --- per-workspace accent (semantic, separate from --accent) --- */
  body{--ws:var(--accent)}
  body[data-ws="soil"]{--ws:#8caf5c}
  body[data-ws="layout"]{--ws:#4c9fdf}
  body[data-ws="cutfill"]{--ws:#d9784a}
  body[data-ws="sizing"]{--ws:#e0954a}
  body[data-ws="takeoff"]{--ws:#3fbdb6}
  body[data-ws="pdf"]{--ws:#a884d8}

  /* --- top workspace nav (under the header) --- */
  .ws-nav{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:3px;
    background:var(--surface);border-bottom:1px solid var(--border);padding:6px 12px;flex-wrap:wrap}
  .ws-nav .wsn{font:600 12.5px var(--sans);color:var(--text2);background:none;border:1px solid transparent;
    border-radius:7px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .ws-nav .wsn:hover{color:var(--text);background:var(--surface2)}
  .ws-nav .wsn.on{color:var(--text);background:var(--surface2);border-color:var(--border)}
  .ws-nav .wsn .sw{width:8px;height:8px;border-radius:2px}
  .ws-nav .wsn .step{font:600 10px var(--mono);color:var(--text3)}
  .ws-nav .sp{flex:1}
  .ws-nav .wsn.done .step{color:var(--accent2)}

  /* --- home screen --- */
  #home-screen{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);overflow:auto;padding:0}
  body[data-ws="home"] #home-screen{display:block}
  body[data-ws="home"] .app-body,body[data-ws="home"] .component-toolbar,
  body[data-ws="home"] .status-bar,body[data-ws="home"] .ws-nav{display:none!important}
  .home-wrap{max-width:1180px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(14px,3vw,28px) 60px}
  .home-hero .eyebrow{font:600 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin:0 0 10px}
  .home-hero h1{font-size:clamp(24px,4vw,38px);margin:0 0 10px;letter-spacing:-.02em;color:var(--text);line-height:1.05}
  .home-hero p{color:var(--text2);max-width:64ch;margin:0 0 20px}
  .home-proj{display:flex;flex-wrap:wrap;gap:10px 18px;background:var(--surface);border:1px solid var(--border);
    border-radius:10px;padding:12px 16px;margin-bottom:22px}
  .home-proj .pf{display:flex;flex-direction:column;gap:2px}
  .home-proj label{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
  .home-proj .val{font:600 13px var(--sans);color:var(--text)}
  .home-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .hc{--c:var(--accent);text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:13px;
    cursor:pointer;overflow:hidden;color:inherit;font:inherit;display:flex;flex-direction:column;transition:transform .12s,border-color .12s}
  .hc:hover{transform:translateY(-2px);border-color:var(--c)}
  .hc .top{display:flex;gap:12px;align-items:flex-start;padding:15px 15px 9px;border-top:3px solid var(--c)}
  .hc .num{font:700 12px var(--mono);color:var(--c);border:1.5px solid var(--c);border-radius:8px;width:27px;height:27px;display:grid;place-items:center;flex:none}
  .hc h3{margin:0;font-size:15.5px;color:var(--text);line-height:1.15}
  .hc .role{font:600 9px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--c);margin-top:4px}
  .hc .desc{color:var(--text2);font-size:12.5px;margin:0 15px 12px}
  .hc .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:9px 15px;border-top:1px solid var(--border);background:var(--surface2)}
  .hc .bar{width:80px;height:6px;border-radius:4px;background:var(--border);overflow:hidden}
  .hc .bar i{display:block;height:100%;background:var(--c)}
  .hc .go{font:600 12px var(--sans);color:var(--c)}
  /* overall progress + relocated design checklist */
  .home-overall{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:22px}
  .home-overall .hov-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
  .home-overall .hov-lbl{font:600 12px var(--sans);color:var(--text2)}
  .home-overall .hov-pct{font:700 15px var(--mono);color:var(--accent2);font-variant-numeric:tabular-nums}
  .home-overall .hov-bar{height:8px;border-radius:5px;background:var(--border);overflow:hidden}
  .home-overall .hov-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
  .home-steps{margin-top:26px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px}
  .home-steps-head{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
  .home-steps #design-steps-panel{background:none!important;border:none!important;padding:0!important;margin:0!important}
  .home-steps .section-label{display:none}

  /* --- workspace visibility engine (panels tagged data-ws-in="a b c"; shown only in those) ---
     We ONLY ever add display:none to elements NOT in the active workspace. We must never set a
     display on the *shown* element (e.g. display:revert would collapse flex/grid containers to
     block — that zeroed the map's height). Absent data-ws (pre-router) shows everything briefly. */
  body[data-ws="soil"]    [data-ws-in]:not([data-ws-in~="soil"]),
  body[data-ws="sizing"]  [data-ws-in]:not([data-ws-in~="sizing"]),
  body[data-ws="layout"]  [data-ws-in]:not([data-ws-in~="layout"]),
  body[data-ws="cutfill"] [data-ws-in]:not([data-ws-in~="cutfill"]),
  body[data-ws="takeoff"] [data-ws-in]:not([data-ws-in~="takeoff"]),
  body[data-ws="pdf"]     [data-ws-in]:not([data-ws-in~="pdf"]),
  body[data-ws="home"]    [data-ws-in]{display:none!important}   /* !important beats inline display (e.g. Notes' style=display:flex) */

  /* new workspace panels (takeoff etc.) live in the left/right panel area */
  .ws-panel{padding:0}

  /* --- takeoff workspace --- */
  #takeoff-ws{flex:1;min-width:0;overflow:auto;background:var(--bg);padding:clamp(14px,3vw,30px)}
  #takeoff-ws .tko-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
    max-width:1000px;margin:0 auto 18px}
  #takeoff-ws .tko-title{font:700 22px var(--sans);color:var(--text);letter-spacing:-.01em}
  #takeoff-ws .tko-sub{font:500 12.5px var(--sans);color:var(--text2);margin-top:3px}
  #takeoff-ws .tko-actions{display:flex;gap:6px;flex-wrap:wrap}
  #takeoff-ws #tko-body{max-width:1000px;margin:0 auto}
  #takeoff-ws .tko-empty{border:1px dashed var(--border);border-radius:12px;padding:34px 20px;text-align:center;color:var(--text2)}
  #takeoff-ws .tko-empty b{color:var(--text);display:block;font-size:15px;margin-bottom:6px}
  #takeoff-ws .tko-sec{margin-bottom:18px;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface)}
  #takeoff-ws .tko-sec > h4{margin:0;font:700 11px var(--mono);letter-spacing:.14em;color:var(--ws);
    background:var(--surface2);padding:9px 14px;border-bottom:1px solid var(--border);border-left:3px solid var(--ws)}
  #takeoff-ws table{width:100%;border-collapse:collapse;font:500 12.5px var(--sans)}
  #takeoff-ws td,#takeoff-ws th{padding:8px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
  #takeoff-ws tr:last-child td{border-bottom:none}
  #takeoff-ws th{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text3);background:transparent}
  #takeoff-ws td.qty{font-family:var(--mono);text-align:right;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
  #takeoff-ws td.unit{font-family:var(--mono);color:var(--text2);width:52px}
  #takeoff-ws td.item{color:var(--text);width:38%}
  #takeoff-ws td.note{color:var(--text2);font-size:11.5px}
  #takeoff-ws #tko-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--surface2);
    border:1px solid var(--ws);color:var(--text);padding:9px 16px;border-radius:8px;font:600 12px var(--sans);
    opacity:0;transition:opacity .2s;pointer-events:none;z-index:var(--z-modal)}
  #takeoff-ws #tko-toast.on{opacity:1}

  /* --- PDF workspace: dock the plan-preview into the map area (not a fixed overlay) --- */
  body[data-ws="pdf"] #plan-preview-modal{position:absolute;inset:0;z-index:2;display:flex!important;background:var(--bg)}
  body[data-ws="pdf"] #pp-back-btn{display:none}   /* the nav replaces "Back to Design" */
  #pp-offline-msg{position:absolute;inset:0;margin:auto;max-width:440px;height:max-content;
    align-self:center;padding:22px 26px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
    color:var(--text2);font:500 13.5px var(--sans);line-height:1.55;text-align:center;z-index:3}
  /* hide the (now-empty) docked left panel in workspaces whose sections live elsewhere — desktop only;
     on phones (<=768px) the left panel is an off-canvas drawer + bottom-sheet, so leave it alone */
  @media (min-width:769px){
    body[data-ws="soil"] .left-panel, body[data-ws="cutfill"] .left-panel, body[data-ws="takeoff"] .left-panel{display:none}
  }
  /* a section pulled into the mobile bottom-sheet must show regardless of the active workspace filter */
  #mobile-sheet-body [data-ws-in]{display:revert!important}

  /* --- Soil & Sizing: no map, use the whole workspace with a wide low-scroll layout --- */
  /* SOIL: dock the soil-logs drawer to fill the map area (below the nav), full width */
  body[data-ws="soil"] #soil-logs-drawer{
    position:absolute; inset:0; width:100%; min-width:0; height:100%;
    border-left:none; box-shadow:none;
  }
  /* the map is covered in soil — hide its floating chrome so it can't peek past the drawer */
  body[data-ws="soil"] .map-coords,
  body[data-ws="soil"] .map-legend,
  body[data-ws="soil"] .imgcal-badge{ display:none!important; }
  body[data-ws="soil"] .sl-body{ max-width:1180px; margin:0 auto; width:100%; }
  @media (min-width:900px){
    body[data-ws="soil"] .sl-grid{ grid-template-columns:auto 1fr auto 1fr; column-gap:22px; }
  }
  /* SIZING: left panel spans full width; Title5-Presby + Pump tile side-by-side.
     Force it IN-FLOW (override the mobile off-canvas transform) so it's reachable on a
     narrow/split window — otherwise it slides off-screen with no way back.
     Scoped >=641px: at <=640px the app is in full mobile mode (bottom tab-bar + sheets)
     which hides the docked panel and serves Sizing via the 'Design' sheet instead. */
  @media (min-width:641px){
    body[data-ws="sizing"] #left-panel{
      position:relative!important; left:auto!important; top:auto!important; transform:none!important;
      width:100%!important; max-width:100%!important; z-index:auto!important; height:100%!important;
      /* height:100% pins the panel to .app-body (its flex parent) so it never
         overshoots the overflow:hidden clip in the 641-768 band (base CSS there
         sets height:calc(100vh-52px-26px), a bit taller than app-body).
         KEEP base display:flex/flex-direction:column so
         .panel-scroll (flex:1 1 0; overflow-y:auto) clips & scrolls internally.
         Do NOT set height:auto or display:block — that lets the panel grow past
         .app-body's overflow:hidden and the bottom becomes unreachable. */
    }
    body[data-ws="sizing"] #left-panel .panel-collapse-btn{ display:none; }
    body[data-ws="sizing"] #left-panel .panel-scroll{
      display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; align-content:flex-start;
      justify-content:center; gap:18px; padding:18px;
      /* No margin:0 auto / max-width here: auto cross-axis margins on a flex ITEM
         suppress stretch, collapsing panel-scroll to content width so sections
         never tile. Stay full-width; cap+center the sections via their max-width
         + justify-content:center instead. */
    }
    body[data-ws="sizing"] #left-panel .panel-section{ flex:1 1 min(400px,100%); min-width:0; max-width:700px; margin:0; }
  }

/* While a drawing/placement tool is active, everything already on the map is
   inert — clicks only feed the active tool (no GPS prompts, no selection). */
.map-drawing .leaflet-interactive { pointer-events: none !important; }
