/* NEXUS FLEET — app/shell.css
   Only the frame: the gate, the top bar, dialogs, toasts and the two
   full-view states. Everything inside #fleetView is fleet.css's business.
   Palette is the owner's mark, unchanged. Targets are 48px (phone floor);
   the tablet cockpit raises its own to the in-vehicle minimum. */
:root{
  --ink:#122e34; --ink2:#1b3f46; --ink3:#24505a;
  --mint:#00c3a9; --amber:#f1aa3e; --paper:#f4f6f2;
  --line:rgba(244,246,242,.14);
  --r:14px; --r-sm:10px;
  --shadow-1:0 1px 2px rgba(5,20,24,.30), 0 6px 18px rgba(5,20,24,.28);
  --ring:0 0 0 3px rgba(0,195,169,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--ink); color:var(--paper);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}

/* ── buttons ─────────────────────────────────────────────────────────── */
.sh-btn{
  min-height:48px; padding:0 18px; border-radius:var(--r-sm);
  border:2px solid var(--line); background:transparent; color:var(--paper);
  font:inherit; font-weight:700; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, transform .06s ease;
}
.sh-btn:active{transform:translateY(1px)}
.sh-btn-primary{background:var(--mint); border-color:var(--mint); color:var(--ink)}
.sh-btn-quiet:hover{border-color:rgba(244,246,242,.34)}
.sh-btn-sm{min-height:40px; padding:0 12px; font-size:.9rem}
.sh-btn-wide{width:100%}

/* `hidden` means hidden. Without this, `.sh-gate{display:grid}` outranked the
   browser's own [hidden] rule: on every trusted device the sign-in gate stayed
   a full, empty ink screen ABOVE the workspace, and the fleet began one
   screen-height down (found by the button sweep, 2026-09-24). */
[hidden]{display:none !important}

/* ── the gate ────────────────────────────────────────────────────────── */
.sh-gate{min-height:100dvh; display:grid; place-items:center; padding:24px 16px}
.sh-gate-card{
  width:100%; max-width:440px; padding:28px 24px 24px;
  background:linear-gradient(180deg,var(--ink2),var(--ink));
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1);
}
.sh-gate-mark{margin-bottom:22px}
/* The owner's logo, cut from his file (app/fleet/brand/), never typed or redrawn. */
.sh-logo{display:block; height:44px; width:auto; max-width:100%; border-radius:6px}
.sh-logo--sm{height:32px}
.sh-field{display:block; margin:0 0 14px}
.sh-field>span{display:block; font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; opacity:.72; margin-bottom:6px}
/* 16px minimum: anything smaller makes iOS zoom the page on focus. */
.sh-field input{
  width:100%; min-height:48px; padding:0 14px; font:inherit; font-size:16px;
  color:var(--paper); background:rgba(244,246,242,.06);
  border:2px solid var(--line); border-radius:var(--r-sm);
}
.sh-field input:focus{outline:none; border-color:var(--mint); box-shadow:var(--ring)}
.sh-hint{font-size:.85rem; line-height:1.45; opacity:.68; margin:0 0 16px}
.sh-trust{font-size:.9rem; line-height:1.5; margin:0 0 16px; padding:12px 14px;
  border-radius:var(--r-sm); border-left:4px solid}
.sh-trust-ok{border-color:var(--mint); background:rgba(0,195,169,.10)}
.sh-trust-no{border-color:var(--amber); background:rgba(241,170,62,.10)}
.sh-details{margin:0 0 18px; border:1px solid var(--line); border-radius:var(--r-sm)}
.sh-details>summary{cursor:pointer; padding:13px 14px; font-weight:700; font-size:.9rem; min-height:48px;
  display:flex; align-items:center}
.sh-details[open]>summary{border-bottom:1px solid var(--line)}
.sh-details>*:not(summary){margin-left:14px; margin-right:14px}
.sh-details>.sh-field:first-of-type{margin-top:14px}

/* ── top bar ─────────────────────────────────────────────────────────── */
.sh-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px calc(10px); padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(18,46,52,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sh-top-mark{font-weight:800; letter-spacing:.05em; font-size:1rem; white-space:nowrap}
.sh-top-mark span{font-weight:400; opacity:.72}
.sh-top-right{display:flex; align-items:center; gap:10px; min-width:0}
.sh-who{font-size:.85rem; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sh-chip{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; white-space:nowrap}
.sh-chip-ok{background:rgba(0,195,169,.18); color:var(--mint)}
.sh-chip-warn{background:rgba(241,170,62,.18); color:var(--amber)}
@media (max-width:560px){ .sh-who{display:none} }
/* A 390px phone could not fit the logo, the trust chip and Switch: Switch ran
   off the right edge. Tighter bar, and the chip says only what matters. */
@media (max-width:440px){
  .sh-top{gap:8px; padding-left:12px; padding-right:12px}
  .sh-top-right{gap:6px}
  .sh-chip-long{display:none}
}
/* Inside the shell the bar above already carries the owner's logo; the
   workspace header keeps only its actions, so the mark is not shown twice. */
#shell .flt-topbar .flt-brand{display:none}
#shell #fleetView .flt-topbar{justify-content:flex-end}

/* ── dialogs (NX.confirm / NX.prompt resolve through these) ──────────── */
.sh-dialog-back{position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:20px; background:rgba(5,20,24,.66)}
.sh-dialog{width:100%; max-width:440px; padding:22px;
  background:linear-gradient(180deg,var(--ink2),var(--ink));
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1)}
.sh-dialog-msg{margin:0 0 16px; line-height:1.5}
.sh-dialog-input{width:100%; min-height:48px; padding:0 14px; font:inherit; font-size:16px;
  margin-bottom:16px; color:var(--paper); background:rgba(244,246,242,.06);
  border:2px solid var(--line); border-radius:var(--r-sm)}
.sh-dialog-input:focus{outline:none; border-color:var(--mint); box-shadow:var(--ring)}
.sh-dialog-row{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.sh-dialog-row .sh-btn{flex:1 1 auto; min-width:120px}

/* ── toasts ──────────────────────────────────────────────────────────── */
.sh-toasts{position:fixed; left:50%; transform:translateX(-50%); z-index:95;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; width:min(520px,calc(100vw - 32px))}
.sh-toast{padding:13px 16px; border-radius:var(--r-sm); font-weight:600; line-height:1.4;
  background:var(--ink3); border:1px solid var(--line); box-shadow:var(--shadow-1);
  animation:sh-in .2s ease}
.sh-toast-error{border-color:var(--amber); background:#4a2f12}
.sh-toast-warn{border-color:var(--amber)}
.sh-toast-success,.sh-toast-ok{border-color:var(--mint)}
.sh-toast.is-out{opacity:0; transition:opacity .24s ease}
@keyframes sh-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ── full-view load / error ──────────────────────────────────────────── */
.sh-view-load{display:grid; place-items:center; gap:14px; padding:72px 20px; text-align:center}
.sh-view-load-mark{font-weight:800; letter-spacing:.14em; font-size:.95rem; opacity:.9;
  display:flex; align-items:center; gap:10px}
.sh-view-load-dot{width:9px; height:9px; border-radius:50%; background:var(--amber);
  animation:sh-pulse 1.5s ease-in-out infinite}
.sh-view-load-bar{width:min(280px,70vw); height:3px; border-radius:999px;
  background:rgba(244,246,242,.12); overflow:hidden}
.sh-view-load-bar span{display:block; width:40%; height:100%; background:var(--mint);
  animation:sh-sweep 1.3s ease-in-out infinite}
.sh-view-load-label{font-size:.92rem; opacity:.7}
@keyframes sh-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sh-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.sh-view-error{display:grid; justify-items:center; gap:12px; padding:64px 20px; text-align:center}
.sh-view-error-title{font-size:1.15rem; font-weight:800}
.sh-view-error-msg{max-width:46ch; line-height:1.55; opacity:.8}
.sh-view-error-detail{max-width:60ch; font-size:.82rem; opacity:.6; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}
@media (max-width:380px){
  .sh-top-mark .fleet-original-brand{width:140px; height:32px}
  .sh-top-mark .fleet-original-brand img{width:328px; left:-95px; top:-177px}
}

/* ── the boot screen (2026-09-24) ─────────────────────────────────────
   Painted by plain HTML with the first frame; boot.js fills the bar at each
   real step and fades it once the fleet or the gate is on screen. */
.sh-boot{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(120% 80% at 50% 38%, var(--ink2), var(--ink) 70%);
  transition:opacity .3s ease, visibility .3s ease}
.sh-boot.is-out{opacity:0; visibility:hidden}
.sh-boot-card{width:min(78vw,340px); display:grid; justify-items:center; gap:22px}
.sh-boot-logo{width:100%; height:auto; border-radius:10px; animation:sh-boot-in .6s ease-out both}
.sh-boot-bar{width:72%; height:4px; border-radius:4px; background:rgba(244,246,242,.12); overflow:hidden}
.sh-boot-bar span{display:block; height:100%; width:4%; border-radius:4px; background:var(--mint);
  box-shadow:0 0 12px rgba(0,195,169,.55); transition:width .35s ease}
.sh-boot-step{margin:0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.72; min-height:1.2em}
@keyframes sh-boot-in{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}

/* ── the menu: a button top-left and a drawer that slides over the app ─ */
.sh-menu-btn{flex:none; width:44px; height:44px; margin-right:-4px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--paper); cursor:pointer}
.sh-menu-btn:hover{background:rgba(244,246,242,.08)}
.sh-menu-btn:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.sh-top{justify-content:flex-start}
.sh-top .sh-top-right{margin-left:auto}
.sh-drawer-back{position:fixed; inset:0; z-index:150; background:rgba(4,14,16,0); transition:background .22s ease}
.sh-drawer-back.is-open{background:rgba(4,14,16,.62)}
.sh-drawer{position:absolute; inset:0 auto 0 0; width:min(86vw,340px); display:flex; flex-direction:column;
  background:#0d2429; color:var(--paper); box-shadow:12px 0 40px rgba(0,0,0,.45);
  padding:calc(16px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-102%); transition:transform .24s cubic-bezier(.2,.8,.2,1); outline:none; overflow-y:auto}
.sh-drawer-back.is-open .sh-drawer{transform:none}
.sh-drawer-head{display:flex; align-items:center; gap:12px; padding:6px 16px 18px; border-bottom:1px solid var(--line)}
.sh-drawer-head b{display:block; font-size:1.05rem}
.sh-avatar{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint); color:var(--ink); font-weight:800; font-size:1.15rem}
.sh-drawer-trust{display:block; font-size:.78rem; margin-top:2px; opacity:.8}
.sh-drawer-trust.is-ok{color:var(--mint); opacity:1}
.sh-drawer-trust.is-warn{color:var(--amber); opacity:1}
.sh-drawer-close{margin-left:auto; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%;
  background:transparent; color:var(--paper); cursor:pointer}
.sh-drawer-list{display:flex; flex-direction:column; padding:10px 8px; gap:2px}
.sh-drawer-item{display:flex; align-items:center; gap:16px; min-height:52px; padding:0 14px; border:0; border-radius:12px;
  background:transparent; color:var(--paper); font:inherit; font-size:1rem; font-weight:650; text-align:left; cursor:pointer}
.sh-drawer-item:hover{background:rgba(244,246,242,.07)}
.sh-drawer-item:focus-visible, .sh-drawer-close:focus-visible, .sh-drawer-foot:focus-visible{outline:3px solid var(--mint); outline-offset:-3px}
.sh-drawer-item svg{flex:none; opacity:.9}
.sh-drawer-item span{flex:1}
.sh-count{font-style:normal; font-size:.78rem; font-weight:800; min-width:26px; padding:3px 8px; border-radius:999px;
  text-align:center; background:rgba(244,246,242,.12)}
.sh-count.is-due{background:var(--amber); color:var(--ink)}
.sh-drawer-rule{height:1px; margin:8px 14px; background:var(--line)}
.sh-drawer-foot{margin-top:auto; padding:14px 22px 4px; font-size:.8rem; color:rgba(244,246,242,.7); text-decoration:none}
.sh-drawer-foot strong{color:var(--paper)}
html.sh-drawer-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .sh-boot, .sh-boot-bar span, .sh-drawer, .sh-drawer-back{transition:none}
  .sh-boot-logo{animation:none}
}
/* On a phone the menu carries "Switch person", so the bar keeps its room. */
@media (max-width:560px){ #signout{display:none} }

/* Landscape phones: a slimmer bar, so the fleet gets the height. */
@media (max-height:520px) and (orientation:landscape){ .sh-top{padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:4px} }