/* Inspection & Survey page only (use-cases/inspection/). Shared template styles are in use-case.css. */

/* Vertical scan, seen in 3D (inverse section): the path wraps the building face by face. The part of
   the path behind the building is drawn before it (dimmer), the part in front after it. */
.scan .face-top{fill:#2A5A4B}
.scan .face-e{fill:#1D4A3D}
.scan .face-s{fill:#163D32}
.scan .win{fill:none;stroke:#0E2F27;stroke-width:1.5}
.scan .ground{fill:none;stroke:var(--inv-line);stroke-width:1.5;stroke-dasharray:4 6}
.scan .back{fill:none;stroke:var(--inv-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;opacity:.35}
.scan .front{fill:none;stroke:var(--inv-accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.scan .plan{fill:none;stroke:var(--inv-fg2);stroke-width:1;stroke-dasharray:2 6;opacity:.35}
.scan .label{fill:var(--inv-fg2);font:500 12px/1 var(--mono)}
.scan .craft path{stroke:#D5DEDA}
.scan .craft circle{fill:#E9EFED}
.scan .craft rect{fill:#F4F8F6}
.inverse .feature .copy>p{color:var(--inv-fg2)}
.inverse .points div{border-top-color:var(--inv-line)}
.inverse .points span{color:var(--inv-fg2)}
.feature .points{grid-template-columns:1fr;gap:16px;margin-top:8px}

/* Pattern gallery: inspection.js loops each route, drawing it behind an aircraft arrow while the cards are on screen */
/* four across, the remainder centred underneath (7 cards = 4 + 3) */
.pats{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.pat{flex:0 0 calc((100% - 60px)/4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 22px;display:grid;gap:10px;align-content:start}
.pat svg{display:block;width:100%;height:auto;border-radius:10px;background:#E8F0EA}
.pat .draw{fill:none;stroke:var(--route);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.pat .faint{fill:none;stroke:#B9D3C1;stroke-width:1.5}
.pat .dot{fill:var(--fg)}
.pat .craft .halo{fill:var(--route);opacity:.22}
.pat .craft .core{fill:var(--route);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.pat .sight{stroke:var(--route);stroke-width:1;stroke-dasharray:2 3;stroke-opacity:.6}
.pat b{font:600 19px/1.2 var(--display);letter-spacing:-.015em}
.pat span{color:var(--fg2);font-size:15px}
@media (max-width:1100px){.pat{flex-basis:calc((100% - 20px)/2)}}
@media (max-width:520px){.pat{flex-basis:100%}}

/* Two cameras: the same clip twice, the second through a thermal palette (filter #thermal, stand-in look) */
.cams{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cam{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#000}
.cam video,.cam img{width:100%;height:100%;object-fit:cover}
.cam.thermal video,.cam.thermal img{filter:url(#thermal)}
.cam span{position:absolute;left:10px;top:10px;font:600 12px/1 var(--body);padding:6px 10px;border-radius:999px;background:rgba(4,20,16,.7);color:#fff}
.cam .live{left:auto;right:10px;display:flex;align-items:center;gap:6px}
.cam .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#E5484D}
@media (max-width:520px){.cams{grid-template-columns:1fr}}

/* Corridors, early access: one slim strip */
.strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 26px;border:1px dashed var(--route);border-radius:var(--r);background:var(--surface)}
.strip b{font:600 20px/1.2 var(--display);letter-spacing:-.015em}
.strip p{color:var(--fg2);flex:1;min-width:260px}
.strip .early{display:inline-block;font:600 12px/1 var(--body);padding:6px 10px;border-radius:999px;background:var(--soon-bg);color:var(--soon)}
section.slim{padding-block:0 clamp(80px,10vw,136px)}