/* 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;
  }
  /* Not sticky: the card is taller than most windows, so sticking hid its own bottom rows. */
  .hub-entry > .hub-glance {
    grid-column: 2;
    grid-row: 1 / span 5;
    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 strong,
.tracker-fields dd strong {
  font-weight: var(--fw-bold);
}
.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);
  scrollbar-width: none; /* the cut-off pill already signals more */
}
.topic-nav ul::-webkit-scrollbar {
  display: none;
}
.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-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.hub-item > :last-child {
  margin-bottom: 0;
}
.hub-item h2,
.hub-item h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}
.hub-item h2 a,
.hub-item h3 a {
  color: var(--ink-strong);
  text-decoration: none;
}
.hub-item h2 a:hover,
.hub-item h2 a:focus-visible,
.hub-item h3 a:hover,
.hub-item h3 a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hub-item .hub-dates {
  margin-bottom: var(--sp-3);
}
.hub-empty {
  padding-top: var(--sp-4);
}

/* ---------------------------------------------------------------- related reading (entry pages) */

.hub-related {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hub-related > h2 {
  margin-bottom: var(--sp-4);
}
.hub-related > p {
  margin-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);
}
/* The guide's crisis note: a soft help band in ink, not a muted aside. Wording is unchanged. */
.hub-guide-page .hub-body blockquote {
  color: var(--ink);
  background: var(--help-soft);
  border-left: 4px solid var(--help);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-5);
}
.hub-guide-page .hub-body blockquote p {
  margin: 0;
}
.hub-guide-page .hub-body blockquote p + p {
  margin-top: var(--sp-2);
}
.hub-guide-page .hub-body blockquote strong {
  color: var(--help);
}
.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);
}
/* Tables look like the study card: a bordered surface with a tinted header band. On narrow
   screens the table scrolls sideways inside its wrapper; the page itself never scrolls sideways. */
.hub-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--sp-5) 0 var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}
.hub-table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hub-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.hub-body th,
.hub-body td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
  overflow-wrap: break-word;
}
.hub-body th + th,
.hub-body td + td {
  border-left: 1px solid var(--line);
}
.hub-body thead th {
  border-top: 0;
  background: var(--surface-tint);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--line);
}
.hub-body tbody tr:first-child td {
  border-top: 0;
}
.hub-body tbody td:first-child {
  font-weight: var(--fw-bold);
}
/* Phones: each row becomes a card and every cell after the first shows its column header
   (data-label, set in markdown.ts), so no column hides off-screen. */
@media (max-width: 35.99rem) {
  .hub-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .hub-body table {
    min-width: 0;
  }
  .hub-body thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hub-body tbody,
  .hub-body tr {
    display: block;
  }
  .hub-body tr {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .hub-body td {
    display: block;
    border: 0 !important;
    padding: var(--sp-1) 0;
  }
  .hub-body td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--muted);
  }
  .hub-body tbody td:first-child {
    font-family: var(--serif);
    font-size: var(--fs-lg);
    padding-bottom: var(--sp-2);
  }
}

.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-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  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(--muted); /* teal is for things you can click */
  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;
}
/* "Covers addiction counselors?" is the question the page answers: a soft band makes it scannable. */
.tracker-fields .tracker-key {
  background: var(--accent-soft);
  margin: 0 calc(-1 * var(--sp-3));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border-top-color: transparent;
}
.tracker-fields .tracker-key + .hub-glance-row {
  border-top-color: transparent;
}
.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-top {
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-2);
}
.tracker-top a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
#states {
  scroll-margin-top: 7.5rem;
}
/* Phones and tablets: all 19 states wrap into view instead of a hidden sideways row. */
.hub-tracker-page .tracker-nav {
  margin-left: 0;
  margin-right: 0;
}
.hub-tracker-page .tracker-nav ul {
  flex-wrap: wrap;
  overflow: visible;
  padding: 0;
  gap: var(--sp-2);
}
.hub-tracker-page .tracker-nav a {
  padding: var(--sp-1) var(--sp-3);
}
@media (min-width: 768px) {
  .hub-item,
  .tracker-law {
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radius-lg);
  }
}
/* Desktop: the empty right column becomes a sticky state list; the return links are not needed. */
@media (min-width: 1024px) {
  .tracker-layout {
    display: grid;
    grid-template-columns: minmax(0, 48rem) 13rem;
    column-gap: var(--sp-12);
    align-items: start;
  }
  .tracker-layout > .tracker-nav {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 5.5rem;
    margin: var(--sp-6) 0 0;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
  }
  .tracker-layout > .tracker-states {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  .hub-tracker-page .tracker-layout > .tracker-nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    border-left: 1px solid var(--line);
  }
  .hub-tracker-page .tracker-layout > .tracker-nav a {
    min-height: 32px;
    padding: var(--sp-1) var(--sp-4);
    border: 0;
    border-radius: 0;
    margin-left: -1px;
    border-left: 2px solid transparent;
  }
  .hub-tracker-page .tracker-layout > .tracker-nav a:hover {
    border-left-color: var(--accent);
    background: transparent;
    color: var(--ink);
  }
  .tracker-top {
    display: none;
  }
}
.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);
}

/* ---------------------------------------------------------------- guides list on /research */

.hub-guides ul {
  margin: 0;
  padding-left: var(--sp-5);
}
.hub-guides li {
  margin-bottom: var(--sp-2);
}

/* ---------------------------------------------------------------- guide "On this page" */

.hub-toc {
  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);
}
.hub-toc-title {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-1);
}
.hub-toc ol {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm); /* numbers match the link size */
}
.hub-toc li {
  margin: 0;
}
.hub-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
}
.hub-guide-page .hub-body h2 {
  scroll-margin-top: 6.5rem;
}
@media (min-width: 1024px) {
  .hub-guide-page .hub-entry {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) 16rem;
    column-gap: var(--sp-12);
    max-width: calc(var(--measure) + var(--sp-12) + 16rem);
    align-items: start;
  }
  .hub-guide-page .hub-entry > * {
    grid-column: 1;
  }
  .hub-guide-page .hub-entry > .hub-toc {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 5.5rem;
    margin-top: 0;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------- recovery access database (/access/*) */

/* Reuses the tracker's state cards and state nav. Each record has two field groups (the law,
   getting it in practice), a "what this does not mean" band, sources, and a change history. */
.hub-access-page > p,
.hub-access-page > .hub-callout {
  max-width: var(--measure);
}
.access-record .access-group-title {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: var(--sp-5) 0 0;
}
.access-record > .hub-dates {
  margin: 0;
}
.access-caveat {
  margin-top: var(--sp-5);
}
.access-caveat .tracker-key {
  border-top-color: transparent;
}
.access-sources ol {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
}
.access-sources li {
  margin-bottom: var(--sp-3);
}
.access-sources .hub-source-id {
  display: block;
}
/* Sources sit close together in a card: keep every link at least 24px tall (WCAG 2.5.8). */
.access-sources .hub-source-link {
  padding: 4px 0;
  min-height: 24px;
}
.access-history {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-2);
}
.access-history summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent);
}
.access-history ol {
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
}
.access-record-page {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hub-access-page .hub-callout ul {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-5);
}
.hub-access-page .hub-callout li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.access-datasets .tracker-nav {
  margin-top: var(--sp-3);
}