:root {
  color-scheme: light;
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --ink: #17212b;
  --ink-soft: #52606d;
  --line: #dce2e7;
  --line-strong: #c5cfd8;
  --brand: #123c5a;
  --brand-bright: #176b87;
  --brand-soft: #e9f4f7;
  --finding: #a7352a;
  --finding-soft: #fff0ed;
  --confirmed: #236a51;
  --confirmed-soft: #eaf7f1;
  --warning: #785717;
  --warning-soft: #fff8e6;
  --shadow: 0 18px 55px rgba(23, 33, 43, 0.08);
  --radius: 18px;
  --content: 760px;
  --wide: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 15% -10%, rgba(23, 107, 135, 0.12), transparent 34rem),
    var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--brand-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  border-radius: 4px;
  outline: 3px solid #5bb6ce;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.reading-progress {
  position: fixed;
  z-index: 90;
  inset: 0 auto auto 0;
  width: 0;
  height: 3px;
  background: var(--brand-bright);
}

.site-header {
  border-bottom: 1px solid rgba(197, 207, 216, 0.8);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
}

.site-header__inner,
.site-footer__inner {
  width: min(calc(100% - 2rem), var(--wide));
  margin: 0 auto;
}

.site-header__inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--brand);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  width: 36px;
  height: 36px;
  display: block;
}

.header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.header-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}



.home-hero,
.article-index,
.article-page,
.link-preview {
  width: min(calc(100% - 2rem), var(--wide));
  margin-inline: auto;
}

.home-hero {
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5rem);
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--brand-bright);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.14;
  text-wrap: balance;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

h2 {
  margin: 3.5rem 0 1rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
}

h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}

.home-hero h1 {
  max-width: 930px;
}

.home-hero__dek {
  max-width: 760px;
  margin: 1.4rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.article-index {
  padding-bottom: 6rem;
}

.section-heading {
  margin-bottom: 1.4rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line-strong);
}

.section-heading h2 {
  margin: 0 0 1rem;
}

.section-heading > p {
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
}

.article-search {
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.article-search label {
  margin-bottom: 0.4rem;
  display: block;
  font-weight: 750;
}

.article-search__controls {
  display: flex;
  gap: 0.6rem;
}

.article-search input {
  min-width: 0;
  padding: 0.7rem 0.75rem;
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font: inherit;
}

.article-search .button {
  flex: 0 0 auto;
}

.article-search__message {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}

.article-card {
  min-height: 310px;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(23, 33, 43, 0.04);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.article-card:first-child {
  grid-column: 1 / -1;
}

.article-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.article-card__meta,
.article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.article-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.article-card__top .article-card__meta {
  flex: 1;
}

.article-card__thumbnail-wrap {
  position: relative;
  z-index: 1;
  width: 180px;
  flex: 0 0 180px;
}

.article-card__thumbnail {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #050a15;
}

.article-card__thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-card__thumbnail picture {
  display: block;
}

/* Social charts are 1200x630 with axes and labels at the edges, so they are
   letterboxed inside the 16:9 frame instead of cropped. */
.article-card__thumbnail--chart {
  border: 1px solid var(--line);
  background: #fff;
}

.article-card__thumbnail--chart img {
  object-fit: contain;
}

.article-card__image-credit {
  margin-top: 0.35rem;
  display: block;
  color: var(--ink-soft);
  font-size: 0.67rem;
  line-height: 1.3;
}

.article-card__image-credit a,
.article-main-image__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article-card h3 {
  margin: 1.15rem 0 0.7rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.article-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.article-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.article-card {
  position: relative;
}

.article-card > p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
}

.article-card__footer {
  margin-top: auto;
  padding-top: 1.4rem;
}

.confidence-badge {
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid #bad9e2;
  border-radius: 0.75rem;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.node-kind-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid #bad9e2;
  border-radius: 0.5rem;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.node-kind-tag--draft {
  margin-left: 0.35rem;
  border-color: #d2a13f;
  background: var(--warning-soft);
  color: var(--warning);
}

.node-dependents small {
  display: block;
  color: var(--ink-soft);
}

.node-dependents details {
  margin-top: 1rem;
}

/* Two columns on wide screens: the article (title, main image, charts, body)
   runs down the left, and the side column (verdict, contents, audits, share)
   down the right. The side spans every row, so however tall the verdict card
   is, the body starts right under the byline and the left never goes blank. */
.article-page {
  margin-top: 3.5rem;
  padding-bottom: 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.article-page > * {
  grid-column: 1;
  min-width: 0;
}

.article-page > .article-side {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: stretch;
}

.article-hero {
  margin-bottom: 2.25rem;
}

.article-hero h1 {
  max-width: 820px;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.article-hero__image {
  margin-bottom: 2.5rem;
}

.article-hero__image .article-main-image {
  width: 100%;
  max-width: 740px;
  margin: 0;
}

/* Lead charts and thumbnails of the rest, under the hero (#385). */
.article-charts {
  margin: 0 0 3rem;
  display: grid;
  gap: 1.75rem;
}

.article-lead-charts {
  display: grid;
  gap: 1.5rem;
}

.article-lead-charts--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-lead-chart {
  margin: 0;
}

.chart-thumbnails h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.chart-thumbnails ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.chart-thumbnails a {
  height: 100%;
  padding: 0.6rem;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}

.chart-thumbnails a:hover,
.chart-thumbnails a:focus-visible {
  border-color: var(--brand);
}

.chart-thumbnails__image svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 760px) {
  .article-lead-charts--pair {
    grid-template-columns: 1fr;
  }

  .chart-thumbnails ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.article-dek {
  max-width: 740px;
  margin: 1.3rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.55;
}

.byline {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.byline strong {
  color: var(--ink);
}

.article-main-image {
  width: min(calc(100% - 2rem), var(--content));
  margin: 0 auto 3rem;
}

.article-main-image picture,
.article-main-image img {
  display: block;
  width: 100%;
}

.article-main-image img {
  height: auto;
  border-radius: var(--radius);
  background: #050a15;
  box-shadow: var(--shadow);
}

.article-main-image figcaption {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.article-main-image__credit {
  max-width: 340px;
  text-align: right;
  font-weight: 700;
}

.verdict-card {
  overflow: hidden;
  border: 1px solid #edc9c2;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.verdict-card__top {
  padding: 1.2rem 1.35rem 1rem;
  background: var(--finding-soft);
}

.verdict-card__top p {
  margin: 0;
  color: #71342e;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.verdict-card__top strong {
  display: block;
  margin-top: 0.1rem;
  color: var(--finding);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.verdict-card dl {
  margin: 0;
  padding: 1rem 1.35rem 1.2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  font-size: 0.84rem;
}

.verdict-card dt {
  color: var(--ink-soft);
}

.verdict-card dd {
  margin: 0;
  font-weight: 750;
  text-align: right;
}

/* Rating colors (#195). Each label sets --rating and --rating-soft; the
   evidence labels sit off the true-false scale. */
.rating--true { --rating: #1d5e3f; --rating-soft: #e6f4ec; --rating-line: #b9dcc8; }
.rating--mostly-true { --rating: #2e6b36; --rating-soft: #eef7e8; --rating-line: #c6e0bc; }
.rating--mixed { --rating: #6f5200; --rating-soft: #fff6dc; --rating-line: #ecd79c; }
.rating--misleading { --rating: #8f4310; --rating-soft: #fff0e3; --rating-line: #efcaa8; }
.rating--false { --rating: #a7352a; --rating-soft: #fff0ed; --rating-line: #edc9c2; }
.rating--no-evidence { --rating: #8a3b46; --rating-soft: #fbeef1; --rating-line: #e6c3ca; }
.rating--unproven { --rating: #4a5763; --rating-soft: #eef1f4; --rating-line: #cfd6dd; }

.verdict-card[class*="rating--"] {
  border-color: var(--rating-line);
}

.verdict-card__claim {
  padding: 1.1rem 1.35rem 0.95rem;
  border-bottom: 1px solid var(--line);
}

.verdict-card__why {
  padding: 1rem 1.35rem 0.95rem;
  border-bottom: 1px solid var(--line);
}

.verdict-card__claim p,
.verdict-card__why > p:first-child,
.verdict-card[class*="rating--"] .verdict-card__top > p:first-child {
  margin: 0 0 0.25rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.verdict-card__claim blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
}

.verdict-card[class*="rating--"] .verdict-card__top {
  background: var(--rating-soft);
}

.verdict-card[class*="rating--"] .verdict-card__top > p:first-child {
  color: var(--rating);
}

.verdict-card[class*="rating--"] .verdict-card__label {
  color: var(--rating);
  font-size: 1.6rem;
}

.verdict-card .verdict-card__reason {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}

.verdict-card__key {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.7rem 1.35rem 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

.verdict-card__key span {
  color: var(--brand);
  font-weight: 850;
}

.rating-key {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.rating-key__item {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rating-line);
  border-radius: 12px;
  background: var(--rating-soft);
}

.rating-key__item dt,
.rating-key__item dd {
  margin: 0;
}

.rating-pill {
  color: var(--rating);
  font-weight: 850;
}

.cite-box {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.cite-box > p {
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cite-box blockquote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.cite-box blockquote a {
  display: block;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.update-history {
  margin: 0;
  padding-left: 1.2rem;
}

.update-history time {
  margin-right: 0.5rem;
  font-weight: 750;
}

@media (max-width: 600px) {
  .rating-key__item {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.share-panel {
  margin-top: 0.8rem;
}

.publication-hero .share-panel {
  max-width: 22rem;
  margin-top: 1.25rem;
}

.share-label {
  margin: 0 0 0.45rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.share-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
}

.share-row .button {
  padding: 0.55rem;
}

.share-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.share-brand-icon {
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.share-brand-icon--linkedin {
  font-size: 1rem;
  letter-spacing: -0.08em;
}

.share-brand-icon--x {
  font-size: 1rem;
  font-weight: 600;
}

.share-status {
  min-height: 1.2rem;
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

/* A one-line pointer to the follow strip at the end of the page. */
.share-follow {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.button {
  min-height: 42px;
  padding: 0.58rem 0.9rem;
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 750;
}

.button:hover:not(:disabled) {
  border-color: var(--brand-bright);
  background: var(--brand-soft);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Under the verdict: contents, then audits and sharing. It sticks as one
   piece while the article scrolls, and scrolls inside itself if it is taller
   than the window. */
.article-rail {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding-top: 1.5rem;
}

.toc {
  padding-top: 1rem;
  display: grid;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.toc p {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toc a {
  color: inherit;
  text-decoration: none;
}

.article-body {
  min-width: 0;
}

.claim-box {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-left: 5px solid var(--finding);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}

.claim-box > p {
  margin: 0 0 0.4rem;
  color: var(--finding);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.claim-box blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.16rem, 2.4vw, 1.45rem);
  font-weight: 650;
  line-height: 1.45;
}

.answer {
  padding: 1.05rem 1.2rem;
  border-radius: 14px;
  background: var(--brand);
  color: white;
}

.answer strong {
  color: #bcecf5;
}

.summary-card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.summary-card h3 {
  margin-top: 0;
  font-size: 1rem;
}

.summary-card li + li,
.method-list li + li {
  margin-top: 0.5rem;
}

.context-callout,
.editorial-note,
.independence-note {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--brand-bright);
  background: var(--brand-soft);
}

.publication-hero,
.publication-body {
  width: min(900px, calc(100% - 2rem));
  margin-inline: auto;
}

.publication-hero {
  padding-block: 3rem 1.5rem;
}

.publication-body > section,
.publication-body > aside,
.publication-body > figure {
  margin-block: 2rem;
}

.publication-metadata {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
}

.publication-metadata dt {
  font-weight: 700;
}

.publication-metadata dd {
  margin: 0;
}

.published-chart {
  margin-block: 1.5rem;
}

.published-chart img,
.published-chart svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #fff;
}

.published-chart figcaption {
  margin-top: 0.65rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* An evidence chart spans the card, not the indented text column (#382). */
.detail-body > .published-chart {
  margin-left: -2.2rem;
}

/* The expand button sits under the chart's right edge, so it never covers
   data. */
.chart-expand {
  width: 44px;
  height: 44px;
  margin: 0.5rem 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand);
  cursor: pointer;
}

.chart-expand[hidden] {
  display: none;
}

.chart-expand:hover {
  border-color: var(--brand-bright);
  background: var(--brand-soft);
}

/* Scoped to beat the .published-chart svg rule for chart drawings. */
.published-chart .chart-expand__icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  background: none;
}

.published-chart .chart-expand__icon--close,
.published-chart--expanded .chart-expand__icon--open {
  display: none;
}

.published-chart--expanded .chart-expand__icon--close {
  display: block;
}

/* Expanded, the figure covers the viewport and the chart grows to the largest
   size that fits, keeping its aspect ratio (--chart-aspect, set by site.js). */
html.chart-expanded-open {
  overflow: hidden;
}

figure.published-chart--expanded {
  --chart-viewport-height: 100vh;
  --chart-caption-space: 7rem;
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  padding: 4rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: auto;
  background: var(--surface);
}

@supports (height: 100dvh) {
  figure.published-chart--expanded {
    --chart-viewport-height: 100dvh;
  }
}

.published-chart--expanded > :not(.chart-expand) {
  flex: none;
  width: min(100%, calc((var(--chart-viewport-height) - 5rem - var(--chart-caption-space)) * var(--chart-aspect, 1.7778)));
  margin: 0;
}

.published-chart--expanded .chart-expand {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  margin: 0;
}

.published-chart--expanded::after {
  display: none;
  content: "Turn your phone sideways for a larger chart.";
  color: var(--ink-soft);
  font-size: 0.88rem;
}

@media (orientation: portrait) and (max-width: 700px) {
  .published-chart--expanded::after {
    display: block;
  }
}

/* A phone held sideways is short: give the chart all of the height. */
@media (max-height: 560px) {
  figure.published-chart--expanded {
    --chart-caption-space: 0rem;
    padding: 0.5rem;
  }

  .published-chart--expanded > :not(.chart-expand) {
    width: min(100%, calc((var(--chart-viewport-height) - 1rem) * var(--chart-aspect, 1.7778)));
  }

  .published-chart--expanded figcaption,
  .published-chart--expanded .chart-interaction-hint {
    display: none;
  }
}

.article-inline-image {
  margin: 1.75rem auto;
}

.article-inline-image--content {
  max-width: 600px;
}

.article-inline-image picture,
.article-inline-image img {
  display: block;
  width: 100%;
}

.article-inline-image img {
  height: auto;
  border-radius: var(--radius);
  background: #050a15;
}

.article-inline-image figcaption {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.article-inline-image .article-main-image__credit {
  max-width: none;
  text-align: left;
}

.interactive-line-chart {
  position: relative;
}

.interactive-line-chart > img,
.interactive-line-chart__drawing {
  pointer-events: none;
}

.published-chart .interactive-line-chart__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.interactive-line-chart__rule {
  stroke: #35434d;
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

/* The stroke is the series color, set on each marker by the script. */
.interactive-line-chart__point {
  fill: #fff;
  stroke-width: 3;
}

.interactive-line-chart__target {
  cursor: crosshair;
  fill: transparent;
}

.interactive-line-chart__target:focus {
  outline: none;
  stroke: #176b87;
  stroke-width: 2;
}

.interactive-line-chart__legacy-tick {
  stroke: #c5cfd8;
}

.interactive-line-chart__legacy-tick-label {
  fill: #54606b;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.interactive-line-chart__tooltip {
  position: absolute;
  z-index: 1;
  min-width: 10rem;
  max-width: min(20rem, calc(100% - 1rem));
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 0.2rem 0.8rem rgb(22 34 43 / 18%);
  color: var(--ink);
  font-size: 0.88rem;
  pointer-events: none;
}

.interactive-line-chart__tooltip strong,
.interactive-line-chart__tooltip span {
  display: block;
}

.chart-interaction-hint {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.chart-annotation-list {
  display: grid;
  gap: 1rem;
}

.chart-annotation-list > div {
  padding-left: 1rem;
  border-left: 3px solid #b6542c;
}

.chart-annotation-list dt {
  font-weight: 700;
}

.chart-annotation-list dd {
  margin: 0.25rem 0 0;
}

.chart-annotation-list dd p {
  margin: 0.35rem 0 0;
}

.evidence-map-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
}

.evidence-map {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.evidence-map caption {
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
}

.evidence-map th,
.evidence-map td {
  padding: 0.7rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.evidence-map th {
  background: var(--brand);
  color: white;
}

.evidence-map td small,
.evidence-map td a {
  display: block;
}

.evidence-map td a + a,
.evidence-sources a + a {
  margin-top: 0.35rem;
}

.evidence-stack {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

summary {
  padding: 1rem 1.15rem;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}

details[open] summary::before {
  content: "−";
}

.detail-body {
  padding: 0 1.25rem 1.25rem 3.45rem;
}

.limitation {
  padding: 0.85rem 1rem;
  border-left: 3px solid #d2a13f;
  background: var(--warning-soft);
  color: #59471f;
  font-size: 0.9rem;
}

.evidence-sources a {
  display: block;
}

.trust-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.trust-grid section {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.trust-grid h3 {
  margin-top: 0;
}

.trust-grid p:last-child {
  margin-bottom: 0;
}

.objection {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--brand-bright);
  background: var(--brand-soft);
}

.objection h3 {
  margin-top: 0;
  font-size: 1rem;
}

.related-node-link {
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid #bad9e2;
}

.related-node-list {
  padding-left: 1.25rem;
}

.related-node-list li + li {
  margin-top: 0.9rem;
}

.related-node-link small,
.related-node-list small {
  display: block;
  color: var(--ink-soft);
}

.source-list {
  padding-left: 1.25rem;
}

.source-list > li + li {
  margin-top: 1.2rem;
}

.source-list .source-free-copy {
  margin-left: 0.4rem;
}

.source-takeaways {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.source-takeaways li + li {
  margin-top: 0.5rem;
}

.source-takeaways summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.source-takeaways .takeaway-quote {
  padding: 0 1rem 0.85rem;
}

.source-takeaways blockquote {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--surface-soft);
}

.dataset-source__items {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.dataset-source__items li + li {
  margin-top: 0.6rem;
}

.dataset-source__items blockquote {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--surface-soft);
}

.dataset-source__items small {
  color: var(--ink-soft);
}

.cited-takeaways {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.cited-takeaways small {
  margin-left: 0.3rem;
  color: var(--ink-soft);
}

.source-list span {
  margin-right: 0.4rem;
  padding: 0.15rem 0.38rem;
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.source-list small,
.source-list p {
  display: block;
  margin: 0.35rem 0 0;
}

.resource-list li + li {
  margin-top: 0.8rem;
}

.artifact-download {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.dataset-table-list {
  display: grid;
  gap: 1rem;
}

.dataset-card .article-card__footer a {
  font-weight: 750;
}

.dataset-table-card {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

/* Grid items default to min-width: auto, which would let a wide table
   preview stretch the card, and the whole page, past the viewport. */
.dataset-table-card {
  min-width: 0;
}

.dataset-table-card h3 {
  margin: 0;
}

.data-preview {
  margin-top: 1.25rem;
}

.data-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.data-preview-bar strong {
  color: var(--ink);
}

.data-preview-bar a {
  margin-left: auto;
  font-weight: 700;
}

/* Scrolls both ways inside the card, so the header row can stay put. */
.data-preview-scroll {
  max-height: min(70vh, 720px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.data-preview-scroll:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: 2px;
}

.data-preview-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.data-preview-table th,
.data-preview-table td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-preview-table td + td,
.data-preview-table th + th {
  border-left: 1px solid var(--line);
}

.data-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
  border-bottom: 2px solid var(--line-strong);
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}

.data-preview-table thead th[title] {
  cursor: help;
}

.data-preview-table thead th small {
  display: block;
  color: var(--ink-soft);
  font-weight: 500;
}

/* The first column, usually the row's ID, stays in view when scrolling
   sideways. */
.data-preview-table th:first-child,
.data-preview-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--line-strong);
}

.data-preview-table td:first-child {
  background: var(--surface);
  font-weight: 650;
}

.data-preview-table thead th:first-child {
  z-index: 3;
}

.data-preview-table tbody tr:nth-child(even) td {
  background: var(--canvas);
}

.data-preview-table tbody tr:hover td {
  background: var(--brand-soft);
}

.data-preview-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-preview-cell--code,
.data-preview-cell--link {
  white-space: nowrap;
}

.data-preview-cell--number {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.data-preview-cell--text {
  min-width: 11rem;
  max-width: 18rem;
}

.data-preview-cell--longtext {
  min-width: 20rem;
  max-width: 26rem;
}

/* With scripts on, long text shows three lines until its cell is clicked. */
.data-preview--clamped .data-preview-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  cursor: pointer;
}

.data-preview--clamped .data-preview-clamp.is-expanded {
  display: block;
  cursor: auto;
}

.data-preview-empty {
  color: var(--line-strong);
}

.dataset-table-unit {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.dataset-table-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  margin: 0.8rem 0;
}

.dataset-table-download > span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.dataset-table-fields {
  margin-top: 1rem;
}

.dataset-table-fields .detail-body {
  padding-right: 1rem;
  padding-bottom: 1rem;
}

.file-type-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.7rem;
}

.resource-list li > span {
  margin-left: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.resource-list p {
  margin: 0.25rem 0;
}

/* SHA-256 digests are long; let them wrap and keep their case. */
.dataset-table-download > span.artifact-status,
.resource-list li > span.artifact-status {
  display: block;
  margin-left: 0;
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
}

.dataset-table-download > span.artifact-status {
  flex-basis: 100%;
}

.machine-readable-record {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.machine-readable-record h2 {
  margin: 0.2rem 0 0.65rem;
}

.machine-readable-record > p {
  color: var(--ink-soft);
}

.machine-readable-record details {
  margin-top: 1rem;
  background: var(--surface-soft);
}

.machine-readable-record__json {
  padding: 0 1rem 1rem;
}

.machine-readable-record pre {
  max-height: 24rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.machine-readable-record__note {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.challenge {
  margin-top: 3rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
}

.challenge h2 {
  margin-top: 0;
  color: white;
}

.challenge p {
  color: #d9e8ee;
}

.technical-note {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.challenge .button {
  max-width: 220px;
}

.challenge__secondary {
  margin-left: 1rem;
  color: white;
}

.challenge__secondary:hover {
  color: white;
  text-decoration-color: white;
}

/* A per-element challenge link (#252): a small flag at the end of the text it
   is about, always shown (touch has no hover). The negative block margins keep
   the 32-pixel target from opening up the line it sits on. */
.challenge-link {
  width: 2rem;
  height: 2rem;
  margin: -0.45rem 0 -0.45rem 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 8px;
  color: var(--ink-soft);
  user-select: none;
}

.challenge-link .icon {
  width: 1rem;
  height: 1rem;
}

.challenge-link:hover,
.challenge-link:focus-visible {
  background: var(--brand-soft);
  color: var(--brand-bright);
}

.form-page {
  width: min(calc(100% - 2rem), 780px);
  margin: 3rem auto 5rem;
}

.form-page__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-weight: 750;
}

.form-guidance {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--brand-bright);
  background: var(--brand-soft);
}

.feedback-form {
  display: grid;
  gap: 1.25rem;
}

.feedback-form fieldset {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.feedback-form legend {
  padding: 0 0.4rem;
  color: var(--brand);
  font-weight: 850;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-field + .form-field {
  margin-top: 1rem;
}

.form-grid .form-field + .form-field {
  margin-top: 0;
}

.form-field label,
.form-field small,
.form-field span {
  display: block;
}

.form-field label {
  margin-bottom: 0.35rem;
  font-weight: 750;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: inherit;
}

.form-field textarea {
  resize: vertical;
}

.form-field input[readonly],
.form-field textarea[readonly],
.form-field select[aria-readonly="true"] {
  border-color: #9aa7b5;
  background: #e9eef3;
  color: #4c5967;
  cursor: not-allowed;
}

.form-field small {
  margin-top: 0.3rem;
  color: var(--ink-soft);
}

.form-field .character-count {
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.form-field .character-count--near-limit {
  color: #8a5200;
  font-weight: 700;
}

.form-field span,
.validation-summary {
  margin-top: 0.3rem;
  color: #9c2f2f;
}

.validation-summary:empty {
  display: none;
}

.reference-picker {
  max-height: 360px;
  padding: 0.5rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.reference-picker label,
.form-consent label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.reference-picker label {
  padding: 0.5rem;
}

.reference-picker label + label,
.form-consent label + label {
  margin-top: 0.35rem;
}

.reference-picker input,
.form-consent input {
  margin-top: 0.25rem;
}

.form-consent {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.privacy-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Feedback form visibility labels and the node feedback page. */
.field-visibility {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 500;
}

.form-field .reference-picker__label,
.form-consent .reference-picker__label {
  display: inline;
  margin-top: 0;
  color: inherit;
}

.required-marker {
  color: #9c2f2f;
  font-weight: 750;
  text-decoration: none;
  cursor: help;
}

.form-field .input-validation-error {
  border-color: #9c2f2f;
  box-shadow: 0 0 0 3px #f8dede;
}

.form-field .field-validation-error {
  font-weight: 650;
}

.form-error-banner {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid #9c2f2f;
  border-radius: 8px;
  background: #fbeaea;
  color: #9c2f2f;
  font-weight: 650;
}

.feedback-form__notice {
  margin: 1rem 0 1.25rem;
}

.feedback-form__about {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: var(--brand-soft);
}

.feedback-form__about a {
  margin-left: 0.5rem;
  font-size: 0.9rem;
}

.feedback-form__more {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.feedback-form__more summary {
  color: var(--brand);
  font-weight: 750;
  cursor: pointer;
}

.feedback-form__more[open] summary {
  margin-bottom: 1rem;
}

.feedback-form__checkbox {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.feedback-item {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.feedback-item:target {
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.feedback-item h2 {
  margin: 0.4rem 0;
  font-size: 1.15rem;
}

.feedback-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.feedback-item__details {
  white-space: pre-line;
}

.feedback-item blockquote {
  margin: 1rem 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--line-strong);
  color: var(--ink-soft);
}

.feedback-status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.8rem;
  font-weight: 750;
}

.feedback-item--applied .feedback-status,
.feedback-item--acknowledged .feedback-status {
  background: var(--confirmed-soft);
  color: var(--confirmed);
}

.feedback-item--rejected .feedback-status {
  background: var(--canvas);
  color: var(--ink-soft);
}

.feedback-item__resolution {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: var(--surface-soft);
}

.feedback-item__resolution span {
  margin-left: 0.35rem;
  color: var(--ink-soft);
}

.feedback-item__resolution p {
  margin: 0.4rem 0 0;
}

.feedback-item__id {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
}

.feedback-item__id a {
  color: var(--ink-soft);
}

.content-page {
  width: min(calc(100% - 2rem), var(--content));
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 5rem;
}

.content-page__header {
  margin-bottom: 2.5rem;
}

.content-page__header h1 {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.content-page__lede {
  max-width: 680px;
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.content-page__updated {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.content-page > section {
  margin-top: 2.75rem;
}

.content-page h2,
.content-page h3 {
  color: var(--ink);
  line-height: 1.2;
}

.content-page h2 {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  letter-spacing: -0.025em;
}

.content-page h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.05rem;
}

.content-page p,
.content-page li {
  color: var(--ink-soft);
}

.content-page li + li {
  margin-top: 0.45rem;
}

.content-page__contents {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 3rem;
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--brand-bright);
  background: var(--brand-soft);
}

.content-page__contents strong {
  color: var(--brand);
}

.content-page__action {
  margin-top: 3rem;
  padding: clamp(1.4rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
}

.content-page__action h2,
.content-page__action p {
  color: white;
}

.content-page__action h2 {
  margin-bottom: 0.4rem;
}

.content-page__action p {
  margin: 0;
  color: #d9e8ee;
}

.content-page__action .button {
  flex: 0 0 auto;
  background: white;
  color: var(--brand);
}

.form-submit {
  max-width: 220px;
}

.feedback-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.confirmation-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.submission-reference {
  overflow-wrap: anywhere;
  font-size: 1.1rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.site-footer__inner {
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.site-footer__inner > span:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.5rem;
}

@media (max-width: 900px) {
  .article-page {
    display: block;
  }

  .verdict-card {
    max-width: 520px;
  }

  .article-side {
    margin-bottom: 2.5rem;
  }

  .article-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .toc {
    padding: 0.9rem 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
  }

  .toc p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-card:first-child {
    grid-column: auto;
  }
}

@media (min-width: 651px) {
  .article-card:has(.article-card__thumbnail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-rows: auto auto auto auto;
    column-gap: 1.25rem;
    row-gap: 0.8rem;
  }

  .article-card:has(.article-card__thumbnail) .article-card__top {
    display: contents;
  }

  .article-card:has(.article-card__thumbnail) .article-card__meta {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .article-card:has(.article-card__thumbnail) .article-card__thumbnail-wrap {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .article-card:has(.article-card__thumbnail) h3 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin: 0;
  }

  .article-card:has(.article-card__thumbnail) > p {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
  }

  .article-card:has(.article-card__thumbnail) .article-card__footer {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .article-card__footer {
    align-items: flex-end;
  }

  .article-card__footer time {
    flex: 0 0 auto;
  }
}

@media (max-width: 650px) {
  body {
    font-size: 16px;
  }

  /* Keep the three short header links on phones (#35). The brand and links
     share one row when they fit; otherwise the links wrap below the brand. */
  .site-header__inner {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding-block: 0.5rem;
  }

  .header-nav {
    gap: 0 0.9rem;
    font-size: 0.82rem;
  }

  .header-nav a {
    padding-block: 0.6rem;
    white-space: nowrap;
  }

  .home-hero {
    padding-top: 3.5rem;
  }



  .article-card__top:has(.article-card__thumbnail) {
    flex-direction: column-reverse;
  }

  .article-card__thumbnail-wrap {
    width: 100%;
    flex-basis: auto;
  }

  .article-search__controls {
    flex-wrap: wrap;
  }

  .article-search input {
    flex-basis: 100%;
  }

  .article-card__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .article-card__footer time {
    align-self: flex-end;
  }

  .article-page {
    margin-top: 2.25rem;
  }

  .article-main-image {
    margin-bottom: 2.25rem;
  }

  .article-main-image figcaption {
    display: grid;
  }

  .article-main-image__credit {
    max-width: none;
    text-align: left;
    font-weight: 700;
  }

  h1,
  .article-hero h1 {
    font-size: clamp(2.35rem, 13vw, 3.4rem);
  }

  .toc {
    grid-template-columns: 1fr 1fr;
  }

  .detail-body {
    padding-left: 1.25rem;
  }

  .detail-body > .published-chart {
    margin-left: 0;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .form-field + .form-field {
    margin-top: 1rem;
  }

  .challenge__secondary {
    display: block;
    margin: 1rem 0 0;
  }

  .site-footer__inner {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .article-card {
    transition: none;
  }
}

@media print {
  .reading-progress,
  .site-header,
  .toc,
  .share-panel,
  .challenge,
  .site-footer {
    display: none;
  }

  body {
    background: white;
  }

  .article-page {
    width: 100%;
    display: block;
  }
}
.draft-preview-banner {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid #9a6700;
    background: #fff8c5;
    color: #4d2d00;
}

/* Who drafted a draft and who it will credit, for admins only (#511). */
.draft-authorship {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    margin: -0.75rem 0 1.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px dashed var(--line);
    background: #f6f8fa;
    font-size: 0.95rem;
}

.draft-authorship__versions {
    flex-basis: 100%;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ink-soft);
}

.node-draft-problem-message {
    padding: 1rem 1.25rem;
    border-left: 4px solid #b42318;
    background: #f6f8fa;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chart-view-problem {
    padding: 1rem 1.25rem;
    border-left: 4px solid #b42318;
    background: #f6f8fa;
    overflow-wrap: anywhere;
}

.chart-view-problem p {
    margin: 0.5rem 0 0;
}

/* Attributed statements and forecasts (#56). */
.statement-block,
.forecast-block {
    margin: 1.5rem 0;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand-bright);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface);
}

.statement-quote {
    margin: 0 0 0.75rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 650;
    line-height: 1.45;
}

.statement-quote p {
    margin: 0;
}

/* Quotes are shown exactly as stored, including their line breaks. */
.statement-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.statement-block figcaption,
.forecast-block figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    color: var(--ink-soft);
}

.statement-context,
.statement-source,
.forecast-statement {
    margin: 0.6rem 0 0;
    overflow-wrap: anywhere;
}

.link-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-block: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface-soft);
}

.link-preview__card {
    flex: 0 1 300px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.link-preview__card img,
.link-preview__placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.link-preview__placeholder {
    display: grid;
    place-items: center;
    background: var(--canvas);
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.link-preview__text {
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
}

.link-preview__text span {
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.link-preview__about {
    flex: 1 1 260px;
}

.link-preview__about h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.link-preview__about p {
    margin: 0;
    color: var(--ink-soft);
}

.draft-preview-banner a,
.version-notice a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.version-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 1.5rem;
}

.draft-media-missing {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 1rem 0 2rem;
    padding: 2rem;
    border: 2px dashed #9a6700;
    background: #fffdf0;
    color: #4d2d00;
    text-align: center;
}

/* Auditor pages (#222). */
.auditor-prompt-excerpt {
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--line-strong);
}

.auditor-prompt-text {
  margin: 0;
  white-space: pre-line;
}

/* An auditor's track record (#214). */
.auditor-tally {
  font-weight: 600;
}

.auditor-findings {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.auditor-finding {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.auditor-finding__summary {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.auditor-finding__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #5b6770);
}

.auditor-finding__status {
  font-weight: 600;
}

.auditor-finding--applied .auditor-finding__status {
  color: #1a7f37;
}

.auditor-finding--rejected .auditor-finding__status {
  color: #9a6700;
}

.auditor-finding__resolution {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

.auditor-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.auditor-list__item h2 {
  margin-bottom: 0.25rem;
}

.auditor-list__item p {
  margin: 0.25rem 0;
}

.auditor-list__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.7;
  vertical-align: middle;
}

.auditor-list__meta {
  font-size: 0.9rem;
  opacity: 0.8;
}

.auditor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.auditor-filters a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

/* Audit grades, the article audits panel, and the audit report page (#214). */
.audit-grade {
  --grade-color: #57606a;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.25));
}

.audit-grade--small {
  margin-right: 0.4rem;
}

.audit-grade__shield {
  fill: var(--grade-color);
}

.audit-grade__shine {
  fill: #fff;
  opacity: 0.18;
}

.audit-grade__letter {
  fill: #fff;
  font: 800 21px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* A: polished, with a dark outer rim, a bright inner rim and a glint. */
.audit-grade__a-top { stop-color: #3fb950; }
.audit-grade__a-bottom { stop-color: #0f5a26; }

.audit-grade__rim {
  stroke: #0b4a1f;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.audit-grade__inner-rim {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.55;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.audit-grade__shine--strong {
  opacity: 0.3;
}

.audit-grade__glint {
  fill: #fff;
}

.audit-grade--a .audit-grade__letter {
  paint-order: stroke;
  stroke: #0b4a1f;
  stroke-width: 1.2;
}

/* C: dull, with a hairline crack. */
.audit-grade--c .audit-grade__shield {
  opacity: 0.92;
}

.audit-grade__crack {
  fill: none;
  stroke: rgb(0 0 0 / 0.45);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* D: dull, with deeper cracks from both sides; still whole. */
.audit-grade--d .audit-grade__shield {
  opacity: 0.92;
}

.audit-grade__crack--deep {
  stroke: rgb(0 0 0 / 0.55);
  stroke-width: 1.6;
}

/* F: split in two; the outline darkens the broken edges, and the letter's
   outline keeps it legible where it crosses the gap. */
.audit-grade--f .audit-grade__shield {
  stroke: #8a2206;
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.audit-grade--f .audit-grade__letter {
  paint-order: stroke;
  stroke: #8a2206;
  stroke-width: 3;
  stroke-linejoin: round;
}

.audit-grade--a { --grade-color: #1a7f37; }
.audit-grade--b { --grade-color: #5a8a12; }
.audit-grade--c { --grade-color: #c27803; }
.audit-grade--d { --grade-color: #d2580b; }
.audit-grade--f { --grade-color: #c4320a; }

.audit-history .evidence-map-wrap {
  margin-bottom: 2rem;
}

/* A small grid, so it sizes to its columns rather than the evidence map's width. */
.audit-history__table {
  width: auto;
  min-width: 0;
  font-size: 0.9rem;
}

.audit-history__table th,
.audit-history__table td {
  vertical-align: middle;
}

.audit-history__table thead th a {
  color: #fff;
}

.audit-history__table th[scope="row"] {
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
}

.audit-history__current th[scope="row"],
.audit-history__current td {
  background: #eef2f6;
}

.audit-history__table td a.audit-history__cell {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  text-decoration: none;
}

.audit-history__passed {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.audit-history__none {
  color: var(--ink-soft);
}

.audit-panel {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: #fff;
}

.audit-panel__title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audit-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.audit-panel li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.35rem 0;
}

.audit-panel__checks {
  margin-left: auto;
  font-size: 0.85rem;
  color: #57606a;
}

.audit-panel__note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}

.audit-report {
  margin: 1.5rem 0 2.5rem;
}

.audit-report__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.audit-report__header h2 {
  margin: 0;
}

.audit-report__meta,
.audit-report__meaning {
  margin: 0.25rem 0 0;
}

.audit-report__meta {
  font-size: 0.9rem;
  color: #57606a;
}

.audit-report__checks {
  margin-top: 1rem;
}

.audit-report__checks summary {
  font-weight: 700;
}

.audit-report__checks .audit-checks,
.audit-report__checks .audit-report__coverage {
  margin: 0 1.15rem 1rem;
}

.audit-checks {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.audit-check {
  padding: 0.75rem 0.9rem;
  margin: 0.5rem 0;
  border-left: 4px solid var(--line-strong);
  background: #fff;
}

.audit-check--pass { border-left-color: #1a7f37; }
.audit-check--concern { border-left-color: #9a6700; background: #fff8e6; }
.audit-check--fail { border-left-color: #b42318; background: #fff0ed; }

.audit-check:target {
  outline: 2px solid #5bb6ce;
  outline-offset: 2px;
}

.audit-scorecard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
}

.audit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #dce2e7;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #17212b;
  background: #fff;
  text-decoration: none;
}

.audit-chip:hover,
.audit-chip:focus-visible {
  border-color: #176b87;
}

.audit-chip__mark {
  font-weight: 700;
}

.audit-chip--pass .audit-chip__mark { color: #236a51; }
.audit-chip--concern { background: #fff8e6; border-color: #e3c77a; }
.audit-chip--concern .audit-chip__mark { color: #59471f; }
.audit-chip--fail { background: #fff0ed; border-color: #e7a59c; }
.audit-chip--fail .audit-chip__mark { color: #a7352a; }
.audit-chip--notchecked,
.audit-chip--notapplicable { color: #52606d; }

.audit-check__head {
  display: flex;
  gap: 0.75rem;
  margin: 0;
}

.audit-check__summary {
  margin: 0.35rem 0 0;
  font-weight: 600;
}

.audit-check__rationale,
.audit-check__refs {
  margin: 0.35rem 0 0;
}

.audit-check__refs {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: #57606a;
}

/* ---------------------------------------------------------------------------
   Front page (homepage redesign, mockup B). Classes are prefixed fp- so the
   dataset index, which shares the article-card styles, is unaffected.
   ------------------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.header-nav a.header-nav__surprise {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: #fbd46a;
  color: #3d2c00;
  font-weight: 800;
}

.header-nav a.header-nav__surprise:hover {
  background: #f6c645;
}

.fp-hero,
.fp-top,
.fp-quick,
.fp-features {
  width: min(calc(100% - 2rem), var(--wide));
  margin-inline: auto;
}

.fp-hero {
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 1.5rem;
}

.fp-hero h1 {
  max-width: 900px;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -0.03em;
}

.fp-promises {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 750;
}

.fp-promises li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.fp-promises li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-bright);
}

.fp-promises a {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.fp-label {
  margin: 0;
  color: var(--brand-bright);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fp-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.fp-tag {
  margin-right: 0.35rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
}

/* Pictures: one 16:9 box for every card, whatever it holds. */
.fp-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--brand-soft);
}

.fp-media picture,
.fp-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fp-media img.fp-media__chart {
  object-fit: contain;
  background: #fff;
}

.fp-media__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.fp-media .fp-media__placeholder img {
  width: 48px;
  height: 48px;
  opacity: 0.35;
}

.fp-featured:hover .fp-media img,
.fp-card:hover .fp-media img {
  transform: scale(1.03);
}

/* Featured + just published */
.fp-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1rem;
}

.fp-featured {
  flex: 999 1 560px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.fp-featured__body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fp-featured h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.12;
}

.fp-featured h2 a,
.fp-fresh h3 a,
.fp-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.fp-featured h2 a:hover,
.fp-fresh h3 a:hover,
.fp-card h3 a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.fp-featured__dek {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.fp-fresh {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fp-fresh__item {
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.fp-media--thumb {
  flex: 0 0 104px;
  height: 72px;
  aspect-ratio: auto;
  border-radius: 10px;
}

.fp-media--thumb .fp-media__placeholder img {
  width: 28px;
  height: 28px;
}

.fp-fresh h3 {
  margin: 0.2rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Claim + rating */
.fp-claim {
  margin-top: auto;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.fp-claim__label {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fp-claim__text {
  font-size: 0.95rem;
  line-height: 1.45;
}

.fp-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border: 1px solid var(--rating-line, var(--line));
  border-radius: 999px;
  background: var(--rating-soft, var(--surface-soft));
  color: var(--rating, var(--ink));
  font-size: 0.82rem;
  font-weight: 850;
}

.fp-rating__scale {
  display: inline-flex;
  gap: 2px;
}

.fp-rating__scale span {
  width: 5px;
  height: 11px;
  border-radius: 2px;
  background: rgba(23, 33, 43, 0.14);
}

.fp-rating__scale span.is-on {
  background: var(--rating);
}

/* Myth or fact? */
.fp-quick {
  margin-top: 2.5rem;
  padding: 1.75rem;
  border-radius: 22px;
  background: var(--brand);
  color: #fff;
}

.fp-quick__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.2rem;
}

.fp-quick__head h2 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
}

.fp-quick__head p {
  margin: 0;
  color: #a9dbe9;
  font-size: 0.9rem;
  font-weight: 700;
}

.fp-quick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}

.fp-flip {
  min-height: 190px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.fp-flip summary {
  height: 100%;
  min-height: 186px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
}

.fp-flip summary::-webkit-details-marker {
  display: none;
}

.fp-flip summary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.fp-flip__claim {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
}

.fp-flip__hint {
  margin-top: auto;
  color: #a9dbe9;
  font-size: 0.82rem;
  font-weight: 800;
}

.fp-flip[open] {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.fp-flip[open] summary {
  height: auto;
  min-height: 0;
  padding-bottom: 0.25rem;
}

.fp-flip[open] summary:hover {
  background: none;
}

.fp-flip[open] .fp-flip__claim {
  font-size: 1rem;
  color: var(--ink-soft);
}

.fp-flip[open] .fp-flip__hint {
  display: none;
}

.fp-flip__answer {
  padding: 0 1.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.fp-flip__answer p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.fp-flip__answer a {
  font-size: 0.88rem;
  font-weight: 800;
}

/* Why FactHub is different */
.fp-features {
  padding: 2.75rem 0 0.5rem;
}

.fp-features h2 {
  margin: 0 0 1.1rem;
  font-family: Georgia, "Times New Roman", serif;
}

.fp-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.fp-features--extended ul {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.fp-features li {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-bright);
  border-radius: 14px;
  background: var(--surface);
}

.fp-features h3 {
  margin: 0;
  font-size: 1.05rem;
}

.fp-features p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.55;
}

.fp-features a {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 800;
}

/* More fact-checks */
.fp-latest {
  padding-top: 2.75rem;
}

.fp-latest__head {
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.fp-latest__head h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.fp-latest__count {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.fp-search {
  flex: 0 1 380px;
  display: flex;
  gap: 0.5rem;
}

.fp-search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
}

.fp-search .button {
  flex: 0 0 auto;
  border-radius: 999px;
}

/* The hero's box, under the headline: the first thing a reader can do. */
.fp-search--hero {
  max-width: 560px;
  margin-top: 1.25rem;
}

.fp-search--hero input {
  min-height: 50px;
  font-size: 1.05rem;
}

/* Live search hides the front page sections and the Clear button; buttons
   set their own display, so [hidden] needs the help. */
.fp-search [hidden],
.fp-search-back[hidden],
[data-hide-when-searching][hidden] {
  display: none;
}

/* While searching, the one way back to the front page. */
.fp-search-back {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 750;
}

/* "Request a fact check", after every search's results. */
.fp-request {
  margin-top: 2rem;
  padding: 1.4rem clamp(1rem, 3vw, 1.75rem);
  border-left: 3px solid var(--brand-bright);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.fp-request h3 {
  margin: 0 0 0.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
}

.fp-request > p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.fp-request__open {
  flex: 0 0 auto;
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

.fp-request__open:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-bright);
  color: white;
}

.fp-request__open[hidden] {
  display: none;
}

.fp-request .fact-check-request {
  max-width: 780px;
}

.fact-check-request__remembered {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.fact-check-request__remembered strong {
  color: var(--ink);
  font-weight: 650;
}

.fact-check-request__change {
  min-height: 32px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--brand-bright);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.fact-check-request__remembered[hidden],
.fact-check-request [data-request-contact-fields][hidden] {
  display: none;
}

.fact-check-request__done {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.fact-check-request__done h3 {
  margin: 0 0 0.35rem;
}

.fact-check-request__done p {
  margin: 0;
}

.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.25rem;
}

.fp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23, 33, 43, 0.12);
}

.fp-card__body {
  flex: 1;
  padding: 1.1rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fp-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  line-height: 1.25;
}

.fp-card__dek {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


@media (max-width: 650px) {
  .fp-quick {
    width: 100%;
    border-radius: 0;
    padding: 1.5rem 1rem;
  }

  .fp-featured__body {
    padding: 1.1rem 1.1rem 1.3rem;
  }

  .fp-flip,
  .fp-flip summary {
    min-height: 0;
  }

  .fp-search {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-card,
  .fp-flip,
  .fp-media img {
    transition: none;
  }

  .fp-card:hover {
    transform: none;
  }

  .fp-featured:hover .fp-media img,
  .fp-card:hover .fp-media img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Mission page. Shares the fp-features partial with the homepage.
   ------------------------------------------------------------------------ */

.mp {
  padding-bottom: 4rem;
}

.mp-hero,
.mp-anatomy,
.mp-promise,
.mp-developers,
.mp-cta {
  width: min(calc(100% - 2rem), var(--wide));
  margin-inline: auto;
}

.mp-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 1rem;
}

.mp-hero h1 {
  max-width: 820px;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
}

.mp-hero__lede {
  max-width: 680px;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.mp h2 {
  font-family: Georgia, "Times New Roman", serif;
}

/* How to read a FactHub check */
.mp-anatomy {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 22px;
  background: var(--brand-soft);
}

.mp-anatomy h2 {
  margin: 0 0 1.25rem;
}

.mp-anatomy__body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
}

.mp-example {
  flex: 1 1 340px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.mp-example__part {
  position: relative;
  padding: 0.9rem 1.2rem 0.9rem 3.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.mp-example__part:first-child {
  border-top: 0;
  display: block;
}

.mp-example__part p {
  margin: 0;
}

.mp-example__part--muted {
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.mp-example__label {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mp-example__claim {
  margin-top: 0.3rem !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.mp-example__confidence {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 750;
}

.mp-marker {
  position: absolute;
  top: 0.95rem;
  left: 1rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
}

.mp-legend {
  flex: 1 1 340px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mp-legend;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.mp-legend li {
  position: relative;
  padding-left: 2.3rem;
  counter-increment: mp-legend;
  line-height: 1.55;
}

.mp-legend li::before {
  content: counter(mp-legend);
  position: absolute;
  top: 0.1rem;
  left: 0;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
}

.mp-legend a {
  white-space: nowrap;
}

.mp-anatomy__link {
  margin: 1.25rem 0 0;
  font-weight: 800;
}

/* Our promise */
.mp-promise {
  padding-top: 2.75rem;
}

.mp-promise h2 {
  margin: 0 0 1.1rem;
}

.mp-promise ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.75rem 1.5rem;
}

.mp-promise li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 650;
}

.mp-promise li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--confirmed-soft);
  transform: translateY(-50%);
}

.mp-promise li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.37rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--confirmed);
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

/* For researchers and developers */
.mp-developers {
  margin-top: 2.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
}

.mp-developers h2 {
  margin: 0 0 0.5rem;
  font-family: inherit;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.mp-developers p {
  max-width: 820px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Call to action */
.mp-cta {
  margin-top: 2.75rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  border-radius: 22px;
  background: var(--brand);
  color: #fff;
}

.mp-cta h2 {
  margin: 0 0 0.35rem;
  color: #fff;
}

.mp-cta p {
  margin: 0;
  color: #d6ebf2;
}

.mp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mp-cta__primary,
.mp-cta__secondary {
  min-height: 44px;
  padding: 0 1.2rem;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
}

.mp-cta__primary {
  background: #fff;
  color: var(--brand);
}

.mp-cta__secondary {
  background: #fbd46a;
  color: #3d2c00;
}

.mp-cta a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* Inline feedback: the selection button and the feedback popover
   (Pages/Shared/_FeedbackPopover.cshtml). A popover beside the passage on
   wide screens, a bottom sheet on phones. */
::highlight(feedback-target) {
  background: #ffe08a;
  color: inherit;
}

.feedback-flag {
  position: absolute;
  z-index: 40;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  box-shadow: 0 6px 20px rgba(23, 33, 43, 0.22);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 750;
}

.feedback-flag[hidden] {
  display: none;
}

.feedback-flag:hover {
  background: var(--brand-bright);
}

/* Touch screens: the same action on the bottom edge, which the phone's copy
   menu never covers (#334). */
.feedback-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: 0.6rem max(0.75rem, env(safe-area-inset-right))
    max(0.6rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  display: flex;
  gap: 0.75rem;
  align-items: center;
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 -6px 20px rgba(23, 33, 43, 0.12);
}

.feedback-bar[hidden] {
  display: none;
}

.feedback-bar__quote {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-bar__send {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
}

.feedback-popover {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 55px rgba(23, 33, 43, 0.22);
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
}

.feedback-popover[open] {
  display: flex;
  flex-direction: column;
}

.feedback-popover::backdrop {
  background: rgba(23, 33, 43, 0.18);
}

.feedback-popover--anchored {
  position: fixed;
  margin: 0;
}

.feedback-popover__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.feedback-popover__form[hidden],
.feedback-popover__done[hidden] {
  display: none;
}

.feedback-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.6rem 0.2rem 1.1rem;
}

.feedback-popover__header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.feedback-popover__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.feedback-popover__close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.feedback-popover__body {
  padding: 0.2rem 1.1rem 0.9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.feedback-popover__banner {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: var(--finding-soft);
  color: #9c2f2f;
  font-size: 0.9rem;
}

.feedback-popover__banner[hidden],
.feedback-popover__quote[hidden],
.feedback-popover__remembered[hidden],
.feedback-popover__contact-fields[hidden] {
  display: none;
}

.feedback-popover__quote {
  margin: 0 0 0.85rem;
  padding: 0.1rem 0 0.1rem 0.75rem;
  overflow: hidden;
  border-left: 3px solid #e2b33c;
  color: var(--ink-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.feedback-popover__kinds {
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}

.feedback-popover__kinds legend,
.feedback-popover .form-field label {
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 750;
}

.feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.feedback-chip {
  position: relative;
}

.feedback-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-chip span {
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
}

.feedback-chip span:hover {
  border-color: var(--brand-bright);
}

.feedback-chip input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

.feedback-chip input:focus-visible + span {
  outline: 3px solid var(--brand-bright);
  outline-offset: 2px;
}

.feedback-popover .form-field + .form-field {
  margin-top: 0.75rem;
}

.feedback-popover .form-field input,
.feedback-popover .form-field textarea {
  padding: 0.55rem 0.7rem;
  font-size: 1rem;
}

.feedback-popover .form-field input[aria-invalid="true"],
.feedback-popover .form-field textarea[aria-invalid="true"] {
  border-color: #9c2f2f;
}

.feedback-popover .feedback-popover__error {
  display: block;
  margin-top: 0.25rem;
  color: #9c2f2f;
  font-size: 0.85rem;
}

.feedback-popover .feedback-popover__error:empty {
  display: none;
}

.feedback-popover__evidence {
  margin: 0.65rem 0 0;
}

.feedback-popover__evidence summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--brand-bright);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

.feedback-popover__contact {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.feedback-popover__contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.feedback-popover__contact-fields .form-field + .form-field {
  margin-top: 0;
}

.feedback-popover__remembered {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.feedback-popover__remembered strong {
  color: var(--ink);
  font-weight: 650;
}

.feedback-popover__link {
  min-height: 32px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--brand-bright);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.feedback-popover__newsletter {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.9rem;
  cursor: pointer;
}

.feedback-popover__newsletter input {
  width: 20px;
  height: 20px;
  margin: 0.05rem 0 0;
  flex: none;
  accent-color: var(--brand);
}

.feedback-popover__notice {
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.feedback-popover__footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.feedback-popover__full {
  font-size: 0.85rem;
  font-weight: 700;
}

.feedback-popover__send {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: 1.2rem;
  border-color: var(--brand);
  background: var(--brand);
  color: white;
  font-size: 0.9rem;
}

.feedback-popover__send:hover:not(:disabled) {
  border-color: var(--brand-bright);
  background: var(--brand-bright);
  color: white;
}

.feedback-popover__done {
  padding: 1.5rem 1.25rem 1.25rem;
}

.feedback-popover__done p {
  margin: 0 0 0.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.feedback-popover__done .feedback-popover__done-title {
  color: var(--confirmed);
  font-size: 1.1rem;
  font-weight: 750;
}

.feedback-popover__reference code {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}

.feedback-popover__done .button {
  width: 100%;
  margin-top: 0.4rem;
}

/* Phones: a bottom sheet the full width of the screen, with the send button
   pinned at its foot. */
@media (max-width: 640px) {
  .feedback-popover {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }

  .feedback-popover__header {
    position: relative;
    padding-top: 0.9rem;
  }

  .feedback-popover__header::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: var(--line-strong);
  }

  .feedback-popover__contact-fields {
    grid-template-columns: 1fr;
  }

  .feedback-chip span {
    min-height: 44px;
  }

  .feedback-popover__footer {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}

/* Admin drafts page (/admin/drafts). */
.admin-page {
  width: min(calc(100% - 2rem), var(--wide));
  margin: 3rem auto 5rem;
}

.admin-filter {
  margin: 1rem 0 1.5rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.admin-filter select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
}

.admin-status {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--confirmed);
  background: var(--confirmed-soft);
  overflow-wrap: anywhere;
}

.admin-status--error {
  border-left-color: #9c2f2f;
  background: var(--finding-soft);
  color: #9c2f2f;
}

.admin-status--caution {
  border-left-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
}

.admin-draft {
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.admin-draft h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.admin-draft__meta {
  margin: 0.3rem 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.admin-draft__warning {
  color: var(--warning);
}

.admin-draft__actions {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.admin-draft__actions .button {
  flex: none;
}

.admin-draft__discard {
  display: flex;
  flex: 1;
  min-width: min(100%, 320px);
  gap: 0.5rem;
}

.admin-draft__discard input[name="reason"] {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
}

.button.admin-button--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.button.admin-button--primary:hover:not(:disabled) {
  background: var(--brand-bright);
  color: #ffffff;
}

/* Newsletter sign-up and "Follow us on X": a quiet band on the homepage,
   and the /newsletter page. */
.fp-signup {
  width: min(calc(100% - 2rem), var(--wide));
  margin: 2.5rem auto 0;
  padding: 1.4rem clamp(1rem, 3vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-bright);
  border-radius: 14px;
  background: var(--surface);
}

.fp-signup__text h2 {
  margin: 0 0 0.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.fp-signup__text p {
  margin: 0;
  color: var(--ink-soft);
}

.fp-signup__actions {
  flex: 1 1 360px;
  max-width: 480px;
  display: grid;
  gap: 0.5rem;
}

.newsletter-signup__form {
  display: flex;
  gap: 0.5rem;
}

.newsletter-signup__form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
}

.newsletter-signup__button {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: 1.1rem;
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

.newsletter-signup__button:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-bright);
  color: white;
}

.newsletter-signup__note,
.newsletter-signup__error,
.newsletter-signup__done {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.newsletter-signup__error {
  color: #9c2f2f;
  font-weight: 700;
}

.newsletter-signup__done {
  font-size: 0.95rem;
  color: var(--confirmed);
}

.follow-x {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-size: 0.9rem;
  font-weight: 700;
}

.form-page .follow-x {
  margin-top: 1.5rem;
}

/* The same sign-up, quieter, at the end of a published node page
   (_FollowFactHub): a top rule instead of a card, a small sans heading, and a
   secondary button, so the page's own action stays the dominant one. */
.follow-strip {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  border-top: 1px solid var(--line);
}

.follow-strip__text {
  display: grid;
  gap: 0.25rem;
}

.follow-strip__text h2 {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.follow-strip .newsletter-signup {
  flex: 1 1 min(100%, 320px);
  min-width: 0;
  max-width: 420px;
}

.follow-strip .newsletter-signup__button {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--brand);
}

.follow-strip .newsletter-signup__button:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--surface);
  color: var(--brand);
}

/* Account pages: /signin and /me (specs/user-identity.md). Cards on the
   form column, one navy primary action per decision, and a save bar that
   says when there are unsaved changes. */
.account-page,
.sign-in-page {
  width: min(calc(100% - 2rem), 780px);
  margin: 2.5rem auto 5rem;
  display: grid;
  gap: 1.25rem;
}

.account-card {
  min-width: 0;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.04);
}

.account-card > legend,
.account-card > h2 {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.account-card > legend + *,
.account-card > h2 + * {
  clear: both;
}

.account-card__lead {
  margin: 0.25rem 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.account-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
}

.account-summary__avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-weight: 700;
}

/* A picked icon in place of the initial (AvatarIcons; symbols in images/icons.svg). */
.avatar__icon {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One per UserAvatar.Colors, picked from the user ID (a test keeps them equal). */
.avatar--0 { background: #123c5a; }
.avatar--1 { background: #176b87; }
.avatar--2 { background: #3d4f8f; }
.avatar--3 { background: #5a4290; }
.avatar--4 { background: #7a3d6f; }
.avatar--5 { background: #2f5d78; }
.avatar--6 { background: #4a5763; }
.avatar--7 { background: #6a4a3c; }

.account-summary .eyebrow {
  margin-bottom: 0.25rem;
}

.account-summary h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.account-summary__meta {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.account-summary__description {
  margin: 0.5rem 0 0;
  max-width: 60ch;
  overflow-wrap: anywhere;
}

.account-summary__tags {
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.account-summary__tags li {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 750;
}

.account-summary__sign-out .button {
  flex: none;
}

.account-notice {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--brand-bright);
  border-radius: 8px;
  background: var(--brand-soft);
}

.account-notice--success {
  border-left-color: var(--confirmed);
  background: var(--confirmed-soft);
  color: var(--confirmed);
}

.account-notice--error {
  border-left-color: #9c2f2f;
  background: #fbeaea;
  color: #9c2f2f;
}

.account-notice ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.account-notice a {
  color: inherit;
}

.account-notice:focus {
  outline: 3px solid #5bb6ce;
  outline-offset: 2px;
}

.account-form {
  display: grid;
  gap: 1.25rem;
}

.account-input-prefix {
  display: flex;
  align-items: stretch;
}

.account-input-prefix > span {
  display: grid;
  place-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-weight: 750;
}

.form-field .account-input-prefix input {
  min-width: 0;
  flex: 1;
  border-radius: 0 8px 8px 0;
}

.account-email-status {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.account-email-status .button {
  flex: none;
}

.account-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.account-status--verified {
  color: var(--confirmed);
}

.account-status--verified::before {
  content: "✓ ";
}

.account-status--unverified {
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  background: var(--warning-soft);
  color: #59471f;
}

.account-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.account-form--dirty .account-save-bar {
  border-color: var(--brand-bright);
  box-shadow: 0 -6px 24px rgba(23, 33, 43, 0.1);
}

.account-save-bar__status {
  margin: 0;
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 750;
}

.account-save-bar__actions {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
}

.account-save-bar__actions .button {
  flex: none;
  min-width: 8rem;
}

.account-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.account-list li {
  padding: 0.85rem 0;
  display: grid;
  gap: 0.15rem;
  border-top: 1px solid var(--line);
}

.account-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-list span {
  color: var(--ink-soft);
}

.account-list small {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.account-list code,
.sign-in-dev code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--surface-soft);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.sign-in-page {
  width: min(calc(100% - 2rem), 460px);
  margin-top: 4rem;
}

.sign-in-card {
  padding: 2rem;
  text-align: center;
}

.sign-in-card h1 {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  letter-spacing: -0.03em;
}

.sign-in-card__lead {
  margin: 0.6rem 0 1.5rem;
  color: var(--ink-soft);
}

.sign-in-card .account-notice {
  margin-bottom: 1rem;
  text-align: left;
}

.sign-in-card__providers {
  display: grid;
  gap: 0.6rem;
}

.sign-in-provider {
  width: 100%;
  min-height: 48px;
  gap: 0.7rem;
  font-size: 0.95rem;
}

.sign-in-provider__logo {
  flex: none;
}

.sign-in-card__privacy {
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.sign-in-dev {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface-soft);
  text-align: left;
}

.sign-in-dev h2 {
  margin: 0;
  font-size: 0.95rem;
}

.sign-in-dev p {
  margin: 0.25rem 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.sign-in-dev__row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.sign-in-dev__row .form-field {
  flex: 1;
}

.sign-in-dev__row .button {
  flex: none;
}

@media (max-width: 600px) {
  .account-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-summary__sign-out {
    grid-column: 1 / -1;
  }

  .account-save-bar__actions {
    width: 100%;
  }

  .account-save-bar__actions .button {
    flex: 1;
    min-width: 0;
  }

  .sign-in-dev__row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* .button's display would otherwise override the hidden attribute. */
.account-save-bar [hidden] {
  display: none;
}

/* site.js adds the character count after the input, inside the prefix row. */
.account-input-prefix {
  flex-wrap: wrap;
}

.account-input-prefix .character-count {
  flex-basis: 100%;
}

/* A signed-in reader's popover hides the newsletter choice and "Change". */
.feedback-popover__newsletter[hidden],
.feedback-popover__link[hidden] {
  display: none;
}

/* /me: owned content and sent feedback. */
.account-group {
  margin: 1.25rem 0 0.25rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-nodes__title {
  font-weight: 750;
}

.account-feedback {
  margin-top: 0.35rem;
}

.account-feedback summary {
  width: fit-content;
  color: var(--brand-bright);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.account-feedback ul {
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

.account-feedback li {
  padding: 0.45rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  border-top: 1px solid var(--line);
}

.account-feedback > a {
  font-size: 0.9rem;
}

.account-feedback__outcome {
  margin: 0.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  color: var(--ink);
}

.account-feedback__status {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.account-feedback__status--open {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Neutral: a resolved item may have been applied or declined, and green
   would read as "accepted" for both. */
.account-feedback__status--resolved {
  background: #eef1f4;
  color: #4a5763;
}

/* Account tabs: one page each, so a tab is a link with aria-current. */
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--line-strong);
}

.account-tabs a {
  margin-bottom: -1px;
  padding: 0.65rem 1rem;
  border-bottom: 3px solid transparent;
  color: var(--ink-soft);
  font-weight: 750;
  text-decoration: none;
}

.account-tabs a:hover {
  color: var(--brand);
}

.account-tabs a[aria-current="page"] {
  border-bottom-color: var(--brand-bright);
  color: var(--brand);
}

.account-feedback__item {
  display: grid;
  gap: 0.35rem;
}

.account-feedback .account-feedback__item {
  display: grid;
}

.account-feedback__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.account-feedback__details {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  white-space: pre-line;
}

.account-feedback__reply {
  margin: 0;
  font-size: 0.92rem;
}

.account-respond {
  margin: 0.25rem 0 0.5rem;
}

.account-respond summary {
  width: fit-content;
  color: var(--brand-bright);
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}

.account-respond form {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.account-respond__choices {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.account-respond__choices legend {
  margin-bottom: 0.25rem;
  font-weight: 750;
}

.account-respond__choices .feedback-form__checkbox {
  margin-top: 0.4rem;
}

.account-sign-out form {
  margin-top: 0.25rem;
}

/* OAuth consent (/oauth/authorize). */
.consent-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  text-align: left;
}

.consent-list li + li {
  margin-top: 0.35rem;
}

.consent-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* Admin users pages. A wide table scrolls in its own frame (design.md). */
.admin-table-frame {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table__sub {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.admin-table__nowrap {
  white-space: nowrap;
}

/* An org's members on /admin/orgs/{id}: one row each, its Remove button at the end. */
.admin-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.admin-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.admin-inline-form {
  margin-left: auto;
}

.admin-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0 0;
}

.admin-facts dt {
  color: var(--ink-soft);
  font-weight: 750;
}

.admin-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-facts .admin-table__sub {
  display: inline;
}

/* Admin audits grid (#406): articles down, auditors across. The header row
   and the article column stay in view while the grid scrolls. */
.admin-audits__frame {
  max-height: 75vh;
}

.admin-audits__filters {
  margin: 1rem 0;
}

.admin-audits__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
}

.admin-audits__search label {
  font-weight: 700;
}

.admin-audits__search input {
  flex: 1 1 16rem;
  max-width: 28rem;
  min-height: 42px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

.admin-audits th[scope="col"] {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 11rem;
}

.admin-audits th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 14rem;
  max-width: 20rem;
  background: var(--surface);
  font-weight: 700;
}

.admin-audits thead th:first-child {
  left: 0;
  z-index: 3;
}

.admin-audits__cell {
  min-width: 11rem;
}

.admin-audits__cell form {
  margin-top: 0.4rem;
}

.admin-audits__cell .button {
  min-height: 42px;
}

.admin-audits__grade {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
  text-decoration: none;
}

.admin-audits__label {
  font-weight: 700;
}

.admin-audits__label--muted {
  color: var(--ink-soft);
  font-weight: 400;
}

.admin-audits__label--failed {
  color: #9c2f2f;
}

.admin-audits__cell--outdated .admin-audits__grade {
  opacity: 0.55;
}

.admin-audits__cell--queued,
.admin-audits__cell--running {
  background: var(--surface-soft);
}

/* Admin audit review (/admin/audits/article/{key}/{version}): one version's
   audits and open feedback above its Publish button. */
.admin-review__section {
  margin-top: 1.75rem;
}

.admin-review__section h2 {
  margin-bottom: 0.4rem;
  font-size: 1.3rem;
}

.admin-review__feedback {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.admin-review__item {
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.admin-review__item--material {
  border-left-color: #a7352a;
}

.admin-review__item p {
  margin: 0.2rem 0;
}

.admin-review__item-head {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.admin-review__summary {
  font-weight: 600;
}

.admin-review__details {
  white-space: pre-line;
}

.admin-table__sub[data-review] {
  margin-top: 0.3rem;
  font-weight: 700;
}

.admin-audits__error {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-query {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.admin-query pre {
  width: 100%;
  margin: 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .admin-facts {
    grid-template-columns: 1fr;
  }
}

.consent-admin {
  flex-basis: 100%;
  margin: 0 0 0.5rem;
  text-align: left;
}

.consent-actions {
  flex-wrap: wrap;
}

/* Previous and next links under a paged list (_Pager). */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------------
   Page redesign: icons, principal avatars, and the auditor pages
   (design.md, "Icons" and "Avatars"; specs/principals.md, "Avatars").
   ------------------------------------------------------------------------ */

/* A sprite icon (Icons.Svg): drawn in the surrounding text color. */
.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A principal's avatar (PrincipalAvatar): shape by kind, color by ID. */
.principal-avatar {
  --avatar-size: 40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  /* The color comes from an avatar--N class (picked from the ID). */
  color: #ffffff;
  font: 800 calc(var(--avatar-size) * 0.44) / 1 Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.principal-avatar--org {
  border-radius: 26%;
}

/* An auditor is a hexagon, so it never looks like a person. */
.principal-avatar--auditor {
  border-radius: 0;
  clip-path: polygon(25% 4%, 75% 4%, 99% 50%, 75% 96%, 25% 96%, 1% 50%);
}

.principal-avatar--draft {
  background: repeating-linear-gradient(135deg, #4a5763 0 6px, #5d6b78 6px 12px);
}

.principal-avatar--xs { --avatar-size: 22px; }
.principal-avatar--sm { --avatar-size: 28px; }
.principal-avatar--md { --avatar-size: 40px; }
.principal-avatar--lg { --avatar-size: 64px; }
.principal-avatar--xl { --avatar-size: 96px; }

.principal-avatar__icon {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hexagons can't carry the white ring overlapping circles use, so a row of
   them is spaced rather than stacked. */
.avatar-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-bright);
}

.section-title__icon .icon {
  width: 20px;
  height: 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.chip--brand {
  border-color: #cfe6ee;
  background: var(--brand-soft);
  color: var(--brand);
}

.chip--draft {
  border-color: #f0dfb2;
  background: var(--warning-soft);
  color: #59471f;
}

/* Findings by status as one labeled bar; the legend carries the numbers. */
.status-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.status-bar span {
  display: block;
  min-width: 2px;
}

.status-bar__open, .status-legend__open::before { background: var(--brand-bright); }
.status-bar__applied, .status-legend__applied::before { background: var(--confirmed); }
.status-bar__acknowledged, .status-legend__acknowledged::before { background: #8a97a3; }
.status-bar__rejected, .status-legend__rejected::before { background: var(--line-strong); }

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.status-legend li::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.35rem;
  border-radius: 3px;
}

/* The auditors list. */
.auditors-hero .article-dek {
  max-width: 720px;
}

.auditor-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.auditor-steps li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 14px;
  background: var(--brand-soft);
}

.auditor-steps .icon {
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  color: var(--brand-bright);
}

.auditor-steps strong {
  display: block;
  color: var(--brand);
  font-size: 0.95rem;
}

.auditor-steps span {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.auditor-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.auditor-totals div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.auditor-totals dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.auditor-totals dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 650;
}

.auditor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auditor-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.auditor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(23, 33, 43, 0.1);
}

.auditor-card__head {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.auditor-card h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.15;
}

.auditor-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

.auditor-card h2 a:hover,
.auditor-card h2 a:focus-visible {
  text-decoration: underline;
}

.auditor-card__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.auditor-card > p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
}

.auditor-card__foot {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.auditor-card__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.auditor-card__numbers a {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
}

.auditor-card__numbers a:hover,
.auditor-card__numbers a:focus-visible {
  text-decoration: underline;
}

.auditor-card__numbers span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

/* One auditor's page. */
.auditor-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
}

.auditor-profile h1 {
  margin: 0.35rem 0 0.5rem;
}

.auditor-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.auditor-profile__actions {
  align-self: start;
}

.auditor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
}

.auditor-layout > aside {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1rem;
}

.side-card {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.side-card h2 {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.side-card .side-card__big {
  color: var(--ink);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
}

.side-card .side-card__big small {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 650;
}

.side-card p + p {
  margin-top: 0.6rem;
}

.side-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.75rem;
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
}

.side-card dt {
  color: var(--ink-soft);
}

.side-card dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.auditor-checks {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auditor-check {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.auditor-check__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-bright);
  font-weight: 800;
}

.auditor-check h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0 0 0.25rem;
  font-family: inherit;
  font-size: 1rem;
}

.auditor-check h3 code {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.auditor-check p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}

.auditor-check .auditor-check-tally {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.auditor-ladder {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  list-style: none;
}

.auditor-ladder li {
  display: grid;
  grid-template-columns: 52px 220px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line);
}

.auditor-ladder li:first-child {
  border-top: 0;
}

.auditor-ladder__when {
  font-size: 0.9rem;
  font-weight: 750;
}

.auditor-ladder__meaning {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* A run in a list: grade, the audited article, and one dot per check. */
.audit-row {
  display: grid;
  grid-template-columns: 30px 56px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.audit-row__thumb {
  width: 56px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-bright);
}

.audit-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audit-row__title {
  display: block;
  font-weight: 750;
  line-height: 1.3;
}

.audit-row small {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.check-dots {
  display: inline-flex;
  gap: 3px;
}

.check-dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--line-strong);
}

.check-dots .check-dots__pass { background: var(--confirmed); }
.check-dots .check-dots__minor { background: #c27803; }
.check-dots .check-dots__material,
.check-dots .check-dots__fail { background: var(--finding); }

@media (max-width: 900px) {
  .auditor-steps,
  .auditor-grid,
  .auditor-layout,
  .auditor-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .auditor-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auditor-layout > aside {
    position: static;
  }

  .auditor-ladder li {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .auditor-ladder__meaning {
    grid-column: 2;
  }
}

@media (max-width: 600px) {
  .audit-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .audit-row__thumb,
  .audit-row .check-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auditor-card {
    transition: none;
  }

  .auditor-card:hover {
    transform: none;
  }
}

.audit-rows {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.button .icon {
  margin-right: 0.4rem;
}

.side-card .auditor-tally {
  margin-top: 0.75rem;
}

.side-card .status-bar {
  margin-top: 0.9rem;
}

.side-timeline {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  line-height: 1.5;
}

.side-timeline li {
  padding-left: 1rem;
  border-left: 3px solid var(--brand-soft);
}

.side-timeline time {
  display: block;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.auditor-finding__status .icon {
  margin-right: 0.25rem;
}

/* The article page: icons beside metadata, the rating's icon and scale, the
   confidence meter, key point kinds, and update-history credits. */
.byline > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.byline__audits {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.byline__audits:hover,
.byline__audits:focus-visible {
  color: var(--brand);
  text-decoration: underline;
}

.verdict-card__claim > p,
.verdict-card__why > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.verdict-card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.verdict-card__icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2.4;
}

.rating-scale {
  display: flex;
  gap: 3px;
  margin-top: 0.45rem;
}

.rating-scale i {
  display: block;
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: var(--rating-line, var(--line));
}

.rating-scale .rating-scale__on {
  background: var(--rating, var(--brand));
}

.confidence-meter {
  display: inline-flex;
  gap: 2px;
  margin-right: 0.4rem;
  vertical-align: -0.1em;
}

.confidence-meter i {
  display: block;
  width: 6px;
  height: 0.9em;
  border-radius: 2px;
  background: var(--line-strong);
}

.confidence-meter .confidence-meter__on {
  background: var(--brand-bright);
}

.audit-panel__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.audit-panel li {
  gap: 0.5rem;
}

.toc a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.toc a:hover,
.toc a:focus-visible {
  background: var(--surface);
  color: var(--ink);
}

.toc__count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
}

.article-body h2.section-title {
  display: flex;
}

.key-point__kind {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 800;
}

.key-point--established .key-point__kind { color: var(--confirmed); }
.key-point--notShown .key-point__kind { color: #8f4310; }
.key-point--context .key-point__kind { color: var(--brand-bright); }

.evidence-method {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 650;
  text-align: right;
}

.objection__short {
  margin: 0 0 0.5rem;
  color: var(--brand);
}

.objection__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.objection__rating-icon {
  width: 1em;
  height: 1em;
}

.version-credits {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.version-credits li {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.version-credits__version {
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 2;
}

.version-credits__who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.credit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem 0.2rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

span.credit-chip {
  padding-left: 0.6rem;
}

a.credit-chip:hover,
a.credit-chip:focus-visible {
  border-color: var(--brand-bright);
}

.credit-chip__count {
  color: var(--ink-soft);
  font-weight: 600;
}

@media (max-width: 600px) {
  .evidence-method {
    display: none;
  }

  .version-credits li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* Briefings (#560, #588): a page that collects fact checks on one issue and
   rates nothing itself. Every side gets the same neutral treatment, told
   apart only by its label and position: a side color could match a
   campaign's or a rating's. Ratings are the only color on the page. */
.fp-tag--briefing {
  background: var(--brand-soft);
  color: var(--brand);
}

.briefing-hero,
.briefing-body {
  width: min(var(--wide), calc(100% - 2rem));
}

.briefing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 2rem;
  align-items: start;
}

.briefing-hero__main {
  min-width: 0;
}

.briefing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.briefing-sides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.briefing-side {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 750;
}

.briefing-selection {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  font-size: 0.92rem;
}

.briefing-selection h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.briefing-selection p {
  margin: 0;
}

.briefing-selection__note {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.briefing-legend {
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.briefing-legend p {
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  font-weight: 750;
}

.briefing-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
}

/* The contents bar stays at the top while reading, and scrolls sideways
   within itself on a narrow screen. */
.briefing-contents {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding-block: 0.6rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax -12px);
  scrollbar-width: thin;
}

.briefing-contents__label {
  margin-right: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.briefing-contents a {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.briefing-contents a:hover,
.briefing-contents a:focus-visible {
  border-color: var(--brand-bright);
}

.briefing-contents a[aria-current] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.briefing-contents__count {
  margin-left: 0.3rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.7;
}

/* Headings land below the contents bar. */
.briefing-section {
  scroll-margin-top: 3.5rem;
}

.briefing-section {
  margin-block: 0;
  padding-block: 2.25rem;
}

/* Alternate sections sit on a soft band the full width of the window. */
.briefing-section--band {
  background: var(--surface-soft);
  box-shadow: 0 0 0 100vmax var(--surface-soft);
  clip-path: inset(0 -100vmax);
}

.briefing-section > h2 {
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
}

.briefing-intro,
.briefing-background {
  max-width: 70ch;
  color: var(--ink-soft);
}

.briefing-background {
  color: var(--ink);
  font-size: 1.05rem;
}

.briefing-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
  align-items: start;
}

.briefing-vote {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-top: 6px solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
}

.briefing-vote p {
  margin: 0;
}

.briefing-vote__side {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.briefing-vote__summary {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1.15;
}

/* A side's column: a bordered panel under a neutral header bar. */
.briefing-panel {
  min-width: 0;
  padding: 0 1rem 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.briefing-panel__head {
  margin: 0 -1rem 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 5px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 1.15rem;
}

.briefing-group + .briefing-group {
  margin-top: 1.25rem;
}

.briefing-group h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.briefing-group__heading {
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A quote as a compact card, edged in its rating's color. */
.briefing-claim {
  display: grid;
  gap: 0.35rem;
  margin-block: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--rating, var(--line-strong));
  border-radius: 8px;
  background: var(--surface);
}

.briefing-claim__quote {
  margin: 0;
}

.briefing-claim__quote p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
}

.briefing-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.92rem;
}

.briefing-rating__icon {
  width: 1em;
  height: 1em;
}

.briefing-rating__updated {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.briefing-unrated {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-style: italic;
}

/* Tracked, not rated: neutral, never a rating color. */
.briefing-prediction {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.briefing-why {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.briefing-evidence {
  font-size: 0.85rem;
  font-weight: 700;
}

/* Who said it where: one quiet line, not the site's boxed disclosure. */
.briefing-claim__about {
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.briefing-claim__about summary {
  display: list-item;
  padding: 0;
  font-weight: 400;
  list-style: disclosure-closed;
}

.briefing-claim__about[open] summary {
  list-style: disclosure-open;
}

.briefing-claim__about summary::before {
  content: none;
}

.briefing-claim__about p {
  margin: 0.35rem 0 0;
}

/* A link from a briefing lands here (#588): show where. */
.briefing-claim:target,
.objection:target {
  outline: 3px solid var(--brand-bright);
  outline-offset: 2px;
  scroll-margin-top: 1.5rem;
}

/* A point beside the best reply to it, edged in the point's rating color. */
.briefing-case {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.9rem 0 0.9rem 0.75rem;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--rating, var(--line-strong));
}

.briefing-panel__head + .briefing-case {
  border-top: 0;
}

.briefing-case__point,
.briefing-case__reply {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
}

.briefing-case__point h4,
.briefing-case p {
  margin: 0;
}

.briefing-case__reply {
  padding-left: 0.9rem;
  border-left: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.briefing-case__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.briefing-value,
.briefing-question {
  margin-block: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.briefing-panel .briefing-value {
  margin-block: 0.75rem;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.briefing-panel__head + .briefing-value {
  padding-top: 0;
  border-top: 0;
}

.briefing-value h4,
.briefing-question h3 {
  margin-top: 0;
}

.briefing-value-facts {
  padding-left: 1.1rem;
}

.briefing-value-fact--cutsAgainst {
  list-style-type: "– ";
}

.briefing-value-fact--supports {
  list-style-type: "+ ";
}

/* Facts as tiles. */
.briefing-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-facts > li {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-bright);
  border-radius: 8px;
  background: var(--surface);
}

.briefing-facts p {
  margin: 0;
}

.briefing-sources {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  /* A locator can be longer than its card (#607): let it wrap, and break a
     long unbroken one (a URL) rather than overflow. */
  overflow-wrap: anywhere;
}

.briefing-links {
  padding-left: 1.6rem;
}

.briefing-links > li::marker {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.briefing-links li + li {
  margin-top: 0.75rem;
}

.briefing-links p {
  margin: 0.25rem 0 0;
}

/* A chart a data section links, drawn under its note (#619). */
.briefing-chart {
  max-width: 48rem;
  margin-block: 0.75rem 0;
}

.briefing-link-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.92rem;
}

.briefing-disclosure dt {
  font-weight: 800;
}

.briefing-disclosure dd {
  margin: 0 0 0.5rem;
}

/* The other claims an article rates (#588), under its verdict card. */
.also-checked {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-size: 0.9rem;
}

.also-checked h2 {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.also-checked ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.also-checked li {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
}

@media (max-width: 760px) {
  .briefing-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .briefing-case {
    grid-template-columns: minmax(0, 1fr);
  }

  .briefing-case__reply {
    padding: 0.6rem 0 0;
    border-top: 1px dashed var(--line-strong);
    border-left: 0;
  }
}