/* TIER 1 — designed API surface (SPA-only styles). See docs/architecture/tiers.md.
 *
 * Intentionally minimal: each ported feature reuses its ORIGINAL stylesheet (character.css,
 * combat.css, …) so SPA views match the legacy pages 1:1. Only genuinely SPA-generic helpers live
 * here. Character/roster/sheet/wizard styling is owned by /static/character.css.
 */

/* generic loading/error text inside a freshly-mounted view (themed fallbacks) */
.char-sheet > .muted,
.char-wizard .wiz-body.err { color: var(--muted, #9a9488); }
.char-wizard .wiz-body.err { color: var(--danger, #e06c5a); }

/* Top-nav dropdowns (Legacy ▾ / Lab ▾ / Admin ▾) — CLICK to open; stays open until the next
 * click (item, the button again, outside) or Escape. `.open` is set by the shared Drop
 * component in views/nav.js (no hover-open — operator preference). */
.topbar-nav .nav-legacy { position: relative; display: inline-flex; }
.nav-legacy-btn {
  font: inherit; font-family: var(--font-mono); font-size: var(--fs-base); color: var(--muted);
  background: none; cursor: pointer; padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); border: 0.0625rem solid transparent;
  transition: color 160ms var(--ease-soft, ease), border-color 160ms var(--ease-soft, ease);
}
.nav-legacy:hover .nav-legacy-btn,
.nav-legacy.open .nav-legacy-btn { color: var(--accent); border-color: var(--border); }
.nav-legacy-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 60;
  min-width: 10.75rem; padding: var(--sp-4); flex-direction: column; gap: var(--sp-1);
  background: var(--panel-2, #1e1710); border: 0.0625rem solid var(--border, #3a2e1d);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-drop-md);
}
.nav-legacy.open .nav-legacy-menu { display: flex; }
.nav-legacy-tag {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: var(--sp-1) var(--sp-7) var(--sp-4);
}
.nav-legacy-menu a {
  color: var(--muted); font-size: var(--fs-base); padding: var(--sp-4) var(--sp-7); border-radius: var(--r-lg);
  border: 0.0625rem solid transparent; white-space: nowrap;
}
.nav-legacy-menu a:hover {
  color: var(--text); background: rgba(var(--accent-rgb, 224, 121, 44), .10); text-decoration: none;
}