/* Rico by Lofdahl Industries: F-35 glass cockpit skin. © 2026 Lofdahl Industries. All rights reserved.
   Motion rule: only transform + opacity animate. Color rule: green = ok/live, amber = needs OK/caution, red = fail/LIVE arm. */
:root{
  --bg:#05090a; --glass:#0a1110; --panel:#0f1a16; --well:#0b1411; --line:#1d3a2b; --line2:#2a5a40;
  --text:#bfe3c4; --dim:#7ea78a; --green:#6dff95; --amber:#f0b83c; --red:#ff5a47;
  --paper:#f1e7cf; --paper2:#e8dcc0; --ink:#2b2418; --ink2:#5b4f3a; --rule:#d8c9a6;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --tap:44px; --bar:56px; --rail:268px; --knee:372px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--mono);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.boot{display:grid;place-items:center;height:100%;text-align:center;letter-spacing:.2em;color:var(--green)}
.boot-msg span{color:var(--dim);font-size:12px}

/* ===== shell layout ===== */
.deck{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;background:
  radial-gradient(120% 80% at 50% -10%,#0c1a14 0,transparent 60%),var(--bg);padding-left:var(--sal);padding-right:var(--sar)}
.top{display:flex;align-items:center;gap:8px;padding:calc(var(--sat) + 6px) 10px 6px;border-bottom:1px solid var(--line);background:var(--glass);min-height:calc(var(--bar) + var(--sat))}
.brand{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.brand b{color:var(--amber);letter-spacing:.14em;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{color:var(--dim);font-size:12px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibtn{min-width:var(--tap);height:var(--tap);display:inline-grid;place-items:center;padding:0 10px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;letter-spacing:.1em;font-size:12px}
.ibtn[aria-pressed=true]{border-color:var(--amber);color:var(--amber)}
.ibtn:active{background:var(--line)}
.lamp{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none}
.lamp.ok{background:var(--green);box-shadow:0 0 8px var(--green)}
.lamp.warn{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.lamp.bad{background:var(--red);box-shadow:0 0 8px var(--red)}
.main{position:relative;min-height:0;overflow:hidden}
.portal{position:absolute;inset:0;display:none;flex-direction:column;min-height:0}
.portal.on{display:flex}
@media (prefers-reduced-motion:no-preference){
  .portal.on{animation:portalIn .22s ease-out both}
  @keyframes portalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 12px 16px}

/* bottom portal bar (thumb zone) */
.bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--glass);padding-bottom:var(--sab)}
.bar button{height:var(--bar);background:none;border:0;border-top:2px solid transparent;color:var(--dim);letter-spacing:.14em;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
.bar button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.bar button[aria-selected=true]{color:var(--green);border-top-color:var(--green)}
.bar .badge{position:absolute;top:6px;left:calc(50% + 8px);min-width:18px;height:18px;border-radius:9px;background:var(--amber);color:#1a1300;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}

/* rail (stick / radar / contacts) */
.rail{position:fixed;z-index:30;top:0;bottom:0;left:0;width:min(86vw,var(--rail));background:var(--glass);border-right:1px solid var(--line2);display:flex;flex-direction:column;padding-top:var(--sat);padding-bottom:var(--sab);padding-left:var(--sal);
  transform:translateX(-102%);will-change:transform}
.rail.open{transform:none}
@media (prefers-reduced-motion:no-preference){.rail{transition:transform .24s cubic-bezier(.2,.8,.2,1)}}
.scrim{position:fixed;inset:0;z-index:25;background:#000;opacity:0;pointer-events:none}
.scrim.on{opacity:.6;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){.scrim{transition:opacity .2s}}
.rail h2{margin:0;padding:12px 14px 6px;font-size:12px;letter-spacing:.2em;color:var(--amber);font-weight:400}
.radar{position:relative;width:min(180px,56%);aspect-ratio:1;margin:4px auto 8px;border-radius:50%;border:1px solid var(--line2);background:
  radial-gradient(circle,transparent 0 24%,var(--line) 24.5% 25%,transparent 25.5% 49%,var(--line) 49.5% 50%,transparent 50.5% 74%,var(--line) 74.5% 75%,transparent 75.5%),
  linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,var(--well);overflow:hidden}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(109,255,149,.0) 0,rgba(109,255,149,.0) 75%,rgba(109,255,149,.28) 100%);will-change:transform}
@media (prefers-reduced-motion:no-preference){.radar .sweep{animation:sweep 5s linear infinite}@keyframes sweep{to{transform:rotate(360deg)}}}
.blip{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--dim);border:0;padding:0;min-width:0}
.blip.run{background:var(--green)}.blip.ok{background:var(--green)}.blip.warn{background:var(--amber)}.blip.sel{outline:2px solid var(--text);outline-offset:3px}
.blip::after{content:"";position:absolute;inset:-16px}   /* 44px tap area */
.contacts{flex:1;min-height:0;overflow-y:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:2px}
.contact{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:6px 10px;border-radius:8px;background:none;border:1px solid transparent;text-align:left;width:100%}
.contact .cs{width:38px;color:var(--dim);font-size:12px;letter-spacing:.1em}
.contact .nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.contact .nm small{color:var(--dim);font-size:12px}
.contact[aria-current=true]{background:var(--panel);border-color:var(--line2)}
.contact[aria-current=true] .cs{color:var(--amber)}
.contact .ct{min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--amber);color:#1a1300;padding:0 6px}
.rail .foot{padding:8px 14px;color:var(--dim);font-size:12px;border-top:1px solid var(--line)}
.declutter .contact .nm small{display:none}

/* HUD strip */
.hud{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--glass)}
.hud::-webkit-scrollbar{display:none}
.hud .chip{flex:none;display:flex;align-items:center;gap:6px;min-height:30px;padding:2px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--well);font-size:12px;letter-spacing:.06em;max-width:100%}
.hud .chip b{color:var(--green);font-weight:700}
.hud .chip.warn{border-color:var(--amber)}.hud .chip.warn b{color:var(--amber)}
.hud .chip.bad b{color:var(--red)}
.hud .now{flex:none;max-width:70vw;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:26px}
.hud .now b{color:var(--amber)}
.declutter .hud .chip.opt{display:none}

/* thread (chat) */
.thread-head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.thread-head .who{flex:1;min-width:0}
.thread-head .who b{color:var(--amber);letter-spacing:.12em}
.thread-head .who span{color:var(--dim);font-size:12px;display:block}
.throttle{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--glass)}
.throttle .lbl{font-size:12px;color:var(--dim);letter-spacing:.14em;margin-right:4px}
.thr{position:relative;display:grid;grid-template-columns:repeat(4,1fr);flex:1;border:1px solid var(--line2);border-radius:8px;background:var(--well);overflow:hidden}
.thr button{position:relative;z-index:1;height:var(--tap);background:none;border:0;color:var(--dim);font-size:12px;letter-spacing:.1em}
.thr button[aria-checked=true]{color:var(--bg);font-weight:700}
.thr .knob{position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc(25% - 3px);border-radius:6px;background:var(--green);will-change:transform}
.thr[data-v="mil"] .knob{background:var(--green)} .thr[data-v="max"] .knob{background:var(--amber)}
@media (prefers-reduced-motion:no-preference){.thr .knob{transition:transform .2s cubic-bezier(.2,.8,.2,1)}}
.msgs{display:flex;flex-direction:column;gap:14px;padding:14px 12px}
.msg{max-width:min(92%,640px);display:flex;flex-direction:column;gap:6px}
.msg.out{align-self:flex-end}
.msg.in{align-self:flex-start}
.bub{padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.out .bub{border-color:#7a5d1d;background:#16140c;border-bottom-right-radius:3px}
.in .bub{border-bottom-left-radius:3px}
.meta{display:flex;gap:8px;align-items:center;color:var(--dim);font-size:12px;flex-wrap:wrap}
.out .meta{justify-content:flex-end}
.declutter .meta .t{display:none}
.st{display:inline-flex;align-items:center;gap:6px;padding:0 8px;height:22px;border:1px solid var(--line2);border-radius:11px;font-size:12px;letter-spacing:.08em}
.st i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.st.new i,.st.planning i{background:var(--dim)} .st.running i{background:var(--green)} .st.done i{background:var(--green);box-shadow:none}
.st.needs_ok{border-color:var(--amber);color:var(--amber)} .st.needs_ok i{background:var(--amber)}
.st.failed,.st.cancelled{color:var(--red);border-color:#6b2a22} .st.failed i,.st.cancelled i{background:var(--red)}
.card{border:1px solid var(--line2);border-radius:10px;background:var(--panel);overflow:hidden}
.card>summary,.card .ch{list-style:none;display:flex;align-items:center;gap:8px;padding:10px 12px;min-height:var(--tap);cursor:pointer;letter-spacing:.06em;font-size:13px}
.card>summary::-webkit-details-marker{display:none}
.card>summary::after{content:"+";margin-left:auto;color:var(--dim)}
.card[open]>summary::after{content:"–"}
.card .cb{padding:2px 12px 12px;border-top:1px solid var(--line)}
.tasks{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.task{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--well)}
.task.needs{border-color:var(--amber)}
.task .tt{display:flex;gap:8px;align-items:flex-start}
.task .tt .lamp{margin-top:6px}
.task .bot{color:var(--dim);font-size:12px}
.declutter .task:not(.needs){display:none}
.declutter .tasks-sum{display:none}
.res{margin-top:4px;color:var(--text)}
.res .item{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.res .item:last-child{border:0}
.res .item span:first-child{min-width:0;overflow-wrap:anywhere}
.res .item span:last-child{color:var(--green);white-space:nowrap}
.empty{color:var(--dim);text-align:center;padding:28px 16px}
.empty b{display:block;color:var(--amber);letter-spacing:.14em;margin-bottom:6px}

/* composer */
.composer{display:flex;gap:8px;align-items:flex-end;padding:8px 10px calc(8px + 0px);border-top:1px solid var(--line);background:var(--glass)}
.composer textarea{flex:1;min-height:var(--tap);max-height:132px;resize:none;border:1px solid var(--line2);border-radius:10px;background:var(--well);padding:10px 12px;font-size:16px;line-height:1.35;outline:none}
.composer textarea:focus{border-color:var(--green)}
.send{height:var(--tap);min-width:72px;border-radius:10px;border:1px solid var(--green);background:#0e2a1a;color:var(--green);letter-spacing:.14em;font-weight:700;font-size:13px}
.send[disabled]{opacity:.4}

/* guarded switches */
.guard{position:relative;display:inline-flex;flex-direction:column;gap:6px;min-width:0}
.guard .cover{height:var(--tap);padding:0 14px;border:1px solid var(--amber);border-radius:8px;background:repeating-linear-gradient(45deg,#3a2c08 0 8px,#2a2005 8px 16px);color:var(--amber);letter-spacing:.14em;font-size:12px;font-weight:700;transform-origin:50% 0;will-change:transform}
.guard .sws{display:none;gap:8px}
.guard.open .cover{display:none}
.guard.open .sws{display:flex}
@media (prefers-reduced-motion:no-preference){.guard.open .sws{animation:flip .18s ease-out both;transform-origin:50% 0}@keyframes flip{from{transform:rotateX(-70deg);opacity:0}to{transform:none;opacity:1}}}
.sw{height:var(--tap);min-width:84px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:var(--well);letter-spacing:.12em;font-size:13px;font-weight:700}
.sw.yes{border-color:var(--green);color:var(--green)}
.sw.no{border-color:#6b2a22;color:var(--red)}
.sw[disabled]{opacity:.4}
.swlbl{color:var(--dim);font-size:12px;letter-spacing:.08em}

/* ARM / SYS blocks */
.sec{margin:0 0 16px}
.sec>h3{margin:0 0 8px;font-size:12px;font-weight:400;letter-spacing:.2em;color:var(--amber);display:flex;align-items:center;gap:8px}
.sec>h3 small{color:var(--dim);letter-spacing:.06em}
.stack{display:flex;flex-direction:column;gap:10px}
.hero{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.hero .big{font-size:40px;line-height:1;color:var(--amber);font-weight:700}
.hero .big.ok{color:var(--green)}
.hero .cap{color:var(--dim);font-size:12px;letter-spacing:.14em}
.gauge{height:10px;border-radius:5px;background:var(--well);border:1px solid var(--line2);overflow:hidden}
.gauge i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:0 50%;will-change:transform}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.kv dt{color:var(--dim)} .kv dd{margin:0;overflow-wrap:anywhere}
.armrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pill{display:inline-block;padding:2px 10px;border:1px solid var(--line2);border-radius:12px;font-size:12px;letter-spacing:.08em}
.pill.safe{color:var(--green);border-color:var(--green)} .pill.live{color:var(--red);border-color:var(--red)}
.pre{margin:6px 0 0;padding:8px;border-radius:6px;background:var(--well);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:240px;overflow:auto}
.note{color:var(--dim);font-size:13px}
.err{color:var(--red)}
.lampline{display:flex;align-items:center;gap:8px;min-height:30px}
.lampline span:last-child{margin-left:auto;color:var(--dim)}

/* kneeboard (paper) */
.knee{background:var(--paper);color:var(--ink);font-family:var(--serif);height:100%;display:flex;flex-direction:column;min-height:0}
.knee-head{padding:12px 14px 8px;border-bottom:2px solid var(--rule);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.knee-head h2{margin:0;font-size:18px;letter-spacing:.04em;flex:1}
.ktabs{display:flex;gap:6px}
.ktabs button{height:36px;min-width:44px;padding:0 12px;border:1px solid var(--ink2);border-radius:4px;background:transparent;color:var(--ink);font-family:var(--serif);font-size:14px}
.ktabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.knee .tools{padding:8px 14px;display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--rule)}
.knee input[type=search],.knee textarea{flex:1;min-width:140px;min-height:var(--tap);border:1px solid var(--ink2);border-radius:4px;background:#fffaf0;color:var(--ink);padding:8px 10px;font:16px/1.35 var(--serif);outline:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--rule)}
.chips button{height:34px;padding:0 10px;border:1px solid var(--ink2);border-radius:17px;background:transparent;color:var(--ink);font:13px var(--serif)}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.knee .scroll{padding:6px 14px 18px;background:repeating-linear-gradient(transparent 0 27px,rgba(150,120,70,.18) 27px 28px)}
.nt{position:relative;padding:8px 44px 8px 0;border-bottom:1px solid var(--rule)}
.nt p{margin:0;overflow-wrap:anywhere;font-size:15px;line-height:1.5}
.nt .tag{display:block;font:12px var(--mono);color:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.nt .del{position:absolute;right:-6px;top:2px;height:44px;min-width:44px;background:none;border:0;color:#8a2a1c;font-size:22px}
.knee .btn{height:var(--tap);padding:0 16px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);font:700 14px var(--serif);letter-spacing:.04em}
.knee .btn.alt{background:transparent;color:var(--ink)}
.knee .count{font:12px var(--mono);color:var(--ink2)}
.knee details.rs{border:1px solid var(--rule);border-radius:4px;background:#fffaf0;margin:8px 0}
.knee details.rs summary{padding:10px 12px;cursor:pointer;min-height:var(--tap);display:flex;align-items:center;gap:8px;list-style:none}
.knee details.rs summary::-webkit-details-marker{display:none}
.knee details.rs .bd{padding:0 12px 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
.knee a{color:#124e2e;overflow-wrap:anywhere}

/* login */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px)}
.login form{width:min(380px,100%);border:1px solid var(--line2);border-radius:14px;background:var(--glass);padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:15px;letter-spacing:.18em;color:var(--amber);font-weight:700}
.login p{margin:0;color:var(--dim);font-size:13px}
.login input{height:var(--tap);border:1px solid var(--line2);border-radius:10px;background:var(--well);padding:0 12px;font-size:16px;outline:none}
.login input:focus{border-color:var(--green)}
.login .send{width:100%}
.login .copy{font-size:12px;text-align:center;color:var(--dim)}
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + var(--sab) + 70px);z-index:60;transform:translateX(-50%);padding:10px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--glass);max-width:90vw;opacity:0;pointer-events:none}
.toast.on{opacity:1}.toast.bad{border-color:var(--red);color:var(--red)}
@media (prefers-reduced-motion:no-preference){.toast{transition:opacity .2s}}
.offline{display:none;padding:4px 12px;text-align:center;background:#2a1a08;color:var(--amber);font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--amber)}
.offline.on{display:block}
.footer{padding:4px 10px;font-size:12px;color:var(--dim);text-align:center;letter-spacing:.04em}

/* ===== wide screens: left rail + center + docked kneeboard ===== */
@media (min-width:900px){
  .deck{grid-template-columns:var(--rail) 1fr;grid-template-rows:auto 1fr}
  .top{grid-column:1/-1}
  .rail{position:static;transform:none;width:auto;grid-row:2;padding-top:0}
  .scrim{display:none}
  .main{grid-column:2;grid-row:2}
  .bar{position:absolute;top:calc(var(--sat) + 7px);right:calc(var(--sar) + 120px);z-index:5;border:0;background:none;padding:0;grid-auto-flow:column;grid-template-columns:none;gap:4px;width:auto}
  .bar button{height:var(--tap);flex-direction:row;padding:0 14px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);border-top-width:1px}
  .bar button svg{display:none}
  .bar button[aria-selected=true]{border-color:var(--green)}
  .bar .badge{position:static;margin-left:6px}
  #menuBtn{display:none}
  .footer{grid-column:1/-1}
}
@media (min-width:1180px){
  .deck{grid-template-columns:var(--rail) 1fr var(--knee)}
  .main{grid-column:2}
  #p-knee{display:flex;position:fixed;left:auto;top:calc(var(--bar) + var(--sat));bottom:28px;right:var(--sar);width:var(--knee);animation:none;border-left:2px solid var(--line2);z-index:4}
  .bar button[data-p=knee]{display:none}
}
@media (max-height:480px) and (orientation:landscape){.hud .now{display:none}.radar{display:none}}