/* ===== Global UI Polish — Plan 13 =====
   Card headers, nav refinements, spacing tweaks. */

/* ─── Card section headers: Orbitron ALL CAPS ────────────────────────────── */

.card-section h2,
.card h2 {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ─── Nav bar: slightly more prominent ───────────────────────────────────── */

.nav-tab {
  padding: 10px 2px 10px;
}

/* Active tab: label brightens to text */
.nav-tab.active .nav-tab-label {
  color: var(--accent);
}

/* ─── Appbar: breadcrumb view name uses Orbitron ─────────────────────────── */

#crumb-view {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── Engagement session uptime in appbar ────────────────────────────────── */

#session-uptime {
  font-family: var(--font-number, "JetBrains Mono", monospace);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  opacity: 0.7;
  white-space: nowrap;
}

/* ─── Hero name: ALL CAPS already, add identity color on Light side ──────── */

:root[data-side="light"] .hero-name {
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ─── View pane: add top scroll padding so sticky nav doesn't cut off ──────  */

.view-pane.active {
  scroll-margin-top: 120px;
  padding-bottom: 80px; /* clear cast bar */
}

/* ─── Quick roll card: monospace numbers ─────────────────────────────────── */

.quick-roll-result,
.roll-value,
.roll-total {
  font-family: var(--font-number, "JetBrains Mono", monospace);
}

/* ─── Action economy pills label polish ──────────────────────────────────── */

#action-economy::before {
  content: "ECONOMY";
  font-family: var(--font-ui, "Orbitron", sans-serif);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
  margin-right: 4px;
}

/* ─── Cast bar toggle label ──────────────────────────────────────────────── */

.holocron-tab-label {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ─── Holopad + dice console buttons: Orbitron ───────────────────────────── */

.cast-bar-tool-holopad,
.cast-bar-tool-dice {
  opacity: 0.8;
  transition: opacity var(--dur-fast, 200ms);
}

.cast-bar-tool-holopad:hover,
.cast-bar-tool-dice:hover {
  opacity: 1;
}

/* ─── Appbar: prevent overflow on small screens ─────────────────────────── */

/* Hide session uptime on very narrow screens */
@media (max-width: 480px) {
  #session-uptime { display: none; }
}

/* Abbreviate ENTER COMBAT on narrow screens */
@media (max-width: 380px) {
  #combat-mode-btn {
    font-size: 7px;
    padding: 6px 8px;
    letter-spacing: 0.08em;
  }
}

/* ─── Appbar actions: wrap gracefully ───────────────────────────────────── */

.appbar-actions {
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ─── SPELLS empty state for non-casters ────────────────────────────────── */

.spells-no-magic {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.spells-no-magic-label {
  font-family: var(--font-ui, "Orbitron", sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
}

.spells-no-magic-sub {
  font-family: var(--font-body, system-ui);
  font-size: var(--text-sm, 13px);
  color: var(--text-muted);
  opacity: 0.4;
}

/* ─── Tab content: fade in on activation ────────────────────────────────── */

.view-pane.active {
  animation: tab-fade-in var(--dur-fast, 200ms) var(--ease-enter, ease-out);
}

@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .view-pane.active { animation: none; }
}