/* pikola.app/research: the shared styles for the research pages, on top of tokens.css and site.css.
   A research page is an article with the instrument turned up: a sticker, a Fraunces title, a byline, a facts
   strip in the scoreboard face, a limits card before any chart, charts as draft-board cards drawn as inline SVG,
   data tables with tabular figures and a cite box. punting.css adds the punt study's own marks on top of this.
   No inline styles: the site's CSP allows style attributes but not <style> elements, and nothing is fetched. */

/* ── The article ────────────────────────────────────────────────────── */
.research { padding: 48px 0 88px; }
/* Anything a link jumps to clears the sticky header. */
.research [id] { scroll-margin-top: 84px; }
.research .sticker { margin-bottom: 20px; }
/* A sticker is a <p> on these pages: keep .research p's grey, size and leading off it, or dark mode reads grey on acid. */
.research .sticker { color: var(--acid-ink); font-size: 12.5px; line-height: 1; max-width: none; }
.research .sticker.coral { color: var(--coral-ink); }
.research h1 { font-size: clamp(36px, 5.2vw, 62px); }
.research .byline { margin: 16px 0 0; font-size: 14px; color: var(--faint); max-width: none; }
.research p { margin: 0 0 16px; max-width: 44em; color: var(--dim); font-size: 16.5px; line-height: 1.6; }
.research li { color: var(--dim); }
.research .lede { margin-top: 26px; color: var(--text); font-weight: 500; max-width: 38em; }
/* The quotable sentence, with the site's highlighter on the figure a writer will lift (site.css draws it). */
.research .headline { margin: 0 0 28px; color: var(--text); font-size: clamp(18px, 2vw, 21px); line-height: 1.45; font-weight: 500; max-width: 36em; text-wrap: pretty; }
.research .headline em { font-weight: 600; }
.research p b, .research li b, .research strong { color: var(--text); font-weight: 650; }
.research h2 { font-family: var(--font-brand); font-weight: 800; font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; letter-spacing: -.02em; text-transform: none; margin: 56px 0 14px; text-wrap: balance; }
.research h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; margin: 28px 0 8px; color: var(--text); }
.research .note { font-size: 14.5px; color: var(--faint); }
.research dfn { font-style: normal; font-weight: 650; color: var(--text); }
.research ul.plain { margin: 0 0 16px; padding-left: 22px; max-width: 44em; }
.research ul.plain li { margin: 0; }
.research ul.plain li + li { margin-top: 8px; }
/* A heading with Dill at the right end of its line. */
.research h2.with-dill { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.with-dill .dill { flex: none; margin: -6px 0; }
@media (max-width: 560px) { .with-dill .dill { width: 48px; height: 48px; padding: 4px; } }
/* On a phone the header scrolls away: it holds only the brand and the store button, and these are long pages. */
@media (max-width: 760px) { body:has(main.research) .top { position: static; } }

/* ── The facts strip: the study's shape in the panel's figure style, a label over a figure, hairlines between ── */
.research .facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--facts-cols, 5), minmax(0, 1fr)); overflow: hidden; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--line); background: var(--surface); }
/* Every cell draws the hairline above and to its left; the strip clips the outer ones, so any column count works. */
.research .facts li { margin: 0; padding: 14px 16px 16px; min-width: 0; display: grid; gap: 6px; align-content: start; background: var(--surface); box-shadow: -1px -1px 0 0 var(--line); }
.facts small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); line-height: 1.2; }
.facts b { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.facts span { font-size: 13px; line-height: 1.35; color: var(--dim); }
.research .facts.three { --facts-cols: 3; }
@media (max-width: 760px) { .research .facts { --facts-cols: 3; } }
@media (max-width: 520px) { .research .facts.three { --facts-cols: 1; } .research .facts.three li { grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; padding: 12px 16px; } }
@media (max-width: 420px) { .research .facts:not(.three) { --facts-cols: 2; } .facts b { font-size: 30px; } }

/* ── The limits card, before any chart ───────────────────────────────── */
.research .limits { position: relative; margin: 44px 0 0; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--rule); border-radius: 0 0 var(--r-card) var(--r-card); padding: 20px 24px 22px; }
.research .limits .sticker { margin: 0 0 12px; transform: rotate(-2deg); }
.research .limits h2 { font-family: var(--font-display); font-weight: 700; font-variation-settings: normal; font-size: 23px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; padding-right: 72px; }
.research .limits .sticker + h2 { padding-right: 0; }
.research .limits ul { list-style: none; margin: 0; padding: 0; }
.research .limits li { margin: 0; padding: 10px 0; border-top: 1px dotted var(--line-strong); color: var(--dim); font-size: 15px; line-height: 1.5; max-width: none; }
.research .limits li:last-child { padding-bottom: 0; }
.research .limits li strong { display: block; margin-bottom: 2px; }
/* Dill-caution on the card's top-right corner, like a sticker, overlapping the rule and clear of the text. */
.limits .dill-corner { position: absolute; top: -16px; right: 16px; }
@media (max-width: 560px) {
  .research .limits { padding: 16px 16px 18px; }
  .limits .dill-corner { width: 48px; height: 48px; padding: 4px; top: -12px; right: 12px; }
}

/* ── Chart cards: the board's rule on top, a Barlow title, the plot, a dotted rule before the caption ──────── */
.research .chart { margin: 22px 0 18px; padding: 16px 20px 16px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--rule); border-radius: 0 0 var(--r-card) var(--r-card); }
.research .chart-n { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); max-width: none; }
.research .chart h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; color: var(--text); }
.research .chart-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--dim); max-width: none; }
.plot { margin: 16px 0 0; }
/* Each chart is drawn twice by its generator, once for a wide screen and once for a phone, so a phone never
   gets a scaled-down desktop chart with its type shrunk under the floor. */
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-narrow { display: none; }
@media (max-width: 640px) {
  .research .chart { padding: 14px 12px 14px; }
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
}
.research .chart figcaption { margin: 14px 0 0; padding-top: 12px; border-top: 1px dotted var(--line-strong); font-size: 14.5px; line-height: 1.5; color: var(--dim); }
/* Text in an SVG wears the text tokens; only bars, dots and swatches carry a series colour. */
.chart-svg text { font-family: var(--font-body); fill: var(--dim); font-variant-numeric: tabular-nums; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }

/* The rooms chart (how-pikola-is-tested): two series, the engine in the brand's green and the benchmark in a
   neutral, both checked against the surface in both themes (pickle 600 and ink 500 on cream; acid and ink 300 on
   ink). A legend and a label on every bar carry identity as well, so the colour never works alone. */
.chart-svg .legend text { font-size: 13px; fill: var(--dim); }
.chart-svg .group-label { font-size: 13px; font-weight: 650; fill: var(--text); }
.chart-svg .group-note { font-size: 12px; fill: var(--faint); }
.chart-svg .value { font-size: 13px; fill: var(--text); }
.chart-svg .value.bench { fill: var(--dim); }
.chart-svg .ratio { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .01em; fill: var(--text); }
.chart-svg .ratio.muted { fill: var(--faint); }
.chart-svg .axis text { font-size: 12px; fill: var(--faint); }
/* A surface-coloured halo behind every label, so a label that starts on the baseline or crosses a gridline stays whole. */
.chart-svg .group-label, .chart-svg .group-note, .chart-svg .axis text, .chart-svg .value { paint-order: stroke fill; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart-svg .baseline { stroke: var(--line-strong); stroke-width: 1; }
.chart-svg .divider { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-svg .bar.engine, .chart-svg .swatch.engine { fill: var(--pk-pickle-600); }
.chart-svg .bar.bench, .chart-svg .swatch.bench { fill: var(--pk-ink-500); }
.chart-svg .whisker { stroke: var(--text); stroke-width: 1.5; fill: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .chart-svg .bar.engine, :root:not([data-theme='light']) .chart-svg .swatch.engine { fill: var(--acid); }
  :root:not([data-theme='light']) .chart-svg .bar.bench, :root:not([data-theme='light']) .chart-svg .swatch.bench { fill: var(--pk-ink-300); }
}
:root[data-theme='dark'] .chart-svg .bar.engine, :root[data-theme='dark'] .chart-svg .swatch.engine { fill: var(--acid); }
:root[data-theme='dark'] .chart-svg .bar.bench, :root[data-theme='dark'] .chart-svg .swatch.bench { fill: var(--pk-ink-300); }
/* Between the phone chart and the column's full width the wide chart is drawn a little under scale; its type is
   set larger in user units there so nothing renders under the guidelines' floor. */
@media (max-width: 760px) and (min-width: 641px) {
  .chart-wide .legend text, .chart-wide .group-label, .chart-wide .value { font-size: 15px; }
  .chart-wide .group-note, .chart-wide .axis text { font-size: 14px; }
  .chart-wide .ratio { font-size: 23px; }
}

/* ── Data tables ────────────────────────────────────────────────────── */
/* The title sits above the scrolling box, so a phone never clips it; the table's own caption is for screen readers. */
.research .table-title { margin: 24px 0 10px; font-weight: 650; color: var(--text); }
/* The box scrolls sideways on a phone and says so without words: a shadow at an edge there is more to see past,
   covered by a surface-coloured strip that scrolls with the content. Cells are see-through so it shows. */
.table-wrap { margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 3px solid var(--rule);
  background:
    linear-gradient(90deg, var(--surface) 40%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 40%, transparent) right / 32px 100% no-repeat local,
    linear-gradient(90deg, color-mix(in srgb, var(--rule) 16%, transparent), transparent) left / 12px 100% no-repeat scroll,
    linear-gradient(270deg, color-mix(in srgb, var(--rule) 16%, transparent), transparent) right / 12px 100% no-repeat scroll;
  background-color: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.35; }
table.data th, table.data td { padding: 9px 12px; vertical-align: top; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; background: transparent; }
/* The room column stays put while the rest scrolls sideways on a phone, so it alone is opaque. */
table.data th:first-child, table.data td:first-child { text-align: left; white-space: normal; min-width: 11em; max-width: 16em; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); background: var(--surface); }
table.data thead th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); border-top: 0; white-space: normal; vertical-align: bottom; }
table.data td { color: var(--dim); }
table.data td:first-child { color: var(--text); font-weight: 600; }
/* A room's one-line description under its name, in the body face: its own class, so no page rule reaches it. */
table.data .room-sub { display: block; margin: 2px 0 0; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--faint); }
table.data .se { color: var(--faint); font-weight: 400; }
table.data td b { color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: .01em; }
/* The three human-like rows wear the acid bar their rooms wear in the list above. */
table.data tr.human td:first-child { box-shadow: inset 3px 0 0 var(--acid), 1px 0 0 var(--line); }
/* The two stress rows: set off from the four rooms by a heavier rule, a tint and a quieter name. */
table.data tr.stress td { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
table.data tr.stress td:first-child { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
table.data tr.stress-first td { border-top: 2px solid var(--line-strong); }
table.data tr.stress td:first-child { font-weight: 500; }
table.data.small { font-size: 14px; }
table.data.small th, table.data.small td { padding: 7px 12px; }
.research .table-foot { margin: 10px 0 0; font-size: 13.5px; color: var(--faint); }

/* ── The short answer: the study's so-what, first, before any method ──────────────────────────────────── */
.research .answer { margin: 30px 0 0; padding: 18px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--rule); border-radius: 0 0 var(--r-card) var(--r-card); }
.research .answer-title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-variation-settings: normal; font-size: 15px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.research .answer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.research .answer li { margin: 0; padding-left: 14px; border-left: 3px solid var(--acid); color: var(--dim); font-size: 16.5px; line-height: 1.55; }
@media (max-width: 560px) { .research .answer { padding: 16px 16px 18px; } }

/* ── The full numbers, folded away: there for anyone checking, out of the way of anyone reading ────────── */
.research details.more { margin: 44px 0 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--line); }
.research details.more > summary { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.research details.more[open] { padding-bottom: 24px; }
.research details.more .chart { margin-top: 8px; }
.research details.more .note { margin-top: 14px; }

.research .next { margin: 28px 0 0; font-size: 15px; color: var(--dim); }

/* ── The research index: one entry per study ────────────────────────── */
/* The index (/research/) is Draft Science: the lab cards and the scientist live in site.css, shared with the homepage. */
.research.science-page { padding-top: 56px; }
.science-page .experiments { margin-top: 40px; }
.science-page .note { margin-top: 28px; }

/* ── About page ─────────────────────────────────────────────────────── */
.about .notyet { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.about .notyet li { margin: 0; }
.about .notyet .tag { font-size: 12.5px; padding: 6px 9px 5px; }