/* topbar.css — tier 2 layout.
 * Owns: persistent top app bar: brand, mode tabs, action buttons, hero slot.
 *
 * Order dependencies: 1 rule(s) belonging by subject to mobile.css (1) stay
 * here to keep their cascade position beside a rule in this file; each has an
 * `order:` comment naming it. */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 400;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(var(--topbar-blur)) saturate(140%);
  backdrop-filter: blur(var(--topbar-blur)) saturate(140%);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.35);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 100%;
  padding: 0 var(--topbar-pad-x);
  /* 1. TOP BAR — graceful collapse from desktop → tablet → mobile */
  /* The topbar-inner row must be allowed to shrink its children rather
   * than push the action group off the right edge. */
  flex-wrap: nowrap;
  min-width: 0;
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  outline-offset: 2px;
}
.topbar-brand-mark { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); letter-spacing: var(--tr-widest); text-transform: uppercase; }
.topbar-brand:hover { color: var(--accent); }

/* ── Mode tabs (Build / Waha / Cards) */
.topbar-modes {
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  background: var(--ov-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-1);
  /* Hide Build/Waha/Cards mode nav until all modes are ready. */
  display: none !important;
}
.topbar-mode-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--sp-7);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  /* 10. Topbar mode-tab focus / active polish — quicker accent slide. */
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
body.reduce-motion .topbar-mode-tab, body.reduce-motion .topbar-action-btn, body.reduce-motion .army-toolbar .btn-sm { transition: none !important; }
.topbar-mode-tab:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.08); transform: translateY(-1px); }
.topbar-mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar-mode-tab[aria-selected="true"] { color: var(--accent); background: rgba(var(--accent-rgb), 0.14); box-shadow: inset 0 -2px 0 0 rgba(var(--accent-rgb), 0.85); }

/* ── Slot for build-mode.js's hero (READY/faction/name/det/pts) ── */
.topbar-hero-slot {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  /* Backstop. min-width:0 lets the slot BE narrow; it does not stop a child
   * from painting outside it. Whatever the hero grows into next, it stops
   * here rather than on top of the action buttons. */
  overflow: hidden;
}
.topbar-hero-slot:empty { display: none; }

/* ── Right group: Settings + Help */
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  min-width: 0;
}
.topbar-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 36px;
  padding: 0 var(--sp-6);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tr-normal);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.topbar-action-glyph { font-size: var(--fs-base); line-height: 1; }
.topbar-action-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tr-widest); font-size: var(--fs-xs); }

/* Help button is icon-only at narrower widths to save space. */
.topbar-action-label-help { display: inline; }
.topbar-action-btn:hover { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); transform: translateY(-1px); }

/* ── Signed-out call to action (topbar)
 * Tokens only, so every theme is covered: the 1px accent border + faint
 * accent wash make "Sign in" read as an action next to the plain topbar
 * buttons. brutalist.css overrides .topbar-action-btn's border/background at
 * (0,1,0); the extra class here lifts this to (0,2,0) so it wins without
 * !important. Signed-in is untouched. */
.topbar-action-btn.auth-btn-signed-out { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.10); }
.topbar-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar-action-btn.auth-btn-signed-out:hover, .topbar-action-btn.auth-btn-signed-out:focus-visible { background: rgba(var(--accent-rgb), 0.22); }
.topbar-action-btn[aria-expanded="true"] { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); }

@media (min-width: 821px) and (max-width: 900px) {
  /* 821-900px: the topbar is still shown (it hides at <= 820) but its content
   * is wider than the bar - measured live, #topbar-help's right edge sat at
   * 867px at every width from 821 to 880, so Help was cut off below 867.
   * Settings and Help drop to icon-only (both keep aria-label/title) and the
   * bar tightens its gaps. */
  .topbar-inner { gap: var(--sp-5); padding: 0 var(--sp-6); }
}

@media (max-width: 960px) {
  /* Prevent the brand block from forcing the modes off-row. */
  .topbar-inner { gap: var(--sp-5); }
}

@media (min-width: 821px) and (max-width: 900px) {
  .topbar-actions { gap: var(--sp-2); }
  #topbar-settings .topbar-action-label, #topbar-help .topbar-action-label { display: none; }
  #topbar-settings.topbar-action-btn, #topbar-help.topbar-action-btn { padding: 0 var(--sp-4); min-width: 36px; justify-content: center; }
}

@media (max-width: 820px) {
  /* ── Build hero in topbar: hide on mobile (relocated to Army panel) ── */
  /* order: lives here, not in mobile.css: must precede `.topbar-hero-slot` {display} below (equal specificity, same element, display). */
  .build-hero--in-topbar, .topbar-hero-slot { display: none !important; }
}

@media (max-width: 1000px) {
  .topbar-hero-slot { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing here animates by default — but if a future addition uses a
   * transition for the responsive collapse, kill it under reduced
   * motion so the layout snaps rather than jitters. */
  .topbar-mode-tab, .topbar-action-btn, .army-toolbar .btn-sm { transition: none !important; }
}