/* ── HUD rail ─────────────────────────────────────
   The top rail is nothing but state: a left cluster of identity (name, level,
   XP), the nav in the middle, and a right cluster of resources. Chips come from
   the kit (css/ui.css); this file only places them. Session affordances — the
   account id, disconnect — sit behind the ⋯ menu so they never read as HUD. */
#topbar{
  flex-shrink:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:9px 14px;
  background:rgba(3,8,20,.97);
  border-bottom:1px solid var(--u-line-dim);
}
.hud-cluster{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.hud-right{margin-left:auto}
.dot{width:9px;height:9px;border-radius:50%;background:#1a2a3a;flex-shrink:0;margin:0 2px}
.dot.on{background:var(--u-ok);box-shadow:0 0 7px var(--u-ok)}

/* Session menu — the one place a developer affordance is allowed in the rail. */
.hud-more-wrap{position:relative}
.hud-more{
  width:32px;height:32px;border-radius:var(--u-r-sm);
  background:none;border:1px solid transparent;color:var(--u-label);
  font-size:17px;line-height:1;cursor:pointer;
}
.hud-more:hover{border-color:var(--u-line-soft);color:var(--u-line)}
.hud-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-panel);
  min-width:230px;padding:12px;
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--u-line-dim);border-radius:var(--u-r);
  background:var(--u-glass);box-shadow:0 14px 34px rgba(0,0,0,.6);
}
.hud-menu[hidden]{display:none}
.hud-menu-row{display:flex;flex-direction:column;gap:4px}
.hud-menu-row .u-mono{font-size:11px;color:var(--u-body);word-break:break-all}

/* ── Nav tabs (in the rail) ───────────────────── */
.nav{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.nav-btn{
  font:600 12px/1 var(--u-font-ui);letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid transparent;color:var(--u-label);
  padding:10px 14px;border-radius:var(--u-r-sm);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;
}
.nav-btn:hover{color:#d2e9ff;border-color:var(--u-line-soft);background:rgba(79,216,255,.06)}
.nav-btn.active{color:var(--u-line);border-color:var(--u-line-dim);background:rgba(79,216,255,.14)}
/* A tab holding work the player has not looked at yet. */
.nav-btn.alert{color:var(--u-bad);border-color:var(--u-bad);animation:navPulse 1s infinite}
@keyframes navPulse{0%,100%{box-shadow:0 0 6px rgba(255,34,68,.3)}50%{box-shadow:0 0 16px rgba(255,34,68,.6)}}

/* ── Stage (main area) ────────────────────────── */
#stage{
  flex:1;
  display:flex;
  overflow:hidden;
  position:relative;
  /* The ladder in tokens.css is per-context, not global. Isolating the stage is
     what makes a view's `--z-bay` local to that view instead of competing with
     the rail's session menu in the root stacking context. */
  isolation:isolate;
}
.view{
  flex:1;
  display:flex;
  overflow:hidden;
}
.view-body{
  flex:1;
  overflow-y:auto;
  padding:14px 18px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:#1a3a5a transparent;
}
.view-rail{
  width:300px;flex-shrink:0;
  background:var(--panel);
  border-left:1px solid var(--border);
  overflow-y:auto;
  padding:12px;
  display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin;scrollbar-color:#1a3a5a transparent;
}
.view-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
.view-title{
  font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:3px;
  color:var(--accent);text-transform:uppercase;
}
.view-sub{font-size:11px;color:var(--dim);letter-spacing:1px}

/* Toast */
.hg-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#220812;border:1px solid #aa4466;color:#ff88aa;padding:8px 14px;border-radius:4px;font-size:12px;font-family:var(--u-font-ui);z-index:var(--z-toast);display:none}

/* ── Drawer navigation (compact viewports) ────────
   A landscape phone has ~390px of height and needs every pixel of rail width
   for state, so the eight-tab strip becomes one button and a slide-in sheet.
   The strip returns on wide viewports; both are filled from the same view list
   (js/nav.js), so they cannot disagree. */
.hud-menu-btn{
  display:none;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--u-r-sm);
  background:none;border:1px solid var(--u-line-soft);color:var(--u-line);
  font-size:18px;line-height:1;cursor:pointer;
}
.hud-menu-btn:hover,.hud-menu-btn[aria-expanded="true"]{border-color:var(--u-line);background:rgba(79,216,255,.1)}

.nav-scrim{position:fixed;inset:0;z-index:var(--z-bay);background:var(--u-ink)}
.nav-scrim[hidden]{display:none}
.nav-drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:var(--z-toast);
  width:min(280px,78vw);
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px calc(12px + env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  background:var(--u-glass);border-right:1px solid var(--u-line-dim);
  box-shadow:18px 0 40px rgba(0,0,0,.55);
  animation:navIn .16s ease-out;
}
.nav-drawer[hidden]{display:none}
@keyframes navIn{from{transform:translateX(-12px);opacity:0}to{transform:none;opacity:1}}
.nav-drawer .nav-btn{
  width:100%;justify-content:flex-start;text-align:left;
  min-height:44px;padding:12px 14px;font-size:13px;
}
.nav-drawer-head{
  font:700 11px/1 var(--u-font-ui);letter-spacing:.18em;text-transform:uppercase;
  color:var(--u-label);padding:4px 4px 8px;
}

/* ── Compact rail ─────────────────────────────────
   Chips tighten before anything is dropped: on the 740×390 design target the
   six state chips, the drawer button and the ⋯ menu all still fit. */
@media (max-width:900px), (max-height:520px){
  #topbar{gap:6px;padding:6px 8px}
  /* A view header costs two lines and a rule; on a short screen that is most of
     what the scene had. The title carries the screen, the subtitle does not. */
  .view-sub{display:none}
  .view-head{padding-bottom:5px}
  .hud-menu-btn{display:grid;place-items:center}
  #nav{display:none}
  .u-chip{min-height:32px;padding:0 8px;gap:5px}
  .u-chip-l{font-size:9px;letter-spacing:.08em}
  .u-chip-v{font-size:14px}
  .u-chip-bar{width:40px}
  .hud-cluster{gap:5px}
  .view-body{padding:10px 12px}
  .view-title{font-size:13px}
}

/* Shortest screens drop the *resource* labels only — each value carries its own
   colour (rusty scrap, steel metal, gold credits), so the rail stays one row
   and still says which number is which. Identity keeps its labels: a bare "6"
   beside a bare "0 / 10" would say nothing. */
@media (max-height:400px){
  #hudResources .u-chip-l{display:none}
  #topbar{padding:5px 8px}
}