/* ============================================================
   RESEARCH OBSESSIONS — /research/*.html
   Loaded after style.css. Reuses the resource-page shell
   (.res-hero / .res-body / .res-table) and adds only what the
   research track needs: the dateline, long-form prose rhythm,
   the card index, and the two subscribe placements.
   ============================================================ */

/* ---------- Breadcrumbs ---------- */
.research-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.research-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.research-crumbs a:hover,
.research-crumbs a:focus-visible {
  color: var(--green-primary);
  border-bottom-color: currentColor;
}

/* ---------- Dateline ----------
   First-class, not a byline afterthought: the whole promise of this
   section is that a claim carries the date it was last checked. */
.research-dateline {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-5);
  background: var(--green-highlight);
  border-left: 3px solid var(--green-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-sans);
}

.research-dateline__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-primary);
}

.research-dateline__date {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.research-draft-flag {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 103, 25, 0.1);
  border-left: 3px solid var(--orange-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-dark);
}

/* ---------- Tags ---------- */
.research-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.research-tags li {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
}

/* ---------- Prose ---------- */
.research-prose {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-dark);
}

.research-prose > p {
  max-width: 66ch;
  text-wrap: pretty;
}

.research-prose h3,
.research-prose h4,
.research-prose h5,
.research-prose h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.01em;
  max-width: 66ch;
}

.research-prose h3 { font-size: var(--text-xl); margin: var(--space-10) 0 var(--space-4); }
.research-prose h4 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.research-prose h5,
.research-prose h6 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-3); }

.research-prose a {
  color: var(--green-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.research-prose a:hover { text-decoration-thickness: 2px; }

.research-prose strong { font-weight: 600; }

.research-list {
  max-width: 66ch;
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
}

.research-list li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

.research-list li::marker { color: var(--green-mid); }

.research-quote {
  max-width: 66ch;
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 3px solid var(--green-mid);
}

.research-quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-dark);
}

.research-pre {
  overflow-x: auto;
  margin: 0 0 var(--space-8);
  padding: var(--space-5);
  background: var(--surface-ink);
  border-radius: var(--radius-md);
}

.research-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #E8E6E1;
}

.research-prose :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--light-grey);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

.research-rule {
  max-width: 66ch;
  margin: var(--space-12) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

/* Tables are the hero content, so they break the prose measure on purpose. */
.research-table-wrap {
  max-width: none;
  margin-top: var(--space-8);
}

.research-faq-q {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-2) !important;
}

/* ---------- Section index ---------- */
.research-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.research-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--text-dark);
  padding: var(--space-6);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.research-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.research-card__link { text-decoration: none; }

.research-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
  text-wrap: balance;
}

.research-card__link:hover .research-card__title { color: var(--green-primary); }

.research-card__desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.research-card__meta {
  margin: auto 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-primary);
  font-weight: 600;
}

.research-card .research-tags { margin-top: var(--space-2); }

.research-empty {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 55ch;
}

/* ---------- Inline subscribe (no gating) ----------
   Sits after the first table, where the reader has just been handed
   something useful. Nothing above it is hidden or blurred. */
.research-subscribe {
  display: block;
  max-width: none;
  margin: var(--space-12) 0;
  background: var(--surface-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.research-subscribe__inner {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
}

.research-subscribe__hi {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F9F9F9;
  margin: 0 0 var(--space-3);
}

.research-subscribe__benefit {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #C9C7C1;
  margin: 0;
  max-width: 46ch;
}

/* CTA-hey-1 native form: site tokens only, no third-party iframe. */
.research-subscribe__hi a,
.research-slidein__hi a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--green-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.research-subscribe__hi a:hover,
.research-slidein__hi a:hover { color: var(--green-light); }

.research-subscribe__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.research-subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--wop-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--wop-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.research-subscribe__input::placeholder { color: #8F8D88; }

.research-subscribe__input:focus {
  border-color: var(--green-light);
}

.research-subscribe__button {
  flex: 0 0 auto;
  padding: 12px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--surface-ink);
  background: var(--green-light);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.research-subscribe__button:hover:not(:disabled) { filter: brightness(1.08); }
.research-subscribe__button:disabled { opacity: 0.7; cursor: default; }

.research-subscribe__status {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--green-light);
}

.research-subscribe__status.is-error { color: #E8A87C; }

.research-subscribe__form.is-done .research-subscribe__fallback { display: none; }

.research-subscribe__fallback,
.research-slidein__fallback {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.research-subscribe--standalone {
  border-radius: 0;
  margin: 0;
}

.research-subscribe--standalone .research-subscribe__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}

/* ---------- Scroll slide-in ----------
   Revealed at 60% scroll depth by assets/research-subscribe.js.
   Dismissible, and the dismissal is remembered. */
.research-slidein {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  width: min(360px, calc(100vw - var(--space-8)));
  padding: var(--space-6);
  background: var(--surface-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  transform: translateY(calc(100% + var(--space-8)));
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}

.research-slidein[hidden] { display: none; }

.research-slidein.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.research-slidein__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: #C9C7C1;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.research-slidein__close:hover,
.research-slidein__close:focus-visible { color: var(--green-light); }

.research-slidein__hi {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #F9F9F9;
  margin: 0 0 var(--space-2);
}

.research-slidein__benefit {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #C9C7C1;
  margin: 0 0 var(--space-4);
}

.research-slidein .research-subscribe__row { margin-top: var(--space-1); }

/* ---------- Footer ----------
   Matches the live /faq footer (Dark Reading Room system): same wop tokens
   as body.blog-page .footer in style.css. */
body.research-page .footer {
  background: var(--wop-page);
  color: var(--wop-muted);
  border-top-color: var(--wop-border);
}

@media (prefers-reduced-motion: reduce) {
  .research-slidein { transition: none; }
  .research-card { transition: none; }
  .research-card:hover { transform: none; }
}

@media (max-width: 860px) {
  .research-subscribe__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 700px) {
  .research-cards { grid-template-columns: 1fr; }
  .research-slidein {
    right: var(--space-3);
    left: var(--space-3);
    bottom: var(--space-3);
    width: auto;
  }
  .research-dateline { width: 100%; }
}