/* pikola.app/research/punting: the punt study's own pieces, on top of tokens.css, site.css and research.css
   (the article, the facts strip, the limits card, the chart cards and the table box are research.css's).
   This file holds the two-series marks for charts 1 and 2, the dumbbell marks for chart 3, the HTML legend,
   the takeaways and the numbers table. The charts are inline SVG whose marks take their colours from the
   classes below, so dark mode is the tokens' switch and nothing else. */

/* Two series, two hues from the brand's primitives, re-stepped for each surface:
   dill for Categories, chalk for One Win. Checked for lightness, chroma, colour-vision
   separation and contrast against each surface before they were chosen. */
:root { --chart-cat: var(--pk-pickle-600); --chart-ow: var(--pk-chalk-500); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --chart-cat: var(--pk-pickle-500); --chart-ow: var(--pk-chalk-300); } }
:root[data-theme='dark'] { --chart-cat: var(--pk-pickle-500); --chart-ow: var(--pk-chalk-300); }

/* ── The head ────────────────────────────────────────────────────────── */
.h1-sub { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-variation-settings: normal; font-size: clamp(19px, 2.5vw, 26px); line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.study-head p + p { margin-top: 14px; }

/* ── The marks. Text in the SVG wears the text tokens; only bars and dots carry a series colour. ── */
.chart-svg .lbl { font-family: var(--font-display); font-weight: 700; fill: var(--text); letter-spacing: .02em; text-transform: uppercase; }
.chart-svg .lbl-sub { font-family: var(--font-body); font-weight: 400; fill: var(--dim); letter-spacing: 0; text-transform: none; }
.chart-svg .tick { fill: var(--faint); }
.chart-svg .anno { fill: var(--dim); font-weight: 600; }
.chart-svg .val { font-family: var(--font-display); font-weight: 700; fill: var(--text); letter-spacing: .01em; }
.chart-svg .val.dim { fill: var(--dim); }
.chart-svg .zero { stroke: var(--line-strong); stroke-width: 1.5; }
.chart-svg .bar.s-cat, .chart-svg .sw.s-cat { fill: var(--chart-cat); }
.chart-svg .bar.s-ow, .chart-svg .sw.s-ow { fill: var(--chart-ow); }
.chart-svg .halo { stroke: var(--surface); stroke-width: 5; fill: none; stroke-linecap: butt; }
.chart-svg .whisk { stroke: var(--text); stroke-width: 1.75; fill: none; }
.chart-svg .whisk2 { stroke: var(--text); stroke-width: 1; fill: none; opacity: .75; }
.chart-svg .link { stroke: var(--line-strong); stroke-width: 2; }
.chart-svg .arrow { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-svg .dot.s-base { fill: var(--surface); stroke: var(--dim); stroke-width: 2; }
.chart-svg .dot.s-punt { fill: var(--chart-cat); stroke: var(--surface); stroke-width: 2; }
/* A bar within two errors of Balanced is drawn hollow: the study cannot call it. Chart 1's legend carries the key. */
.chart-svg .bar.hollow { fill: var(--surface); stroke-width: 2; }
.chart-svg .bar.s-cat.hollow { stroke: var(--chart-cat); }
.chart-svg .bar.s-ow.hollow { stroke: var(--chart-ow); }
/* Between the phone chart and the column's full width the wide chart is drawn a little under scale; the ticks
   are set larger in user units there so they never render under the guidelines' floor. */
@media (max-width: 760px) and (min-width: 641px) { .chart-wide .tick { font-size: 14px; } }

/* The legend, in HTML so it wraps on a phone. */
.research p.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; color: var(--dim); max-width: none; }
.legend .key { display: inline-flex; align-items: center; gap: 7px; }
.legend .key::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--chart-cat); flex: none; }
.legend .key.s-ow::before { background: var(--chart-ow); }
.legend .key.s-base::before { border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--dim); }
.legend .key.s-punt::before { border-radius: 50%; }
.legend .key.hollow::before { background: var(--surface); box-shadow: inset 0 0 0 2px var(--chart-cat); }

/* ── Takeaways ───────────────────────────────────────────────────────── */
.research .takeaways { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; max-width: 44em; }
.research .takeaways li { margin: 0; padding-left: 14px; border-left: 3px solid var(--acid); color: var(--dim); line-height: 1.55; }

/* ── The numbers ─────────────────────────────────────────────────────── */
table.numbers { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; color: var(--dim); }
table.numbers th, table.numbers td { padding: 8px 10px; border-bottom: 1px dotted var(--line-strong); text-align: left; vertical-align: baseline; white-space: nowrap; }
table.numbers thead th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-bottom: 2px solid var(--rule); white-space: normal; }
table.numbers tbody th { font-weight: 600; color: var(--text); }
table.numbers .num { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); }
table.numbers thead th.num { font-family: var(--font-body); font-weight: 700; font-size: 11px; color: var(--faint); }
/* The Balanced rows on a tint that lets the box's scroll shadow show through. */
table.numbers tr.base td, table.numbers tr.base th { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

/* The one line about the product. Quiet, at the end. */
.research .about-line { margin: 56px 0 0; padding-top: 18px; border-top: 1px dotted var(--line-strong); font-size: 14px; color: var(--faint); max-width: none; }