/* ============================================================
   Forge Blacksmith Theme
   Load AFTER styles-bluebook.css — overrides chrome; content
   panels (passage, stem, choices) stay Bluebook-faithful.
   ============================================================ */

/* ─── TOKEN SYSTEM ──────────────────────────────────────────────────────── */
:root {
  /* === BASE === */
  --forge-base:           #17110D;
  --forge-surface:        #1F1710;
  --forge-surface-raised: #241A12;

  /* === BORDERS === */
  --forge-border:         #3A2C1E;
  --forge-border-subtle:  #2A2018;

  /* === TEXT === */
  --forge-text-primary:   #E8DFD3;
  --forge-text-secondary: #B8A990;
  --forge-text-tertiary:  #8A7A66;
  --forge-text-muted:     #6B5D4D;
  --forge-text-dim:       #5F5246;
  --forge-meta:           #9A8B77;

  /* === UI CHROME (steel) === */
  --forge-btn-bg:         #3A3028;
  --forge-btn-text:       #C4B8A8;
  --forge-btn-border:     #5A4D3E;
  --forge-btn-hover-bg:   #4A3F33;

  /* === EMPHASIS (forge-orange — data/scores ONLY, never UI chrome) === */
  --forge-emphasis:       #F5781F;

  /* === DIMENSION COLORS (LOCKED — do not change hues) === */
  --forge-dim-frame:      #FF6B35;
  --forge-dim-observe:    #F5C547;
  --forge-dim-reason:     #A78BFA;
  --forge-dim-gather:     #22D3EE;
  --forge-dim-execute:    #F43F5E;

  /* === BAR TRACKS === */
  --forge-bar-track:      #241A12;

  /* === TYPOGRAPHY === */
  --forge-font-display:   'Roboto Slab', Georgia, serif;
  --forge-font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* === EDGES === */
  --forge-radius-sm:      2px;
  --forge-radius-md:      4px;
  --forge-radius-none:    0px;
}

/* ─── BASE CHROME ───────────────────────────────────────────────────────── */
body {
  background: var(--forge-base);
  color: var(--forge-text-primary);
  font-family: var(--forge-font-display);
  -webkit-font-smoothing: antialiased;
}

/* Kill vibecoded tells */
* {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ─── TOP NAV ───────────────────────────────────────────────────────────── */
#top-nav {
  background: var(--forge-surface);
  border-bottom: 1px solid var(--forge-border);
}

.nav-logo {
  font-family: var(--forge-font-display);
  color: var(--forge-text-primary);
}
.nav-logo span {
  color: var(--forge-text-muted);
}

/* ─── PROGRESS BAR ──────────────────────────────────────────────────────── */
#progress-bar-wrap {
  background: var(--forge-border-subtle);
}
#progress-bar {
  background: var(--forge-emphasis);
  transition: width 0.4s ease;
}

/* ─── QUESTION COUNTER ──────────────────────────────────────────────────── */
.nav-step {
  font-family: var(--forge-font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--forge-text-tertiary);
  text-transform: uppercase;
}

/* ─── PICKER BANNER ─────────────────────────────────────────────────────── */
#picker-banner {
  background: var(--forge-surface-raised) !important;
  color: var(--forge-text-primary) !important;
  border-bottom: 1px solid var(--forge-border) !important;
  border-left-color: var(--forge-dim-frame) !important;
  font-family: var(--forge-font-display) !important;
}

/* ─── LOADING / STATUS SCREEN ───────────────────────────────────────────── */
.bb-screen,
.bb-screen-wide {
  color: var(--forge-text-primary);
}
.bb-title,
.bb-subtitle {
  color: var(--forge-text-secondary);
}

/* ─── STEEL BUTTONS ─────────────────────────────────────────────────────── */
/* Override Bluebook's blue primary buttons for forge steel.
   forge-theme.css loads after styles-bluebook.css; equal specificity means
   these rules win via cascade order. */
.bb-btn {
  background: var(--forge-btn-bg);
  color: var(--forge-btn-text);
  border: 1px solid var(--forge-btn-border);
  font-family: var(--forge-font-display);
  font-weight: 600;
  border-radius: var(--forge-radius-md);
  transition: background 0.15s ease;
}
.bb-btn:hover:not(:disabled) {
  background: var(--forge-btn-hover-bg);
  border-color: var(--forge-text-muted);
}
.bb-btn-primary {
  background: var(--forge-btn-bg);
  color: var(--forge-btn-text);
  border-color: var(--forge-btn-border);
}
.bb-btn-primary:hover:not(:disabled) {
  background: var(--forge-btn-hover-bg);
}
.bb-btn-secondary {
  background: var(--forge-btn-bg);
  color: var(--forge-btn-text);
  border-color: var(--forge-btn-border);
}
.bb-btn-ghost {
  background: transparent;
  color: var(--forge-text-secondary);
  border-color: var(--forge-border);
}
.bb-btn-ghost:hover:not(:disabled) {
  background: var(--forge-surface-raised);
  color: var(--forge-text-primary);
  border-color: var(--forge-btn-border);
}
.bb-btn:disabled,
.bb-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--forge-btn-bg);
  color: var(--forge-btn-text);
  border-color: var(--forge-border);
}

/* ─── SELECTED ANSWER ACCENT ────────────────────────────────────────────── */
/* Forge-orange left accent on the selected choice.
   Content area background/text stays Bluebook-faithful. */
.bb-choice.selected {
  border-left: 3px solid var(--forge-emphasis);
}
.bb-choice.selected .bb-choice-circle {
  background: var(--forge-emphasis);
  border-color: var(--forge-emphasis);
}

/* ─── DIVIDER LINE ──────────────────────────────────────────────────────── */
/* Brighter steel seam — the two panes differ by only ~6% brightness, so a
   visible divider makes the split read instantly. */
.bb-divider-line {
  background: var(--forge-btn-border);
}

/* ─── LINKS (chrome only — content area links inherit Bluebook styles) ──── */
a {
  color: var(--forge-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--forge-border);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--forge-text-primary);
}

/* ─── UTILITY CLASSES ───────────────────────────────────────────────────── */
.forge-meta {
  font-family: var(--forge-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--forge-text-tertiary);
  text-transform: uppercase;
}
.forge-label {
  font-family: var(--forge-font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--forge-text-tertiary);
  text-transform: uppercase;
}
.forge-score {
  font-family: var(--forge-font-display);
  font-weight: 700;
  color: var(--forge-emphasis);
}
.forge-card {
  background: var(--forge-surface);
  border: 1px solid var(--forge-border);
  border-radius: var(--forge-radius-md);
  padding: 14px 16px;
}
.forge-bar-track {
  height: 9px;
  background: var(--forge-bar-track);
  border-radius: var(--forge-radius-none);
  overflow: hidden;
}
.forge-bar-fill {
  height: 100%;
  border-radius: var(--forge-radius-none);
}
.forge-hard-edge {
  border-radius: var(--forge-radius-none) !important;
}

/* ─── CALCULATOR PANEL (chrome-adjacent, uses forge surface) ────────────── */
.bb-calc-panel {
  background: var(--forge-surface);
  border: 1px solid var(--forge-border);
  border-radius: var(--forge-radius-md);
}
.bb-calc-header {
  background: var(--forge-surface-raised);
  border-bottom: 1px solid var(--forge-border);
  color: var(--forge-text-secondary);
}

/* ─── KEYBOARD FOCUS (a11y) ─────────────────────────────────────────────── */
/* No visible focus ring existed for keyboard users on buttons/choices —
   :focus-visible shows it only for keyboard nav, leaving mouse clicks clean. */
.bb-btn:focus-visible,
.bb-choice:focus-visible,
.bb-choice-card:focus-visible,
.bb-spr-input:focus-visible,
.nav-step:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--forge-emphasis);
  outline-offset: 2px;
  border-radius: var(--forge-radius-sm);
}

/* ─── CALCULATOR ON SMALL PHONES ────────────────────────────────────────── */
/* The 360px fixed panel can overflow a narrow phone; clamp it to the viewport. */
@media (max-width: 480px) {
  .bb-calc-panel {
    width: auto;
    left: 8px;
    right: 8px;
    height: 60vh;
    max-height: 420px;
    bottom: 8px;
  }
}

/* ─── REDUCED MOTION (a11y) ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}