/*
 * B&H Router styling additions (v36.204).
 * The router itself reuses the .v2-router styles from ff-intake-v36-203.css
 * (already loaded) since the class names match. This file adds ONLY the
 * pieces specific to B&H:
 *   1. Locked/unlocked state of the .bh-runbtn
 *   2. Missing-question outline on .v2-router__q.is-missing
 *   3. Router-section header override (so "8. ROUTE MY FUNDING" doesn't
 *      show the wrong number when the router card is used stand-alone)
 */

/* -------- Locked Run button gate -------- */
.bh-runbtn.is-locked {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
  box-shadow: none !important;
  pointer-events: auto; /* still clickable so we can nudge to router */
}
.bh-runbtn.is-locked:hover {
  transform: none !important;
}

/* -------- Missing-question visual cue (works for both F&F + B&H) -------- */
.v2-router__q.is-missing .v2-router__qtitle {
  color: #FF9F6E !important;
}
.v2-router__q.is-missing .v2-router__opts label {
  border-color: rgba(255, 159, 110, 0.35) !important;
}
.v2-router__req {
  color: #F26D50 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
}

/* -------- Router status "ready" state -------- */
.v2-router__status[data-state="ready"] {
  color: #A9E23E !important;
}

/* ==============================================================
 * F&F PANEL SWAP (v36.204)
 *   body.ff-results-mode hides the intake pane, gives results
 *   full-column focus, and shows the back bar above it.
 * ============================================================== */
body.ff-results-mode .v2-intake-pane {
  display: none !important;
}
/* When intake is hidden, results should behave as the primary panel */
body.ff-results-mode #v2-results {
  display: block !important;
  min-height: 60vh;
}
/* The results section starts in data-state="empty" which hides children;
   after Run it flips to a non-empty state. We only care about visibility
   of the pane container itself here. */

/* --- Back bar --- */
.ff-back-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px 12px;
  max-width: 920px;
  margin: 0 auto;
  /* Sticky at top of scroll container so operator can always exit */
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(10,12,16,0.95) 0%, rgba(10,12,16,0.85) 70%, rgba(10,12,16,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ff-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 22, 27, 0.55);
  border: 1px solid rgba(233, 237, 243, 0.15);
  color: #E9ECF2;
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  font-family: inherit;
}
.ff-back-btn:hover {
  border-color: #A9E23E;
  color: #A9E23E;
  background: rgba(169, 226, 62, 0.06);
}
.ff-back-btn__arrow {
  font-size: 14px;
  line-height: 1;
}
.ff-back-bar__meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #8E96A2;
  font-size: 13px;
}
.ff-back-bar__score {
  font-weight: 700;
  color: #F5F7FA;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ff-back-bar__tier {
  color: #B7BDC7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}
.ff-back-bar__sep { color: #4A5060; }

/* -------- Router section inside B&H intake -------- */
.bh-intake__section--router {
  /* Section head is rendered by bh-ltr-intake.js, but the router markup
     from bh-router-v36-204.js also has its own .v2-router__head (eyebrow +
     hint). Hide the router's own eyebrow when it's inside a B&H section
     wrapper to avoid duplication with the "8. ROUTE MY FUNDING" H3. */
}
.bh-intake__section--router .v2-router__eyebrow {
  display: none;
}
.bh-intake__section--router .v2-router {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bh-intake__section--router .v2-router__head {
  margin-bottom: 12px !important;
}