/* Research hub pages. Loaded after the app's built stylesheet and reuses its tokens and classes.
   The header nav (.hub-sitenav) and topic pills share their styles with the app in app.css. */

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -3rem;
  z-index: 20;
  background: var(--surface);
  color: var(--accent);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent);
}
.skip-link:focus {
  top: var(--sp-2);
}

/* Help now is a link on static pages; match the app's pill button. */
a.btn-help {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ---------------------------------------------------------------- page frame */

/* List pages use the wide frame; intro text keeps a reading width. */
.hub > h1,
.hub > .lead {
  max-width: var(--measure);
}
.hub h1 {
  margin-bottom: var(--sp-3);
}
.hub .eyebrow a {
  color: inherit;
}

.hub-crumbs {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  color: var(--muted);
}

.hub-dates {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Entry pages: a centered reading column; on wide screens the study card becomes a sidebar. */
.hub-entry-page > .hub-crumbs,
.hub-entry {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .hub-entry-page:has(.hub-glance) > .hub-crumbs,
  .hub-entry:has(.hub-glance) {
    max-width: calc(var(--measure) + var(--sp-12) + 20rem);
  }
  .hub-entry:has(.hub-glance) {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) 20rem;
    column-gap: var(--sp-12);
    align-items: start;
  }
  .hub-entry > * {
    grid-column: 1;
  }
  .hub-entry > .hub-glance {
    grid-column: 2;
    grid-row: 1 / span 5;
    position: sticky;
    top: 5.5rem;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------- study card / at a glance */

/* A fact box with a header band. Mobile first: label above value. */
.hub-glance {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.hub-glance h2 {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-tint);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.hub-glance dl {
  margin: 0;
}
.hub-glance-row {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.hub-glance-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.hub-glance dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--muted);
  margin: 0 0 2px;
}
.hub-glance dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
@media (min-width: 36rem) and (max-width: 1023px) {
  .hub-glance-row {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: var(--sp-3);
  }
  .hub-glance dt {
    margin: 0;
  }
}

/* ---------------------------------------------------------------- topic pills */

/* One row of pills; scrolls sideways on phones instead of wrapping into a tall block. */
.topic-nav {
  margin: var(--sp-4) calc(-1 * var(--gutter)) var(--sp-6);
}
.topic-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 2px var(--gutter) var(--sp-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--gutter);
}
.topic-nav li {
  flex: none;
  scroll-snap-align: start;
}
.topic-nav a {
  white-space: nowrap;
}
.topic-nav a[aria-current='page'] {
  font-weight: var(--fw-bold); /* colors: shared pill rule in app.css */
}
@media (min-width: 768px) {
  .topic-nav {
    margin-left: 0;
    margin-right: 0;
  }
  .topic-nav ul {
    flex-wrap: wrap;
    padding: 0;
    overflow: visible;
  }
}

/* ---------------------------------------------------------------- entry lists as cards */

.hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .hub-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}
@media (min-width: 1024px) {
  .hub-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.hub-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.hub-item > :last-child {
  margin-bottom: 0;
}
.hub-item h2 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}
.hub-item h2 a {
  color: var(--ink-strong);
  text-decoration: none;
}
.hub-item h2 a:hover,
.hub-item h2 a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hub-empty {
  padding-top: var(--sp-4);
}

/* ---------------------------------------------------------------- entry body */

.hub-body {
  margin-top: var(--sp-5);
}
.hub-body h2 {
  margin-top: var(--sp-8);
}
.hub-body h3 {
  margin-top: var(--sp-6);
}
.hub-body ul,
.hub-body ol {
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-4);
}
.hub-body li {
  margin-bottom: var(--sp-2);
}
.hub-body blockquote {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}
.hub-body code {
  font-size: 0.92em;
  background: var(--accent-soft);
  padding: 0 0.25em;
  border-radius: 4px;
}
.hub-body pre {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.hub-body table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
}
.hub-body th,
.hub-body td {
  border: 1px solid var(--line);
  padding: var(--sp-2);
  text-align: left;
  vertical-align: top;
}

.hub-sources {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.hub-sources ol {
  padding-left: var(--sp-5);
  margin: 0;
}
.hub-sources li {
  margin-bottom: var(--sp-3);
}
.hub-source-id {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.hub-source-link {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
}
.hub-publisher {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- Help now (above the footer) */

.hub-crisis {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin: var(--sp-10) auto var(--sp-8);
  padding: var(--sp-5);
  background: var(--help-soft);
  border: 1px solid var(--help);
  border-radius: var(--radius-lg);
  scroll-margin-top: 8rem;
}
.hub-crisis-note {
  font-weight: var(--fw-bold);
  margin: var(--sp-2) 0 0;
}
@media (min-width: 768px) {
  .hub-crisis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-8);
    padding: var(--sp-6) var(--sp-8);
  }
  .hub-crisis > h2,
  .hub-crisis > .hub-crisis-note {
    grid-column: 1 / -1;
  }
}

@media print {
  .skip-link,
  .hub-sitenav,
  .topic-nav {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- trackers callout (policy topic page) */

.hub-callout {
  max-width: var(--measure);
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
}
.hub-callout h2 {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--accent-ink);
  margin: 0 0 var(--sp-1);
}
.hub-callout p {
  margin: 0;
}

/* ---------------------------------------------------------------- state law tracker (/policy/*) */

/* Mobile first: one column of state sections, each law a card like the library cards.
   Teal accent only; brick red (--help) stays reserved for crisis surfaces. */
.hub-tracker-page > p,
.hub-tracker-page > .hub-glance {
  max-width: var(--measure);
}
.tracker-states {
  margin-top: var(--sp-4);
}
.tracker-state {
  border-top: 1px solid var(--line);
  padding: var(--sp-6) 0 var(--sp-2);
  scroll-margin-top: 7.5rem;
}
.tracker-state h2 {
  margin: 0 0 var(--sp-4);
}
.tracker-law {
  max-width: 48rem;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.tracker-law > :last-child {
  margin-bottom: 0;
}
.tracker-law h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin: var(--sp-1) 0 var(--sp-2);
  overflow-wrap: break-word;
}
.tracker-bill {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent);
  margin-bottom: 2px;
}
.tracker-category {
  margin: 0;
}
.tracker-fields {
  margin: var(--sp-3) 0 0;
}
.tracker-fields .hub-glance-row {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.tracker-fields dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--muted);
  margin: 0 0 2px;
}
.tracker-fields dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
@media (min-width: 36rem) {
  .tracker-fields .hub-glance-row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--sp-3);
  }
  .tracker-fields dt {
    margin: 0;
  }
}
.tracker-official {
  margin: var(--sp-2) 0 0;
}
.tracker-official a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: var(--fw-bold);
}
.tracker-pending {
  border-top: 2px solid var(--line-strong);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
}
.tracker-pending > p {
  max-width: var(--measure);
}