:root {
    --mds-bg: #0e1116;
    --mds-panel: rgba(22, 27, 34, 0.92);
    --mds-text: #e6edf3;
    --mds-muted: #8b949e;
    --mds-accent: #ffb000;
    --mds-border: #30363d;
    /* v94 — define --mds-orange (referenced 31× since v80 but never declared,
       silently resolved to invalid). Aliased to --mds-accent so brand orange
       is consistent everywhere. */
    --mds-orange: #ffb000;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--mds-bg);
    color: var(--mds-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  header {
    padding: 8px 14px;
    background: rgba(22, 27, 34, 0.96);
    border-bottom: 1px solid var(--mds-border);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  header #brand-icon {
    height: 52px; width: 52px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  header .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
  }
  header .brand-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e6edf3;
  }
  header .brand-tagline {
    font-size: 12px;
    font-style: italic;
    color: var(--mds-accent);
    margin-top: 1px;
  }
  header .brand-attrib {
    font-size: 10px;
    color: var(--mds-muted);
    margin-top: 1px;
  }
  /* Project label — centred, prominent, like the dashboard mock-up. */
  header .project-block {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
  }
  header .project-label {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mds-accent);              /* branding orange */
    text-transform: uppercase;
  }
  header .project-name {
    font-size: 22px;
    font-weight: 700;
    color: #e6edf3;
    letter-spacing: 0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }
  /* Status / version / date pill row */
  header .meta-pills {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
  }
  header .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--mds-border);
    background: rgba(30, 36, 46, 0.7);
    color: #e6edf3;
    white-space: nowrap;
  }
  header .pill .pill-key {
    color: var(--mds-muted);
    font-weight: 500;
  }
  header .pill.status {
    border-color: rgba(218, 198, 92, 0.45);
    background: rgba(60, 50, 18, 0.5);
    color: #f0d76b;
  }
  header .pill.status .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3fc46b;
    box-shadow: 0 0 6px rgba(63, 196, 107, 0.85);
  }
  header .pill.date {
    background: rgba(36, 52, 80, 0.65);
    border-color: rgba(120, 160, 220, 0.35);
    color: #cfe0ff;
  }
  header .build-info-btn {
    background: transparent;
    border: none;
    color: var(--mds-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color 0.15s, background 0.15s;
  }
  header .build-info-btn:hover { color: var(--mds-accent); background: rgba(255,255,255,0.04); }
  /* Legacy hooks kept so other CSS rules / mobile media query don't fail */
  header .brand-project { display: none; }
  header .build-label { display: none; }
  main { flex: 1; position: relative; }
  model-viewer {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a2030 0%, #0a0d12 100%);
  }
  /* Bottom-right AR button */
  #ar-button {
    position: absolute; bottom: 70px; right: 12px;
    background: var(--mds-accent); color: #000;
    border: none; padding: 10px 16px; border-radius: 22px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  /* === Align-to-Site (Phase 3) === */
  /* Station selector modal — full-screen darkened overlay with station list */
  #align-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center; justify-content: center;
    z-index: 100;
    padding: 16px;
    backdrop-filter: blur(4px);
  }
  #align-modal.visible { display: flex; }
  #align-modal .modal-card {
    background: var(--mds-bg);
    border: 1px solid var(--mds-border);
    border-radius: 14px;
    padding: 18px;
    max-width: 480px; width: 100%;
    max-height: 85vh;
    display: flex; flex-direction: column;
  }
  #align-modal h2 {
    color: var(--mds-accent);
    font-size: 16px;
    margin-bottom: 6px;
  }
  #align-modal .modal-instr {
    color: var(--mds-muted);
    font-size: 13px;
    margin-bottom: 14px;
    line-height: 1.45;
  }
  #align-modal .station-list {
    overflow-y: auto;
    flex: 1;
    border: 1px solid var(--mds-border);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 12px;
  }
  /* Map-based picker — satellite image with control point markers. Operative taps
     the marker for the nail they're standing nearest. */
  #align-map {
    width: 100%;
    height: 60vh;
    min-height: 320px;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #111;
  }
  /* Custom Leaflet marker styling — yellow pin for STN, blue for GCP, gray when excluded */
  .stn-marker {
    background: var(--mds-accent);
    color: #000;
    font-size: 11px; font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    border: 2px solid #000;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    line-height: 1.1;
  }
  .stn-marker.gcp { background: #5b8def; color: #fff; }
  .stn-marker.excluded { background: #555; color: #aaa; cursor: not-allowed; opacity: 0.7; border-color: #333; }
  .stn-marker:hover:not(.excluded) { background: #fff; }
  .leaflet-tooltip { background: rgba(0,0,0,0.85); color: #fff; border: 1px solid #555; padding: 4px 8px; font-size: 11px; }
  #align-modal .station-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
  }
  #align-modal .station-row:hover { background: rgba(255,176,0,0.10); }
  #align-modal .station-row.disabled { opacity: 0.35; cursor: not-allowed; }
  #align-modal .station-row.disabled:hover { background: transparent; }
  #align-modal .station-row .stn-id {
    font-weight: 700; color: var(--mds-accent);
    font-family: monospace; min-width: 64px;
  }
  #align-modal .station-row .stn-meta {
    color: var(--mds-muted);
    font-size: 11px;
    font-family: monospace;
  }
  #align-modal .station-row .stn-type {
    background: var(--mds-border);
    color: var(--mds-text);
    padding: 2px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 700;
  }
  #align-modal .modal-buttons {
    display: flex; gap: 8px; justify-content: flex-end;
  }
  #align-modal .modal-buttons button {
    background: transparent;
    color: var(--mds-text);
    border: 1px solid var(--mds-border);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer; font-size: 13px;
  }
  #align-modal .modal-buttons button.primary {
    background: var(--mds-accent); color: #000; border-color: var(--mds-accent);
    font-weight: 700;
  }
  /* AR overlay — shown DURING the WebXR session as an HTML overlay (uses dom-overlay feature) */
  #ar-overlay {
    position: fixed; inset: 0;
    pointer-events: none;
    display: none;
    z-index: 1;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  }
  #ar-overlay.visible { display: block; }
  #ar-overlay .ar-prompt {
    /* Anchored just above the yellow tap button so the close X (top-right) stays uncovered */
    position: absolute; bottom: 100px; left: 16px; right: 16px;
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
  #ar-overlay .ar-prompt .stn { color: var(--mds-accent); font-weight: 700; }
  #ar-overlay .ar-tap-area {
    position: absolute; inset: 80px 16px 100px 16px;
    pointer-events: auto;
    cursor: crosshair;
    /* Visible only as a faint outline so user knows they can tap anywhere */
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 12px;
  }
  #ar-overlay .ar-tap-target {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--mds-accent); color: #000;
    border: none;
    padding: 16px 32px; font-size: 16px; font-weight: 700;
    border-radius: 32px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
  #ar-overlay .ar-exit {
    position: absolute; top: 24px; right: 16px;
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 22px;
    cursor: pointer;
    pointer-events: auto;
    font-size: 22px; font-weight: 300;
    line-height: 1;
  }
  /* v5: accuracy badge — single number, single colour, optional inline link.
     Always-visible while AR overlay is active. Long-press → diagnostics. */
  #ar-overlay .ar-badge {
    position: absolute; top: 24px; left: 16px;
    pointer-events: auto;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 13px; font-weight: 700;
    color: #000;
    background: #3fb950;             /* green default */
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    max-width: calc(100vw - 100px);  /* don't run under the close X */
    line-height: 1.2;
  }
  #ar-overlay .ar-badge.amber { background: #ffb000; }
  #ar-overlay .ar-badge.red   { background: #ff5555; color: #fff; }
  #ar-overlay .ar-badge.red #ar-badge-recalibrate { color: #fff; }
  #ar-overlay .ar-badge.amber #ar-badge-recalibrate { color: #000; }
  #ar-overlay .ar-badge:active { transform: scale(0.97); }
  /* On-screen AR diagnostic strip — hidden by default, only shown on AR button tap / errors */
  #ar-diag {
    position: absolute; bottom: 120px; left: 12px; right: 80px;
    background: rgba(22, 27, 34, 0.92);
    border: 1px solid var(--mds-border);
    color: var(--mds-text);
    font-size: 10px; font-family: monospace;
    padding: 6px 10px; border-radius: 6px;
    z-index: 4;
    line-height: 1.4;
    backdrop-filter: blur(10px);
    word-break: break-word;
    display: none;          /* hidden until needed */
    cursor: pointer;        /* tap to dismiss */
  }
  #ar-diag.visible { display: block; }
  #ar-diag .ok { color: #3fb950; }
  #ar-diag .warn { color: #ffb000; }
  #ar-diag .err { color: #ff5555; }
  /* View selector — top-right, AutoCAD-style */
  #view-selector {
    position: absolute; top: 12px; right: 12px;
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 10px;
    padding: 8px;
    backdrop-filter: blur(10px);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 56px);
    gap: 4px;
  }
  #view-selector button {
    background: transparent;
    color: var(--mds-text);
    border: 1px solid transparent;
    padding: 8px 4px;
    border-radius: 6px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    letter-spacing: 0.5px;
  }
  #view-selector button:hover {
    background: var(--mds-border);
    border-color: var(--mds-accent);
  }
  #view-selector button.active {
    background: var(--mds-accent);
    color: #000;
  }
  #view-selector .panel-title {
    grid-column: 1 / -1;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    color: var(--mds-muted);
    margin-bottom: 4px; text-transform: uppercase;
    text-align: center;
  }
  /* Left-column container — holds Layers panel + Work Areas panel, stacked.
     14px gap + accent left-edge on Work Areas makes them read as separate sections.
     On mobile each is toggled independently via its own pill button. */
  #left-column {
    position: absolute; top: 12px; left: 12px;
    z-index: 5;
    display: flex; flex-direction: column; gap: 14px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    width: 240px;
  }
  #layers-panel {
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 10px;
    padding: 10px 12px;
    backdrop-filter: blur(10px);
  }
  #saved-views-panel {
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 10px;
    padding: 10px 12px;
    backdrop-filter: blur(10px);
    border-left: 3px solid var(--mds-accent);
  }
  /* Points of Interest — Blender-defined presets. Pink left-edge accent so it
     reads visually distinct from the user-driven Work Areas above it. */
  #poi-panel {
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 10px;
    padding: 10px 12px;
    backdrop-filter: blur(10px);
    border-left: 3px solid #ff5fb1;     /* pink — same family as the pin emoji */
  }
  /* Shared panel chrome — clickable header with chevron, collapsible body. */
  .flyout-panel .panel-header {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--mds-muted);
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 0 8px 0;
    margin: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    text-align: left;
  }
  .flyout-panel .panel-header:hover { color: var(--mds-text); }
  .flyout-panel .panel-header .panel-chevron {
    display: inline-block;
    transition: transform 0.18s ease;
    font-size: 10px;
    opacity: 0.75;
  }
  .flyout-panel.collapsed .panel-header .panel-chevron {
    transform: rotate(-90deg);
  }
  .flyout-panel .panel-body {
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease;
    max-height: 1200px;   /* generous; not actually limiting */
    opacity: 1;
  }
  .flyout-panel.collapsed .panel-body {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
  .flyout-panel.collapsed { padding-bottom: 8px; }
  .flyout-panel.collapsed .panel-header { padding-bottom: 0; }
  /* Empty-state placeholder for POI when no presets are defined in Blender. */
  #poi-list .poi-empty {
    color: var(--mds-muted);
    font-size: 11px;
    font-style: italic;
    padding: 4px 2px;
  }
  /* Override the older single-rule for the saved-views title — handled by .panel-header now */
  #saved-views-panel .panel-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: var(--mds-muted);
    margin-bottom: 8px; text-transform: uppercase;
  }
  #saved-views-list {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 8px;
  }
  #saved-views-list:empty { display: none; }
  /* Preset work areas — defined in Blender, can't be renamed/deleted */
  .saved-view-row.preset .view-name {
    color: #f0c674;
    font-weight: 700;
  }
  .saved-view-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: 4px;
  }
  .saved-view-row:hover { background: rgba(255,255,255,0.04); }
  .saved-view-row .view-name {
    text-align: left;
    background: transparent;
    color: var(--mds-text);
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .saved-view-row .view-name:hover { background: rgba(255,176,0,0.15); }
  .saved-view-row .view-name.active { background: var(--mds-accent); color: #000; }
  .saved-view-row .view-rename,
  .saved-view-row .view-delete {
    background: transparent;
    color: var(--mds-muted);
    border: none;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
  }
  .saved-view-row .view-rename:hover { color: var(--mds-accent); background: rgba(255,255,255,0.05); }
  .saved-view-row .view-delete:hover { color: #ff5555; background: rgba(255,85,85,0.1); }
  .saved-view-row .view-name.empty {
    color: var(--mds-muted);
    font-style: italic;
  }
  .saved-view-row .view-name.empty::before {
    content: '+ ';
    color: var(--mds-accent);
    font-weight: bold;
    font-style: normal;
  }
  #btn-add-slot {
    width: 100%;
    background: transparent;
    color: var(--mds-muted);
    border: 1px dashed var(--mds-border);
    padding: 6px;
    border-radius: 6px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
  }
  #btn-add-slot:hover { color: var(--mds-accent); border-color: var(--mds-accent); }
  #layers-panel .panel-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: var(--mds-muted);
    margin-bottom: 8px; text-transform: uppercase;
  }
  #layers-panel .layer-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center; gap: 8px;
    padding: 5px 4px; font-size: 13px;
    border-radius: 4px;
    user-select: none;
  }
  #layers-panel .layer-row:hover { background: rgba(255,255,255,0.05); }
  #layers-panel input[type=checkbox] {
    width: 16px; height: 16px;
    accent-color: var(--mds-accent);
    cursor: pointer;
  }
  #layers-panel .layer-color {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: default;       /* purely informative — not a button */
    pointer-events: none;  /* prevent stray clicks being read as interactive */
  }
  #layers-panel .layer-name {
    font-size: 12px; line-height: 1.2;
    color: var(--mds-text);
    cursor: pointer;
  }
  #layers-panel .layer-opacity-row {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px 4px 26px;
    margin-top: -2px;
  }
  #layers-panel input[type=range] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: var(--mds-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  #layers-panel input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    background: var(--mds-accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
  #layers-panel input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px;
    background: var(--mds-accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
  #layers-panel .opacity-label {
    font-size: 10px;
    color: var(--mds-muted);
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* Mobile-only pill toggles for the two left-side panels */
  #panel-toggle-group { display: none; }
  .panel-toggle-pill {
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    color: var(--mds-text);
    border-radius: 22px;
    padding: 8px 12px; font-size: 12px; cursor: pointer;
    backdrop-filter: blur(10px);
    font-weight: 600;
    white-space: nowrap;
  }
  /* Zoom controls — right side, vertical. Anchored BELOW the view-selector
     to avoid overlap on standard desktop heights. */
  #zoom-controls {
    position: absolute; right: 12px;
    top: 220px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 5;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    /* Hide scrollbar but keep scroll behaviour */
    scrollbar-width: none;
  }
  #zoom-controls::-webkit-scrollbar { display: none; }
  #zoom-controls button {
    width: 40px; height: 40px;
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    color: var(--mds-text);
    font-size: 20px; font-weight: 600;
    cursor: pointer; border-radius: 20px;
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }
  #zoom-controls button:hover { background: var(--mds-border); }
  #zoom-controls .tool-sep {
    /* Thin horizontal divider between tool groups. Width less than buttons. */
    width: 22px;
    height: 1px;
    background: var(--mds-border);
    opacity: 0.7;
    margin: 1px auto;
  }
  #zoom-controls button#zoom-box { font-size: 18px; }
  #zoom-controls button#zoom-box.active {
    background: #f0c674;
    color: #000;
    border-color: #f0c674;
  }
  /* Box-zoom rectangle — drawn over the viewer during drag */
  #box-zoom-rect {
    position: absolute;
    border: 2px dashed #f0c674;
    background: rgba(240, 198, 116, 0.15);
    pointer-events: none;
    z-index: 100;
    display: none;
  }
  /* Hint shown while box-zoom mode is active */
  #box-zoom-hint {
    position: absolute;
    top: 70px;  /* below the header */
    left: 50%; transform: translateX(-50%);
    background: rgba(240, 198, 116, 0.95);
    color: #000;
    padding: 8px 16px;
    border-radius: 18px;
    font-size: 12px; font-weight: 700;
    z-index: 101;
    display: none;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  /* When in box-zoom mode, change the viewer's cursor */
  body.box-zoom-mode model-viewer { cursor: crosshair !important; }
  body.region-snap-mode model-viewer { cursor: crosshair !important; }
  /* Pan mode — open hand cursor; closed hand while dragging */
  body.pan-mode model-viewer { cursor: grab !important; }
  body.pan-mode.panning model-viewer { cursor: grabbing !important; }
  /* Focus mode — crosshair tells the user "next tap will set the orbit pivot" */
  body.focus-mode model-viewer { cursor: crosshair !important; }
  /* RMB held → same crosshair feedback. RMB click sets pivot + selects. */
  body.rmb-down model-viewer { cursor: crosshair !important; }
  /* Measure mode — crosshair, persistent markers, SVG line overlay. */
  body.measure-mode model-viewer { cursor: crosshair !important; }
  #measure-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: visible;
  }
  .measure-marker {
    /* model-viewer hotspot button. Anchored to a 3D position. */
    background: #ffe066;
    border: 2px solid #1a1f29;
    border-radius: 50%;
    width: 14px; height: 14px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    box-sizing: border-box;
    color: #1a1f29;
    font-size: 9px; font-weight: 700;
    line-height: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .measure-marker.endpoint-a { background: #ffe066; }
  .measure-marker.endpoint-b { background: #ff9f3f; }
  .measure-marker:hover { transform: scale(1.2); }
  .measure-label {
    position: absolute;
    background: rgba(22, 27, 34, 0.94);
    color: #ffe066;
    border: 1px solid #ffe066;
    border-radius: 12px;
    padding: 3px 9px;
    font-size: 12px; font-weight: 700;
    pointer-events: auto;
    cursor: default;
    backdrop-filter: blur(8px);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 4px;
    z-index: 7;
  }
  .measure-label .measure-clear {
    background: transparent; color: #ff5555;
    border: none; padding: 0 0 0 4px; margin: 0;
    font-size: 13px; cursor: pointer; line-height: 1;
  }
  .measure-label .measure-clear:hover { color: #ff8888; }
  /* Small toast at top-centre. */
  #toast {
    position: absolute;
    top: 16px; left: 50%; transform: translateX(-50%) translateY(-10px);
    background: rgba(22, 27, 34, 0.96);
    color: var(--mds-text);
    border: 1px solid var(--mds-accent);
    padding: 8px 16px;
    border-radius: 18px;
    font-size: 13px; font-weight: 600;
    z-index: 110;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* View history controls (⌂ Extents, ↶ Previous, ↷ Next) — match the
     existing zoom-controls button look. Disabled state when no history
     to step through. */
  #zoom-controls button.disabled,
  #zoom-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  #zoom-controls button#zoom-extents { font-size: 18px; }
  #zoom-controls button#zoom-prev,
  #zoom-controls button#zoom-next { font-size: 18px; }
  #zoom-controls button#tool-measure.active {
    background: #ffe066; color: #1a1f29; border-color: #ffe066;
  }
  #zoom-controls button#tool-xray.active {
    background: #5b8def; color: #fff; border-color: #5b8def;
  }
  #zoom-controls button#tool-fullscreen.active {
    background: var(--mds-accent); color: #1a1f29; border-color: var(--mds-accent);
  }
  /* Snapshot popup menu — anchored to the 📷 button, opens leftward. */
  #snapshot-menu {
    position: absolute;
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 10px;
    padding: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    z-index: 50;
    display: none;
    min-width: 168px;
  }
  #snapshot-menu.open { display: block; }
  #snapshot-menu button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--mds-text);
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    text-align: left;
  }
  #snapshot-menu button:hover { background: var(--mds-border); }
  #snapshot-menu button .menu-icon {
    font-size: 16px; width: 22px; text-align: center;
  }
  #snapshot-menu .menu-divider {
    height: 1px; background: var(--mds-border);
    margin: 3px 4px;
  }
  #snapshot-menu .menu-note {
    color: var(--mds-muted);
    font-size: 10px;
    padding: 2px 12px 4px;
    font-style: italic;
  }
  #zoom-controls button#zoom-pan.active {
    background: #5b8def;
    color: #000;
    border-color: #5b8def;
  }
  /* Bottom controls — auto-rotate, reset, brightness */
  #bottom-controls {
    position: absolute;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 24px;
    padding: 5px;
    backdrop-filter: blur(10px);
    z-index: 5;
    flex-wrap: nowrap;
  }
  #bottom-controls button {
    background: transparent; color: var(--mds-text);
    border: none; padding: 8px 14px;
    border-radius: 18px; font-size: 13px;
    cursor: pointer; transition: background 0.15s;
    white-space: nowrap;
  }
  #bottom-controls button:hover { background: var(--mds-border); }
  #bottom-controls button.active { background: var(--mds-accent); color: #000; }
  /* Hide the Align to Site strip on devices whose primary pointer is fine
     (mouse / trackpad) — i.e. laptops and desktops. AR alignment only makes
     sense on a phone or tablet you can physically carry to the site, so the
     button is irrelevant clutter on a workstation. */
  @media (pointer: fine) {
    #bottom-controls { display: none; }
  }
  /* Loading + error overlays */
  .overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 20px;
    z-index: 4;
    pointer-events: none;
  }
  .overlay * { pointer-events: auto; }
  .overlay.hidden { display: none !important; }
  .overlay h2 { color: var(--mds-accent); margin-bottom: 12px; }
  .overlay p { color: var(--mds-muted); margin: 8px 0; max-width: 480px; line-height: 1.5; }
  .progress {
    width: 200px; height: 4px;
    background: var(--mds-border); border-radius: 2px;
    overflow: hidden; margin-top: 16px;
  }
  .progress-bar {
    height: 100%; background: var(--mds-accent);
    width: 0%; transition: width 0.2s;
  }
  /* Mobile layout */
  @media (max-width: 700px) {
    /* Compact single-row header for phones. Layout:
         [icon] CI · Billingham BESS                [v72]
                Model it first.
       Tagline lives under the title; project name sits inline with brand;
       only the version pill stays visible on the right. */
    header {
      padding: 6px 10px;
      gap: 8px;
      flex-wrap: nowrap;       /* one row only */
      align-items: center;
      min-height: 0;
    }
    header #brand-icon { height: 36px; width: 36px; }
    header .brand-text { flex: 0 1 auto; min-width: 0; }
    header .brand-title { font-size: 12px; letter-spacing: 0.02em; }
    header .brand-tagline { font-size: 9px; line-height: 1.15; }
    header .brand-attrib { display: none; }

    /* Project block becomes a small inline pill on its own line, NOT centred. */
    header .project-block {
      flex: 1 1 0;
      min-width: 0;
      justify-content: flex-start;
      gap: 5px;
      overflow: hidden;
    }
    header .project-label { font-size: 11px; letter-spacing: 0.04em; }
    header .project-name  {
      font-size: 13px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      flex: 1 1 0;
      min-width: 0;
    }

    /* Right-side pills: only show VERSION on phone, hide PIPELINE + INFO. */
    header .meta-pills { gap: 4px; flex: 0 0 auto; }
    header .pill {
      padding: 3px 7px;
      font-size: 9px;
      gap: 3px;
      border-radius: 9px;
    }
    header .pill.status { display: none; }
    header .pill.date { display: none; }
    header .build-info-btn { display: none; }
    header .build-label { display: none; }
    header .pill .pill-key { font-size: 8px; opacity: 0.8; }
    /* On mobile each panel is independently toggleable. Container becomes
       a positioned overlay; child panels show only when their .open flag set.
       Mutually exclusive on mobile (only one open at a time so the +/- zoom
       buttons don't end up overlapping the row contents). */
    #left-column {
      top: auto; bottom: 70px;
      left: 12px; right: 12px;
      width: auto;
      max-width: none;
      max-height: 60vh;
      overflow-y: auto;
      display: flex;
      gap: 12px;
      pointer-events: none;  /* let touches pass through container itself */
    }
    #layers-panel, #saved-views-panel, #poi-panel {
      display: none;
      pointer-events: auto;
    }
    #layers-panel.open, #saved-views-panel.open, #poi-panel.open { display: block; }
    /* Toggle pills — three of them, side by side */
    #panel-toggle-group { display: flex; gap: 4px; flex-wrap: wrap; }
    #layers-toggle, #poi-toggle, #areas-toggle { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 11px; }
    #layers-toggle.active, #poi-toggle.active, #areas-toggle.active {
      background: var(--mds-accent); color: #000; border-color: var(--mds-accent);
    }
    /* On mobile, when a panel is open we want it fully visible — hide the
       collapse chevron (the panel itself IS the drawer; collapse is redundant) */
    .flyout-panel .panel-chevron { display: none; }
    .flyout-panel.collapsed .panel-body { max-height: 1200px !important; opacity: 1; pointer-events: auto; }
    /* Hide zoom controls when either drawer is open — prevents +/− overlapping rows */
    body.panel-open #zoom-controls { display: none; }
    #zoom-controls { top: auto; bottom: 130px; transform: none; }
    #zoom-controls button { width: 40px; height: 40px; font-size: 20px; }
    #ar-button { padding: 8px 12px; font-size: 12px; bottom: 60px; right: 10px; }
    #view-selector { grid-template-columns: repeat(3, 48px); padding: 6px; gap: 3px; top: 10px; right: 10px; }
    #view-selector button { padding: 6px 2px; font-size: 10px; }
    #bottom-controls { bottom: 12px; padding: 4px; }
    #bottom-controls button { padding: 7px 10px; font-size: 12px; }
  }

  /* === Control Point hotspots ===
     2D HTML markers anchored to 3D coords by model-viewer.
     Crisp at any zoom — operatives need to read the station ID clearly on site. */
  .cp-hotspot {
    --cp-color: #ff3030;
    background: var(--cp-color);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font: 600 11px/1.2 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    pointer-events: auto;
    transform: translate(-50%, -100%);
    position: relative;
  }
  .cp-hotspot::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--cp-color);
  }
  .cp-hotspot[data-cp-type="GCP"] { --cp-color: #d97706; }
  model-viewer.cp-hidden .cp-hotspot { display: none; }
  /* CRITICAL: when the Align-to-Site picker modal is open BETWEEN nail picks,
     the WebXR session stays alive (Kabsch needs all readings in the same AR
     coordinate frame). The dom-overlay feature keeps #ar-overlay live in the
     XR compositor regardless of CSS display, so its .ar-tap-area was eating
     taps meant for the Leaflet markers in the picker modal. This rule kills
     pointer events on the whole overlay (and its children) whenever the
     picker is open, so taps fall through to the modal. */
  body.align-picking #ar-overlay,
  body.align-picking #ar-overlay * {
    pointer-events: none !important;
  }

  /* ==========================================================
     Tap-to-select / object info bottom sheet (v68+)
     Pattern: ACC mobile — single-tap surfaces an object info card,
     double-tap focuses (orbits-pivot-on-here) without zoom.
     ========================================================== */
  #object-info-sheet {
    position: absolute;
    left: 50%; bottom: -160px;
    transform: translateX(-50%);
    width: min(92vw, 460px);
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 14px 14px 10px 10px;
    padding: 12px 14px 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.45);
    color: var(--mds-text);
    z-index: 8;
    transition: bottom 0.22s cubic-bezier(0.3, 0.7, 0.2, 1);
    pointer-events: auto;
  }
  #object-info-sheet.open { bottom: 70px; }
  #object-info-sheet .sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
  }
  #object-info-sheet .sheet-title {
    font-size: 14px; font-weight: 700;
    color: var(--mds-accent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; margin-right: 8px;
  }
  #object-info-sheet .sheet-close {
    background: transparent; border: none; color: var(--mds-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 0 4px; min-width: 32px; min-height: 32px;
  }
  #object-info-sheet .sheet-close:hover { color: var(--mds-text); }
  #object-info-sheet .sheet-row {
    display: flex; justify-content: space-between;
    font-size: 12px; padding: 3px 0;
    border-top: 1px solid var(--mds-border);
  }
  #object-info-sheet .sheet-row:first-of-type { border-top: none; }
  #object-info-sheet .sheet-row .k { color: var(--mds-muted); margin-right: 12px; }
  #object-info-sheet .sheet-row .v {
    color: var(--mds-text); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 65%;
  }
  #object-info-sheet .sheet-actions {
    margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap;
  }
  #object-info-sheet .sheet-actions button {
    background: var(--mds-border); color: var(--mds-text);
    border: none; padding: 7px 12px; border-radius: 14px;
    font-size: 12px; cursor: pointer;
    min-height: 36px;
  }
  #object-info-sheet .sheet-actions button:hover { background: var(--mds-accent); color: #000; }
  #zoom-controls button#zoom-focus.active {
    background: var(--mds-accent);
    color: #000;
    border-color: var(--mds-accent);
  }
  /* Measure tool popup menu (mirrors snapshot-menu styling). */
  #measure-menu {
    position: absolute;
    background: var(--mds-panel);
    border: 1px solid var(--mds-border);
    border-radius: 10px;
    padding: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    z-index: 50;
    display: none;
    min-width: 200px;
  }
  #measure-menu.open { display: block; }
  #measure-menu button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--mds-text);
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    text-align: left;
  }
  #measure-menu button:hover { background: var(--mds-border); }
  #measure-menu button .menu-icon { font-size: 16px; width: 22px; text-align: center; }
  #measure-menu .menu-divider { height: 1px; background: var(--mds-border); margin: 3px 4px; }

  /* "Focus" pill — surfaces double-tap discoverability */
  @media (max-width: 700px) {
    #object-info-sheet { padding: 10px 12px 12px; border-radius: 12px 12px 8px 8px; }
    #object-info-sheet.open { bottom: 64px; }
    #object-info-sheet .sheet-title { font-size: 13px; }
    #object-info-sheet .sheet-row { font-size: 11px; }
    body.sheet-open #bottom-controls { display: none; }
  }


  /* === v88 (ALIGN-V88-PHASE4) Pane borders + labels + Z spacing === */
  /* Subtle dashed staggered outline on each section-mode pane so the user
     can quickly see where one pane stops and the next starts. Outline
     doesn't participate in layout, so grid sizing stays correct. */
  @media (min-width: 768px) {
    html body.section-mode #viewer,
    html body.section-mode #viewer-iso,
    html body.section-mode #viewer-section {
      outline: 1px dashed rgba(245, 158, 11, 0.55) !important;
      outline-offset: -4px;
    }
  }
  /* Pane labels — small chip in the top-right corner of each pane. */
  .pane-label {
    position: absolute;
    z-index: 7;
    background: rgba(28, 28, 30, 0.86);
    color: #9aa0a6;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    pointer-events: none;
    display: none;
    backdrop-filter: blur(4px);
  }
  body.section-mode .pane-label { display: inline-block; }
  /* v94 — drawers cover the pane-label chips when open. Hide the
     overlapped one so the chip doesn't peek through behind the panel. */
  body.section-mode.section-drawer-left-open  #pane-label-iso  { display: none !important; }
  body.section-mode.section-drawer-right-open #pane-label-plan { display: none !important; }
  /* The labels need to anchor inside their respective panes. We position
     them via JS since the panes are model-viewer elements (not relative
     positioned containers). Default position is hidden until JS picks
     them up; CSS sets safe defaults if JS hasn't run. */
  #pane-label-iso  { top: 12px; left: 12px; }
  #pane-label-plan { top: 12px; right: 12px; }
  #pane-label-sec  { bottom: 90px; right: 12px; }
  /* Section axis picker — give Z + ➰ room so all 4 buttons stay visible. */
  .section-axis-picker { flex: 0 0 auto; min-width: 124px; }
  .section-axis-picker button { min-width: 28px; }
  /* Alignment picker — appears when 2+ alignments exist + ➰ axis active. */
  #section-align-picker {
    background: #1a1a1c;
    border: 1px solid var(--mds-border);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    max-width: 140px;
    display: none;
  }
  body.section-mode #section-bar.chainage-mode #section-align-picker {
    display: inline-block;
  }
  /* Swath rectangle on plan pane — translucent yellow band along the
     alignment showing the L/R buffer used for section measurement. */
  .alignment-swath {
    fill: rgba(255, 224, 102, 0.10);
    stroke: rgba(255, 224, 102, 0.45);
    stroke-width: 1;
    stroke-dasharray: 6 4;
    pointer-events: none;
  }
  /* Site bearing input in alignments panel header. */
  #align-bearing-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #aaa;
  }
  #align-bearing-row label { white-space: nowrap; }
  #align-bearing-row input {
    flex: 1 1 auto;
    background: #0d0e10;
    border: 1px solid var(--mds-border);
    color: #ffe066;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    width: 60px;
    min-width: 0;
  }
  #align-bearing-row input:focus { outline: 1px solid var(--mds-orange); }
  #align-bearing-row .deg { color: #ffe066; font-weight: 600; }

  /* === v86 (ALIGN-V86-PHASE2) Alignment tool styles === */
  /* Crosshair cursor on the plan pane while drawing. */
  body.alignment-draw-mode model-viewer#viewer { cursor: crosshair !important; }
  /* Visual indicator that draw-mode is on — orange border around the plan pane. */
  body.alignment-draw-mode #viewer {
    box-shadow: inset 0 0 0 3px var(--mds-orange) !important;
  }
  /* The "draw mode" toolbar — finish / cancel chips. */
  #alignment-draw-bar {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    gap: 8px;
    background: rgba(28, 28, 30, 0.94);
    border: 1px solid var(--mds-orange);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    align-items: center;
    font-size: 13px;
    color: #ddd;
  }
  body.alignment-draw-mode #alignment-draw-bar { display: flex; }
  #alignment-draw-bar .draw-hint {
    color: #ffe066; font-weight: 600;
  }
  #alignment-draw-bar button {
    background: #1a1a1c;
    border: 1px solid var(--mds-border);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
  }
  #alignment-draw-bar button.primary {
    background: var(--mds-orange);
    border-color: var(--mds-orange);
    color: #1a1f29;
  }
  #alignment-draw-bar button:hover { filter: brightness(1.15); }
  /* Alignment polylines on the plan pane (drawn into #section-overlay) */
  .alignment-line {
    fill: none;
    stroke: #5b8def;
    stroke-width: 2.5;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
  }
  .alignment-line-draft {
    stroke: #00d4a3;
    stroke-dasharray: 7 5;
  }
  .alignment-vertex {
    fill: #5b8def;
    stroke: #1a1f29;
    stroke-width: 1.5;
    pointer-events: none;
  }
  .alignment-vertex.draft { fill: #00d4a3; }
  /* Alignments panel — same look as Work Areas */
  #alignments-list { display: flex; flex-direction: column; gap: 4px; }
  .alignment-row {
    display: flex; align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #1a1a1c;
    border: 1px solid var(--mds-border);
    border-radius: 8px;
    font-size: 12px;
  }
  .alignment-row .alignment-name { flex: 1 1 auto; color: #5b8def; font-weight: 600; }
  .alignment-row .alignment-meta { color: #888; font-size: 11px; }
  .alignment-row .alignment-del,
  .alignment-row .alignment-rev {
    background: transparent;
    border: none; padding: 0 4px; font-size: 16px;
    cursor: pointer; line-height: 1;
  }
  .alignment-row .alignment-del { color: #ff5555; }
  .alignment-row .alignment-del:hover { color: #ff8888; }
  .alignment-row .alignment-rev { color: #5b8def; }
  .alignment-row .alignment-rev:hover { color: #8aaeff; }
  #btn-draw-alignment {
    margin-top: 6px;
    background: #1a1a1c;
    border: 1px solid var(--mds-orange);
    color: var(--mds-orange);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
  }
  #btn-draw-alignment:hover { background: var(--mds-orange); color: #1a1f29; }
  #zoom-controls button#tool-alignment.active {
    background: #5b8def; color: #fff; border-color: #5b8def;
  }

  /* === Section indicator overlay + coord badges (SECTION-MODE-MARKER-v2) === */
  /* SVG overlay covering the whole <main> grid — used to draw a line
     showing where the section plane crosses the visible top-pane view. */
  #section-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: visible;
    /* v87 (ALIGN-V87-CHAINAGE) — always rendered. Empty when nothing to draw;
       the rendering helpers gate per-element visibility on their own state. */
    display: block;
  }
  .section-line {
    stroke: #ffe066;
    stroke-width: 2.5;
    stroke-dasharray: 9 5;
    fill: none;
    pointer-events: none;
  }
  .section-line-halo {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 6;
    fill: none;
    pointer-events: none;
  }
  .section-line-end {
    fill: #ffe066;
    stroke: #1a1f29;
    stroke-width: 1.5;
    pointer-events: none;
  }
  /* Coordinate badges. Two instances, one anchored to each pane. */
  .section-coord-badge {
    position: absolute;
    background: rgba(22, 27, 34, 0.94);
    color: #ffe066;
    border: 1px solid #ffe066;
    border-radius: 12px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
    z-index: 8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: none;
  }
  body.section-mode .section-coord-badge { display: inline-block; }
  .section-coord-badge.pane-top {
    top: 70px;
    left: 12px;
  }
  .section-coord-badge.pane-bot {
    bottom: 76px;
    left: 12px;
    color: #00d4a3;
    border-color: #00d4a3;
  }
  @media (orientation: landscape) and (max-width: 1200px) {
    .section-coord-badge.pane-bot {
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* === v82 3-pane layout (SECTION-V82-3PANE) ===
     iso (top-left) + plan (top-right) + section (full-width bottom). Active
     only on viewports >=768px wide AND landscape; everything narrower stays
     on the v81 2-pane stack. Uses named grid areas for clarity. */
  /* v83 (SECTION-V83-AUDIT-FIX) — prefixed with `html` to outrank the v80
     `body.section-mode` rules in specificity. Without this prefix, the v80
     rules win by cascade order (they appear later in the file) and the
     iso column collapses to 0 width. */
  @media (min-width: 768px) {
    html body.section-mode main {
      display: grid !important;
      grid-template-areas:
        "iso plan"
        "section section" !important;
      grid-template-rows: 40% 60% !important;
      grid-template-columns: 50% 50% !important;
      gap: 0;
    }
    /* v84 (SECTION-V84-SPAN-FRAME-PERF) — drop the grid-row/column: auto
       overrides; they were resetting the row/col-start/end that
       `grid-area: NAME` had just set, breaking the named-area placement
       so #viewer-section only occupied column 1 instead of spanning. */
    html body.section-mode #viewer-iso {
      grid-area: iso !important;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      border-right: 2px solid var(--mds-orange);
      background: #0d0e10;
    }
    html body.section-mode #viewer {
      grid-area: plan !important;
      border-bottom: 2px solid var(--mds-orange);
      border-right: none;
    }
    html body.section-mode #viewer-section {
      grid-area: section !important;
      border-bottom: none;
      border-right: none;
    }
  }
  /* iso viewer hidden by default — created dynamically inside JS, but the
     element won't exist until section mode kicks in. Provide baseline so it
     doesn't flash full-screen on attach. */
  model-viewer#viewer-iso {
    display: none;
    background: #0d0e10;
    --poster-color: transparent;
  }
  /* v85 (SECTION-V85-POLISH) — loading hint while the iso GLB is fetched +
     decoded on first activation (~3s). Cleared via JS once load fires. */
  #viewer-iso-loading {
    position: absolute;
    pointer-events: none;
    color: #5b8def;
    font-size: 13px;
    font-weight: 600;
    background: rgba(13, 14, 16, 0.75);
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid #2a2c30;
    z-index: 9;
    display: none;
  }
  body.section-mode #viewer-iso-loading.show {
    display: inline-block;
  }
  @media (min-width: 768px) {
    /* Anchor inside the iso pane (top-left quadrant). */
    body.section-mode #viewer-iso-loading.show {
      top: 50%;
      left: 25%;
      transform: translate(-50%, -50%);
    }
  }
  /* iso-pane coord badge — same look as plan/section, anchored top-left
     of the iso pane (which on tablet/desktop is the top-left quadrant). */
  .section-coord-badge.pane-iso {
    top: 70px;
    left: 12px;
    color: #5b8def;
    border-color: #5b8def;
    display: none;
  }
  @media (min-width: 768px) {
    body.section-mode .section-coord-badge.pane-iso { display: inline-block; }
    /* On 3-pane layout, move the plan-pane badge to its OWN pane (top-right)
       so it doesn't sit on top of the iso pane. */
    body.section-mode .section-coord-badge.pane-top {
      left: auto;
      right: 12px;
    }
  }

  /* === Section Mode — split-screen + Dalux-style slider (SECTION-MODE-MARKER-v1) === */
  /* When body.section-mode is set, main becomes a 40/60 vertical split:
     top pane = primary #viewer (locked to top-down plan view),
     bottom pane = a dynamically-created #viewer-section that mirrors the
     same GLB but renders with a clipping plane applied. Landscape phones
     swap to a 50/50 left-right split to keep more headroom for verticals. */
  body.section-mode main {
    display: grid !important;
    grid-template-rows: 40% 60% !important;
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  body.section-mode #viewer {
    grid-row: 1 !important; grid-column: 1 !important;
    border-bottom: 2px solid var(--mds-orange);
  }
  body.section-mode #viewer-section {
    grid-row: 2 !important; grid-column: 1 !important;
    display: block !important;
    width: 100% !important; height: 100% !important;
    background: #0d0e10;
  }
  @media (orientation: landscape) and (max-width: 1200px) {
    body.section-mode main {
      grid-template-rows: 1fr !important;
      grid-template-columns: 50% 50% !important;
    }
    body.section-mode #viewer {
      grid-row: 1 !important; grid-column: 1 !important;
      border-bottom: none;
      border-right: 2px solid var(--mds-orange);
    }
    body.section-mode #viewer-section {
      grid-row: 1 !important; grid-column: 2 !important;
    }
  }
  model-viewer.section-viewer {
    --poster-color: transparent;
    background: #0d0e10;
  }
  /* Section bar — Dalux-style horizontal slider strip pinned to the
     bottom edge of the viewport. Axis picker on the left, flip button,
     the main range slider, and a value badge on the right. */
  #section-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    z-index: 50;
    display: flex; gap: 10px; align-items: center;
    background: rgba(28, 28, 30, 0.94);
    border: 1px solid var(--mds-border);
    border-radius: 14px;
    padding: 8px 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.50);
    max-width: 92vw; width: min(560px, 92vw);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .section-axis-picker {
    display: flex; gap: 2px;
    background: #1a1a1c;
    border-radius: 8px;
    padding: 2px;
  }
  .section-axis-picker button {
    background: transparent;
    border: none;
    color: #ddd;
    font-weight: 700;
    font-size: 13px;
    width: 28px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .section-axis-picker button:hover { background: #2a2a2c; }
  .section-axis-picker button.active {
    background: var(--mds-orange);
    color: #1a1a1c;
  }
  #section-flip {
    background: #1a1a1c;
    border: 1px solid var(--mds-border);
    color: #ddd;
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
  }
  #section-flip:hover { background: #2a2a2c; }
  #section-flip:active { transform: scale(0.94); }
  #section-slider {
    flex: 1 1 auto;
    height: 32px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: grab;
  }
  #section-slider:active { cursor: grabbing; }
  #section-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(
      90deg,
      var(--mds-orange) 0%,
      var(--mds-orange) var(--frac, 50%),
      #2a2a2c var(--frac, 50%),
      #2a2a2c 100%);
    border-radius: 3px;
  }
  #section-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    background: var(--mds-orange);
    border: 2px solid #fff;
    border-radius: 50%;
    margin-top: -8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
  #section-slider::-moz-range-track {
    height: 6px;
    background: linear-gradient(
      90deg,
      var(--mds-orange) 0%,
      var(--mds-orange) var(--frac, 50%),
      #2a2a2c var(--frac, 50%),
      #2a2a2c 100%);
    border-radius: 3px;
  }
  #section-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    background: var(--mds-orange);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
  #section-value {
    min-width: 112px;
    text-align: right;
    font-size: 12px;
    color: #ffe066;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  #zoom-controls button#tool-section.active {
    background: var(--mds-orange);
    color: #1a1a1c;
  }
  /* Hide the bottom sheet, AR diag, POI / Areas pills in section mode
     to keep the panes uncluttered for the operative. */
  body.section-mode #object-info-sheet,
  body.section-mode #ar-diag,
  body.section-mode #panel-toggle-group,
  body.section-mode #view-selector { display: none !important; }

  /* === v89 (SECTION-V89-DRAWER-SAMPLES-LOCK) =================================== */
  /* (1) Clip pane contents so the model-viewer canvas can't bleed past the
     dashed pane borders into the gaps between panes. */
  html body.section-mode #viewer,
  html body.section-mode #viewer-iso,
  html body.section-mode #viewer-section {
    overflow: hidden !important;
  }
  /* (2) Hide chainage badges on ISO + Plan in section mode — keep them
     only on the bottom Section pane. Dean wanted less clutter. */
  body.section-mode .section-coord-badge.pane-iso,
  body.section-mode .section-coord-badge.pane-top {
    display: none !important;
  }
  /* (3) Collapsible drawers — in section-mode the left column + zoom
     toolbar slide off-screen by default so they don't obscure panes. The
     ☰ Layers / ⚙ Tools floating buttons toggle them back. */
  body.section-mode #left-column {
    transform: translateX(-110%) !important;
    transition: transform 0.22s ease-out;
    z-index: 70 !important;
  }
  body.section-mode.section-drawer-left-open #left-column {
    transform: translateX(0) !important;
    box-shadow: 6px 0 22px rgba(0,0,0,0.6);
  }
  body.section-mode #zoom-controls {
    transform: translateX(110%) !important;
    transition: transform 0.22s ease-out;
    z-index: 70 !important;
  }
  body.section-mode.section-drawer-right-open #zoom-controls {
    transform: translateX(0) !important;
    box-shadow: -6px 0 22px rgba(0,0,0,0.6);
  }
  .section-drawer-toggle {
    position: absolute;
    /* v91 (SECTION-V91-DRAWER-TOGGLE-BLEED-EXIT) — raise above drawer (z=70) so the toggle
       stays clickable when the drawer is OPEN, not just closed. */
    z-index: 80;
    background: rgba(28, 28, 30, 0.92);
    border: 1px solid var(--mds-border);
    color: #ffe066;
    width: 36px; height: 36px;
    border-radius: 10px;
    font-size: 17px;
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .section-drawer-toggle:hover { background: rgba(60, 60, 64, 0.95); }
  body.section-mode .section-drawer-toggle { display: inline-flex; }
  #section-drawer-left  { top: 56px; left: 10px; }
  #section-drawer-right { top: 56px; right: 10px; }
  body.section-mode.section-drawer-left-open  #section-drawer-left  { color: var(--mds-orange); }
  body.section-mode.section-drawer-right-open #section-drawer-right { color: var(--mds-orange); }

  /* (4) Per-alignment settings row — interval + swath inputs + custom
     stations list. Collapsed by default; expands when the row's ⚙ is
     clicked. */
  .alignment-settings {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px 8px 8px;
    background: #0d0e10;
    border: 1px solid var(--mds-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-top: -2px;
    margin-bottom: 4px;
    font-size: 11px;
    color: #aaa;
  }
  .alignment-row.expanded + .alignment-settings { display: flex; }
  .alignment-settings .row {
    display: flex; align-items: center; gap: 6px;
  }
  .alignment-settings .row label {
    flex: 0 0 auto; white-space: nowrap; min-width: 56px;
  }
  .alignment-settings input[type="number"] {
    flex: 1 1 auto;
    background: #1a1a1c;
    border: 1px solid var(--mds-border);
    color: #ffe066;
    border-radius: 6px;
    padding: 2px 5px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    width: 60px;
  }
  .alignment-settings input[type="number"]:focus {
    outline: 1px solid var(--mds-orange);
  }
  .alignment-settings .deg { color: #888; }
  .alignment-settings .add-row {
    display: flex; gap: 4px; align-items: center;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed #2a2a2c;
  }
  .alignment-settings .add-row button {
    background: var(--mds-orange);
    color: #1a1a1c;
    border: none;
    border-radius: 6px;
    width: 24px; height: 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .alignment-settings .custom-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 88px;
    overflow-y: auto;
  }
  .alignment-settings .custom-list .cs-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1px 4px;
    background: #1a1a1c;
    border-radius: 4px;
    color: #ffe066;
    font-variant-numeric: tabular-nums;
  }
  .alignment-settings .custom-list .cs-row button {
    background: none; border: none; color: #ff5555;
    cursor: pointer; font-size: 13px; line-height: 1;
    padding: 0 2px;
  }
  .alignment-row .alignment-settings-toggle {
    background: transparent; border: none; color: #888;
    cursor: pointer; font-size: 13px; padding: 0 4px;
  }
  .alignment-row .alignment-settings-toggle:hover { color: #fff; }
  .alignment-row.expanded .alignment-settings-toggle { color: var(--mds-orange); }

  /* (5) Sample-line ticks on plan pane. */
  .alignment-sample-tick-faint {
    pointer-events: none;
    opacity: 0.6;
  }
  .alignment-sample-tick-active {
    pointer-events: none;
  }

  /* (6) Nav strip on section bar — visible only in chainage mode. */
  .section-nav-btn {
    background: #1a1a1c;
    border: 1px solid var(--mds-border);
    color: #ddd;
    width: 28px; height: 28px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .section-nav-btn:hover { background: #2a2a2c; color: #ffe066; }
  body.section-mode #section-bar.chainage-mode .section-nav-btn,
  /* v94 — also show when ANY alignment exists, regardless of axis.
     Clicking a triangle in X/Y/Z mode auto-switches to chainage. */
  body.section-mode.has-alignments .section-nav-btn {
    display: inline-flex;
  }
  /* (7) Bump swath opacity slightly so it's actually visible. */
  .alignment-swath {
    fill: rgba(255, 224, 102, 0.18) !important;
    stroke: rgba(255, 224, 102, 0.55) !important;
  }

  /* === v90 (SECTION-V90-DRAWER-DECLUTTER) === */
  /* (1) Left drawer in section-mode: clean Alignments panel body. */
  body.section-mode #align-bearing-row { display: none !important; }
  body.section-mode #alignments-list:empty {
    /* When no alignments yet, the v88 empty-state hint inside takes a div
       child even though :empty matches. Use a sibling selector instead. */
  }
  body.section-mode #alignments-list > div:first-child:last-child:not(.alignment-row) {
    /* The "No alignments yet…" hint is the only div when list is empty. */
    display: none !important;
  }
  /* Rename the draw button styling intent (still uses #btn-draw-alignment).
     Make it match the look-and-feel of the +Add slot in Work Areas. */
  body.section-mode #btn-draw-alignment { margin-top: 4px; }

  /* (2) Right drawer in section-mode: keep only the essential tools.
     Order in the toolbar is: zoom-in, zoom-out, zoom-box, zoom-pan,
     zoom-focus, [sep], zoom-extents, zoom-prev, zoom-next, [sep],
     tool-measure, tool-section, tool-alignment, tool-share, tool-snapshot,
     [sep], tool-xray, tool-fullscreen.
     KEEP: zoom-in, zoom-out, zoom-extents, tool-section, tool-snapshot,
           tool-fullscreen.  HIDE: everything else (incl. all separators). */
  body.section-mode #zoom-controls button#zoom-box,
  body.section-mode #zoom-controls button#zoom-pan,
  body.section-mode #zoom-controls button#zoom-focus,
  body.section-mode #zoom-controls button#zoom-prev,
  body.section-mode #zoom-controls button#zoom-next,
  body.section-mode #zoom-controls button#tool-measure,
  body.section-mode #zoom-controls button#tool-alignment,
  body.section-mode #zoom-controls button#tool-share,
  body.section-mode #zoom-controls button#tool-xray,
  body.section-mode #zoom-controls .tool-sep {
    display: none !important;
  }
  /* Tighten the toolbar so the remaining 6 buttons sit close together. */
  body.section-mode #zoom-controls {
    gap: 4px !important;
    padding: 6px !important;
  }

  /* === v91 (SECTION-V91-DRAWER-TOGGLE-BLEED-EXIT) === */
  /* (B) Hard-clip the three panes — `overflow: hidden` alone wasn't enough
     to corral the model-viewer shadow-DOM canvas during grid transitions.
     `clip-path: inset(0)` clips ALL descendants at the box edge in every
     compositor state, so the model stops bleeding past the dashed borders. */
  html body.section-mode #viewer,
  html body.section-mode #viewer-iso,
  html body.section-mode #viewer-section {
    overflow: hidden !important;
    clip-path: inset(0) !important;
    -webkit-clip-path: inset(0) !important;
    contain: paint !important;
  }

  /* (C) Close button on the always-visible section bar — 1-click exit. */
  #section-close {
    background: rgba(255, 85, 85, 0.18);
    border: 1px solid #ff5555;
    color: #ff7d7d;
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: none;
    align-items: center; justify-content: center;
    margin-left: 4px;
  }
  body.section-mode #section-close { display: inline-flex; }
  #section-close:hover { background: rgba(255, 85, 85, 0.32); color: #fff; }
  #section-close:active { transform: scale(0.94); }

  /* === v92 (SECTION-V92-HIDE-ALIGN-PANEL-OUTSIDE-SECTION) === */
  /* Alignments panel only exists when section-viewer is on. Outside section
     mode the operative is browsing normally — no use for it then. */
  body:not(.section-mode) #alignments-panel { display: none !important; }

  /* === v95 (SECTION-V95-OVERLAY-CAMERA-PERSIST) === */
  body.section-mode #left-column {
    padding-top: 100px !important; /* v97 — 50px wasn't enough */
  }

  /* === v97 (V97-PLAN-PADDING-CLEANUP) — hide section-mode-only overlays
     when not in section mode. Belt-and-braces in case the
     drawing functions get fired after exit. */
  body:not(.section-mode) .alignment-swath,
  body:not(.section-mode) .alignment-sample-tick-faint,
  body:not(.section-mode) .alignment-sample-tick-active,
  body:not(.section-mode) .alignment-sample-tick,
  body:not(.section-mode) .alignment-current-tick,
  body:not(.section-mode) .section-line,
  body:not(.section-mode) .section-line-halo,
  body:not(.section-mode) .section-line-end {
    display: none !important;
  }

  /* === v97 (V97-BUNDLE-XYZ-CAMERA-AUTODRAW) === */
  /* (4) Hide X/Y/Z buttons — A is the only useful section view. */
  .section-axis-picker button[data-axis="X"],
  .section-axis-picker button[data-axis="Y"],
  .section-axis-picker button[data-axis="Z"] {
    display: none !important;
  }
  /* While we're at it, hide the ⇅ flip button too — only meaningful for X/Y/Z. */
  #section-flip { display: none !important; }
  body.section-mode #alignments-panel.v95-overlay {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 260px !important;
    max-height: calc(60vh - 60px) !important;
    z-index: 30 !important;
    background: rgba(13, 14, 16, 0.96) !important;
    border: 1px solid var(--mds-border) !important;
    border-top: 2px solid var(--mds-orange) !important;
    border-right: 2px solid var(--mds-orange) !important;
    border-radius: 0 12px 0 0 !important;
    overflow-y: auto !important;
    transform: none !important;
    padding: 10px 12px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    margin: 0 !important;
    display: block !important;
  }
  @media (max-width: 767px) {
    body.section-mode #alignments-panel.v95-overlay {
      width: calc(100vw - 24px) !important;
      max-height: 40vh !important;
      bottom: 70px !important;
      left: 12px !important;
      border-radius: 12px !important;
      border: 2px solid var(--mds-orange) !important;
    }
  }
  html body.section-mode #viewer-section {
    overflow: hidden !important;
    clip-path: inset(0) !important;
    -webkit-clip-path: inset(0) !important;
    contain: strict !important;
    isolation: isolate !important;
  }

  /* === v93 (SECTION-V93-2CLICK-DIALOG) === */
  /* Hide the legacy ✓ Finish chip — dialog auto-fires after 2nd click. */
  #align-finish { display: none !important; }
  /* Hide the inline ⚙ expansion (replaced by dialog). */
  .alignment-row + .alignment-settings,
  .alignment-row.expanded + .alignment-settings { display: none !important; }
  /* Hide the per-row ⇄ reverse button (Reverse is in dialog now). */
  .alignment-row .alignment-rev { display: none !important; }

  /* Modal dialog — same look-and-feel as #align-modal but standalone. */
  #aldlg {
    position: fixed; inset: 0;
    z-index: 200;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  #aldlg.show { display: flex; }
  #aldlg .card {
    background: #1a1a1c;
    color: #ddd;
    border: 1px solid var(--mds-border);
    border-radius: 14px;
    padding: 20px 22px;
    width: min(420px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    font-size: 13px;
  }
  #aldlg h3 {
    margin: 0 0 14px 0;
    color: var(--mds-orange);
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  #aldlg .field {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 12px;
  }
  #aldlg .field-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
  }
  #aldlg .field label,
  #aldlg .field-row label {
    color: #aaa; font-size: 11px; letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  #aldlg .field input[type="text"],
  #aldlg .field input[type="number"],
  #aldlg .field-row input[type="number"] {
    background: #0d0e10;
    border: 1px solid var(--mds-border);
    color: #ffe066;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    outline: none;
  }
  #aldlg .field input[type="text"]:focus,
  #aldlg .field input[type="number"]:focus,
  #aldlg .field-row input[type="number"]:focus {
    border-color: var(--mds-orange);
  }
  #aldlg .field-row .grow { flex: 1 1 auto; }
  #aldlg .field-row .unit { color: #888; font-size: 11px; }
  #aldlg .check-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: #0d0e10;
    border: 1px solid var(--mds-border);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }
  #aldlg .check-row input { accent-color: var(--mds-orange); }
  #aldlg .check-row label {
    color: #ddd; font-size: 13px;
    cursor: pointer;
  }
  #aldlg .check-row .hint { color: #888; font-size: 11px; }
  #aldlg .pair { display: flex; gap: 10px; }
  #aldlg .pair > .field { flex: 1 1 0; }
  #aldlg .custom-block {
    margin-top: 6px;
    padding: 10px;
    background: #0d0e10;
    border: 1px solid var(--mds-border);
    border-radius: 8px;
  }
  #aldlg .custom-block .title {
    color: #aaa; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 6px;
  }
  #aldlg .custom-block .add-row {
    display: flex; gap: 6px; align-items: center;
    margin-bottom: 6px;
  }
  #aldlg .custom-block .add-row input { flex: 1 1 auto; }
  #aldlg .custom-block .add-row button {
    background: var(--mds-orange); color: #1a1a1c;
    border: none; border-radius: 6px;
    width: 28px; height: 26px;
    font-size: 16px; font-weight: 700;
    cursor: pointer;
  }
  #aldlg .custom-block .list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 100px; overflow-y: auto;
  }
  #aldlg .custom-block .cs-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 6px; border-radius: 4px;
    background: #1a1a1c;
    color: #ffe066;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  #aldlg .custom-block .cs-row button {
    background: none; border: none; color: #ff5555;
    cursor: pointer; font-size: 13px;
  }
  #aldlg .dialog-buttons {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 14px;
  }
  #aldlg .dialog-buttons button {
    border: 1px solid var(--mds-border);
    background: #1a1a1c;
    color: #ddd;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s;
  }
  #aldlg .dialog-buttons button.primary {
    background: var(--mds-orange);
    color: #1a1a1c;
    border-color: var(--mds-orange);
    font-weight: 700;
  }
  #aldlg .dialog-buttons button:hover { filter: brightness(1.15); }
  #aldlg .meta {
    font-size: 11px; color: #888;
    margin: -6px 0 12px 2px;
  }

  /* "Point 1" / "Point 2" labels next to vertices during draw. */
  .alignment-point-label {
    fill: #fff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
  }


/* ============================================================================
 * v98 BUNDLE — V98-BUNDLE-LABEL-CLIP-ALIGN-HIDE
 * (3) Tight .pane-label
 * (4) Hide alignment line + vertices outside section mode
 * (6) Pane bleed — contain:strict on each section pane
 * ============================================================================
 */

/* (3) Tight .pane-label — no full-width / full-height stretch. */
.pane-label {
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  height: auto !important;
  max-width: 200px;
}

/* (4) Hide the alignment polyline + endpoint vertices outside section mode. */
body:not(.section-mode) .alignment-line,
body:not(.section-mode) .alignment-vertex,
body:not(.section-mode) .alignment-line-draft {
  display: none !important;
}

/* (6) Force section panes to clip their model-viewer canvas. The shadow-DOM
 * canvas can escape contain:paint on some browsers — contain:strict + an
 * explicit max-height:100% prevents both vertical and horizontal bleed. */
html body.section-mode #viewer,
html body.section-mode #viewer-iso,
html body.section-mode #viewer-section {
  contain: strict !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}


/* ============================================================================
 * v99 HOTFIX — V99-HOTFIX-CANVAS-CONTAIN-FIX
 * Revert v98 contain:strict (killed model-viewer canvases) + outline-offset 0
 * (kills the perceived bleed).
 * ============================================================================
 */
html body.section-mode #viewer,
html body.section-mode #viewer-iso,
html body.section-mode #viewer-section {
  contain: paint !important;   /* NOT strict — strict includes size which kills canvas */
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  outline-offset: 0 !important;  /* dashed line exactly at pane edge — no bleed gap */
}

/* === V99-FULL-BUNDLE-CSS === */
html body.section-mode #viewer,
html body.section-mode #viewer-iso,
html body.section-mode #viewer-section {
  contain: paint !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  outline: none !important;
}

/* === V101-FIX-CSS === */
/* Z-level slider on left edge of section pane */
#v101-z-slider-wrap {
  position: fixed;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(28, 28, 30, 0.86);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  padding: 8px 6px;
  backdrop-filter: blur(4px);
}
body.section-mode #v101-z-slider-wrap { display: flex; }
#v101-z-slider-wrap #v101-z-up,
#v101-z-slider-wrap #v101-z-down {
  cursor: pointer;
  color: #ffe066;
  font-size: 14px;
  user-select: none;
  padding: 2px 6px;
}
#v101-z-slider-wrap #v101-z-slider {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  width: 16px;
  height: 200px;
}
#v101-z-slider-wrap #v101-z-val {
  font-size: 10px;
  font-weight: 700;
  color: #ffe066;
  letter-spacing: 0.04em;
}
/* Position the slider docked vertically to the LEFT of section pane (bottom row) */
@media (min-width: 768px) {
  body.section-mode #v101-z-slider-wrap {
    left: 12px;
    top: 60%;  /* in the section pane vertically */
  }
}