/* KudoNovel Research pages (/research/*): the site's own design (site.css,
   loaded first) plus the pieces a study needs: the key figure, stat tiles,
   bar charts, heat tables, data tables, case files and the press block.
   Built by scripts/research-layout.mjs; every colour is a token. */

:root {
  /* chart series: readable on --surface, and dark text (--rs-ink) reads on each */
  --rs-green: #6fd3a0;
  --rs-amber: #f0b36a;
  --rs-red: #f0647e;
  --rs-grey: #8a8392;
  --rs-rose: #f06a9b;
  --rs-apricot: #f5a66a;
  --rs-lilac: #b49cff;
  --rs-ink: #121015;
  --rs-track: #221f28;
  --rs-max: 1120px;
}

@supports not (color: color-mix(in srgb, red, blue)) {

  :root {
    --rs-green__r: 111;
    --rs-green__g: 211;
    --rs-green__b: 160;
    --rs-green__a: 1;
    --rs-amber__r: 240;
    --rs-amber__g: 179;
    --rs-amber__b: 106;
    --rs-amber__a: 1;
    --rs-red__r: 240;
    --rs-red__g: 100;
    --rs-red__b: 126;
    --rs-red__a: 1;
    --rs-grey__r: 138;
    --rs-grey__g: 131;
    --rs-grey__b: 146;
    --rs-grey__a: 1;
    --rs-rose__r: 240;
    --rs-rose__g: 106;
    --rs-rose__b: 155;
    --rs-rose__a: 1;
    --rs-apricot__r: 245;
    --rs-apricot__g: 166;
    --rs-apricot__b: 106;
    --rs-apricot__a: 1;
    --rs-lilac__r: 180;
    --rs-lilac__g: 156;
    --rs-lilac__b: 255;
    --rs-lilac__a: 1;
    --rs-ink__r: 18;
    --rs-ink__g: 16;
    --rs-ink__b: 21;
    --rs-ink__a: 1;
    --rs-track__r: 34;
    --rs-track__g: 31;
    --rs-track__b: 40;
    --rs-track__a: 1;
  }
}

.rs-wrap { width: 100%; max-width: var(--rs-max); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .rs-wrap { padding-inline: 18px; } }

/* ---------- hero ---------- */
.rs-hero { padding-bottom: 8px; }
.rs-head { max-width: 860px; margin: 0 auto; padding: 44px 0 28px; text-align: center; }
.rs-head h1 {
  margin: 20px 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(40px, 6.6vw, 76px) / var(--tz, 1));
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rs-head h1 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-byline { margin-top: 16px; font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); }
.rs-byline b { color: var(--fg-2); font-weight: 600; }

.rs-key {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 32px;
  margin: 8px 0 14px;
  padding: 28px 32px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(240, 106, 155, 0.1), rgba(245, 166, 106, 0.03)), var(--surface);
}
.rs-key-num {
  font-family: var(--font-display);
  font-size: calc(clamp(44px, 7vw, 76px) / var(--tz, 1));
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rs-key-cap { font-size: calc(clamp(16px, 1.7vw, 18.5px) / var(--tz, 1)); line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }
.rs-key-cap b { color: var(--fg); }
@media (max-width: 760px) { .rs-key { grid-template-columns: 1fr; padding: 24px 22px; } }

.rs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.rs-stat { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 1px 0 var(--hairline); }
.rs-stat-v { font-family: var(--font-display); font-size: calc(32px / var(--tz, 1)); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rs-stat-v.good { color: var(--rs-green); }
.rs-stat-v.bad { color: var(--rs-red); }
.rs-stat-l { margin-top: 6px; font-size: calc(13.5px / var(--tz, 1)); line-height: 1.45; color: var(--fg-2); }
@media (max-width: 900px) { .rs-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- sections ---------- */
.rs-main .section { padding: 52px 0; }
.rs-kicker { display: block; margin-bottom: 10px; font-size: calc(12px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); }
.rs-main .section-head { max-width: 760px; }
.rs-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 1px 0 var(--hairline); padding: 24px; }
@media (max-width: 600px) { .rs-card { padding: 18px 16px; } }

/* intro: the lead beside the findings, so neither leaves a blank column */
.rs-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px; align-items: start; }
.rs-lead p { font-size: calc(17px / var(--tz, 1)); line-height: 1.75; color: var(--fg-soft); text-wrap: pretty; }
.rs-lead p + p { margin-top: 1em; }
.rs-lead a, .rs-prose a, .rs-findings a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rs-findings h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(26px / var(--tz, 1)); margin-bottom: 14px; }
.rs-findings ol { list-style: none; counter-reset: f; display: grid; gap: 12px; }
.rs-findings li { counter-increment: f; position: relative; padding-left: 38px; font-size: calc(15px / var(--tz, 1)); line-height: 1.6; color: var(--fg-soft); }
.rs-findings li::before {
  content: counter(f);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(12.5px / var(--tz, 1)); font-weight: 800; color: var(--accent-text);
  background: var(--accent-soft); border: 1px solid var(--accent-border);
}
.rs-findings li b { color: var(--fg); }
@media (max-width: 900px) { .rs-intro { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- charts ---------- */
.rs-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; font-size: calc(13.5px / var(--tz, 1)); color: var(--fg-2); }
.rs-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rs-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.rs-bars { display: grid; gap: 12px; }
.rs-bar { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 56px; align-items: center; gap: 14px; }
.rs-bar-name { font-size: calc(14.5px / var(--tz, 1)); font-weight: 600; color: var(--fg); line-height: 1.25; text-align: right; }
.rs-bar-name small { display: block; font-size: calc(12px / var(--tz, 1)); font-weight: 500; color: var(--fg-3); }
.rs-track { display: flex; height: 26px; border-radius: 6px; background: var(--rs-track); overflow: hidden; }
.rs-seg { height: 100%; min-width: 2px; }
.rs-bar-val { font-size: calc(15px / var(--tz, 1)); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
@media (max-width: 600px) {
  .rs-bar { grid-template-columns: 1fr 48px; gap: 6px 10px; }
  .rs-bar-name { grid-column: 1 / -1; text-align: left; }
  .rs-bar-name small { display: inline; margin-left: 6px; }
}

.rs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-heat { width: calc(100% + 8px); border-collapse: separate; border-spacing: 4px; margin: -4px; }
.rs-heat th { font-size: calc(12.5px / var(--tz, 1)); font-weight: 600; color: var(--fg-2); text-align: center; vertical-align: bottom; padding: 4px 6px 8px; line-height: 1.3; min-width: 72px; }
.rs-heat th small { display: block; font-weight: 500; color: var(--fg-3); }
.rs-heat th.rs-rowh { text-align: right; color: var(--fg); font-size: calc(14px / var(--tz, 1)); white-space: nowrap; min-width: 0; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-right: 10px; vertical-align: middle; }
.rs-heat td { height: 40px; min-width: 64px; border-radius: 6px; text-align: center; font-size: calc(13.5px / var(--tz, 1)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rs-ink); }
.rs-heat td.na { background: var(--rs-track); color: var(--fg-3); }

.rs-table { width: 100%; border-collapse: collapse; font-size: calc(14.5px / var(--tz, 1)); }
.rs-table th, .rs-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.rs-table thead th { font-size: calc(12px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); border-bottom-color: var(--border-strong); }
.rs-table tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.rs-table td { color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.rs-table td.rs-quote { font-family: var(--font-display); font-size: calc(14px / var(--tz, 1)); color: var(--fg-2); min-width: 220px; }
.rs-table tr:last-child th, .rs-table tr:last-child td { border-bottom: 0; }

/* ---------- case files ---------- */
.rs-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rs-case { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.rs-case summary { position: relative; cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 16px 44px 16px 18px; }
.rs-case summary::-webkit-details-marker { display: none; }
.rs-case summary::after { content: "+"; position: absolute; top: 14px; right: 18px; font-size: calc(18px / var(--tz, 1)); line-height: 1; color: var(--fg-2); font-weight: 600; }
.rs-case[open] summary::after { content: "−"; }
.rs-case-t { font-family: var(--font-display); font-size: calc(18px / var(--tz, 1)); color: var(--fg); }
.rs-case-a { font-family: var(--font-display); font-style: italic; color: var(--fg-2); }
.rs-case-n { width: 100%; font-size: calc(13px / var(--tz, 1)); font-weight: 700; color: var(--rs-green); }
.rs-case-n.some { color: var(--rs-red); }
.rs-case-body { padding: 0 18px 18px; font-size: calc(14.5px / var(--tz, 1)); color: var(--fg-soft); }
.rs-case-body h4 { margin: 14px 0 4px; font-size: calc(12px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.rs-case-body blockquote { margin-top: 4px; padding-left: 12px; border-left: 3px solid var(--rs-red); font-family: var(--font-display); color: var(--fg); white-space: pre-wrap; }
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-tag { font-size: calc(12px / var(--tz, 1)); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg-2); }
.rs-sub { margin: 28px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: calc(22px / var(--tz, 1)); }
@media (max-width: 760px) { .rs-cases { grid-template-columns: 1fr; } }

/* ---------- method, requests ---------- */
.rs-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rs-method .rs-card { padding: 20px 22px; font-size: calc(14.5px / var(--tz, 1)); line-height: 1.65; color: var(--fg-soft); }
.rs-method .rs-card b { display: block; margin-bottom: 4px; color: var(--fg); font-size: calc(15px / var(--tz, 1)); }
.rs-method .rs-card a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .rs-method { grid-template-columns: 1fr; } }
.rs-prose { font-size: calc(15px / var(--tz, 1)); line-height: 1.65; color: var(--fg-soft); }
.rs-prose h3 { margin: 18px 0 8px; font-size: calc(13px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.rs-prose h3:first-child { margin-top: 0; }
.rs-prose ul { padding-left: 18px; display: grid; gap: 8px; }
.rs-prose b { color: var(--fg); }

/* ---------- press, related ---------- */
.rs-press { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; align-items: stretch; }
.rs-press h3 { font-family: var(--font-display); font-weight: 400; font-size: calc(24px / var(--tz, 1)); margin-bottom: 8px; }
.rs-press p { font-size: calc(14.5px / var(--tz, 1)); line-height: 1.65; color: var(--fg-soft); }
.rs-press p + p { margin-top: 10px; }
.rs-press a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rs-press .btn { margin: 16px 0 14px; white-space: normal; text-align: center; }
.rs-cite { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-deep); font-family: var(--font-mono); font-size: calc(12.5px / var(--tz, 1)); line-height: 1.6; color: var(--fg-soft); overflow-wrap: anywhere; }
@media (max-width: 860px) { .rs-press { grid-template-columns: 1fr; } }

.rs-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rs-related a { display: block; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color 120ms, background 120ms; }
.rs-related a:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.rs-related .k { font-size: calc(11.5px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.rs-related .t { display: block; margin: 6px 0 4px; font-family: var(--font-display); font-size: calc(20px / var(--tz, 1)); color: var(--fg); }
.rs-related .d { font-size: calc(13.5px / var(--tz, 1)); color: var(--fg-2); line-height: 1.5; }

.rs-cols { columns: 2; column-gap: 40px; padding-left: 22px; font-family: var(--font-display); font-size: calc(16px / var(--tz, 1)); color: var(--fg-soft); }
.rs-cols li { margin: 0 0 8px; break-inside: avoid; }
.rs-cols li span { font-family: var(--font-ui); font-size: calc(13px / var(--tz, 1)); font-weight: 700; color: var(--fg-3); margin-left: 6px; }
@media (max-width: 640px) { .rs-cols { columns: 1; } }