/* shell/nova-shell.css: the one NovaHQ header (pair with nova-shell.js; served by the edge from
   hosting/landing/shell/). The landing's topbar look (a rounded dark-glass card, accent border,
   --glow-card) with the admin header's theme treatment: every accent reads --accent-rgb /
   --teal / --text-*, so /auth/theme.css re-colours the whole header. Nothing here is hard-coded
   teal except the fallbacks below, which a page's own :root and the theme sheet both outrank. */

/* Fallback tokens for pages that don't define the neon-terminal set (the Herald is newsprint).
   :where() has no specificity, so a page's :root and theme.css's html:root always win. */
:where(:root){
  --accent-rgb:40,224,208; --accent2-rgb:79,245,255;
  --teal:#28e0d0; --cyan:#4ff5ff; --amber:#ffb24d;
  --text-soft:#9fe8e2; --text-bright:#d8fffb; --text-muted:#7fb8b2; --text-dim:#5b8c88;
  --mono:'JetBrains Mono','DejaVu Sans Mono',ui-monospace,monospace;
  --glow-card:0 0 30px -16px rgba(var(--accent-rgb),.6);
}
/* The header band's height, for a page that fills the rest of the screen (calc(100dvh - ...)). */
:root{--nova-shell-band:72px}
@media (max-width:640px){:root{--nova-shell-band:66px}}

/* Eye motion (nova-ui.js injects the same keyframes; here too so CSP-strict pages, which
   refuse injected <style>, still get a breathing eye). */
@keyframes novaEyeBreathe{0%,100%{box-shadow:0 0 10px -1px var(--eye,#28e0d0),0 0 26px -8px var(--eye,#28e0d0)}50%{box-shadow:0 0 18px 0 var(--eye,#28e0d0),0 0 44px -6px var(--eye,#28e0d0)}}
@keyframes novaEyeSpin{to{transform:rotate(360deg)}}
@keyframes novaEyeSpinR{to{transform:rotate(-360deg)}}
@keyframes novaEyePupil{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ── the mount: a band that holds the card ─────────────────────────────── */
header[data-nova-shell]{display:block;position:relative;z-index:20;box-sizing:border-box;
  width:100%;max-width:96rem;margin:0 auto;padding:12px clamp(10px,2.5vw,40px) 0;
  min-height:var(--nova-shell-band)}
header[data-nova-shell] *{box-sizing:border-box}
/* data-fixed (Chat with Nova): pinned to the top over a full-screen page. The page reads
   --nova-shell-h (set by the script) for everything that sits under it. */
header[data-nova-shell][data-fixed]{position:fixed;top:0;left:0;right:0;max-width:none;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 0;min-height:0}

/* ── the card ──────────────────────────────────────────────────────────── */
.nvs{position:relative;display:flex;align-items:center;gap:10px;min-width:0;
  padding:7px 14px 7px 10px;border-radius:13px;
  border:1px solid rgba(var(--accent-rgb),.18);background:rgba(8,14,17,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:var(--glow-card);
  font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;color:var(--text-soft);line-height:1.2}
.nvs a{text-decoration:none;color:inherit}
.nvs button{font:inherit;letter-spacing:inherit;color:inherit;background:none;margin:0;cursor:pointer}
.nvs [hidden]{display:none !important}
.nvs a:focus-visible,.nvs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* 1. the eye + NOVAHQ wordmark: the way home */
.nvs-home{display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:0 4px;
  border-radius:10px;flex:0 0 auto}
.nvs-eye{display:inline-flex;width:30px;height:30px;flex:0 0 auto}
.nvs-wm{font-size:0.9375rem;font-weight:600;letter-spacing:.14em;color:var(--text-bright);white-space:nowrap}
.nvs-wm b{font-weight:600;color:var(--teal)}
.nvs-home:hover .nvs-wm{color:var(--teal)}

/* 2. divider + this app's name */
.nvs-div{flex:0 0 auto;width:1px;height:22px;background:rgba(var(--accent-rgb),.28)}
.nvs-app{min-width:0;flex:0 1 auto;display:inline-flex;align-items:center;min-height:44px;
  color:var(--text-bright);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;overflow:hidden}
.nvs-app span{overflow:hidden;text-overflow:ellipsis}
.nvs-app:hover{color:var(--teal)}

/* pills (Nova's status, Messages) */
.nvs-pill{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:0;
  padding:7px 13px;border-radius:20px;border:1px solid rgba(var(--accent-rgb),.14);
  color:var(--text-soft);white-space:nowrap;letter-spacing:.02em}
.nvs-pill .em{font-size:1rem;line-height:1;flex:0 0 auto}
.nvs-pill .tx{overflow:hidden;text-overflow:ellipsis}
/* 3. Nova's status: what she's up to, never a link (Brent 2026-10-06) */
.nvs-nova{flex:0 1 auto;max-width:22rem}
.nvs-nova .short{display:none}
.nvs-nova.off{color:var(--text-dim);border-style:dashed}
/* 4. spacer */
.nvs-sp{flex:1 1 0;min-width:4px}
/* 5. Messages, with the unread badge */
a.nvs-msg{flex:0 0 auto;transition:color .15s,border-color .15s}
a.nvs-msg:hover{color:var(--text-bright);border-color:var(--teal)}
.nvs-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;font-size:0.6875rem;font-weight:700;letter-spacing:0;
  color:#04070a;background:var(--teal);box-shadow:0 0 12px -2px rgba(var(--accent-rgb),.9)}

/* 6-9. account: chip, gear, Admin, Sign out (a dropdown on a phone, see below) */
.nvs-acct{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nvs-acct > a,.nvs-acct > button{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:7px 14px;border-radius:20px;border:1px solid rgba(var(--accent-rgb),.14);
  color:var(--text-muted);white-space:nowrap;transition:color .15s,border-color .15s}
.nvs-acct > a:hover,.nvs-acct > button:hover{color:var(--text-bright);border-color:var(--teal)}
.nvs-acct > a.nvs-me{border-color:transparent;padding:2px 6px 2px 2px;border-radius:10px;color:var(--text-bright);max-width:16rem}
.nvs-acct > a.nvs-me:hover{border-color:transparent}
.nvs-me .av{width:34px;height:34px;flex:0 0 auto;border-radius:10px;border:1px solid rgba(var(--accent-rgb),.14);
  background:rgba(var(--accent-rgb),.06);display:flex;align-items:center;justify-content:center;font-size:1.125rem}
.nvs-me .nm{overflow:hidden;text-overflow:ellipsis}
.nvs-me:hover .nm{color:var(--teal)}
.nvs-acct > a.nvs-gear{width:44px;padding:0;justify-content:center;border-radius:50%;font-size:1.125rem}
.nvs-gear .lbl,.nvs-out .ic,.nvs-admin .ic{display:none}

/* the phone panel's own rows (Nova's full status, Messages): only inside the open panel */
.nvs-acct > .nvs-p{display:none}

/* the phone toggle (☰ + the unread badge), hidden on wide screens */
.nvs-menu{display:none;position:relative;flex:0 0 auto;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:12px;border:1px solid rgba(var(--accent-rgb),.25) !important;
  color:var(--text-bright);font-size:1.25rem;line-height:1;transition:border-color .2s,box-shadow .2s}
.nvs-menu .bars{display:inline-block;transition:transform .25s ease}
.nvs-menu .nvs-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;font-size:0.625rem}
.nvs-menu[aria-expanded="true"]{border-color:var(--teal) !important;box-shadow:0 0 16px -6px rgba(var(--accent-rgb),.8)}
.nvs-menu[aria-expanded="true"] .bars{transform:rotate(90deg)}

/* ── narrower screens ──────────────────────────────────────────────────── */
@media (max-width:1000px){
  .nvs-nova{max-width:13rem}
  .nvs-nova .line{display:none}
  .nvs-nova .short{display:inline}
}
/* a tablet: still one row, the labels shrink to their icons */
@media (max-width:860px){
  .nvs-msg .lbl,.nvs-me .nm{display:none}
  .nvs-acct > a.nvs-me{padding:2px}
  .nvs-nova{max-width:10rem}
}
/* a phone (keep in step with PHONE_MQ in nova-shell.js): one row that never wraps (the eye, the
   app's name, Nova's status trimmed to fit, ☰), and everything else stacked in a panel under it */
@media (max-width:640px){
  header[data-nova-shell]{padding:8px 8px 0}
  .nvs{gap:8px;padding:6px 6px 6px 8px}
  .nvs.has-app .nvs-wm,.nvs-home + .nvs-div{display:none}
  .nvs-home{gap:8px;padding:0 2px}
  .nvs-app{flex:0 1 auto;letter-spacing:.08em}
  .nvs-msg,.nvs-sp{display:none !important}
  /* the status takes the room that is left and trims with … */
  .nvs-nova{flex:1 1 0;max-width:none;justify-content:flex-start;padding:6px 10px;gap:6px;
    border-color:transparent;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .nvs-nova .line{display:inline}
  .nvs-nova .short{display:none}
  .nvs-menu{display:inline-flex;margin-left:auto}

  /* the panel: full width under the bar, one 44 px row per item; it slides and fades in and out
     (visibility waits for the fade, so a closed panel can't be tabbed into or tapped) */
  .nvs-acct{display:flex;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
    flex-direction:column;align-items:stretch;gap:6px;padding:8px;
    max-height:calc(100dvh - var(--nova-shell-band) - 16px);overflow-y:auto;overscroll-behavior:contain;
    border-radius:13px;border:1px solid rgba(var(--accent-rgb),.25);background:#060b0e;   /* solid: page text showed through on the Herald */
    box-shadow:0 18px 40px -16px rgba(0,0,0,.9),var(--glow-card);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scaleY(.96);transform-origin:top center;
    transition:opacity .2s ease,transform .22s ease,visibility 0s linear .22s}
  .nvs.open .nvs-acct{opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity .2s ease,transform .22s ease,visibility 0s}
  .nvs-acct > a,.nvs-acct > button,.nvs-acct > .nvs-p,.nvs-acct > a.nvs-gear,.nvs-acct > a.nvs-me{
    display:flex;align-items:center;gap:10px;width:100%;max-width:none;min-height:44px;
    justify-content:flex-start;border-radius:10px;padding:6px 12px;font-size:0.8125rem;
    border:1px solid rgba(var(--accent-rgb),.12);text-align:left;white-space:nowrap}
  .nvs-acct > a.nvs-me{padding:4px 12px 4px 4px}
  .nvs-me .nm{display:inline}
  .nvs-acct > .nvs-p-nova{white-space:normal;line-height:1.35;color:var(--text-soft);background:rgba(var(--accent-rgb),.05)}
  .nvs-acct > .nvs-p-nova.off{color:var(--text-dim);border-style:dashed}
  .nvs-p .ic,.nvs-gear .ic,.nvs-out .ic,.nvs-admin .ic{display:inline-flex;justify-content:center;width:1.5rem;flex:0 0 auto;font-size:1.0625rem}
  .nvs-p-msg .nvs-badge{margin-left:auto}
  .nvs-gear .lbl{display:inline}
}
@media (max-width:380px){
  .nvs-app{font-size:0.6875rem;letter-spacing:.06em}
  .nvs-nova{padding:6px 6px}
}