/* =========================================================================
   RESEARCH, stage page v2 (render/research.ts; docs/visual/RESEARCH-V2.md).
   The shared template draws the page (stage-v2.css); this file styles what
   sits inside its accordions. House tokens only, except one specimen, which
   says so: the five fictional accountants' homepages (their colours come
   from the lesson, set inline). Class prefix rsch- (no Aesthetic room uses it).
   ========================================================================= */

/* ---- shared inside the accordions ---- */
.rsch-lead { margin: 0 0 var(--s5); max-width: 60ch; }
.rsch-from { margin-top: var(--s5); }
.rsch-from a { color: var(--ink-2); }
.rsch-aside { margin: var(--s6) 0 0; max-width: 64ch; padding-left: var(--s4); border-left: 2px solid var(--brand); font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rsch-aside b { color: var(--ink); font-weight: 650; }

/* rsch-ask · questions that get opinions, rewritten as questions that get facts */
.rsch-swap__k { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.3fr); margin: 0 0 var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.rsch-swap__k span + span { grid-column: 3; color: var(--brand); }
.rsch-swap ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.rsch-swap li { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.3fr); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.rsch-swap s { font: 500 var(--t-base)/1.35 var(--ui); color: var(--ink-3); text-decoration-color: var(--ink-3); }
.rsch-swap__arrow { font: var(--t-md)/1 var(--mono); color: var(--brand); }
.rsch-swap b { font: 700 clamp(1.125rem, 2vw, 1.6rem)/1.2 var(--display); letter-spacing: -.015em; color: var(--ink); }
.rsch-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s7); align-items: start; margin-top: var(--s7); }
.rsch-split__lede { margin: 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 36ch; }
.rsch-voices { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.rsch-voices p { margin: 0; padding: var(--s4); font: 600 var(--t-md)/1.3 var(--display); color: var(--ink); background: var(--paper-deep); border: 1px solid var(--rule); }
.rsch-voices span { display: block; margin-bottom: var(--s2); font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.rsch-voices__agreed, .rsch-voices__open { grid-column: 1 / -1; }
.rsch-voices .rsch-voices__agreed { font: var(--t-base)/1.45 var(--ui); background: transparent; border-color: var(--brand); }
.rsch-voices__agreed span { color: var(--brand); }
.rsch-voices .rsch-voices__open { font: var(--t-base)/1.45 var(--ui); background: transparent; border: 1px dashed var(--rule-firm); }
.rsch-voices__open i { display: block; margin-top: var(--s2); font: normal var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.rsch-voices figcaption { grid-column: 1 / -1; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }

/* rsch-swim · one customer sentence at display size, then the working */
.rsch-quote { margin: 0; }
.rsch-quote blockquote { margin: 0 0 var(--s5); }
.rsch-quote blockquote p { margin: 0; max-width: 18ch; font: 800 var(--t-display-xl)/.98 var(--display); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.rsch-quote__a { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: .08em; text-underline-offset: .12em; }
.rsch-quote blockquote .vis-pin { vertical-align: super; margin: 0 .15em; font-size: var(--t-xs); letter-spacing: 0; }
.rsch-quote__notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: var(--s4) var(--s6); }
.rsch-quote__notes li { display: flex; gap: var(--s3); align-items: flex-start; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rsch-quote__notes b { display: block; color: var(--ink); font-weight: 650; }
.rsch-quote__vs { margin: var(--s5) 0 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rsch-quote__vs s { color: var(--ink-3); }
.rsch-quote figcaption { margin-top: var(--s3); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.rsch-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); max-width: 52rem; }
.rsch-read h4 { margin: 0 0 var(--s3); font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.rsch-read ol, .rsch-read ul { margin: 0; padding-left: var(--s5); font: var(--t-base)/1.6 var(--ui); color: var(--ink); }
.rsch-read p { margin: var(--s3) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }

/* rsch-default · five fictional homepages in miniature (specimen colours inline) */
.rsch-cat { margin: 0; }
.rsch-cat__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s5) var(--s3); }
.rsch-firm { display: flex; flex-direction: column; gap: var(--s3); }
.rsch-firm__page { display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: 0 0 var(--s3); background: var(--g); border: 1px solid var(--rule-firm); overflow: hidden; }
.rsch-firm__bar { height: 10%; background: var(--a); }
.rsch-firm__h { margin: 12% 10% 0; font: 800 clamp(.8rem, 1.3vw, 1.05rem)/1.05 var(--display); letter-spacing: -.02em; color: var(--a); }
.rsch-firm__img { display: grid; place-items: center; margin: auto 10% 0; aspect-ratio: 16 / 10; background: var(--b); font: var(--t-xs)/1 var(--mono); color: var(--bi); }
.rsch-firm.is-odd .rsch-firm__page { outline: 2px solid var(--brand); outline-offset: 3px; }
.rsch-firm__cap { font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.rsch-firm__cap b { display: block; font: 400 var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.rsch-firm__q { display: block; color: var(--ink); font-weight: 600; }
.rsch-firm__q mark { background: transparent; color: inherit; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.rsch-firm__m { display: block; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.rsch-cat__read { margin-top: var(--s5); max-width: 60ch; }
.rsch-cat__read p { margin: 0; font: var(--t-md)/1.45 var(--ui); color: var(--ink); }
.rsch-cat__read b { font-weight: 650; }
.rsch-cat__read .rsch-cat__cap { margin-top: var(--s2); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.rsch-keep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s7); margin-top: var(--s7); }
.rsch-keep__lede { margin: 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 34ch; }
.rsch-keep__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.rsch-keep h4 { margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-firm); font: 650 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.rsch-keep ul { list-style: none; margin: 0; padding: 0; }
.rsch-keep li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }

/* rsch-claims · a claim, traced to its sources */
.rsch-ver { margin: 0; }
.rsch-ver ol { list-style: none; margin: 0; padding: 0; }
.rsch-ver__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.2fr); border-top: 1px solid var(--rule-firm); }
.rsch-ver__row:last-child { border-bottom: 1px solid var(--rule-firm); }
.rsch-ver__row > * { margin: 0; padding: var(--s4) var(--s4) var(--s5) 0; }
.rsch-ver__row > * + * { padding-left: var(--s4); border-left: 1px solid var(--rule); position: relative; }
.rsch-ver__row > * + *::before { content: ""; position: absolute; left: -5px; top: 1.65rem; border: 5px solid transparent; border-left-color: var(--brand); border-right: 0; }
.rsch-ver__k { display: block; margin-bottom: var(--s2); font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.rsch-ver__claim { font: 700 var(--t-md)/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.rsch-ver__src ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.rsch-ver__src li, .rsch-ver__none { margin: 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.rsch-ver__act { font: var(--t-sm)/1.45 var(--ui); color: var(--ink); }
.rsch-ver figcaption { margin-top: var(--s3); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.rsch-tag { display: inline-block; padding: .2em .55em; font: 500 var(--t-xs)/1.3 var(--mono); border: 1px solid var(--brand); color: var(--brand); white-space: nowrap; }
.rsch-tag.is-ver { background: var(--brand); color: var(--paper); }
.rsch-tag.is-conf { border-width: 1px 1px 1px 4px; }
.rsch-tag.is-none { border: 1px dashed var(--rule-firm); color: var(--ink-2); }
.rsch-status { margin: 0 0 var(--s6); }
.rsch-status h4 { margin: 0 0 var(--s3); font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.rsch-status ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s6); max-width: 52rem; }
.rsch-status li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.rsch-status .rsch-tag { justify-self: start; }
.rsch-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s6); max-width: 60rem; }
.rsch-two p { margin: 0; padding-left: var(--s4); border-left: 2px solid var(--brand); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rsch-two b { display: block; margin-bottom: var(--s1); font: 650 var(--t-base)/1.35 var(--ui); color: var(--ink); }

/* rsch-swim · what parents said, beside what it suggests (the homepages themselves are in the film) */
.rsch-ev { margin-top: var(--s4); }
.rsch-ev ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
.rsch-ev__k { margin: 0 0 var(--s3); font: var(--t-xs)/1.3 var(--mono); color: var(--brand); }
.rsch-ev ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.rsch-ev li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); }
.rsch-ev li > * { grid-column: 2; }
.rsch-ev li > .vis-pin { grid-column: 1; grid-row: 1; }
.rsch-ev q { font: 650 var(--t-md)/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); quotes: "“" "”"; }
.rsch-ev__n { font: var(--t-xs)/1.3 var(--mono); color: var(--brand); }
.rsch-ev__r { font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.rsch-ev__avoid { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); font: 600 var(--t-md)/1.2 var(--display); color: var(--ink-3); }
.rsch-ev__avoid span { display: block; margin-bottom: var(--s2); font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.rsch-ev__avoid s { margin-right: var(--s3); text-decoration-color: var(--brand); text-decoration-thickness: 2px; }

/* rsch-files and rsch-tools · the shared ledger and gallery, opened out inside an accordion (their row headings are h4 here) */
.rsch-files .afl__t h4 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
#rsch-rg .rg-group__head h4 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.15 var(--display); letter-spacing: -.015em; color: var(--ink); }
#rsch-rg .rg__head { margin-bottom: var(--s5); }

/* ---- narrower screens: the rule is "stack when a column would fall under ~18rem", not a device ---- */
@media (max-width: 64rem) {
  .rsch-ev ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsch-ver__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsch-ver__row > :nth-child(3) { padding-left: 0; border-left: 0; }
  .rsch-ver__row > :nth-child(3)::before { display: none; }
  .rsch-split, .rsch-keep { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 44rem) {
  .rsch-read, .rsch-two, .rsch-status ul, .rsch-keep__cols, .rsch-quote__notes { grid-template-columns: 1fr; }
  .rsch-ev ol { grid-template-columns: 1fr; }
  .rsch-swap__k { display: none; }
  .rsch-swap li { grid-template-columns: 1fr; gap: var(--s2); }
  .rsch-swap__arrow { display: none; }
  .rsch-swap b::before { content: "→ "; color: var(--brand); font-family: var(--mono); }
  .rsch-voices { grid-template-columns: 1fr; }
  .rsch-ver__row { grid-template-columns: 1fr; }
  .rsch-ver__row > * + * { padding-left: 0; border-left: 0; padding-top: 0; }
  .rsch-ver__row > * + *::before { display: none; }
}