/* ══════════════════════════════════════════════════════════════════════════
   WT Law — Recent Cases: map state distinction, hero button, record modal
   Loaded AFTER main.css so the .st-* overrides win on equal specificity.
   All color/space/type values reference the theme tokens defined at :root.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Map: one quiet resting color for every state ────────────────────────── */
/* All states rest at the same dim color. GA / CA / FL (.st-office) are left
   exactly as the base theme styles them and are intentionally exempt. There is
   no hover highlight — the ONLY thing that ever brightens a state is the
   auto-tour spotlight (.state-on, below). Win-states keep a pointer cursor
   because clicking one still opens the Nationwide Record modal. */
.st-base,
.st-active,
.st-base:hover,
.st-active:hover {
  fill: rgba(201, 168, 76, 0.045);
  stroke: rgba(201, 168, 76, 0.30);
  stroke-width: 0.75;
}
.st-base { cursor: default; }
.st-active { cursor: pointer; }
.st-office { cursor: pointer; }

/* Auto-tour spotlight: the state the script jumps to takes the GA/CA/FL office
   colors, then releases as the tour advances (JS adds/removes .state-on).
   Compound selectors so this wins over the neutral hover rule even if the
   cursor happens to be over the lit state. .state-fade is neutralized so the
   rest of the map — office states included — holds steady instead of dimming. */
.st-base.state-on,
.st-active.state-on,
.st-office.state-on,
.state-on {
  fill: rgba(201, 168, 76, 0.14);
  stroke: rgba(201, 168, 76, 0.72);
  stroke-width: 1;
  opacity: 1;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.state-fade { opacity: 1; }

/* Tooltip "click to view" affordance (appended in main.js showTip). */
.map-tip .tip-cta {
  display: block;
  margin-top: 0.55rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
}

/* ── Hero: the "View Our Nationwide Record" button (ghost of .btn-primary) ── */
.btn-record {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(231, 199, 153, 0.45);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.btn-record:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.btn-record:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Auto-tour pause/play control (injected by main.js into the hero CTA row,
   WCAG 2.2.2). A quiet pill that sits beside the CTAs — always visible, in the
   keyboard tab order right after them, and never hidden behind the header. */
.map-tour-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.map-tour-toggle .mtt-glyph {
  font-size: 0.8rem;
  line-height: 1;
  color: var(--gold);
}
.map-tour-toggle:hover {
  color: var(--gold-bright);
  background: var(--gold-dim);
  border-color: rgba(231, 199, 153, 0.45);
}
.map-tour-toggle:hover .mtt-glyph { color: var(--gold-bright); }
.map-tour-toggle:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Hide the tour pause/play pill where the map is gone. main.css sets both
   .map-container and #heroCanvas to display:none at <=640px, so there is no
   visible auto-motion at that width and no WCAG 2.2.2 control is required.
   NOTE: at 641-900px the map is NOT hidden — it drops to a faint opacity:.12
   ambient background whose auto-tour may still animate. If that tour runs at
   that tier, this control must stay to satisfy 2.2.2, which is why the hide
   stops at 640 and does not extend up to the 900px hamburger breakpoint. */
@media (max-width: 640px) {
  .map-tour-toggle { display: none; }
}

/* ── Modal shell ─────────────────────────────────────────────────────────── */
html.rc-modal-open { overflow: hidden; }

.rc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.rc-modal[hidden] { display: none; }

.rc-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 10, 0.82);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  animation: rcFade var(--med) var(--ease);
}

.rc-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-height: 86vh;
  background: linear-gradient(155deg, #12121e, #0c0c16);
  border: 1px solid rgba(201, 168, 76, 0.20);
  border-top: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: rcRise var(--med) var(--ease);
  overflow: hidden;
}

.rc-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--silver);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.rc-modal__close:hover { color: var(--gold-bright); background: rgba(231, 199, 153, 0.10); }
.rc-modal__close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.rc-modal__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.rc-modal__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.rc-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--headline-white);
  line-height: 1.1;
}
.rc-modal__intro {
  margin: 0.7rem 0 0;
  max-width: 56ch;
  font-size: var(--fs-small);
  color: var(--silver);
  line-height: 1.6;
}

/* ── Jump nav ────────────────────────────────────────────────────────────── */
.rc-modal__jump {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: rgba(8, 8, 16, 0.6);
}
.rc-modal__jump ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.rc-modal__jump a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.rc-modal__jump a:hover { color: var(--gold-bright); border-color: rgba(231, 199, 153, 0.5); background: var(--gold-dim); }
.rc-modal__jump a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.rc-jump__count {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
}

/* ── Body / state sections ───────────────────────────────────────────────── */
.rc-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  -webkit-overflow-scrolling: touch;
}
.rc-modal__body:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: -2px;
}

.rc-state {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
  scroll-margin-top: var(--sp-2);
}
.rc-state:last-child { border-bottom: none; }
.rc-state:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
.rc-state--flash .rc-state__head { color: var(--gold-bright); }
.rc-state--flash {
  animation: rcFlash 1.4s var(--ease);
}

.rc-state__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.8rem;
  margin: 0 0 var(--sp-2);
}
.rc-state__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--headline-white);
}
.rc-state__count {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.rc-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.rc-case {
  padding-left: var(--sp-2);
  border-left: 2px solid rgba(231, 199, 153, 0.30);
}
.rc-case__badge {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.16rem 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--obsidian);
  background: var(--gold);
  border-radius: 2px;
}
.rc-case__summary {
  margin: 0 0 0.4rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--platinum);
}
.rc-case__cite {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--silver);
}
.rc-case__name {
  font-style: italic;
  color: var(--gold);
}
.rc-case__pa {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.rc-modal__foot {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--border);
  background: rgba(8, 8, 16, 0.6);
}
.rc-modal__foot p {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--dim);
  font-style: italic;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes rcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcRise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes rcFlash {
  0% { background: rgba(231, 199, 153, 0.10); }
  100% { background: transparent; }
}

/* ── Responsive: full-height sheet on phones ─────────────────────────────── */
@media (max-width: 600px) {
  .rc-modal { padding: 0; }
  .rc-modal__dialog {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .rc-modal__head,
  .rc-modal__jump,
  .rc-modal__body,
  .rc-modal__foot { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rc-modal__overlay,
  .rc-modal__dialog,
  .rc-state--flash { animation: none; }
  .btn-record,
  .map-tour-toggle,
  .rc-modal__close,
  .rc-modal__jump a { transition: none; }
}