/* ---- Research articles (public/research.php): long-form text in the page card, with charts drawn as plain SVG by
   App\FederalClassActions and coloured here with the site's tokens. Charts are 760 units wide and scale with the
   column; on phones they keep a 620px minimum and scroll sideways inside .fca-scroll, so the labels stay readable. ---- */
main.research { max-width: none; }
/* The article reads as one centred column, 1140px wide, and the text runs the full width of that column like the
   charts do (no per-paragraph ch cap: on a wide screen a 74ch paragraph beside a 1,200px chart looked lopsided).
   The type is a step larger to keep the lines comfortable at that width. */
.research > .page-head, .research > .page-card { max-width: 1140px; margin-left: auto; margin-right: auto; }
/* The footer keeps to the same column here: site-wide it runs to the window gutters, which suits the full-width pages
   but left it hanging at the left edge under this centred article. The gutter is inside the footer box (border-box),
   so the content lines up with the card edges. */
main.research ~ .site-footer .site-footer-in { max-width: calc(1140px + 2 * var(--gutter)); }
.research .page-head .lead { font-size: 18px; }
.research .page-card { padding: 28px 32px 24px; font-size: 17px; line-height: 1.6; }
.research .page-card h2 { font-size: 22px; margin: 36px 0 10px; padding-top: 26px; border-top: 1px solid var(--line); }
.research .page-card h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.research .page-card h3 { font-size: 17px; margin: 20px 0 6px; }
.research p, .research li, .research .page-card p, .research .page-card li, .research .method dd, .research .page-head .lead { max-width: none; }
.research .page-card ul { padding-left: 22px; }

/* The summary: one tile per finding, the number first. */
.key-findings { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.key-findings li { max-width: none; background: var(--page); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 13px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.key-findings b { display: block; margin-bottom: 2px; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--brand); font-variant-numeric: tabular-nums; }
.key-findings li span { color: var(--ink); }

/* A chart: caption above (the finding, then what is counted), the drawing, the source line under it. */
.fca-fig { margin: 16px 0 22px; max-width: none; }
.fca-fig figcaption { margin: 0 0 8px; }
.fca-fig figcaption b { display: block; font-size: 17px; line-height: 1.35; }
.fca-fig figcaption span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.fca-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.fca-chart { display: block; width: 100%; min-width: 620px; height: auto; font: 13px/1 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.fca-chart text { fill: var(--ink); }
.fca-chart .t2 { fill: var(--muted); }
.fca-chart .small { font-size: 11px; }
.fca-chart .bar { fill: var(--muted); fill-opacity: .42; }
.fca-chart .bar.acc { fill: var(--brand); fill-opacity: 1; }
.fca-chart .bar.acc2 { fill: var(--brand); fill-opacity: .45; }
.fca-chart .bar.dim { fill-opacity: .2; }
.fca-chart .grid { stroke: var(--line); }
.fca-chart .axis { stroke: var(--muted); stroke-opacity: .7; }
.fca-chart .ref { stroke: var(--warn); stroke-dasharray: 3 3; }
.fca-chart .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.fca-chart .line.dash { stroke-dasharray: 4 4; }
.fca-chart .dot { fill: var(--brand); }
.fca-chart .dot.hollow { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.fca-src { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* Data and method: term, then its line. */
.research .method { margin: 0; }
.research .method dt { font-weight: 700; margin-top: 12px; }
.research .method dd { margin: 2px 0 0; color: var(--muted); }
.research .method dd a { color: var(--brand); }

@media (max-width: 600px) {
  .research .page-card { padding: 20px 16px 18px; font-size: 16px; }
  .research .page-card h2 { font-size: 19px; }
  .fca-fig figcaption b { font-size: 15px; }
}
@media print {
  .fca-chart { min-width: 0; }
  .fca-chart text { fill: #000; }
  .fca-chart .t2 { fill: #444; }
}