/* Atelier · focus group research: findings, transcript, the round table. */

/* ── Findings: who landed where, then what the group concluded and what it can't say ── */
:root[data-register] .run-page .page-head__title { font-size: clamp(2rem, 2.9vw, 2.6rem); font-weight: 610; line-height: 1.05; letter-spacing: -.035em; max-width: 30ch; }
.run-page .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; color: var(--on-surface-faint); }
.run-page .page-head__sub { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; color: var(--on-surface-muted); }

/* Outcome classes as a small table of faces, not traffic lights: no hue judges an answer. */
.run-page .outcome-counts { gap: 10px; }
.run-page .outcome-count { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; border-top: 0 !important; box-shadow: inset 0 2px 0 var(--on-surface) !important; border-radius: 0 0 14px 14px; padding: 12px 14px 12px; background: var(--surface-raised); }
.run-page .outcome-count__label { grid-column: 1 / -1; }
.run-page .outcome-count[data-outcome] { --outcome-tone: var(--on-surface); }
.run-page .outcome-count__label { font-weight: 600; font-size: var(--text-sm); }
.run-page .outcome-count__value { font-size: 2rem; font-weight: 600; letter-spacing: -.04em; }
.run-page .outcome-count__total { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-surface-faint); }
.outcome-count__faces { display: flex; justify-content: end; min-height: 30px; margin: 0; }
.outcome-count__faces .avatar { inline-size: 30px; block-size: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--surface-raised); font-size: var(--text-sm); }
.outcome-count__faces .avatar img { width: 100%; height: 100%; object-fit: cover; }
.outcome-count__faces .avatar + .avatar { margin-inline-start: -8px; }
.outcome-count__faces:empty::before { content: ''; inline-size: 30px; block-size: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent; }
/* The tile as a plate of seats (Bishop, 2026-10-27): every participant has a seat in the same place on every
   tile; the ones who took this position show their face, the rest are holes, so four tiles of "1" still read */
.outcome-count__seats { gap: 5px; min-height: 22px; }
.outcome-count__seats .avatar, .outcome-count__seat { flex: none; inline-size: 22px !important; block-size: 22px !important; }
.outcome-count__seats .avatar + .avatar { margin-inline-start: 0; }
.outcome-count__seat { border-radius: 50%; background: var(--hole, var(--surface-sunken)); box-shadow: inset 0 0 0 1px var(--line); }
/* The seats say how many took part, so the figure says "1 / 4" and the word stays for screen readers */
html[data-look="instrument"] .run-page .outcome-count__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A finding: label, claim, then conditions beside uncertainty; uncertainty is never quieter than the claim. */
.run-page .finding-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--on-surface-faint); }
:root[data-register] .run-page .finding-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.run-page .finding-explanation { font-size: var(--text-md); line-height: 1.5; max-width: 62ch; }
.run-page .finding-context dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-faint); }
.run-page .finding-context > div:has(dt:where(:not(:empty))) { padding-left: 14px; border-left: 2px solid var(--on-surface); }
.run-page .finding-context > div:last-child { border-left: 2px dashed var(--attention); }
.run-page .finding-counts .evidence-role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; }

/* Quoted turns are the personas speaking: the serif voice. */
.run-page .analysis-quote { padding-left: 16px; border-left: 2px solid var(--on-surface); }
.run-page .analysis-quote > p { font-family: var(--font-voice); font-style: italic; font-size: var(--text-lg); line-height: 1.32; color: var(--on-surface); max-width: 46ch; }
.run-page .analysis-quote > a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; }
.run-page .finding-contribution__identity .avatar { border-radius: 50%; overflow: hidden; }
.run-page .research-limit { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .02em; }

/* ── Transcript: every turn is a persona speaking, so it reads like the chat ── */
:root[data-register] .transcript-page { max-inline-size: 60rem; }
.transcript-page .page-head__kicker, .transcript-page .transcript-meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; color: var(--on-surface-faint); }
:root[data-register] .transcript-page .page-head__title { font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: 610; letter-spacing: -.04em; line-height: 1; }
:root[data-register] .transcript-page .chat { gap: 32px; padding-top: 12px; }
:root[data-register] .transcript-page .transcript-turn,
:root[data-register='card'] .transcript-page .transcript-turn,
:root[data-register='type'] .transcript-page .transcript-turn {
  grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; padding: 0; border: 0; border-radius: 0; background: none;
}
.transcript-turn > .avatar { inline-size: 44px; block-size: 44px; border-radius: 50%; overflow: hidden; grid-row: 1 / span 2; align-self: start; }
.transcript-turn > .avatar img { width: 100%; height: 100%; object-fit: cover; }
:root[data-register] .transcript-turn .msg__who { font-size: var(--text-sm); font-weight: 600; }
.transcript-turn .msg__role { display: inline; margin-inline-start: 6px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; font-weight: 400; color: var(--on-surface-faint); }
.transcript-turn__link { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; color: var(--on-surface-faint); margin-block: -12px; } /* keeps its 44px target without heightening the name row */
:root[data-register] .transcript-turn .msg__body {
  margin-top: 4px; max-width: 44ch;
  font-family: var(--font-voice); font-style: italic; font-size: clamp(1.3rem, 1.7vw, 1.5rem); line-height: 1.32; color: var(--on-surface);
}
.transcript-turn:target { outline: none; box-shadow: -14px 0 0 -10px var(--action-live); }
.transcript-page .transcript-question { background: transparent; padding: 0; border-top: 1px solid var(--on-surface); padding-top: 18px; }
.transcript-page .transcript-question .section__title { font-size: var(--text-lg); letter-spacing: -.02em; }
.transcript-page .provider-metadata { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-surface-muted); }
@media (max-width: 40rem) {
  :root[data-register] .transcript-page .transcript-turn { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; }
  .transcript-turn > .avatar { inline-size: 36px; block-size: 36px; }
  :root[data-register] .transcript-turn .msg__body { font-size: var(--text-lg); }
}

/* ── The round table: moderator at the head, seats around, the question in the middle ── */
.round-table-figure { display: grid; justify-items: center; gap: 4px; margin: 8px 0 28px; padding: 8px 0; }
.round-table { position: relative; width: min(100% - 120px, 340px); aspect-ratio: 1; margin: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--surface-raised), var(--surface-sunken)); box-shadow: inset 0 0 0 1.5px var(--line); }
.round-table__top { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.round-table__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-faint); }
.round-table__topic { font-family: var(--font-voice); font-style: italic; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.2; color: var(--on-surface); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.chair { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; transform: translate(-50%, -50%); color: inherit; text-decoration: none; animation: chair-in .5s var(--ease-standard) both; animation-delay: var(--d); }
.chair__face { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-raised); box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 4.5px var(--line); overflow: hidden; }
.chair__face .avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: var(--text-md); }
.chair__face .avatar img { width: 100%; height: 100%; object-fit: cover; }
.chair--mod .chair__face { background: var(--on-surface); color: var(--surface-raised); }
.chair--mod .chair__face svg { width: 26px; height: 26px; }
.chair__name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
a.chair:hover .chair__face { box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 4.5px var(--on-surface); }
a.chair:focus-visible { outline: none; }
a.chair:focus-visible .chair__face { box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--on-surface); }
.round-table-figure__caption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-surface-faint); }
@keyframes chair-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .chair { animation: none; } }
@media (max-width: 40rem) {
  .round-table { width: min(100% - 96px, 250px); margin: 44px; }
  .chair { width: 60px; }
  .chair__face { width: 42px; height: 42px; }
}
.round-table-figure--compact { justify-items: start; margin: 0 0 16px; }
.round-table-figure--compact .round-table { width: 200px; margin: 42px 42px 36px; }
.round-table-figure--compact .chair { width: 56px; }
.round-table-figure--compact .chair__face { width: 38px; height: 38px; }
.round-table-figure--compact .chair__name { font-size: var(--text-xs); }
.round-table-figure--compact .round-table__topic { font-size: .875rem; -webkit-line-clamp: 3; }
.round-table-figure--compact .round-table__kicker { font-size: 9px; }
.round-table-figure--compact .round-table-figure__caption { margin-left: 8px; }

/* The group's head and its table share one row, so the question stays above the fold */
.group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 32px; }
.group-head .round-table-figure--compact { margin: -24px 0 0; }
@media (max-width: 56rem) { .group-head { grid-template-columns: minmax(0, 1fr); } .group-head .round-table-figure--compact { margin: 0 0 8px; } }

/* A finding's support as seats (Instrument look): one dot per participant in view, in the same order on
   every finding, so a persona's column can be followed down the page. Filled: supports it. Ring: counters
   it. Half: both. Faint: said nothing to it. One dot is one persona, never a share. */
html[data-look="instrument"] .finding-seats { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
html[data-look="instrument"] .finding-seat { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
html[data-look="instrument"] .finding-seat[data-role="supporting"] { background: var(--on-surface); }
html[data-look="instrument"] .finding-seat[data-role="counterexample"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--outcome-no); }
html[data-look="instrument"] .finding-seat[data-role="mixed"] { background: linear-gradient(90deg, var(--outcome-if) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--outcome-if); }

/* The ring's caption is one fact per line and never wider than the ring, so a long list of countries wraps
   under the table instead of widening its column and squeezing the group's name (2026-10-28). */
.round-table-figure__caption { display: grid; gap: 2px; }
.round-table-figure--compact .round-table-figure__caption { max-width: 268px; }