/* ============================================================
   SR App: the Library
   Editorial layer for the blog hub and articles. Loaded alongside
   styles.css, which owns the tokens, so the palette and type scale here
   are the app's, not a second design system.
   ============================================================ */

/* ---------- Shell ---------- */

.doc {
  background: var(--paper);
}

.doc-main {
  padding-top: calc(var(--nav-h) + 56px);
}

/* ---------- Library hero ---------- */

.lib-hero {
  border-bottom: 1px solid var(--border);
  padding: 64px 0 56px;
  background: var(--subtle);
  position: relative;
  overflow: hidden;
}

.lib-hero h1 {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.03;
  max-width: 16ch;
}

.lib-hero .lede {
  max-width: 62ch;
  margin-top: 22px;
}

/* ---------- Category filter ---------- */

.lib-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.lib-filter button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--mist);
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease-1),
    color 0.18s var(--ease-1);
}

.lib-filter button:hover {
  background: var(--mist-2);
}

.lib-filter button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.lib-filter button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- Article grid ---------- */

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 56px 0 96px;
}

.lib-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease-1),
    box-shadow 0.2s var(--ease-1),
    transform 0.2s var(--ease-1);
}

.lib-card:hover {
  border-color: var(--mist-2);
  box-shadow: 0 18px 44px #1330430f;
  transform: translateY(-2px);
}

.lib-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.lib-card[hidden] {
  display: none;
}

/* The pillar spans the row on wide viewports: it is the entry point. */
.lib-card--pillar {
  grid-column: 1 / -1;
  background: var(--ink);
  border-color: var(--ink);
  padding: 44px;
}

.lib-card--pillar .lib-card-title {
  color: var(--on-dark);
  font-size: clamp(28px, 3.4vw, 44px);
}

.lib-card--pillar .lib-card-deck,
.lib-card--pillar .lib-card-meta {
  color: var(--on-dark-muted);
}

.lib-card--pillar .lib-cat {
  background: #ffffff1f;
  color: var(--on-dark);
}

.lib-cat {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--mist);
  border-radius: 999px;
  padding: 5px 11px;
}

.lib-card-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink);
}

.lib-card-deck {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

.lib-card-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: var(--gray-m);
}

.lib-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  color: var(--gray-m);
}

/* ---------- Article ---------- */

.article {
  padding: 0 0 80px;
}

.article-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.article-head h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.07;
  margin: 18px 0 20px;
}

.article-deck {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--text-2);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--gray-m);
}

.article-body {
  max-width: 680px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink-2);
}

.article-body > * + * {
  margin-top: 26px;
}

.article-body h2 {
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 58px;
}

.article-body h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 38px;
}

.article-body a {
  color: var(--blue);
  text-underline-offset: 3px;
}

.article-body ul,
.article-body ol {
  padding-left: 1.25em;
}

.article-body li + li {
  margin-top: 10px;
}

.article-body strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Evidence verdict ---------- */

.verdict {
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  border-radius: 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sage);
  font-size: 16px;
  line-height: 1.62;
}

.verdict-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-m);
}

.verdict--supported {
  border-left-color: #1c7a4a;
}
.verdict--mixed {
  border-left-color: #9a6b12;
}
.verdict--unsupported,
.verdict--contradicted {
  border-left-color: #a33a2c;
}
.verdict--untested {
  border-left-color: var(--sage);
}

.verdict--supported .verdict-label {
  color: #15633b;
}
.verdict--mixed .verdict-label {
  color: #7d560d;
}
.verdict--unsupported .verdict-label,
.verdict--contradicted .verdict-label {
  color: #8c3124;
}

/* ---------- Pull quote ---------- */

.pull {
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--blue);
  margin: 44px 0;
}

/* ---------- Citations ---------- */

.refs {
  max-width: 680px;
  margin: 72px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.refs h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-m);
  margin-bottom: 18px;
}

.refs ol {
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-2);
}

.refs li + li {
  margin-top: 12px;
}

.refs .caveat {
  display: block;
  margin-top: 3px;
  color: var(--gray-m);
  font-size: 14px;
}

/* ---------- Article CTA ---------- */

.article-cta {
  max-width: 760px;
  margin: 76px auto 0;
  padding: 40px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--on-dark);
}

.article-cta h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.16;
  color: var(--on-dark);
}

.article-cta p {
  margin: 14px 0 24px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--on-dark-muted);
  max-width: 54ch;
}

/* ---------- Related ---------- */

.related {
  max-width: 1000px;
  margin: 80px auto 0;
}

.related h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-m);
  margin-bottom: 18px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* ---------- Breadcrumb ---------- */

.crumb {
  font-size: 14px;
  color: var(--gray-m);
}

.crumb a {
  color: var(--blue);
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .lib-card--pillar {
    padding: 30px;
  }
  .article-cta {
    padding: 28px;
  }
  .article-body {
    font-size: 17px;
  }
}

/* ---------- Evidence figures ----------
   Single series, so no legend: the caption names it. One hue carries the
   series and the highlighted row; every piece of text stays in an ink token
   so identity is never colour alone. The table is the accessible equivalent,
   not a fallback. */

.chart {
  margin: 44px 0;
  padding: 24px 24px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--subtle);
}

.chart-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 18px;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-svg .c-lbl {
  font: 500 13px var(--font-body);
  fill: var(--text-2);
}

.chart-svg .c-val {
  font: 600 13px var(--font-body);
}

.chart-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-m);
}

.chart-data {
  margin-top: 12px;
  font-size: 14px;
}

.chart-data summary {
  cursor: pointer;
  color: var(--blue);
  padding: 6px 0;
}

.chart-data summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.chart-data table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.chart-data th,
.chart-data td {
  text-align: left;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  color: var(--text-2);
}

.chart-data td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- Community sources ----------
   Deliberately styled as a second, distinct source list. A widely upvoted
   thread is evidence of what is commonly reported, not evidence that the
   reported cause is the real one, and the page should never let those two
   read as the same kind of citation. */

.refs--community {
  margin-top: 40px;
}

.refs-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-m);
  margin-bottom: 16px;
  max-width: 62ch;
}

.refs .src-meta {
  color: var(--gray-m);
}

/* ---------- Article FAQ ----------
   The body is technical on purpose. This is the same content compressed into
   questions someone would actually type, so a reader who wants the short
   answer can take it and leave. */

.article-faq {
  max-width: 760px;
  margin: 72px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.article-faq h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-m);
  margin-bottom: 6px;
}

.article-faq .faq-item summary {
  font-size: 17px;
  color: var(--ink);
}

.article-faq .faq-a {
  padding: 0 0 22px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--text-2);
  max-width: 68ch;
}

.article-faq .faq-a a {
  color: var(--blue);
  text-underline-offset: 3px;
}