/*
 * The /research pages (action 4). Loaded AFTER the site's own built stylesheet,
 * so every token, type role and component here is the site's (docs/DESIGN.md):
 * black canvas, the brand/accent blue split, Barlow. This file only lays the
 * library out; it declares no new token and no new colour.
 *
 * Bracket colours (red/yellow/green) appear in exactly one place, the column
 * heads of a standards table, because that table IS about performance bands.
 * Everything else uses the neutral outline chip or the accent (DESIGN.md §10).
 */

/* The header's mobile menu, without JavaScript: a <details> disclosure. */
.rl-menu { position: relative; }
.rl-menu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--spacing-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.rl-menu__toggle::-webkit-details-marker { display: none; }
.rl-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing-2));
  width: min(320px, 90vw);
  padding: var(--spacing-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* Same width as .site-header__desktop in src/components/Header.css (render.test.ts). */
@media (min-width: 1024px) {
  .rl-menu { display: none; }
}

.rl-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.rl-crumbs li + li::before { content: "/"; margin-right: var(--spacing-2); color: var(--color-text-subtle); }
.rl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.rl-crumbs [aria-current] { color: var(--color-text-muted); display: inline-flex; align-items: center; min-height: 44px; }

.rl-title { max-width: 26ch; }
.rl-answer {
  max-width: 68ch;
  padding-left: var(--spacing-4);
  border-left: 2px solid var(--color-accent);
}

.rl-draft {
  align-self: flex-start;
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-accent);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-sm);
}

.rl-layout {
  display: grid;
  gap: var(--spacing-12);
}
@media (min-width: 1200px) {
  .rl-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .rl-aside { position: sticky; top: calc(var(--header-clear, 88px)); }
}
.rl-article { min-width: 0; }

.rl-table-wrap { overflow-x: auto; }
.rl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rl-table th, .rl-table td {
  padding: var(--spacing-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.rl-table thead th { border-bottom-color: var(--color-border-strong); }
.rl-table tbody th { font-weight: 600; white-space: nowrap; }
.rl-open { color: var(--color-text-subtle); }
.rl-band { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; }
.rl-band--red { color: var(--color-priority); }
.rl-band--yellow { color: var(--color-functional); }
.rl-band--green { color: var(--color-exceptional); }
.rl-standards__label .chip { margin-right: var(--spacing-2); white-space: normal; } /* the long label wraps on a phone (Batch 2 release QA) */

.rl-nums { display: grid; gap: var(--spacing-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.rl-quote {
  margin: 0;
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.rl-quote blockquote { margin: 0; }

.rl-cards, .rl-links, .rl-people, .rl-related { padding: 0; margin: 0; list-style: none; }
.rl-cards { display: grid; gap: var(--spacing-4); }
.rl-card cite { font-style: normal; }
.rl-card__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.rl-card a, .rl-related a { display: inline-flex; align-items: center; min-height: 44px; }

.rl-links { display: grid; gap: var(--spacing-4); }
@media (min-width: 768px) {
  .rl-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-people { display: grid; gap: var(--spacing-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rl-link a { display: inline-flex; min-height: 44px; align-items: center; }

.rl-glossary { margin: 0; }
.rl-term dd { margin: var(--spacing-2) 0 0; max-width: 68ch; }

.rl-caveat { padding-top: var(--spacing-6); border-top: 1px solid var(--color-border); }

/* Batch 3 return (18 Oct 2026): a key-number card is never split across a printed page. */
.rl-num { break-inside: avoid; page-break-inside: avoid; }
.rl-subtitle { color: var(--color-text-muted, inherit); }