/* The study page (/study/). Loaded AFTER legal.css,
 * which supplies the Linen tokens, type and the reading column; this file adds
 * only what a results page needs that a legal page does not: number tables,
 * the bar rows, a summary block and code. External on purpose: the CSP sets
 * style-src 'self', so an inline <style> would be dropped silently. */

.lede { font: 300 1.3rem/1.5 var(--display); margin: 1.6rem 0 0; }
.facts { margin-top: 2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--rule); }
.facts p { margin: .45rem 0; }
.facts p:first-child { margin-top: 0; }
.facts p:last-child { margin-bottom: 0; }
.facts strong { font-weight: 500; }

.table-wrap { overflow-x: auto; margin: 1.1rem 0 .4rem; }
table { border-collapse: collapse; width: 100%; font-size: .9688rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-size: .9375rem; color: var(--ink-2); padding-bottom: .5rem; }
th, td { text-align: left; padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font: 400 .8125rem/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
td.n, th.n { text-align: right; padding-right: 0; padding-left: .8rem; white-space: nowrap; }
tr.mine td, tr.mine th { font-weight: 500; }
/* legal.css loads Source Sans 3 at 400 to 500 only; the browser default bold
   (700) would be faked, so row headers and strong text are pinned. */
tbody th { font-weight: 400; }
tr.mine th { font-weight: 500; }
article strong { font-weight: 500; }
.note { color: var(--ink-2); font-size: .9375rem; }

/* One row per method: label, a bar drawn to scale out of 100, the count. */
.bars { list-style: none; padding: 0; margin: 1.2rem 0 .6rem; }
.bars li { display: grid; grid-template-columns: minmax(8.5rem, 13rem) 1fr 3.2rem; gap: .8rem; align-items: center; margin: .55rem 0; }
.bars .label { font-size: .9375rem; line-height: 1.35; }
.bars .track { height: .75rem; background: var(--rule); position: relative; }
.bars .fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.bars .count { font: 400 .9375rem/1 var(--mono); text-align: right; }
.bars .w0 { width: 0; }
.bars .w2 { width: 2%; }
.bars .w10 { width: 10%; }
.bars .w31 { width: 31%; }
.bars .w32 { width: 32%; }
.bars .w35 { width: 35%; }
.bars .w49 { width: 49%; }
.bars .w79 { width: 79%; }
.bars .w93 { width: 93%; }
.bars .w97 { width: 97%; }

ol.plain { padding-left: 1.3rem; }
ol.plain li { margin: .5rem 0; }
code, pre { font-family: var(--mono); font-size: .875em; }
pre { overflow-x: auto; padding: .9rem 1rem; border: 1px solid var(--rule); line-height: 1.55; }
.hash { overflow-wrap: anywhere; }
.byline { margin-top: 3rem; color: var(--ink-2); font-size: .9375rem; }

@media (max-width: 30rem) {
  .bars li { grid-template-columns: 1fr 3rem; }
  .bars .track { grid-column: 1 / -1; grid-row: 2; }
}