/* BuildSight AI — shared tokens and components.
   Navy #22396F night ground; blush #FFDCDC, pink #FF91C8 and rose #D45060 for action and emphasis;
   laser-scanner teal reserved for AI detections. */
:root {
  color-scheme: dark;
  --navy: #22396f;
  --navy-hi: #2f4c8f;
  --navy-tint: #8ea5da;
  --bg: #060b17;
  --bg-1: #0a1224;
  --panel: #0e1830;
  --panel-2: #13203d;
  --panel-3: #1a2a4c;
  --glass: rgba(14, 24, 48, 0.74);
  --line: rgba(142, 165, 218, 0.1);
  --line-2: rgba(142, 165, 218, 0.17);
  --line-3: rgba(142, 165, 218, 0.28);
  --text: #edf0f6;
  --text-2: #aab5cd;
  --text-3: #75829f;
  --accent: #ff91c8;
  --accent-2: #ffdcdc;
  --accent-3: #d45060;
  --grad: linear-gradient(95deg, #ffdcdc 0%, #ff91c8 48%, #d45060 100%);
  --scan: #3fe0c5;
  --scan-bg: rgba(63, 224, 197, 0.1);
  --ok: #3fd08a;
  --ok-bg: rgba(63, 208, 138, 0.13);
  --warn: #f3c04f;
  --warn-bg: rgba(243, 192, 79, 0.14);
  --bad: #d45060;
  --bad-text: #e9969e;
  --bad-bg: rgba(212, 80, 96, 0.18);
  --planned: #8ea5da;
  --paper: #f4f2ec;
  --ink: #1b1d21;
  --font-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.5; }
img, svg, canvas, video { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); font-feature-settings: 'zero' 0; }
.tnum { font-variant-numeric: tabular-nums; }

/* icons */
.bs-ico { display: inline-block; flex: none; vertical-align: middle; }

/* status pills — shape + label, never colour alone */
.bs-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1; }
.bs-pill i { font-style: normal; font-size: 9px; }
.bs-pill--ok { color: var(--ok); background: var(--ok-bg); }
.bs-pill--risk { color: var(--warn); background: var(--warn-bg); }
.bs-pill--late { color: var(--bad); background: var(--bad-bg); }
.bs-pill--ai { color: var(--scan); background: var(--scan-bg); }
.bs-pill--quiet { color: var(--text-2); background: rgba(255, 255, 255, 0.06); }

/* trend chart */
.bs-chart { width: 100%; height: auto; display: block; overflow: visible; }
.bs-chart__grid { stroke: var(--line); stroke-width: 1; }
.bs-chart__axis { fill: var(--text-3); font: 500 11px var(--font-mono); }
.bs-chart__axis--sub { font-size: 9.5px; opacity: 0.8; }
.bs-chart__gap { fill: rgba(212, 80, 96, 0.1); }
.bs-chart__planned { fill: none; stroke: var(--planned); stroke-width: 2; stroke-dasharray: 5 5; }
.bs-chart__observed { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; }
.bs-chart__dot { fill: var(--accent); }
.bs-chart__pdot { fill: var(--bg); stroke: var(--planned); stroke-width: 2; }
.bs-chart__end { font: 600 12px var(--font-mono); }
.bs-chart__end--p { fill: var(--planned); }
.bs-chart__end--o { fill: var(--accent); }
.bs-chart__hit { cursor: crosshair; }
.bs-spark { overflow: visible; }
.bs-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.bs-spark circle { fill: var(--accent); }

/* floor plan */
.bs-plan { width: 100%; height: auto; display: block; }
.bs-plan__grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 3 4; }
.bs-plan__bubble { fill: none; stroke: rgba(255, 255, 255, 0.18); }
.bs-plan__bubbletext { fill: var(--text-3); font: 600 8.5px var(--font-mono); }
.bs-plan__z rect { stroke-width: 1.5; transition: fill 0.2s, stroke 0.2s; }
.bs-plan__z { cursor: pointer; outline: none; }
.bs-plan__zone--ok rect { fill: rgba(63, 208, 138, 0.13); stroke: rgba(63, 208, 138, 0.55); }
.bs-plan__zone--risk rect { fill: rgba(243, 192, 79, 0.16); stroke: rgba(243, 192, 79, 0.7); }
.bs-plan__zone--late rect { fill: rgba(212, 80, 96, 0.2); stroke: rgba(212, 80, 96, 0.85); }
.bs-plan__zone--age0 rect { fill: rgba(63, 224, 197, 0.16); stroke: rgba(63, 224, 197, 0.6); }
.bs-plan__zone--age1 rect { fill: rgba(63, 224, 197, 0.07); stroke: rgba(63, 224, 197, 0.3); }
.bs-plan__zone--age2 rect { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.18); }
.bs-plan__z:hover rect, .bs-plan__z:focus-visible rect { stroke-width: 2.5; filter: brightness(1.25); }
.bs-plan__z.is-sel rect { stroke: #fff; stroke-width: 2.5; }
.bs-plan__label { fill: var(--text); font: 600 13px var(--font-sans); pointer-events: none; }
.bs-plan__zone--ok .bs-plan__shape { fill: var(--ok); }
.bs-plan__zone--risk .bs-plan__shape { fill: var(--warn); }
.bs-plan__zone--late .bs-plan__shape { fill: var(--bad); }
.bs-plan__val { fill: var(--text-2); font: 500 11.5px var(--font-mono); pointer-events: none; }
.bs-plan__core { stroke: rgba(255, 255, 255, 0.25); }
.bs-plan__hatch { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.bs-plan__riser { fill: rgba(0, 0, 0, 0.5); stroke: rgba(255, 255, 255, 0.35); stroke-dasharray: 2 2; }
.bs-plan__col { fill: rgba(255, 255, 255, 0.55); pointer-events: none; }
.bs-plan__plinth { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.3); pointer-events: none; }
.bs-plan__note { fill: var(--text-3); font: 500 10.5px var(--font-mono); }

/* drawing sheet */
.bs-sheet { width: 100%; height: auto; display: block; }
.bs-sheet__paper { fill: #f4f2ec; }
.bs-sheet__border, .bs-sheet__tb { fill: none; stroke: #2a2d33; stroke-width: 2; }
.bs-sheet__tbl { stroke: #2a2d33; stroke-width: 1.2; }
.bs-sheet__grid { stroke: #8a8f97; stroke-width: 1; stroke-dasharray: 18 6 3 6; }
.bs-sheet__bubble { fill: #f4f2ec; stroke: #2a2d33; stroke-width: 1.5; }
.bs-sheet__btext { fill: #2a2d33; font: 600 15px var(--font-mono); }
.bs-sheet__dim { fill: #4a4f57; font: 500 12px var(--font-mono); }
.bs-sheet__dimline { stroke: #4a4f57; stroke-width: 1; }
.bs-sheet__edge { fill: none; stroke: #2a2d33; stroke-width: 2.5; }
.bs-sheet__riser { fill: none; stroke: #2a2d33; stroke-width: 1.2; stroke-dasharray: 4 3; }
.bs-sheet__bay { fill: rgba(255, 145, 200, 0.06); stroke: #d45060; stroke-width: 1.2; stroke-dasharray: 8 4; }
.bs-sheet__col { fill: #2a2d33; }
.bs-sheet__clabel { fill: #2a2d33; font: 600 12px var(--font-mono); }
.bs-sheet__colg.is-hl .bs-sheet__col { fill: #ff91c8; }
.bs-sheet__colg.is-hl .bs-sheet__clabel { fill: #d45060; }
.bs-sheet__colg.is-hl::after { content: ''; }
.bs-sheet__note { fill: #3a3e45; font: 500 13px var(--font-mono); white-space: pre; }
.bs-sheet__note--pin { fill: #0e8f7c; font-weight: 600; }
.bs-sheet__h { fill: #1b1d21; font: 700 14px var(--font-mono); letter-spacing: 0.08em; }
.bs-sheet__tbsmall { fill: #5a5f67; font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; }
.bs-sheet__tbbig { fill: #1b1d21; font: 700 15px var(--font-mono); }
.bs-sheet__tbnum { fill: #1b1d21; font: 700 34px var(--font-mono); }
.bs-sheet__sample { fill: #b0b3b8; font: 700 12px var(--font-mono); letter-spacing: 0.12em; }
.bs-sheet__pin circle { fill: #0e8f7c; }
.bs-sheet__pin text { fill: #fff; font: 700 13px var(--font-mono); }
.bs-sheet__cone { fill: rgba(14, 143, 124, 0.12); stroke: rgba(14, 143, 124, 0.5); }

/* gantt */
.bs-gantt { width: 100%; height: auto; display: block; min-width: 760px; }
.bs-gantt__grid { stroke: var(--line); }
.bs-gantt__axis { fill: var(--text-3); font: 500 10.5px var(--font-mono); }
.bs-gantt__band { fill: transparent; }
.bs-gantt__row:nth-child(even) .bs-gantt__band { fill: rgba(255, 255, 255, 0.015); }
.bs-gantt__row:hover .bs-gantt__band { fill: rgba(255, 255, 255, 0.04); }
.bs-gantt__cpedge { fill: var(--bad); }
.bs-gantt__id { fill: var(--text-2); font: 600 11.5px var(--font-mono); }
.bs-gantt__name { fill: var(--text); font: 500 12.5px var(--font-sans); }
.bs-gantt__plan { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.bs-gantt__obs { fill: var(--accent); opacity: 0.9; }
.bs-gantt__obs.is-late { fill: var(--accent); }
.bs-gantt__proj { stroke: rgba(212, 80, 96, 0.5); stroke-dasharray: 3 3; }
.bs-gantt__hatch { stroke: rgba(212, 80, 96, 0.45); stroke-width: 2; }
.bs-gantt__pct { fill: var(--text-2); font: 500 11px var(--font-mono); }
.bs-gantt__today { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bs-gantt__todaylabel { fill: var(--text); font: 600 10.5px var(--font-mono); }

/* before / after comparison */
.bs-compare { position: relative; overflow: hidden; background: #1b1e22; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; isolation: isolate; }
.bs-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bs-compare__after { position: absolute; inset: 0; }
.bs-compare__ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bs-ov rect:first-child { fill: rgba(63, 224, 197, 0.1); stroke: var(--scan); stroke-width: 2; }
.bs-ov { transition: opacity 0.25s; }
.bs-ov.is-dim { opacity: 0.25; }
.bs-ov.is-hl rect:first-child { stroke-width: 3; fill: rgba(63, 224, 197, 0.2); }
.bs-ov__badge rect { fill: rgba(8, 12, 14, 0.82); stroke: rgba(63, 224, 197, 0.6); }
.bs-ov__badge circle { fill: var(--scan); }
.bs-ov__badge text { fill: #e9fffb; font: 600 12px var(--font-sans); }
.bs-ov__badge circle + text { fill: #062a24; font: 700 11px var(--font-mono); }
.bs-ov__badge--c circle { fill: var(--scan); stroke: rgba(4, 32, 27, 0.6); }
.bs-ov__badge--c text { fill: #062a24; font: 700 10.5px var(--font-mono); }
.bs-ov--missing > circle { fill: rgba(243, 192, 79, 0.25); stroke: var(--warn); stroke-width: 2; stroke-dasharray: 4 3; }
.bs-ov--missing > text { fill: var(--warn); font: 700 13px var(--font-mono); }
.bs-ov--missing .bs-ov__badge rect { stroke: rgba(243, 192, 79, 0.6); }
.bs-ov--missing .bs-ov__badge text { fill: #ffe9b8; }
.bs-compare__tag { position: absolute; top: 12px; z-index: 2; padding: 6px 10px; border-radius: 8px; background: rgba(8, 9, 11, 0.72); backdrop-filter: blur(6px); font-size: 12px; color: var(--text-2); pointer-events: none; }
.bs-compare__tag b { color: var(--text); font-family: var(--font-mono); }
.bs-compare__tag--l { left: 12px; }
.bs-compare__tag--r { right: 12px; }
.bs-compare__handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.92); z-index: 3; box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); }
.bs-compare__handle span { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
.bs-compare__handle span::before, .bs-compare__handle span::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.bs-compare__handle span::before { left: 9px; border-right: 7px solid #23262b; border-left: 0; }
.bs-compare__handle span::after { right: 9px; border-left: 7px solid #23262b; border-right: 0; }
.bs-compare__scan { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; }
.bs-compare.is-scanning .bs-compare__scan { opacity: 1; background: linear-gradient(180deg, transparent 0, rgba(63, 224, 197, 0) 40%, rgba(63, 224, 197, 0.28) 49%, #3fe0c5 50%, rgba(63, 224, 197, 0) 51%, transparent 100%) no-repeat; background-size: 100% 200%; animation: bs-scan 1.2s linear 1; }
@keyframes bs-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }

.bs-cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 1px; padding: 0 4px; border-radius: 5px; background: rgba(63, 224, 197, 0.14); color: var(--scan); font: 600 10.5px var(--font-mono); vertical-align: 2px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}