/* Model pages only — /models/* — split out of styles.css on 2026-09-21.

   Every rule here styles a generated model page and none styles the result
   page, yet every visitor to the result page was downloading them: 5KB of
   the front-end budget. The pages link this file after styles.css, so they
   still get everything they had (tools/seo/build.py, which also stamps its
   content hash into the link). Uses styles.css's custom properties. */

/* ---------- generated model pages ----------
   Served as static HTML by Caddy, never assembled in the browser: every
   number these classes style is already in the response body. */

.wordmark a { color: inherit; text-decoration: none; }

.crumbs { margin: 1rem 0 .5rem; font-size: .875rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

.lede { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 1rem; }

/* Thin data is SAID, not hidden. A shorter table with no note reads as a
   complete one, which is the failure this whole block exists to avoid. */
.thin-note {
  margin: 0 0 1.25rem;
  padding: .625rem .75rem;
  border-left: 4px solid var(--advisory);
  border-radius: 6px;
  background: var(--advisory-bg);
  color: var(--advisory);
  font-size: .9375rem;
}

.stats { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.stats th, .stats td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--line); }
.stats thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.stats tbody th { font-weight: 600; white-space: nowrap; }
.stats td { white-space: nowrap; }

/* The bar is scaled to the worst year, not to 100%, so the shape of the
   column is readable. The number beside it is the real figure. */
.minibar {
  display: inline-block; width: 84px; height: .5rem; margin-right: .5rem;
  background: var(--line); border-radius: 3px; overflow: hidden; vertical-align: middle;
}
.minibar__fill { display: block; height: 100%; background: var(--fail); }
.minibar__pct { font-variant-numeric: tabular-nums; }

.statbar { display: grid; grid-template-columns: 1fr; gap: .2rem; margin: 0 0 .7rem; }
.statbar__label { font-size: .9375rem; }
.statbar__track { height: .75rem; background: var(--line); border-radius: 4px; overflow: hidden; }
.statbar__fill { display: block; height: 100%; background: var(--fail); }
.statbar__value { font-size: .8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.checkform { display: flex; gap: .5rem; margin-top: .75rem; }
.checkform__input {
  flex: 1 1 auto; min-width: 0; padding: .6rem .7rem; font-size: 1rem;
  border: 2px solid var(--line); border-radius: 8px;
}
.checkform__input::placeholder { color: #98a6b5; font-style: italic; }
.checkform__go {
  flex: 0 0 auto; padding: .6rem 1.1rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer;
}

@media (min-width: 40em) {
  .statbar { grid-template-columns: 15rem 1fr 4rem; align-items: center; gap: .6rem; }
  .statbar__value { text-align: right; }
}

/* Bar widths as classes. Inline style= would force style-src
   'unsafe-inline' into the CSP for the sake of a percentage, and whole
   percent is invisible on an 84px bar. Generated, not hand-maintained. */
.w0 { width: 0%; }
.w1 { width: 1%; }
.w2 { width: 2%; }
.w3 { width: 3%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w7 { width: 7%; }
.w8 { width: 8%; }
.w9 { width: 9%; }
.w10 { width: 10%; }
.w11 { width: 11%; }
.w12 { width: 12%; }
.w13 { width: 13%; }
.w14 { width: 14%; }
.w15 { width: 15%; }
.w16 { width: 16%; }
.w17 { width: 17%; }
.w18 { width: 18%; }
.w19 { width: 19%; }
.w20 { width: 20%; }
.w21 { width: 21%; }
.w22 { width: 22%; }
.w23 { width: 23%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w26 { width: 26%; }
.w27 { width: 27%; }
.w28 { width: 28%; }
.w29 { width: 29%; }
.w30 { width: 30%; }
.w31 { width: 31%; }
.w32 { width: 32%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w35 { width: 35%; }
.w36 { width: 36%; }
.w37 { width: 37%; }
.w38 { width: 38%; }
.w39 { width: 39%; }
.w40 { width: 40%; }
.w41 { width: 41%; }
.w42 { width: 42%; }
.w43 { width: 43%; }
.w44 { width: 44%; }
.w45 { width: 45%; }
.w46 { width: 46%; }
.w47 { width: 47%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w51 { width: 51%; }
.w52 { width: 52%; }
.w53 { width: 53%; }
.w54 { width: 54%; }
.w55 { width: 55%; }
.w56 { width: 56%; }
.w57 { width: 57%; }
.w58 { width: 58%; }
.w59 { width: 59%; }
.w60 { width: 60%; }
.w61 { width: 61%; }
.w62 { width: 62%; }
.w63 { width: 63%; }
.w64 { width: 64%; }
.w65 { width: 65%; }
.w66 { width: 66%; }
.w67 { width: 67%; }
.w68 { width: 68%; }
.w69 { width: 69%; }
.w70 { width: 70%; }
.w71 { width: 71%; }
.w72 { width: 72%; }
.w73 { width: 73%; }
.w74 { width: 74%; }
.w75 { width: 75%; }
.w76 { width: 76%; }
.w77 { width: 77%; }
.w78 { width: 78%; }
.w79 { width: 79%; }
.w80 { width: 80%; }
.w81 { width: 81%; }
.w82 { width: 82%; }
.w83 { width: 83%; }
.w84 { width: 84%; }
.w85 { width: 85%; }
.w86 { width: 86%; }
.w87 { width: 87%; }
.w88 { width: 88%; }
.w89 { width: 89%; }
.w90 { width: 90%; }
.w91 { width: 91%; }
.w92 { width: 92%; }
.w93 { width: 93%; }
.w94 { width: 94%; }
.w95 { width: 95%; }
.w96 { width: 96%; }
.w97 { width: 97%; }
.w98 { width: 98%; }
.w99 { width: 99%; }
.w100 { width: 100%; }

/* Headlines: the statistic as a sentence, leading a model page. */
.headline { font-size: 1.35rem; line-height: 1.3; font-weight: 650; margin: .25rem 0 .35rem }
.headline-sub { margin: -.25rem 0 .9rem; font-size: .875rem }

/* "How it compares with the other 49": computed facts, one per line. */
.facts-list { margin: .25rem 0 .75rem; padding-left: 1.15rem; line-height: 1.55; }
.facts-list li { margin: 0 0 .35rem; }