/* claude — Jurisdiction switcher (Federal | a state page): Thurgood-wide shared asset.
   Markup + script: partials/jurisdiction-switcher-claude.blade.php. Used by /non-attorney-representation
   and /representation. Tokens (--mk-*, --font-*) come from marketing-core-claude.css. Each page sets
   --tg-juris-gutter to its own content edge (the pinned switcher and its dropdown sit on it). */
/* ============================================================
   JURISDICTION SWITCHER — Federal (this page) | 50 state pages
   ============================================================ */
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* masthead tabs */
.tg-juris-slot { margin-top: 40px; }
.tg-juris { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tg-juris-tabs {
  display: inline-flex; padding: 4px; gap: 4px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.tg-juris-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.78);
  text-decoration: none; cursor: pointer; transition: background 0.14s, color 0.14s;
}
.tg-juris-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.tg-juris-tab:focus-visible { outline: 2px solid var(--mk-teal-6); outline-offset: 2px; }
.tg-juris-tab.is-current { background: #fff; color: var(--mk-teal-2); font-weight: 600; }
.tg-juris-tab.is-current:hover { color: var(--mk-teal-2); }
.tg-juris-tab svg { transition: transform 0.18s; }
.tg-juris-tab.is-open { color: #fff; background: rgba(255, 255, 255, 0.12); }
.tg-juris-tab.is-open svg { transform: rotate(180deg); }

/* state directory panel — drops open across the foot of the masthead */
.tg-juris-panel { border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.16); }
.tg-juris-panel[hidden] { display: none; }
.tg-juris-panel-inner { padding: 32px var(--tg-juris-gutter) 40px; }
.tg-juris-panel-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 22px;
}
.tg-juris-panel-note { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.tg-juris-filter input {
  box-sizing: border-box; width: 240px; padding: 10px 14px; border-radius: var(--mk-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06);
  font: inherit; font-size: 14.5px; color: #fff;
}
.tg-juris-filter input::placeholder { color: rgba(255, 255, 255, 0.45); }
.tg-juris-filter input:focus { outline: none; border-color: var(--mk-teal-6); background: rgba(255, 255, 255, 0.1); }
.tg-juris-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 20px;
}
.tg-juris-grid li[hidden] { display: none; }
.tg-juris-grid a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 8px;
  font-size: 14.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.86); text-decoration: none;
}
.tg-juris-grid a:hover,
.tg-juris-grid a:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.tg-juris-grid a:focus-visible { outline: 2px solid var(--mk-teal-6); outline-offset: 0; }
.tg-juris-code {
  flex-shrink: 0; width: 22px; line-height: 1;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--mk-teal-6);
}
.tg-juris-empty { margin: 4px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 1000px) {
  .tg-juris-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tg-juris-panel-head { flex-direction: column; align-items: stretch; }
  .tg-juris-filter input { width: 100%; }
}
@media (max-width: 620px) {
  .tg-juris { gap: 10px; }
  .tg-juris-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-juris-tab, .tg-juris-tab svg { transition: none; }
}

/* pinned — the switcher stays at the top of the screen once scrolled past; solid fill so it
   reads over the light page body */
.tg-juris.is-stuck { position: fixed; top: 16px; left: var(--tg-juris-gutter); z-index: 60; }
.tg-juris.is-stuck .tg-juris-tabs {
  background: var(--mk-teal-2); border-color: var(--mk-teal-3);
  box-shadow: 0 8px 24px rgba(7, 44, 44, 0.22);
}
/* while pinned, the state panel is a dropdown directly under the switcher */
.tg-juris-panel.is-floating {
  position: fixed; z-index: 60;
  top: 76px; left: var(--tg-juris-gutter); right: var(--tg-juris-gutter);
  max-width: 1000px; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--mk-teal-1); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--mk-radius); box-shadow: 0 18px 40px rgba(7, 44, 44, 0.3);
}
.tg-juris-panel.is-floating .tg-juris-panel-inner { padding: 24px 28px 28px; }
@media (max-width: 1000px) {
  .tg-juris-panel.is-floating .tg-juris-panel-inner { padding: 18px 16px 20px; }
}

/* state editions — the current state's pill stays white while its list is open, and the
   current state is marked in the list */
.tg-juris-tab.is-current.is-open { background: #fff; color: var(--mk-teal-2); }
.tg-juris-grid a.is-current { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; }

/* the switcher's left half is a static "Jurisdiction" label, not a control */
.tg-juris-tab.tg-juris-static,
.tg-juris-tab.tg-juris-static:hover { background: transparent; color: rgba(255, 255, 255, 0.78); cursor: default; }

/* Federal: first cell of the grid, the same box as a state's hover state, always filled + bolder */
.tg-juris-grid li.tg-juris-fed a { background: var(--mk-teal-4); font-weight: 600; color: #fff; }
.tg-juris-grid li.tg-juris-fed a.is-current { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.tg-juris-grid li.tg-juris-fed a:hover,
.tg-juris-grid li.tg-juris-fed a:focus-visible { background: var(--mk-teal-5); color: #fff; }
.tg-juris-grid li.tg-juris-fed .tg-juris-code { color: rgba(255, 255, 255, 0.75); }