/* ══════════════════════════════════════════════════════════════════════════
   WT Law — Recent Cases: map state distinction, hero button, record modal
   The .st-* tier rules are scoped to .home, so they out-rank main.css on
   specificity as well as source order.
   All color/space/type values reference the theme tokens defined at :root.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Map: three permanent resting tiers (client request, Aug 2026) ────────── */
/* Tier 1  .st-office  GA / CA / FL          darkest gold  — offices
   Tier 2  .st-active  >= 1 case in repeater mid gold      — litigation history
   Tier 3  .st-base    everything else       faintest      — no presence
   Tiers are data-driven: PHP assigns .st-active from the Recent Cases repeater,
   so a state promotes itself the moment the client adds its first case.
   The :hover selectors pin each tier to its resting values — there is still no
   hover highlight; the ONLY transient brightening is the auto-tour spotlight.
   Scoped to .home so the Appellate clerkship-map hero (which shares the .st-*
   classes via main.css) is untouched regardless of where this file enqueues.

   TUNING KNOBS: the three fill alphas below (.045 / .18 / .45) are the tier
   separation. If tiers 2 and 3 mush together on the client's laptop, raise
   .18 toward .22 before touching anything else. */
.home .st-base,
.home .st-base:hover {
  fill: rgba(201, 168, 76, 0.045);
  stroke: rgba(201, 168, 76, 0.30);
  stroke-width: 0.75;
  cursor: default;
}
.home .st-active,
.home .st-active:hover {
  fill: rgba(201, 168, 76, 0.18);
  stroke: rgba(201, 168, 76, 0.55);
  stroke-width: 0.85;
  cursor: pointer;
}
.home .st-office,
.home .st-office:hover {
  fill: rgba(201, 168, 76, 0.45);
  stroke: var(--gold);
  stroke-width: 1.1;
  cursor: pointer;
}

/* Auto-tour spotlight: must now sit ABOVE the brightest resting tier (office,
   .45) or the tour disappears against the new fills. JS adds/removes
   .state-on; compound selectors beat the pinned :hover rules on specificity.
   .state-fade stays neutralized so the rest of the map — all three tiers —
   holds steady instead of dimming while the tour runs. */
.home .st-base.state-on,
.home .st-active.state-on,
.home .st-office.state-on,
.home .state-on {
  fill: rgba(201, 168, 76, 0.60);
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  opacity: 1;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.home .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; }
}