*{box-sizing:border-box}
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f2f6fb;background:#091421;font-synthesis:none;color-scheme:dark;--orange:#ff963f;--muted:#a4b9ce;--line:#2b435c;--panel:#102237;--blue:#8eb7df}
body{margin:0;background:radial-gradient(ellipse at 80% 0%,#18314b80,transparent 55%)}
.topbar{min-height:102px;padding:22px max(calc((100vw - 1320px)/2),32px);background:#0c1b2d;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px}.brand-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ff963f66;border-radius:12px;background:#ff963f12;color:var(--orange);font-size:36px;line-height:1}.brand-name{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.1}.brand-name em{font-style:normal;color:var(--orange)}.brand-tagline{display:block;margin-top:7px;font-size:12px;font-weight:500;letter-spacing:.5px;color:#c3d2e2}.header-note{font:11px ui-monospace,monospace;letter-spacing:1.6px;color:var(--blue);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
main{max-width:1320px;margin:auto;padding:32px 32px 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}.eyebrow{font:600 10px ui-monospace,monospace;letter-spacing:2px;color:var(--orange);margin:0 0 10px}h1{font-size:clamp(25px,3vw,34px);line-height:1.2;letter-spacing:-1px;margin:0 0 9px;font-weight:700}.intro{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.tag{font:10px ui-monospace,monospace;letter-spacing:1.2px;color:var(--blue);white-space:nowrap}
.workspace{display:grid;grid-template-columns:322px minmax(0,1fr);gap:22px;align-items:start}.panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:0 10px 32px #00000018}.controls{padding:24px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}h2{font-size:16px;letter-spacing:-.2px;margin:0}.step{font:11px ui-monospace,monospace;color:var(--orange);background:#ff963f12;padding:6px 8px;border-radius:5px}
label{display:block;font-size:13px;font-weight:650;line-height:1.5;margin-bottom:8px}label span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}select,.input-wrap{width:100%;border:1px solid #3b536d;border-radius:8px;background:#0b1a2c}select{font:inherit;font-size:14px;min-height:48px;padding:0 12px;color:#f2f6fb;cursor:pointer}.field{margin-top:22px}.input-wrap{display:flex;align-items:center;padding-right:14px;overflow:hidden}.input-wrap span{font:13px ui-monospace,monospace;color:var(--blue)}input[type=number]{font:600 19px ui-monospace,SFMono-Regular,Consolas,monospace;color:#fff;width:100%;min-width:0;height:50px;padding:11px 12px;background:transparent;border:0}input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.input-wrap:focus-within{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--orange);min-height:44px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;font:11px ui-monospace,monospace;color:var(--muted)}
button{background:#1b334c;border:1px solid #48617a;border-radius:8px;padding:12px;width:100%;min-height:46px;font:600 13px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;color:#f2f6fb;margin-top:22px;cursor:pointer}button:hover{background:#294563;border-color:var(--blue)}button span{margin-left:6px}#guard-confirm{background:var(--orange);color:#152034;border-color:var(--orange);margin-top:12px;font-weight:700}#guard-confirm:hover{background:#ffad66}#reset{border-color:#ff963f70;color:#ffb575;background:#ff963f0c}#reset:hover{background:#ff963f1f}
.lock-control{display:flex;align-items:center;gap:10px;min-height:44px;margin:8px 0 0}.lock-control input{width:20px;height:20px;accent-color:var(--orange)}.control-hint{font-size:11px;line-height:1.65;color:var(--muted);margin:0}input[readonly]{background:#1b2d42;color:#a9bfd3}.clearance-guard{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.clearance-guard label:not(:first-child){margin-top:16px}.clearance-guard p{font-size:12px;line-height:1.65;color:var(--muted)}#guard-status{font-weight:600;color:#ffb575}#guard-disable{padding:12px;border:1px solid #ffad66;border-radius:8px;margin-top:12px;background:#251f24}#guard-disable button{margin-top:8px;min-height:44px}.error,.clearance-guard .error{font-size:13px;color:#ffaaa3;line-height:1.6}
.visualization{min-width:0;display:flex;flex-direction:column;position:sticky;top:16px;align-self:start}.visualization .section-heading{padding:24px 24px 0;margin:0}.live{font:10px ui-monospace,monospace;letter-spacing:1px;color:#b7d8f7;background:#21415d;padding:7px 9px;border-radius:5px}.live::before{content:'';display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--orange)}
.clearance-status{--clearance-color:#b3261e}
.clearance-status.above-minimum{--clearance-color:#21833b}
.clearance-summary{margin:22px 24px 0;padding:18px 20px;border-left:3px solid var(--clearance-color);border-radius:8px;background:#f6e8e5;color:#192d3f;display:flex;align-items:center;gap:18px;justify-content:space-between}.above-minimum .clearance-summary{background:#e6f1ed}.clearance-summary p{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.2px}.clearance-summary strong{font:650 38px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;letter-spacing:-1.5px}.clearance-summary .unit{font-size:19px;letter-spacing:0;color:#3b5363}.clearance-summary small{max-width:205px;color:#42576a;line-height:1.6;font-size:12px}
#clearance{color:var(--clearance-color)}
.drag-help{padding:16px 24px;margin:0;font-size:12px;line-height:1.7;color:var(--muted)}.diagram-wrap{overflow-x:auto;overscroll-behavior-x:contain;display:flex;align-items:flex-start;flex:0 0 auto;padding:8px;background-color:#0b1b2e;background-image:linear-gradient(#598cba0b 1px,transparent 1px),linear-gradient(90deg,#598cba0b 1px,transparent 1px),linear-gradient(#598cba12 1px,transparent 1px),linear-gradient(90deg,#598cba12 1px,transparent 1px);background-size:16px 16px,16px 16px,80px 80px,80px 80px;border-block:1px solid var(--line);scrollbar-color:#52769b #0b1b2e}.diagram-wrap svg{min-width:600px}svg{width:100%;height:auto;display:block}#diagram{user-select:none}.ground{stroke:#7895af;stroke-width:2}.dimension{stroke:#779aba;stroke-width:1;marker-start:url(#dimension-tick);marker-end:url(#dimension-tick)}#dimension-tick path{stroke:#88a9c9}.extension{stroke:#3e5d7a;stroke-width:1}.dimension-label{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;fill:#e0ecf8;paint-order:stroke;stroke:#0b1b2e;stroke-width:5;stroke-linejoin:round;pointer-events:none}.sketch-note{font:11px system-ui;letter-spacing:1px;fill:#9ab9d5}.building-body{fill:#233e59;stroke:#8daac6;stroke-width:1.8}.building-body:hover{fill:#304f6e}.boom-line{stroke:var(--orange);stroke-width:6;stroke-linecap:round}.boom-node{fill:#0b1b2e;stroke:#ffb575;stroke-width:2}.pivot-support{stroke:#8ba4bb;stroke-width:5}.angle-baseline,.angle-arc{fill:none;stroke:#93b8d8;stroke-width:1}.clearance-line{stroke:var(--clearance-color);stroke-width:2;marker-start:url(#dimension-tick);marker-end:url(#dimension-tick);pointer-events:none;filter:drop-shadow(0 0 1px #ffffffbb)}
.clearance-angle{stroke:var(--clearance-color);filter:drop-shadow(0 0 1px #ffffffbb)}
.drag-boom,.drag-roof,.drag-pivot{cursor:ns-resize;touch-action:none}.drag-building,.drag-depth,.drag-length{cursor:ew-resize;touch-action:none}.drag-hit{stroke:transparent;stroke-width:44;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:stroke}.drag-hit:hover{stroke:#ff963f14}.invalid .diagram-wrap{opacity:.25}.legend{display:flex;gap:16px;flex-wrap:wrap;padding:17px 24px;font-size:11px;color:var(--muted)}.legend>span{display:flex;align-items:center;gap:7px}.legend i{width:16px;height:3px;background:var(--orange)}.legend .building-key{height:9px;background:#324f6c;border:1px solid #8daac6}.legend .measure-key{background:transparent;border-top:1px solid #779aba}.legend-note{margin-left:auto}
details{border-block:1px solid var(--line);margin-top:26px}summary{font-size:13px;cursor:pointer;padding:20px 0;min-height:48px;list-style:none;display:flex;justify-content:space-between;gap:12px}summary span{color:var(--orange)}summary::-webkit-details-marker{display:none}.explanation{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:13px;line-height:1.8;color:var(--muted);padding-bottom:20px}.explanation p{margin:0}footer{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted);padding-top:22px;line-height:1.8}.footer-separator{padding:0 10px;color:var(--orange)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:1000px) and (min-width:761px){main{padding:28px 20px}.workspace{grid-template-columns:280px minmax(0,1fr);gap:16px}.controls{padding:20px}.clearance-summary{flex-wrap:wrap;gap:8px}.clearance-summary small{max-width:none}.legend .legend-note{display:none}.header-note{font-size:10px}}
@media(max-width:1000px){.topbar{min-height:90px;padding:18px 20px}.brand-name{font-size:25px}.brand-icon{width:42px;height:42px;font-size:32px}.header-note{display:none}main{padding:24px 16px}.heading{margin-bottom:20px}.tag{display:none}.workspace{grid-template-columns:1fr;gap:20px}.visualization{position:static;order:-1}.visualization .section-heading{padding:20px 18px 0}.clearance-summary{margin:18px 18px 0;padding:16px;align-items:flex-start;flex-direction:column;gap:8px}.clearance-summary strong{font-size:36px}.clearance-summary small{max-width:none}.drag-help{padding:14px 18px;font-size:11px}.drag-help::after{content:' Swipe horizontally to see the full diagram.';color:#c3d8eb}.diagram-wrap{display:block;padding:4px}.legend{padding:15px 18px;gap:12px;font-size:10px}.legend .legend-note{display:none}.controls{padding:22px}.field{margin-top:20px}.explanation{grid-template-columns:1fr;gap:14px}footer{flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:no-preference){button,.input-wrap,.building-body{transition:background-color .15s,border-color .15s,fill .15s}}

.saved-cranes { margin: 18px 0; padding-bottom: 18px; border-bottom: 1px solid #d7e2e4; }
.controls section > h2 { margin: 0 0 14px; }
.controls .saved-cranes { margin-top: 0; border-color: var(--line); }
.building-inputs { margin-top: 20px; }
#stiff-controls[hidden] ~ .stiff-angle { display: none; }
#crane-status:empty, #section-breakdown:empty { display:none; }
.saved-cranes label { margin-top: 10px; }
.crane-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.saved-cranes button { width: auto; padding: 9px 12px; margin-top: 0; }
.saved-cranes button:disabled { opacity: .45; cursor: default; }
#crane-status { font-size: .82rem; line-height: 1.5; }

.crane-types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:8px; margin-bottom:22px; }
.crane-types button { margin:0; min-height:58px; padding:9px 6px; font-size:14px; line-height:1.3; text-wrap:balance; }
.crane-types button[aria-pressed="true"] { background:var(--orange); border-color:var(--orange); color:#152034; }
.art-results { padding:12px 24px; font:12px/1.8 ui-monospace,monospace; color:var(--blue); }
.clearance-status.articulated { --clearance-color:#526e87; }
.articulated .clearance-summary { background:#e5edf4; }
.boom-extension { stroke:#ffd2aa; stroke-width:4; stroke-dasharray:7 4; }
.crane-types button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

.drag-art-main,.drag-art-outer,.drag-art-jib,.art-handle { cursor:grab; touch-action:none; }
.art-handle:active { cursor:grabbing; }
.art-handle-hit { fill:transparent; pointer-events:all; }
.art-handle-dot { fill:#102237; stroke:var(--orange); stroke-width:2; pointer-events:none; }
.art-handle-mark { stroke:#ffd2aa; stroke-width:1.5; pointer-events:none; }
.art-handle:hover .art-handle-dot { fill:#38516a; }

.extension-handle { cursor:ew-resize; touch-action:none; }
.extension-handle-box { fill:#254e65; stroke:#9bdef5; stroke-width:2; pointer-events:none; }
.extension-handle:hover .extension-handle-box { fill:#36748e; }
.extension-tether { stroke:#9bdef5; stroke-width:1; stroke-dasharray:3 3; pointer-events:none; }
.extension-limits { margin-top:14px; padding-bottom:12px; }
/* Apply touch ownership to the SVG hit surface as well as its group. */
.extension-handle .art-handle-hit { touch-action:none; }

.articulated.collision { --clearance-color:#b3261e; }
.articulated.collision .clearance-summary { background:#f6e8e5; }
.articulated.above-minimum { --clearance-color:#21833b; }
.articulated.above-minimum .clearance-summary { background:#e6f1ed; }
.articulated.collision #clearance { font-size:clamp(24px,3vw,34px); }

/* Decorative equipment is deliberately excluded from the geometry/hit model. */
.crane-art,.crane-art *{pointer-events:none}
.truck-body{fill:#233e59;stroke:#a9bfd0;stroke-width:.065;stroke-linejoin:round}
.truck-frame{fill:#162a3d;stroke:#7795ad;stroke-width:.06}
.truck-glass{fill:#0b1b2e;stroke:#8eb7df;stroke-width:.045}
.truck-detail{fill:none;stroke:#a9bfd0;stroke-width:.045}
.truck-chrome,.truck-tank{fill:#8096a9;stroke:#d3e0e9;stroke-width:.045}
.truck-tire{fill:#091421;stroke:#91a7b9;stroke-width:.07}
.truck-rim{fill:#294258;stroke:#c4d3df;stroke-width:.045}
.truck-hub{fill:#b4c7d6}
.truck-fender{fill:none;stroke:#8ba4bb;stroke-width:.12}
.crane-metal{fill:#b86d32;stroke:#ffb575;stroke-width:.06}
.outrigger{fill:none;stroke:#e29552;stroke-width:.16;stroke-linejoin:round}
.crane-pedestal{fill:#ad6936;stroke:#f0a76b;stroke-width:1}
.boom-shell{fill:#bd743c;stroke:#ffb575;stroke-width:1;stroke-linejoin:round}
.shell-1{fill:#a97042}.shell-2{fill:#8f6849}.shell-3{fill:#6c5b4c}
.boom-highlight{fill:none;stroke:#ffe0bc;stroke-width:.7;opacity:.7}
.boom-collar{fill:none;stroke:#f5c799;stroke-width:2.4}
.boom-pin{fill:#253b50;stroke:#ffe0bc;stroke-width:1}
.hydraulic-cylinder{fill:none;stroke:#647e94;stroke-width:3;stroke-linecap:round}
.hydraulic-rod{fill:none;stroke:#dfeaf2;stroke-width:1.2;stroke-linecap:round}
.tractor-art .hydraulic-rod{stroke-width:.07}
.hydraulic-hose{fill:none;stroke:#0b1420;stroke-width:1.2}
.boom-line{stroke:#fff0dc;stroke-width:1;stroke-dasharray:4 3;opacity:.8}
.boom-extension{stroke:#ffe3c4;stroke-width:1.4}
.pivot-support{stroke-width:1;stroke-dasharray:3 3}

/* Material lighting stays decorative and follows the same SVG geometry. */
.truck-body{fill:url(#equipment-paint);stroke:#7e95a7;stroke-width:.035}
.truck-glass{fill:url(#equipment-glass);stroke:#152b3f;stroke-width:.07}
.truck-chrome,.truck-tank{fill:url(#equipment-chrome);stroke:#7d919f;stroke-width:.035}
.truck-tire{fill:url(#equipment-rubber);stroke:#1b2229;stroke-width:.045}
.truck-rim,.truck-hub{fill:url(#equipment-rim)}
.tire-sidewall{fill:none;stroke:#85909a;stroke-width:.018;opacity:.35}
.cab-top-light{fill:#dbe5ee;opacity:.8}.cab-panel-shadow{fill:#0b1b2c;opacity:.65}
.cab-seam{fill:none;stroke:#142d42;stroke-width:.035}
.truck-detail{stroke:#8fa6b7;stroke-width:.035}
.crane-metal,.crane-pedestal,.boom-shell{fill:url(#equipment-orange);stroke:#cb8d55}
.boom-shell{stroke-width:.55}.boom-face-shadow{fill:#281609;opacity:.26}
.boom-collar{stroke:#b2bac0;stroke-width:2.1}
.boom-highlight{stroke:#ffe0ad;stroke-width:.6;opacity:.9}
.boom-pin{fill:url(#equipment-rim);stroke:#283c4c;stroke-width:.7}
.hydraulic-cylinder{stroke:#455564;stroke-width:3.6}
.hydraulic-rod{stroke:#e5eff6;stroke-width:1.6}
.boom-line{opacity:.45;stroke-width:.65}

.view-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line)}
.view-controls button{width:auto;margin:0;min-height:44px;padding:8px 12px}
.view-controls output{font:12px ui-monospace,monospace;min-width:42px;text-align:center}
.view-controls span{font-size:11px;color:var(--muted)}
.view-controls [aria-pressed="true"]{background:var(--orange);color:#152034}
#diagram{aspect-ratio:680/504}
#diagram[data-pan="true"],#diagram[data-pan="true"] *{cursor:grab!important;touch-action:none}
#diagram[data-pan="true"]:active,#diagram[data-pan="true"]:active *{cursor:grabbing!important}

/* Reference Hiab details, restricted to the articulated configurations. */
.hiab-tractor [fill="url(#tractor-blue)"]{fill:url(#hiab-teal)}
.hiab-tractor .crane-pedestal,.knuckle-art .boom-shell{fill:#303c46;stroke:#84939e}
.knuckle-art .boom-highlight{stroke:#bdc8ce}.knuckle-art .boom-face-shadow{fill:#050c12;opacity:.5}
.knuckle-art .hydraulic-hose{stroke:#070f17}.knuckle-art .boom-collar{stroke:#a5b3bc;stroke-width:1.2}
.knuckle-length-label{font:9px ui-monospace,monospace;fill:#e2eaf0;paint-order:stroke;stroke:#0b1b2e;stroke-width:3px;stroke-linejoin:round}
#crane-specifications{margin-bottom:18px;padding:12px;border:1px solid var(--line);border-radius:8px}
#crane-specifications summary{cursor:pointer;font-weight:650}#crane-specifications .field{margin-top:12px}
input[readonly]{opacity:.65}

/* Square CraneSite illustration; wordmark and tagline remain separate text. */
.brand-icon{display:block;object-fit:contain;flex:none;border:0;border-radius:0;background:none}

/* Presentation only: keep indicator bounds stable for the existing camera. */
#geometry .editing-indicator { opacity:0; visibility:hidden; pointer-events:none; }
#geometry[data-editing="true"] .editing-indicator,
#geometry[data-selected-section="main"] [data-section-controls="main"],
#geometry[data-selected-section="outer"] [data-section-controls="outer"],
#geometry[data-selected-section="jib"] [data-section-controls="jib"] { opacity:1; visibility:visible; pointer-events:auto; }
#edit-geometry[aria-pressed="true"] { border-color:var(--orange); color:#ffb575; }

.fixed-offset-control{cursor:grab;touch-action:none}
.fixed-offset-cue{fill:none;stroke:#9ab9c5;stroke-width:1;opacity:.65;pointer-events:none;vector-effect:non-scaling-stroke}
.fixed-offset-control:hover .fixed-offset-cue{stroke:#ffb575;opacity:1}

.fixed-offset-hit{fill:transparent;pointer-events:all;touch-action:none;cursor:grab}
.fixed-offset-hit:active{cursor:grabbing}

@media (max-width: 600px) {
  .linked-measurements .dimension-label { font-size: 14px; }
}

.clearance-status .clearance-line, .clearance-status .clearance-angle { stroke:#ef5149; }

.clearance-status.clearance-warning { --clearance-color:#b3261e; }
.clearance-warning .clearance-summary { background:#f6e8e5; }
.clearance-status.clearance-neutral { --clearance-color:#526e87; }
.clearance-neutral .clearance-summary { background:#e5edf4; }
#section-breakdown { padding-left: 1.2em; line-height: 1.5; }

/* Keep form groups compact while preserving control and drawing dimensions. */
main { padding-block-start: 18px; }
.heading { margin-bottom: 14px; }
.heading h1 { margin-block-end: 0; }
.crane-types { margin-bottom: 14px; }
.controls { padding-block: 16px; }
.controls section > h2 { margin-bottom: 8px; }
.controls .field { margin-top: 12px; }
.controls label { margin-bottom: 4px; }
.controls .saved-cranes { margin-bottom: 12px; padding-bottom: 12px; }
.controls .clearance-guard { padding-block: 12px; }
.clearance-guard label:not(:first-child) { margin-top: 8px; }
.clearance-guard p { margin-block: 8px; }
.controls .building-inputs { margin-top: 12px; }
.controls details { margin-block: 12px; }
.controls summary, .diagram-help summary { padding-block: 10px; min-height: 44px; align-items: center; }
.visualization .section-heading { padding-top: 16px; }
.clearance-summary { margin-top: 10px; padding-block: 10px; }
.diagram-help { margin-top: 10px; }
.view-controls { padding-block: 6px; }
.legend { padding-block: 10px; }

.clearance-overview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 10px 24px 0;
}
.clearance-overview .clearance-summary {
  display: block;
  flex: 0 0 auto;
  min-width: 9.5rem;
  margin: 0;
  padding: 8px 12px;
}
.clearance-summary p { margin-bottom: 2px; }
.clearance-summary strong { font-size: 28px; letter-spacing: -.6px; }
.geometry-disclaimer {
  flex: 1 1 22ch;
  max-width: 66ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
@media (max-width: 1000px) {
  .clearance-overview { margin-inline: 18px; }
}

.clearance-status.collision #clearance-note {
  position: static;
  width: auto;
  height: auto;
  margin: 4px 24px 0;
  clip-path: none;
  white-space: normal;
}