.takeoff{--takeoff-blue:var(--accent,#1b5fa8);--takeoff-bg:var(--bg,#f4f4f2);--takeoff-ink:var(--ink,#1a1a1a);--takeoff-secondary:#625f59;--takeoff-line:var(--line,#d8d6cf);--takeoff-selected:#eaf2f9;--takeoff-pad:16px;container:takeoff / inline-size;background:var(--takeoff-bg);color:var(--takeoff-ink);font-family:'IBM Plex Sans',sans-serif;border-radius:4px 4px 0 0;overflow:hidden}
.takeoff [hidden]{display:none!important}
.takeoff button{font:inherit;cursor:pointer}
.takeoff button:focus-visible{outline:2px solid var(--takeoff-blue);outline-offset:3px}
.takeoff button:disabled{cursor:default}
.takeoff-prompt{margin:14px var(--takeoff-pad);padding:10px 12px;background:var(--takeoff-bg);border:1px solid var(--takeoff-line);border-radius:6px;box-shadow:none}
.takeoff-prompt-row{display:flex;align-items:center;gap:9px}
.takeoff-prompt-mark{color:var(--takeoff-blue);font-size:16px}
.takeoff-prompt-input{flex:1;min-width:0;height:48px;padding:6px 8px;background:#fff;border:1px solid var(--takeoff-line);border-radius:4px;color:var(--takeoff-ink);font:500 11px 'JetBrains Mono',monospace;line-height:1.5;overflow:hidden}
.takeoff-prompt-text{white-space:normal}
.takeoff-caret{display:inline-block;width:1px;height:13px;margin-left:2px;background:var(--takeoff-blue);vertical-align:-2px}
.takeoff[data-phase=typing] .takeoff-caret,.takeoff[data-phase=erasing] .takeoff-caret{animation:takeoff-blink 1s steps(2,end) infinite}
.takeoff .takeoff-generate{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid transparent;border-radius:10px;padding:0;background:var(--takeoff-blue);color:#fff;box-shadow:0 2px 5px #0000000d;transition:transform .15s,background .15s,box-shadow .15s}
/* Press-in, not lift-up -- matches the sitewide button language
   (styles-vNN.css's "Button press system"): hover lightens with no
   movement, press darkens + pushes translateY(1px) into an inset shadow.
   `.is-clicked` (not :active) is deliberate here, not a leftover -- the JS
   (hero-takeoff-v*.js, `phase === 'pressed'`) drives this class as part of
   a scripted demo sequence, so a real user click and the scripted replay
   both need to render the same pressed state; keep toggling the class from
   JS, this only changes what the class itself looks like. */
.takeoff-generate:enabled:hover{background:color-mix(in srgb, var(--takeoff-blue) 88%, #fff);box-shadow:0 4px 10px #00000016}
.takeoff-generate svg{grid-area:1/1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.takeoff-generate .takeoff-spinner{display:none}
.takeoff-generate.is-clicked{background:var(--accent-2,#154a85);transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.24);transition-duration:0s}
.takeoff .takeoff-generate:disabled{background:#e9e8e3;border-color:var(--takeoff-line);color:#68655f;box-shadow:none}
.takeoff .takeoff-generate[aria-busy=true]{color:var(--takeoff-blue);cursor:wait}
.takeoff-generate[aria-busy=true] .takeoff-generate-icon{display:none}
.takeoff-generate[aria-busy=true] .takeoff-spinner{display:block;animation:takeoff-spin .85s linear infinite}
.takeoff-spinner circle{opacity:.22}
.takeoff-flag{display:flex;align-items:center;gap:7px;margin:8px 0 0 25px;color:var(--takeoff-secondary);font-size:10px}
.takeoff-flag input{position:absolute;opacity:0}
.takeoff-check{display:grid;place-items:center;flex-shrink:0;width:14px;height:14px;border-radius:3px;background:var(--takeoff-blue);color:#fff;font-size:10px;font-weight:700}
.takeoff-stage{position:relative;padding:var(--takeoff-pad) var(--takeoff-pad) 0;isolation:isolate;display:grid;grid-template-columns:184px minmax(0,1fr);gap:12px;align-items:stretch}
.takeoff-results{position:relative;min-width:0;min-height:0;background:#fff;border:1px solid var(--takeoff-line);border-radius:5px;overflow:hidden}
.takeoff-results [role=tabpanel]:focus-visible{outline:2px solid var(--takeoff-blue);outline-offset:-2px}
.takeoff-results-body{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9b6ad #fff}
.takeoff-results-tabs{position:sticky;top:0;z-index:1;display:flex;gap:3px;min-height:48px;padding:7px 5px;background:#fff;border-bottom:1px solid var(--takeoff-line)}
.takeoff-results-tabs button{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;padding:7px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--takeoff-secondary);font:500 10px 'IBM Plex Sans',sans-serif;white-space:nowrap}
.takeoff-results-tabs button:first-child{flex:1.65}
.takeoff-results-tabs button[aria-selected=true]{background:var(--takeoff-selected);border-color:#c1d5e8;color:var(--takeoff-blue)}
.takeoff-results-tabs button:enabled:hover{color:var(--takeoff-blue);background:var(--takeoff-selected)}
.takeoff-results-count{display:grid;place-items:center;min-width:14px;height:16px;border-radius:3px;background:#dce9f5;color:var(--takeoff-blue);font:500 9px 'JetBrains Mono',monospace}
.takeoff-issue-count{background:#faf1c7;color:#706100}
.takeoff-issue-results{padding:12px;animation:takeoff-results-in .25s ease-out both}
.takeoff-issue-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.takeoff-issue-card{border-bottom:1px solid var(--takeoff-line)}
.takeoff-issue-card:last-child{border-bottom:0}
.takeoff-issue-card:last-child .takeoff-issue-select{padding-bottom:0}
.takeoff .takeoff-issue-select{display:block;width:100%;padding:0 0 12px;border:0;background:transparent;color:inherit;text-align:left;border-radius:2px}
.takeoff-issue-badges{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.takeoff-issue-kind,.takeoff-issue-risk{display:inline-flex;align-items:center;padding:3px 5px;border-radius:3px;font:500 9px 'IBM Plex Sans',sans-serif;line-height:1.3;white-space:nowrap}
.takeoff-issue-kind{background:var(--takeoff-selected);color:var(--takeoff-blue)}
.takeoff-issue-card[data-kind=compliance] .takeoff-issue-kind{background:#f1edf7;color:#655080}
.takeoff-issue-risk{background:#eeede9;color:#625f59}
.takeoff-issue-card[data-risk=medium] .takeoff-issue-risk{background:#faf1c7;color:#706100}
.takeoff-issue-card[data-risk=critical] .takeoff-issue-risk{background:#fbe9e7;color:#a13228}
.takeoff-issue-card p{margin:0;color:var(--takeoff-secondary);font-size:11px;line-height:1.6}
.takeoff-results-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:24px 16px;text-align:center;color:var(--takeoff-secondary);font-size:11px;line-height:1.6}
.takeoff-results-empty svg{width:30px;height:30px;fill:none;stroke:#858078;stroke-width:1.4}
.takeoff-results-empty p{margin:0;max-width:155px}
.takeoff-result-rows{margin:0;padding:0 12px;animation:takeoff-results-in .25s ease-out both}
.takeoff-result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:10px 0;border-bottom:1px solid #eeede9}
.takeoff-result-row:last-child{border:0}
.takeoff-result-row dt{display:flex;align-items:flex-start;gap:7px;min-width:0;margin:0;color:var(--takeoff-secondary);font-size:11px;font-weight:400;line-height:1.5}
.takeoff-result-dot{display:block;flex-shrink:0;width:7px;height:7px;margin-top:5px;border:1px solid #00000014;border-radius:50%}
.takeoff-result-row dd{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:0;color:var(--takeoff-ink);font:500 11px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.takeoff-result-unit{color:var(--takeoff-secondary);font-size:9px}
@container takeoff (max-width:559.98px){.takeoff-stage{grid-template-columns:minmax(0,1fr)}.takeoff-results{height:220px}}
@container takeoff (min-width:560px){.takeoff-results{order:-1}}

.takeoff-sheet-view{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#fff;border-radius:4px;box-shadow:0 0 0 1px var(--takeoff-line)}
.takeoff-drawing,.takeoff-canvas{position:absolute;inset:0;width:100%;height:100%}
.takeoff-drawing{object-fit:contain;display:block}
.takeoff-canvas{visibility:hidden;clip-path:inset(0 100% 0 0)}
.takeoff-canvas canvas{width:100%;height:100%;display:block}
.takeoff.is-ready .takeoff-canvas{visibility:visible}
.takeoff-scanner{position:absolute;top:0;bottom:0;left:0;width:clamp(36px,12%,80px);transform:translateX(-100%);pointer-events:none;background:linear-gradient(90deg,#2363eb00,#2363eb0c 30%,#2363eb36 75%,#27d5f45c);border-right:3px solid #35d9ff;box-shadow:5px 0 14px #32ceff7a,1px 0 3px #1677ff}
.takeoff-scanner::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:#edfdff;box-shadow:0 0 6px 2px #50d7ff}
.takeoff-scanner span{position:absolute;top:12px;right:9px;background:#215bce;color:#fff;border:1px solid #72d7ff;border-radius:3px;padding:4px 6px;box-shadow:0 2px 8px #2363eb33;font:500 8px 'JetBrains Mono',monospace;letter-spacing:.08em}
.takeoff.is-suspended .takeoff-spinner,.takeoff.is-suspended .takeoff-caret{animation-play-state:paused}
.takeoff.is-paused .takeoff-result-rows,.takeoff.is-paused .takeoff-issue-results{animation:none}
.hero-takeoff-wrap .hero-stat-bar{position:static}
@keyframes takeoff-results-in{from{opacity:0}to{opacity:1}}
@keyframes takeoff-blink{50%{opacity:0}}
@keyframes takeoff-spin{to{transform:rotate(360deg)}}
@media(max-width:575.98px){.takeoff{--takeoff-pad:12px}.takeoff-prompt-input{height:60px}.takeoff-prompt{padding:9px 8px;margin-top:12px}.takeoff-prompt-input{font-size:10px;padding-inline:6px}.takeoff-prompt-row{gap:7px}.takeoff-flag{margin-left:22px;font-size:9px}.takeoff-scanner span{font-size:7px;padding:3px 4px}}
@media(prefers-reduced-motion:reduce){.takeoff .takeoff-generate{transition:none}.takeoff-generate.is-clicked{transform:none}.takeoff .takeoff-spinner,.takeoff .takeoff-caret,.takeoff-result-rows,.takeoff-issue-results{animation:none!important}.takeoff-scanner{display:none}}

/* Numbered warning triangles share their risk palette with the findings panel. */
.takeoff-issue-markers{position:absolute;inset:0;pointer-events:none;z-index:2}
.takeoff-issue-marker,.takeoff-issue-card{--issue-color:#625f59;--issue-tint:#eeede9}
.takeoff-issue-marker[data-risk=medium],.takeoff-issue-card[data-risk=medium]{--issue-color:#706100;--issue-tint:#faf1c7}
.takeoff-issue-marker[data-risk=critical],.takeoff-issue-card[data-risk=critical]{--issue-color:#a13228;--issue-tint:#fbe9e7}
.takeoff .takeoff-issue-marker{position:absolute;display:grid;place-items:center;width:44px;height:44px;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;color:var(--issue-color);pointer-events:auto;border-radius:4px}
.takeoff-issue-triangle{width:28px;height:26px;overflow:visible;filter:drop-shadow(0 1px 1px #fff) drop-shadow(0 2px 3px #0003)}
.takeoff-issue-triangle path{fill:var(--issue-tint);stroke:var(--issue-color);stroke-width:2;stroke-linejoin:round}
.takeoff-issue-triangle text{fill:var(--issue-color);font:600 16px 'JetBrains Mono',monospace}
.takeoff-issue-marker:hover .takeoff-issue-triangle path,.takeoff-issue-marker[aria-pressed=true] .takeoff-issue-triangle path{fill:var(--issue-color)}
.takeoff-issue-marker:hover .takeoff-issue-triangle text,.takeoff-issue-marker[aria-pressed=true] .takeoff-issue-triangle text{fill:#fff}
.takeoff-issue-number{display:inline-grid;place-items:center;min-width:21px;height:21px;border:1px solid var(--issue-color);border-radius:3px;background:var(--issue-tint);color:var(--issue-color);font:600 10px 'JetBrains Mono',monospace}
.takeoff-issue-card.is-selected{background:var(--issue-tint);box-shadow:0 0 0 6px var(--issue-tint);border-radius:2px}
.takeoff-issue-select:hover,.takeoff-issue-select[aria-pressed=true]{background:var(--issue-tint);box-shadow:0 0 0 6px var(--issue-tint)}
.takeoff .takeoff-issue-select:focus-visible{outline:2px solid var(--issue-color);outline-offset:6px}