/* ──────────────────────────────────────────────────────────────────
 * researchers.css — /researchers public page + /researchers/dashboard
 * ────────────────────────────────────────────────────────────────── */

/* ══════════ PAGE SHELL ══════════ */
/* ITEM 8 — THE PAGE WAS 240px NARROWER THAN ITS SISTERS, and this line was the
   whole of it: 960px against .value-page's 1200px. Same max-width and the same
   1.5rem side padding now, so /researchers, /value and /contributors all render
   their content at 1180px. */
/* ITEM 2 — THE REMAINING 48px WAS THIS RULE'S OWN SIDE PADDING. max-width was
   already 1200px after ac391fa, so the page box matched /contributors at 1180
   — but `padding: 0 1.5rem 4rem` then held every section 24px in on each side,
   rendering them at 1132 against /contributors' 1180. landing.css:384 gives
   .stub-page `padding: 1.5rem 0 3rem` — NO side padding — and the outer gutter
   comes from .public-main, which is 1244 wide on both pages. Side padding
   dropped here for the same reason. */
.res-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 4rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--landing-text-primary, #2B2A26);
}

/* ══════════ HERO ══════════ */
.res-hero {
  padding: 1.75rem 0 1.5rem;
  border-bottom: 1px solid var(--landing-card-border, #E8E6DC);
  margin-bottom: 2.5rem;
}
.res-hero-accent-bar {
  width: 48px;
  height: 4px;
  background: var(--landing-accent, #B64926);
  margin-bottom: 0.75rem;
}
.res-hero-title {
  font-family: 'Khand', sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.res-hero-tagline {
  font-family: 'Khand', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0 0 1.25rem 0;
}
.res-hero-intro {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0;
  max-width: 780px;
}

/* ══════════ SECTION PATTERN ══════════ */
.res-section {
  margin-bottom: 3rem;
}
/* R4 — the eyebrow matches .ai2-eyebrow, which is what /contributors renders:
   12px, weight 600, .24em tracking, 5px below. The colour stays the muted ink
   the colour budget set at f97f5e2, not the accent this rule used to carry. */
.res-section-label {
  display: block;
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tml-ink-muted);
  margin-bottom: 5px;
}
/* R4 — /RESEARCHERS ADOPTS /CONTRIBUTORS' SECTION HEADING TREATMENT EXACTLY.
   Copied from h2.contrib-h2 in value.css value for value: 48px, weight 600,
   line-height 1.02, tracking -0.015em, --tml-ink, 12px bottom margin. It was
   2.2rem/700/1.0 in a warm non-token ink. Item 9 asked for an h1; that was
   REJECTED on the operator's own ruling — the page would carry five h1
   elements. It is a size problem and this is the size. */
/* ELEMENT-QUALIFIED, and it has to be: public.css:30 `.public-body h2` is
   (0,1,1) and was holding this at 26.4px against a bare (0,1,0) class. Exactly
   the trap h2.contrib-h2 documents in value.css. */
h2.res-section-headline,
.res-section-headline {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 600;
  color: var(--tml-ink);
  margin: 0 0 12px 0;
  letter-spacing: -0.015em;
  line-height: 1.02;
}
.res-section-intro {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0 0 1.5rem 0;
  max-width: 780px;
}

/* ══════════ WHY JOIN — VALUE GRID ══════════ */
.res-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.res-value-card {
  padding: 1.25rem 1.35rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 8px;
  position: relative;
}
.res-value-num {
  font-family: 'Khand', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  display: block;
  margin-bottom: 0.35rem;
}
.res-value-title {
  font-family: 'Khand', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 0.45rem 0;
  position: relative;
  padding-top: 0.5rem;
}
.res-value-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  background: var(--landing-accent, #B64926);
  border-radius: 2px;
}
.res-value-card p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0;
}

/* ══════════ HOW IT WORKS — STEPS ══════════ */
.res-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.res-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
}
.res-step-num {
  font-family: 'Khand', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  line-height: 1;
  text-align: center;
}
.res-step-content {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--landing-card-border, #E8E6DC);
}
.res-step:last-of-type .res-step-content {
  border-bottom: none;
  padding-bottom: 0;
}
.res-step-title {
  font-family: 'Khand', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 0.35rem 0;
}
.res-step-content p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0;
}
.res-step-connector {
  display: none; /* connectors handled by border-bottom on step content */
}

/* ══════════ GAP BOARD ══════════ */
.res-gap-board {
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 10px;
  padding: 1.25rem;
  min-height: 200px;
}
.res-gap-loading {
  text-align: center;
  color: var(--landing-text-muted, #5A5A57);
  font-style: italic;
  padding: 2rem 0;
}
.res-gap-empty {
  text-align: center;
  color: var(--landing-text-muted, #5A5A57);
  font-style: italic;
  padding: 2rem 0;
  margin: 0;
}
.res-gap-group {
  margin-bottom: 1.25rem;
}
.res-gap-group:last-child {
  margin-bottom: 0;
}
.res-gap-uc {
  font-family: 'Khand', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--landing-card-border, #E8E6DC);
}
.res-gap-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: var(--landing-text-muted, #5A5A57);
  font-weight: 400;
  margin-left: 0.5rem;
}
.res-gap-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(232, 230, 220, 0.5);
}
.res-gap-row:last-child {
  border-bottom: none;
}
.res-gap-sev {
  font-family: 'Khand', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}
.res-sev-critical {
  background: #B64926;
  color: white;
}
.res-sev-high {
  background: #D4A843;
  color: var(--tml-ink);
}
.res-sev-medium {
  background: var(--tml-divider);
  color: #5A5A57;
}
.res-sev-low {
  background: #F0EDE1;
  color: var(--tml-sev-low);
}
.res-gap-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.res-gap-topic {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  line-height: 1.3;
}
.res-gap-interviewee {
  font-size: 0.72rem;
  color: var(--landing-text-muted, #5A5A57);
}
.res-gap-claim {
  padding: 0.35rem 0.85rem;
  background: transparent;
  border: 1.5px solid var(--landing-accent, #B64926);
  color: var(--landing-accent, #B64926);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
.res-gap-claim:hover {
  background: var(--landing-accent, #B64926);
  color: white;
}
.res-gap-footer {
  font-size: 0.75rem;
  color: var(--landing-text-muted, #5A5A57);
  text-align: center;
  margin: 1rem 0 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--landing-card-border, #E8E6DC);
}

/* ══════════ ACCESS SPLIT (Login / Apply) ══════════ */
.res-access-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.res-access-card {
  padding: 1.5rem 1.5rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 10px;
}
.res-access-login {
  border-top: 3px solid var(--landing-accent, #B64926);
}
.res-access-apply {
  border-top: 3px solid #D4A843;
}
.res-access-title {
  font-family: 'Khand', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 0.45rem 0;
}
.res-access-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0 0 1rem 0;
}
.res-login-form,
.res-apply-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.res-input {
  padding: 0.65rem 0.85rem;
  background: white;
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--landing-text-primary, #2B2A26);
}
.res-input:focus {
  outline: none;
  border-color: var(--landing-accent, #B64926);
  box-shadow: 0 0 0 3px rgba(194, 69, 28, 0.08);
}
.res-textarea {
  resize: vertical;
  min-height: 70px;
}
select.res-input {
  cursor: pointer;
}
.res-btn-primary {
  padding: 0.65rem 1.25rem;
  background: var(--landing-accent, #B64926);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms;
  align-self: flex-start;
}
.res-btn-primary:hover {
  background: var(--landing-accent-deep, #8B2F15);
}
.res-btn-secondary {
  padding: 0.65rem 1.25rem;
  background: transparent;
  color: var(--landing-accent, #B64926);
  border: 1.5px solid var(--landing-accent, #B64926);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms;
  align-self: flex-start;
}
.res-btn-secondary:hover {
  background: var(--landing-accent, #B64926);
  color: white;
}

/* ══════════ RESEARCHER PROFILES ══════════ */
.res-profiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}
.res-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  /* R1 — MEASURED BEFORE FIXING, and the operator's read was right. These
     cards were `var(--landing-card-bg, #FAFAF7)`. landing.css:19 overrides
     --landing-card-bg to the literal #FAFAF7, which is WARM — red minus blue
     is +3 — against Design Language §1.2, "every neutral is cool", and against
     every canonical surface: --tml-surface #F6F8F8 is −2, --tml-surface-raised
     #FBFDFD is 0. The fallback hex was a second hardcode on the same line.
     BOTH ARE GONE. The cards now take --tml-surface-raised, the same ground as
     the settled card in the payment section below them, and the lift edge. */
  background: var(--tml-surface-raised);
  border: 1px solid var(--tml-border-deep);
  border-radius: 6px;
  text-align: center;
}
.res-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--landing-accent, #B64926);
  color: white;
  font-family: 'Khand', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.res-profile-name {
  font-family: 'Khand', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
}
.res-profile-role {
  font-size: 0.72rem;
  color: var(--landing-text-muted, #5A5A57);
}
.res-profile-stat {
  font-family: 'Khand', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--landing-accent, #B64926);
  letter-spacing: 0.04em;
}

/* ══════════ TOAST ══════════ */
.res-toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 200;
  pointer-events: none;
}
.res-toast {
  background: var(--landing-text-primary, #2B2A26);
  color: var(--landing-card-bg, #FAFAF7);
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-width: 360px;
  animation: resToastIn 220ms ease-out;
  pointer-events: auto;
}
.res-toast-exit { animation: resToastOut 220ms ease-in forwards; }
@keyframes resToastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes resToastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ══════════ DASHBOARD PAGE ══════════ */
.res-dash {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--landing-text-primary, #2B2A26);
}
.res-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--landing-card-border, #E8E6DC);
  margin-bottom: 2rem;
}
.res-dash-title {
  font-family: 'Khand', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  margin: 0;
  line-height: 1;
}
.res-dash-subtitle {
  font-family: 'Khand', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #5A5A57);
}
.res-dash-meta {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
}
.res-dash-stat {
  font-family: 'Khand', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
}
.res-dash-stat-label {
  font-family: 'Khand', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #5A5A57);
  margin-left: 0.3rem;
}

/* Dashboard filters */
.res-dash-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.res-dash-filter {
  padding: 0.4rem 0.85rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--landing-text-primary, #2B2A26);
  cursor: pointer;
  transition: all 150ms;
}
.res-dash-filter:hover,
.res-dash-filter.active {
  border-color: var(--landing-accent, #B64926);
  color: var(--landing-accent, #B64926);
}
.res-dash-filter.active {
  background: rgba(194, 69, 28, 0.08);
}

/* Dashboard UCID cards */
.res-dash-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.res-dash-ucid {
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 200ms;
}
.res-dash-ucid:hover {
  border-color: var(--landing-accent, #B64926);
}
.res-dash-ucid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}
.res-dash-ucid-name {
  font-family: 'Khand', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  flex: 1;
}
.res-dash-ucid-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.res-dash-ucid-gap-count {
  font-family: 'Khand', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
}
.res-dash-ucid-chevron {
  font-size: 0.75rem;
  color: var(--landing-accent, #B64926);
  margin-left: 0.5rem;
}
.res-dash-ucid-body {
  padding: 0 1.15rem 1rem;
}
.res-dash-ucid-body[hidden] { display: none; }

/* Dashboard gap rows (reuse public page styles with minor tweaks) */
.res-dash-gap-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(232, 230, 220, 0.5);
}
.res-dash-gap-row:last-child {
  border-bottom: none;
}
.res-dash-gap-question {
  font-size: 0.78rem;
  color: var(--landing-text-muted, #5A5A57);
  line-height: 1.4;
  margin-top: 0.15rem;
}
.res-dash-gap-impact {
  font-size: 0.72rem;
  color: var(--landing-accent, #B64926);
  font-style: italic;
  margin-top: 0.1rem;
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 768px) {
  .res-value-grid { grid-template-columns: 1fr; }
  .res-access-split { grid-template-columns: 1fr; }
  .res-profiles-grid { grid-template-columns: repeat(2, 1fr); }
  .res-dash-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .res-gap-row,
  .res-dash-gap-row { grid-template-columns: 70px 1fr; }
  .res-gap-claim { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  .res-hero-title { font-size: 2.4rem; }
  .res-profiles-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Profile photos (replaces avatar initials) ── */
.res-profile-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--landing-card-border, #E8E6DC);
  margin-bottom: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   /RESEARCHERS — THE COMMUNITY PAGE (DEC-0267)
   ══════════════════════════════════════════════════════════════════════════
   Credibility and thought leadership: who is behind the corpus, how the
   network works, what it will become. Its only action is a pointer to
   /contributors plus sign-in. No new graphics — no SVG, no canvas, no
   animation anywhere in this block.

   THE DARK HERO IS GONE. Only /value and /contributors carry a hero banner;
   the page-head block is now the top of this page. .res-hero-sec and
   .res-hero-solo are removed below rather than left orphaned.

   COLOUR BUDGET, and it is spent exactly here: the page-head h1 and kicker
   (existing, not touched), the two path cards' top rules, the WHAT WE ACCEPT
   panel border and its four card rules, the COMING SOON badges, the close
   panel's sign-in top edge, and the two buttons. Nowhere else. */

/* ── SECTION RHYTHM ───────────────────────────────────────────────────────
   Same model /value and /contributors use: separation is SPACE and a HAIRLINE,
   never a band. Sections that are panels carry their own edge instead, so a
   heavy rule and a panel border never stack 2rem apart. */
.res-community > .res-sec + .res-sec {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 3px solid var(--tml-border-deep);
}
.res-community > .res-sec { margin-top: 2.5rem; }
.res-community > .res-sec.res-accept,
.res-community > .res-sec.res-standing,
.res-community > .res-sec.res-close { border-top: none; padding-top: 0; }

.res-community .res-section-headline { max-width: 26ch; }
.res-community .res-section-intro { max-width: 68ch; }

/* ── 3 · WHO CONTRIBUTES ─────────────────────────────────────────────────
   Six cells on this page — five people plus the seats cell — against five on
   /contributors, which renders a different trailing cell. Each page sets its
   own flag; the partial renders neither by default. */
.res-community .res-profiles-grid { grid-template-columns: repeat(6, 1fr); }
.res-profile-seats {
  justify-content: center;
  border-style: dashed;
  border-color: var(--tml-border-deep);
  background: none;
}

/* ── 4 · TWO WAYS TO CONTRIBUTE ──────────────────────────────────────────
   Two cards, each carrying its type on a 4px TOP rule. Design Language §4 —
   a card's type is carried by a border, never by a tinted background. */
.res-paths {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-top: 1.4rem;
}
.res-path {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-top: 4px solid var(--tml-primary);
  border-radius: 6px;
  padding: 1.4rem 1.6rem 1.5rem;
}
.res-path-head {
  display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap; margin-bottom: 0.6rem;
}
.res-path-label {
  font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.3rem; line-height: 1.1; color: var(--tml-ink);
}
.res-path-body {
  margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.6;
  color: var(--tml-ink-body);
}
.res-path-foot {
  margin: 0; padding-top: 0.75rem;
  border-top: 1px solid var(--tml-border);
  font-size: 0.82rem; line-height: 1.5; color: var(--tml-ink-muted);
}

/* ── 5 · WHAT WE ACCEPT — THE HEAVIEST BLOCK ON THE PAGE ─────────────────
   Filled ground plus a 2px brand border on all four sides: the same device
   /contributors gives its licence block, because this is the section that has
   to be read. §1.10 — #FBFDFD on the page ground is a real step; the four
   inner cards then take --tml-surface so they read as objects on it. */
.res-accept-inner {
  background: var(--tml-surface-raised);
  border: 2px solid var(--tml-primary);
  border-radius: 6px;
  padding: 2rem 2.25rem 2.15rem;
}
.res-accept-body {
  margin: 0 0 0.9rem; max-width: 74ch;
  font-size: 1rem; line-height: 1.62; color: var(--tml-ink-body);
}
.res-accept-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin: 1.35rem 0 0;
}
.res-accept-card {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-left: 3px solid var(--tml-primary);
  border-radius: 6px;
  padding: 1.05rem 1.25rem 1.15rem;
}
h3.res-accept-card-head,
.res-accept-card-head {
  margin: 0 0 0.35rem; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.25rem; line-height: 1.12; color: var(--tml-ink);
}
.res-accept-card-body {
  margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--tml-ink-body);
}
.res-accept-rule {
  border: none; height: 1px; background: var(--tml-border);
  margin: 1.75rem 0 1.35rem;
}
h3.res-accept-demand-head,
.res-accept-demand-head {
  margin: 0 0 0.6rem; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.75rem; line-height: 1.1; color: var(--tml-ink); max-width: 30ch;
}

/* ── 6 · HOW THE NETWORK WORKS ───────────────────────────────────────────── */
.res-how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem; margin-top: 1.4rem;
}
.res-how-card {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 1.2rem 1.4rem 1.3rem;
}
h3.res-how-head,
.res-how-head {
  margin: 0 0 0.4rem; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.25rem; line-height: 1.12; color: var(--tml-ink);
}
.res-how-body {
  margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--tml-ink-body);
}

/* ── 7 · WHAT STANDING BUYS ──────────────────────────────────────────────
   Filled panel, 1px border — a step below WHAT WE ACCEPT by design, since the
   order gives that section the heaviest treatment and this one a plain one. */
.res-standing-inner {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 2rem 2.25rem 2.15rem;
}
.res-standing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-top: 1.4rem;
}
.res-standing-card {
  background: var(--tml-surface-raised);
  border: 1px solid var(--tml-border-deep);
  border-radius: 6px;
  padding: 1rem 1.15rem 1.1rem;
}
h3.res-standing-head,
.res-standing-head {
  margin: 0 0 0.3rem; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.15rem; line-height: 1.12; color: var(--tml-ink);
}
.res-standing-body {
  margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--tml-ink-body);
}

/* ── 9 · THE EXCHANGE ────────────────────────────────────────────────────
   Dashed on the whole block, because the section is scaffolding and the edge
   should say so before a word is read. The ghost bars are decorative and
   aria-hidden; the card titles and lines are real text, so they are NOT
   dimmed — only the bars are. */
.res-forum { position: relative; }
.res-community > .res-sec.res-forum {
  border: 2px dashed var(--tml-border-deep);
  border-radius: 6px;
  padding: 1.9rem 2.1rem 2rem;
}
.res-forum-head { display: flex; align-items: center; gap: 0.7rem; }
.res-forum-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem; margin-top: 1.4rem;
  opacity: 1;
}
.res-forum-card {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 1.15rem 1.3rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
h3.res-forum-card-head,
.res-forum-card-head {
  margin: 0; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.2rem; line-height: 1.12; color: var(--tml-ink);
}
.res-forum-card-body {
  margin: 0 0 0.35rem; font-size: 0.9rem; line-height: 1.5;
  color: var(--tml-ink-body);
}
.res-forum-line {
  display: block; height: 11px; width: 100%;
  border-radius: 6px; background: var(--tml-chart-track);
  opacity: 0.55;
}
.res-forum-line-short { width: 62%; }

/* ── 10 · CLOSE ──────────────────────────────────────────────────────────
   Filled panel, two columns. The sign-in card keeps a 3px brand top edge —
   it is the page's second action and the budget allows exactly that. */
.res-close-inner {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 2rem 2.25rem 2.15rem;
}
.res-close-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; align-items: start; margin-top: 0;
}
.res-close-btn { display: inline-block; margin-top: 1.1rem; text-decoration: none; }
.res-close .res-access-card {
  background: var(--tml-surface-raised);
  border: 1px solid var(--tml-border-deep);
  border-top: 3px solid var(--tml-primary);
  border-radius: 6px;
  padding: 1.4rem 1.6rem 1.5rem;
  margin: 0;
}

/* ══════════ RULES THAT MUST NOT BE LOST WITH THE OLD BLOCK ══════════
   .res-pillar-chip, .res-pillar-chips and .res-badge-soon lived in the block
   this pass replaced. Redefined here rather than left to fall back to
   unstyled inline text — the audit caught all three rendering at 16px with no
   box, which is what a dropped rule looks like. */
.res-pillar-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem;
}
.res-pillar-chip {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--tml-border-deep);
  border-radius: 6px;
  background: var(--tml-surface);
  font-family: 'Khand', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tml-ink-muted);
}
/* THE COMING SOON BADGE IS ON THE COLOUR BUDGET, so it carries the brand as a
   FILL rather than as ink. Orange ink on the page ground measures 3.99:1 and
   fails the 4.5 floor; --tml-on-primary on a --tml-primary fill is 4.62:1 and
   passes, and it reads as a badge rather than as a coloured word. */
.res-badge-soon {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  background: var(--tml-primary);
  color: var(--tml-on-primary);
  font-family: 'Khand', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

/* 🔴 THE SECTION LABELS COME OFF ORANGE, and the audit forced it twice over.
   researchers.css paints .res-section-label in --tml-primary; on the page
   ground that is 3.99:1, UNDER the 4.5 floor this order sets, and seven of
   them are not on the operator's colour budget, which ends "Nowhere else".
   The labels/meta ink fixes both in one declaration. Same call made on
   /contributors at ffa39d6, and it overrides Design Language §2.3's "section
   headings are orange" for the same stated reason: the budget is a later,
   page-specific operator ruling. Scoped to .res-community. */
.res-community .res-section-label { color: var(--tml-ink-muted); }

/* ITEM 11 — the four accept cards take numerals, brand orange, to the LEFT of
   the copy. Same device the /contributors question cards use, same colour: all
   four orange there, all four orange here. On --tml-surface that is 4.73:1. */
.res-accept-card {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
}
.res-accept-num {
  font-family: 'Khand', sans-serif; font-weight: 700;
  font-size: 2.4rem; line-height: 0.92; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tml-primary);
}

/* ITEM 15 / R5 — every chip is a link to /universe, full page width, and every
   chip the same size. PADE-POC is named across the site with nowhere to learn
   it; /universe is where it is shown. `flex: 1 1 0` with a shared basis makes
   the seven equal rather than text-width. */
.res-pillar-chips { display: flex; flex-wrap: nowrap; gap: 0.5rem; width: 100%; }
a.res-pillar-chip {
  flex: 1 1 0; min-width: 0; text-align: center; text-decoration: none;
  display: block;
}
a.res-pillar-chip:hover {
  border-color: var(--tml-primary); color: var(--tml-primary); text-decoration: none;
}
a.res-pillar-chip:focus-visible { outline: 2px solid var(--tml-primary); outline-offset: 3px; }

/* ITEM 16 — the badge sits on the block's upper-right corner, straddling the
   dashed border. The section is position:relative already. */
.res-forum-badge {
  position: absolute; top: 0; right: 1.6rem;
  transform: translateY(-50%);
}

/* R7 — the cross-reference, placed straight after what qualifies. */
.res-community > .res-sec.res-xref-sec { border-top: none; padding-top: 0; margin-top: 1.5rem; }
.res-xref-btn { display: inline-block; text-decoration: none; }

/* ══════════ ITEM 1 — THE TITLE HIERARCHY WAS INVERTED ══════════
   MEASURED BEFORE THE FIX: h1 "AI² Associate Researchers" rendered 38.4px
   while every h2.res-section-headline rendered 48px — the page title was
   SMALLER than the sections under it.
   THE RULING: same size, and COLOUR carries the hierarchy instead. The title
   keeps the brand orange it already had; the section headings stay in ink.
   48px is /contributors' section-heading size, which is the reference.
   SCOPED: .ai2-page-title is rendered by the SHARED _page_head partial on
   every converted page, so this is wrapped in a page-local .res-pagehead-scope
   rather than applied to the class globally. */
.res-pagehead-scope .ai2-page-title {
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* ══════════ ITEM 4 — THE PILLAR BUTTONS ══════════
   4A — taller and larger: 35.9px tall at 12.8px type becomes ~56px at 1.05rem.

   4B — 🔴 THE OPERATOR ASKED FOR ORANGE ON FOUR AND BLUE ON THREE, AND THE
   DESIGN LANGUAGE DOES NOT MERELY PERMIT THAT — IT SPECIFIES IT.
   AI2_Design_Language.md §1.7, verbatim: "The product is organised into seven
   pillars across two planes. Four are the data plane — Produce, Augment,
   Distribute, Experience. Three are the control plane — Protect, Orchestrate,
   Comply. Orange is the data plane. Steel blue is the control plane and
   nothing else."
   That is exactly the requested split, pillar for pillar, and it is doctrine
   rather than decoration.

   AND THE BLUE IS TOKENISED. tokens-neutral-canonical.css:325-328 declares
   --poc-primary #4A5568 (fill), --poc-primary-deep, --poc-primary-light and
   --poc-primary-bg, as the single source for the POC control plane, operator-
   ruled 30 Aug. No hex is written here and nothing is invented.

   The "no navy" caution does not apply: "navy" appears ZERO times in
   AI2_Design_Language.md. It comes from DECISIONS.md:1459 / BL-230, which is
   about the ILLUSTRATION palette and carries an explicit illustration-vs-UI
   split. Slate is not navy, and this is UI. */
.res-pillar-chips { gap: 0.6rem; }
a.res-pillar-chip {
  padding: 1rem 0.75rem;
  font-size: 1.05rem;
  letter-spacing: .1em;
  border-width: 1px;
  border-style: solid;
}
a.res-pillar-chip.res-pillar-data {
  background: var(--tml-primary);
  border-color: var(--tml-primary);
  color: var(--tml-on-primary);
}
a.res-pillar-chip.res-pillar-control {
  background: var(--poc-primary);
  border-color: var(--poc-primary);
  color: var(--tml-on-primary);
}
a.res-pillar-chip.res-pillar-data:hover {
  background: var(--tml-ramp-6); border-color: var(--tml-ramp-6); color: var(--tml-on-primary);
}
a.res-pillar-chip.res-pillar-control:hover {
  background: var(--poc-primary-deep); border-color: var(--poc-primary-deep); color: var(--tml-on-primary);
}

@media (max-width: 900px) {
  .res-pillar-chips { flex-wrap: wrap; }
  a.res-pillar-chip { flex: 0 0 auto; }
  .res-community .res-profiles-grid { grid-template-columns: repeat(2, 1fr); }
  .res-paths { grid-template-columns: 1fr; }
  .res-accept-grid { grid-template-columns: 1fr; }
  .res-how-grid { grid-template-columns: 1fr; }
  .res-standing-grid { grid-template-columns: 1fr 1fr; }
  .res-forum-grid { grid-template-columns: 1fr; }
  .res-close-cols { grid-template-columns: 1fr; }
}