/* The dataset page (templates/site/dataset.html): its own pieces only, the charts, the verdict key, the order
   switch, the tooltip and the table. Loaded after watercolour.css, which gives the paper, the type, the night band,
   the buttons and the section headings. infographics.js draws the charts from the release's own figures. */

.fig { margin: 36px 0 0; position: relative; }
.prose p { max-width: 700px; }
.prose .lede { max-width: 700px; }
.cols { margin-top: 24px; columns: 2 340px; column-gap: 48px; }
.cols p { margin: 0 0 18px; break-inside: avoid; color: var(--ink-2); }
.cols b { color: var(--ink); }

/* the big number beside a chart */
.callout { margin: 28px 0 0; display: flex; align-items: baseline; gap: 24px; max-width: 860px; }
.callout .big { margin: 0; flex: none; font-size: 88px; line-height: 0.9; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.callout .big small { font-size: 30px; letter-spacing: -0.01em; color: var(--ink-3); font-weight: 400; }
.callout p:last-child { margin: 0; font-size: 19px; line-height: 28px; color: var(--ink-2); }

/* the verdict key under the waffle */
.vkey { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 16px; color: var(--ink-2); }
.vkey li { display: inline-flex; align-items: center; gap: 7px; }
.vkey b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.v-true { background: var(--v-true); } .sw.v-mostly_true { background: var(--v-mostly_true); }
.sw.v-mixed { background: var(--v-mixed); } .sw.v-mostly_false { background: var(--v-mostly_false); }
.sw.v-false { background: var(--v-false); }
.sw.v-unresolvable { border: 1.5px dashed var(--ink-3); }
.sw.k-fact { background: var(--ink); border-radius: 50%; }
.sw.k-pred { border: 2.5px solid var(--gold-ink); border-radius: 50%; background: var(--paper); }

/* order switch */
.sorter { margin: 24px 0 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 9999px; border: 1px solid var(--rule); font-size: 14px; }
.sorter span { padding: 0 8px 0 10px; color: var(--ink-3); }
.sorter button { white-space: nowrap; font: inherit; font-weight: 600; border: 0; border-radius: 9999px; padding: 6px 12px; background: transparent; color: var(--ink-2); cursor: pointer; }
.sorter button[aria-pressed="true"] { background: var(--night); color: var(--cream); }

/* ---------- charts ---------- */
.chart { display: block; overflow: visible; font-family: var(--font); }
.chart text { fill: var(--ink); font-size: 14px; }
.chart .muted { fill: var(--ink-3); }
.chart .num { font-variant-numeric: tabular-nums; }
.chart .small { font-size: 12.5px; }
.chart .big { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.chart .mid { font-size: 22px; font-weight: 500; }
.chart .strong { font-weight: 600; }
.chart .halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.chart .axis { stroke: var(--ink); stroke-width: 1; opacity: 0.55; }
.chart .grid { stroke: var(--ink); stroke-width: 1; opacity: 0.1; }
.chart .lead { stroke: var(--ink); stroke-width: 1; fill: none; opacity: 0.6; }
.chart .bracket { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.seg.v-true { fill: var(--v-true); } .seg.v-mostly_true { fill: var(--v-mostly_true); }
.seg.v-mixed { fill: var(--v-mixed); } .seg.v-mostly_false { fill: var(--v-mostly_false); }
.seg.v-false { fill: var(--v-false); }
.seg.v-unresolvable { fill: transparent; stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 3 2.5; }
.seg { transition: opacity 200ms var(--e); }
.seg:focus { outline: none; }
.seg.hot, .hit.hot + * { stroke: var(--ink); stroke-width: 1.5; }
/* bars, squares and names that open the person's claims in the viewer (infographics.js, linkTo) */
a.vlink { cursor: pointer; }
a.vlink:focus { outline: none; }
a.vlink:focus-visible text.name, a.vlink:hover text.name { text-decoration: underline; }

/* waffle: cells fade in column by column when the chart comes into view */
.cell { transition: opacity 500ms var(--e), transform 500ms var(--e); }
.waffle.pre .cell { opacity: 0; }
.waffle.dim .cell { opacity: 0.16; }
.waffle.dim .cell.on { opacity: 1; }

/* person by person */
.bar-row text.name { font-size: 14.5px; }
.bar-row.top text.name { font-weight: 600; }
.callout-txt { font-size: 14px; font-style: italic; }

/* ranges */
.band { fill: var(--gold); opacity: 0.22; }
.band-edge { stroke: var(--gold-ink); stroke-width: 1; opacity: 0.6; }
.rrow { transition: opacity 250ms var(--e); }
.rrow.off { opacity: 0.22; }
.rrow.me text.name { font-weight: 600; }
.range { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.dot { stroke: var(--paper); stroke-width: 2; }
.dot-high { fill: var(--ink); }
.dot-medium { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.hit { fill: transparent; cursor: pointer; }
.hit:focus { outline: none; }
.rrow.me .range { opacity: 0.9; }

/* dumbbell */
.db-line { stroke: var(--ink); stroke-width: 1.5; opacity: 0.35; }
.db-band { fill: var(--gold); opacity: 0.22; }
.db-fact { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.db-pred { fill: var(--paper); stroke: var(--gold-ink); stroke-width: 2.5; }
.db-row.up .db-line { stroke: var(--v-true); opacity: 0.6; }

/* by claim type (docs/PER_TYPE_SCORES.md) */
.types-key { margin-top: 40px; }
.types { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 32px; max-width: 980px; }
.types dt { font-weight: 600; color: var(--ink); }
.types dd { margin: 2px 0 0; color: var(--ink-2); }
.showing { margin: 14px 0 0; font-size: 16px; color: var(--ink-2); }
.panels { margin-top: 12px; }
.panel { margin-top: 40px; }
.panel-h { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); }
.panel .fig, .panel .chart { margin-top: 14px; }
.unranked { margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 860px; }
.unranked summary { cursor: pointer; }
.chart .divider { stroke: var(--ink); stroke-width: 1; opacity: 0.25; stroke-dasharray: 3 3; }
.bar-row.low text.name { fill: var(--ink-2); }
.db-row.db-low .db-pred { stroke-dasharray: 2.5 2; }
.db-row.db-low .db-band { opacity: 0.12; }

/* record */
.flow { fill: var(--v-mostly_true); opacity: 0.14; }
.stock.s0 { fill: var(--v-mostly_true); opacity: 0.3; }
.stock.s1 { fill: var(--v-mostly_true); }
.stock.s2 { fill: var(--v-true); }

.legend { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }

/* tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 300px;
  padding: 9px 12px; border-radius: 12px; background: rgba(29, 34, 50, 0.94); color: var(--cream);
  font-size: 14px; line-height: 20px; box-shadow: 0 8px 24px rgba(18, 22, 40, 0.25);
}
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-row + .tip-row { margin-top: 2px; }
.tip-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tip strong { font-weight: 600; }

/* table */

/* the table: one row per person, kept on one line */
#chart-table .tbl td { white-space: nowrap; vertical-align: baseline; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .callout { flex-direction: column; gap: 10px; }
  .callout .big { font-size: 64px; }
  .sorter span { display: none; }
  .sorter button { padding: 6px 10px; }
  .sorter { display: flex; flex-wrap: wrap; border-radius: 18px; }
  .chart text { font-size: 13px; }
  .chart .big { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cell, .seg, .rrow, .band { transition: none !important; }
  .waffle.pre .cell { opacity: 1; }
}
@media print {
  .sorter, .tip { display: none; }
}