/* /vahan/reports — the reports desk.
   Layered on top of market.css (the shared ff-* system); everything here is
   namespaced .rp-* so it cannot leak into the dashboard or the insight pages.
   The report takes the page's full frame since 11 Nov 2026 (WIDE_PAGES.md): its prose runs
   in two columns from 1,100px (.rp-paras), so the measure stays readable, and the charts and
   tables use the width. It was a centred 1,080px column, with 140px empty on each side. */

.rp-page { margin-inline: auto; }

.rp-crumb { font-size: .78rem; color: var(--ff-text-faint); margin-bottom: 14px; }
.rp-crumb a { color: var(--ff-accent); text-decoration: none; }
.rp-crumb a:hover { text-decoration: underline; }
.rp-crumb span { color: var(--ff-text-soft); }

/* ── article header ───────────────────────────────────────────── */
.rp-head { margin-bottom: 18px; }
.rp-kicker {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ff-text-faint); margin-bottom: 10px;
}
.rp-tag {
  background: var(--ff-accent); color: #fff; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .03em;
}
.rp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ff-text-faint); }
.rp-head h1 {
  font-size: clamp(1.5rem, 3.3vw, 2.15rem); line-height: 1.22;
  color: var(--ff-primary); margin: 0 0 12px; letter-spacing: -.02em;
}
/* No ch caps on the article's text (standfirst, paragraphs, table notes): at 72-82ch they
   stopped about 370px short of the charts and tables beside them, leaving a blank band
   (operator, 11 Nov 2026; TEXT_CARD_WIDTH.md). A section's paragraphs flow in two columns
   from 1,100px instead (.rp-paras below), which keeps a line near 70 characters. */
.rp-standfirst {
  font-size: 1.02rem; line-height: 1.62; color: #374151;
  margin: 0 0 14px;
}
.rp-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: .78rem; color: var(--ff-text-faint);
  padding: 10px 0; border-top: 1px solid var(--ff-border);
  border-bottom: 1px solid var(--ff-border);
}
.rp-byline strong { color: var(--ff-primary); font-weight: 600; }
.rp-sep { color: var(--ff-border); }

.rp-stats { margin: 16px 0 6px; }

.rp-notice {
  font-size: .8rem; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: var(--ff-radius);
  padding: 9px 13px; margin: 10px 0 4px;
}

/* ── body ─────────────────────────────────────────────────────── */
.rp-section { margin: 26px 0; }
.rp-section h2 {
  font-size: 1.16rem; color: var(--ff-primary); margin: 0 0 12px;
  padding-bottom: 7px; border-bottom: 2px solid var(--ff-accent);
  display: inline-block; letter-spacing: -.01em;
}
.rp-para {
  font-size: .95rem; line-height: 1.72; color: #26303f;
  margin: 0 0 13px;
}
.rp-para b { color: var(--ff-primary); font-weight: 650; }
/* Two or more paragraphs: two columns on a wide screen, never splitting a paragraph.
   One paragraph runs the full width. */
@media (min-width: 1100px) {
  .rp-paras:has(> .rp-para ~ .rp-para) { columns: 2; column-gap: 40px; }
  .rp-paras > .rp-para { break-inside: avoid; }
}

.rp-figure { margin: 4px 0 18px; }
.rp-figure .ff-card-header h3 {
  font-size: .92rem; font-weight: 600; color: var(--ff-primary); margin: 0;
}
.rp-figsub { margin: 0 0 10px; font-size: .8rem; color: var(--ff-text-soft); line-height: 1.5; }
.rp-chart { position: relative; }

.rp-tabletitle {
  font-size: .95rem; font-weight: 650; color: var(--ff-primary);
  margin: 16px 0 4px;
}
.rp-tablewrap { margin-bottom: 8px; }
.rp-tablenote {
  font-size: .76rem; line-height: 1.6; color: var(--ff-text-faint);
  margin: 0 0 6px;
}
/* Credit line under a report's first table (BING_SEO_2026_10.md, 31 Oct). */
.rp-cite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: .78rem; line-height: 1.5; color: var(--ff-text-faint);
  border: 1px dashed var(--ff-border); border-radius: var(--ff-radius);
  padding: 8px 12px; margin: 10px 0 4px;
}
.rp-cite-copy {
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: var(--ff-accent); background: transparent;
  border: 1px solid var(--ff-border); border-radius: 999px; padding: 3px 11px;
}
.rp-cite-copy:hover, .rp-cite-copy:focus-visible { border-color: var(--ff-accent); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.rp-faq details {
  background: var(--ff-card); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius); margin-bottom: 8px; overflow: hidden;
}
.rp-faq summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: .89rem;
  color: var(--ff-primary); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::after { content: '+'; font-size: 1.1rem; color: var(--ff-text-faint); }
.rp-faq details[open] summary::after { content: '–'; }
.rp-faq .ans { padding: 0 16px 13px; font-size: .86rem; line-height: 1.65; color: #374151; }

.rp-archive { margin-bottom: 4px; }
.rp-chip-all { font-weight: 600; }

.rp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.rp-related a {
  display: block; background: var(--ff-card); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius); padding: 13px 15px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.rp-related a:hover { border-color: var(--ff-accent); box-shadow: var(--ff-shadow); }
.rp-related b { display: block; color: var(--ff-primary); font-size: .89rem; margin-bottom: 3px; }
.rp-related span { color: var(--ff-text-soft); font-size: .78rem; line-height: 1.45; }

.rp-method { margin-top: 26px; }

/* ── hub ──────────────────────────────────────────────────────── */
.rp-sectionhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 26px 0 12px;
  border-bottom: 1px solid var(--ff-border); padding-bottom: 8px;
}
.rp-sectionhead h2 { font-size: 1.12rem; color: var(--ff-primary); margin: 0; }
.rp-sectionhead span { font-size: .79rem; color: var(--ff-text-faint); }

.rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 13px; }
.rp-card {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--ff-card); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius); padding: 15px 16px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rp-card:hover { border-color: var(--ff-accent); box-shadow: var(--ff-shadow); transform: translateY(-1px); }
.rp-card.is-lead { grid-column: span 2; border-color: var(--ff-accent); }
/* The ten segment cards of a month, the first one the lead: across three columns the lead takes
   its whole row and across four all but one slot, so every row is full (12 slots). As many
   columns as fit gave five on the 1,400px page: 5 + 5 + 1 (WIDE_PAGES.md). */
@media (min-width: 800px) {
  .rp-cards:has(> :nth-child(10):last-child) > .is-lead { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .rp-cards:has(> .is-lead):has(> :nth-child(10):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rp-card-tag {
  align-self: flex-start; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; color: var(--ff-accent);
  background: rgba(37, 99, 235, .09); padding: 2px 8px; border-radius: 999px;
}
.rp-card b { color: var(--ff-primary); font-size: .96rem; line-height: 1.35; }
.rp-card-num { font-size: 1.18rem; font-weight: 700; color: var(--ff-primary); }
.rp-card-num i { font-size: .72rem; font-weight: 500; font-style: normal; color: var(--ff-text-faint); }
.rp-card-blurb { font-size: .78rem; color: var(--ff-text-soft); line-height: 1.5; }

.rp-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: #b91c1c; background: #fef2f2;
  border: 1px solid #fecaca; padding: 2px 9px; border-radius: 999px;
  vertical-align: middle; margin-right: 6px;
}
.rp-card.is-live { border-left: 3px solid #dc2626; }
.rp-card.is-live .rp-card-tag { color: #b91c1c; background: rgba(220, 38, 38, .09); }

.rp-vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rp-vs a {
  display: block; background: var(--ff-card); border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius); padding: 14px 15px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.rp-vs a:hover { border-color: var(--ff-accent); box-shadow: var(--ff-shadow); }
.rp-vs b { display: block; color: var(--ff-primary); font-size: 1rem; margin-bottom: 4px; }
.rp-vs span { display: block; color: var(--ff-text-soft); font-size: .79rem; line-height: 1.5; margin-bottom: 6px; }
.rp-vs em { font-size: .72rem; color: var(--ff-text-faint); font-style: normal; }

.rp-archive-list { border: 1px solid var(--ff-border); border-radius: var(--ff-radius); overflow: hidden; background: var(--ff-card); }
.rp-archive-row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 10px 15px; border-bottom: 1px solid var(--ff-border);
}
.rp-archive-row:last-child { border-bottom: none; }
.rp-archive-month {
  flex: 0 0 130px; font-size: .85rem; font-weight: 600; color: var(--ff-primary);
}
.rp-archive-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rp-archive-links a { font-size: .8rem; color: var(--ff-accent); text-decoration: none; white-space: nowrap; }
.rp-archive-links a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .rp-card.is-lead { grid-column: span 1; }
  .rp-archive-row { flex-direction: column; gap: 6px; }
  .rp-archive-month { flex: none; }
  .rp-head h1 { font-size: 1.42rem; }
  .rp-standfirst { font-size: .95rem; }
}

/* ── /vahan/reports/yearly — the period index ─────────────────────────────
   Reuses the monthly archive's row component, but every row carries its span
   and its progress state under the label, so the label column needs room.
   Scoped to .rp-periods: the monthly hub keeps its 130px column untouched. */
.rp-periods .rp-archive-month { flex: 0 0 250px; }
.rp-archive-month small {
  display: block; font-weight: 400; font-size: .72rem; color: var(--ff-text-faint);
  margin-top: 3px; line-height: 1.45;
}
.rp-inprog {
  font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #b91c1c; background: rgba(220, 38, 38, .09);
  padding: 1px 6px; border-radius: 999px; vertical-align: middle;
}
.rp-periods .rp-archive-list { margin-bottom: 22px; }

@media (max-width: 720px) {
  .rp-periods .rp-archive-month { flex: none; }
}
/* /vahan/reports/makers has one link a row: the label takes the row, so its line runs wide,
   and the link sits at the right end. In the 250px label column the line wrapped to four
   lines beside ~700px of nothing (TEXT_CARD_WIDTH.md, 11 Nov 2026). */
@media (min-width: 721px) {
  .rp-periods .rp-makers .rp-archive-month { flex: 1 1 auto; min-width: 0; }
  .rp-periods .rp-makers .rp-archive-links { flex: none; }
}