/* tech.proairs.tech — Soft Structuralism, single navy accent, Geist + Geist Mono */
:root{
  --bg:#f2f4f7; --bg-2:#e9edf2; --ink:#111827; --ink-2:#4b5563; --ink-3:#8a94a6;
  --navy:#005187; --navy-ink:#003a61; --navy-soft:rgba(0,81,135,.08); --navy-line:rgba(0,81,135,.22);
  --orange:#f97316;
  --shell:rgba(17,24,39,.045); --core:#ffffff; --line:rgba(17,24,39,.07);
  --r-xl:2rem; --r-lg:calc(2rem - .5rem); --r-md:1rem; --r-sm:.65rem;
  --spring:cubic-bezier(.32,.72,0,1); --snap:cubic-bezier(.16,1,.3,1);
  --shadow:0 24px 48px -24px rgba(0,58,97,.18), 0 2px 6px -2px rgba(0,58,97,.08);
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c0f14; --bg-2:#11161d; --ink:#e8ecf2; --ink-2:#aeb7c4; --ink-3:#6b7585;
         --navy:#4ea3e0; --navy-ink:#8cc5ef; --navy-soft:rgba(78,163,224,.12); --navy-line:rgba(78,163,224,.3);
         --shell:rgba(255,255,255,.045); --core:#151b23; --line:rgba(255,255,255,.07);
         --shadow:0 24px 48px -24px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4); }
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);letter-spacing:-.005em;min-height:100dvh;
     background-image:radial-gradient(1200px 600px at 110% -10%, var(--navy-soft), transparent 60%);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
a{color:var(--navy);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 120px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* top island */
.top{position:sticky;top:12px;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px auto 0;
     padding:8px 10px 8px 14px;width:max-content;max-width:calc(100% - 32px);border-radius:999px;
     background:color-mix(in srgb,var(--core) 72%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -18px rgba(0,58,97,.35);border:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em}
.top .brand i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.top form{display:flex;gap:6px}
.top input{font:14px var(--mono);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:170px;outline:none;transition:width .5s var(--spring),box-shadow .3s var(--spring)}
.top input:focus{width:230px;box-shadow:0 0 0 3px var(--navy-soft)}

/* double-bezel card */
.shell{background:var(--shell);border:1px solid var(--line);border-radius:var(--r-xl);padding:.5rem;position:relative}
.core{background:var(--core);border-radius:var(--r-lg);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),var(--shadow);padding:22px;position:relative;overflow:hidden}
@media (prefers-color-scheme:dark){.core{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow)}}
.shell.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s var(--spring);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--navy-line), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.shell.spot:hover::before{opacity:1}

/* entry */
.in{opacity:0;transform:translateY(18px);filter:blur(6px);animation:in .9s var(--spring) forwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes in{to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.in{animation:none;opacity:1;transform:none;filter:none}}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
@media(min-width:860px){.hero{grid-template-columns:2fr 1fr;align-items:start}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.eyebrow.building i{background:var(--orange);animation:pulse 1.4s var(--snap) infinite}
@keyframes pulse{50%{transform:scale(1.8);opacity:.5}}
h1{font-size:clamp(26px,4.5vw,40px);line-height:1.02;letter-spacing:-.03em;font-weight:600;margin:14px 0 6px;font-family:var(--mono);word-break:break-all}
.sub{color:var(--ink-2);font-size:16px;margin:0 0 14px;max-width:62ch;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 12px/1 var(--mono);padding:8px 10px;border-radius:var(--r-sm);background:var(--navy-soft);color:var(--navy-ink);border:1px solid var(--navy-line)}
.chip b{font-weight:400;color:var(--ink-3);margin-right:6px}

/* nav pill tabs */
.tabs{position:fixed;left:12px;right:12px;margin-inline:auto;width:max-content;max-width:100%;bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;gap:4px;padding:5px;border-radius:999px;
      background:color-mix(in srgb,var(--core) 78%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(0,58,97,.45);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:500 13px var(--sans);padding:9px 14px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:background .45s var(--spring),color .3s,transform .25s var(--spring)}
.tabs button:active{transform:scale(.96)}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.tabs button .n{font-family:var(--mono);font-size:11px;opacity:.7;margin-left:6px}
section[hidden]{display:none}
section{margin-top:22px}
h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 12px 6px}

/* specs */
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.specs div{background:var(--core);padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs small{display:block;color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.specs span{font-family:var(--mono);font-size:14px}

/* fault codes */
.codes{display:grid;gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden}
.code{display:grid;grid-template-columns:minmax(74px,auto) 1fr;gap:4px 14px;background:var(--core);padding:12px 14px;transition:background .4s var(--spring)}
.code:hover{background:var(--navy-soft)}
.code b{font-family:var(--mono);font-weight:600;color:var(--navy-ink);font-size:14px}
.code p{margin:0}.code small{grid-column:2;color:var(--ink-2)}
.filter{width:100%;font:14px var(--mono);padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--core);color:var(--ink);outline:none;margin-bottom:10px}
.filter:focus{box-shadow:0 0 0 3px var(--navy-soft)}

/* pages */
.pages{display:grid;gap:14px}
.pg{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:#fff}
.pg img{display:block;width:100%;height:auto}
.pg figcaption{padding:8px 12px;font:12px var(--mono);color:var(--ink-3);border-top:1px solid var(--line)}
.docs a{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--core);border:1px solid var(--line);margin-bottom:8px;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.docs a:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .docs a:active{transform:scale(.99)}
.docs small{font-family:var(--mono);color:var(--ink-3);white-space:nowrap}

/* ask */
.thread{display:grid;gap:10px;margin-bottom:12px}
.msg{padding:14px 16px;border-radius:var(--r-md);max-width:62ch;white-space:pre-wrap;line-height:1.5}
.msg.q{justify-self:end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.a{background:var(--core);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.a.pending{color:var(--ink-3)}
.askbar{display:flex;gap:8px;align-items:flex-end}
.askbar textarea{flex:1;font:15px var(--sans);padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--core);color:var(--ink);resize:none;min-height:48px;max-height:160px;outline:none}
.askbar textarea:focus{box-shadow:0 0 0 3px var(--navy-soft)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-radius:999px;border:0;background:var(--navy);color:#fff;font:600 14px var(--sans);cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.btn .ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:transform .4s var(--spring)}
.btn:hover .ic{transform:translate(2px,-1px) scale(1.06)} .btn:active{transform:scale(.97)} .btn[disabled]{opacity:.55;cursor:default}
.btn.ghost{background:var(--core);color:var(--navy);border:1px solid var(--navy-line)} .btn.ghost .ic{background:var(--navy-soft)}
.hints{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.hints button{font:12px var(--sans);padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--core);color:var(--ink-2);cursor:pointer}

/* states */
.skel{display:grid;gap:10px}.skel i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--bg-2) 25%,var(--core) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:sh 1.6s var(--snap) infinite}
.skel i:nth-child(2){width:72%}.skel i:nth-child(3){width:48%}
@keyframes sh{to{background-position:-200% 0}}
.empty{text-align:left;padding:8px 4px}
.empty h3{margin:0 0 6px;font-size:18px;letter-spacing:-.02em}
.empty p{margin:0 0 14px;color:var(--ink-2);max-width:60ch}
.err{color:#b42318;background:rgba(180,35,24,.07);border:1px solid rgba(180,35,24,.2);padding:10px 14px;border-radius:var(--r-md);font-size:14px}
.drop{border:1.5px dashed var(--navy-line);border-radius:var(--r-md);padding:18px;text-align:center;color:var(--ink-2);cursor:pointer;transition:background .4s var(--spring)}
.drop:hover,.drop.over{background:var(--navy-soft)}
.cost{font:11px var(--mono);color:var(--ink-3);margin-left:8px}

/* index */
.list{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:720px){.list{grid-template-columns:2fr 1fr}.list .shell:nth-child(3n){grid-column:span 2}}
.list .core{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.list .m{font-family:var(--mono);font-weight:600;letter-spacing:-.01em} .list small{color:var(--ink-3)}
.status{font:500 11px var(--mono);padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.status.ready{color:#067647;border-color:rgba(6,118,71,.3)} .status.searching{color:var(--orange);border-color:rgba(249,115,22,.4)} .status.no_manual,.status.error{color:#b42318;border-color:rgba(180,35,24,.3)}
.pinbox{max-width:380px;margin:18vh auto 0}
.pinbox input{width:100%;font:22px var(--mono);letter-spacing:.3em;text-align:center;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg);color:var(--ink);outline:none;margin:14px 0}