:root {
  --ink: #16191d; --dim: #5b6570; --line: #d8dde3; --bg: #fff;
  --panel: #f5f7f9; --link: #0b5cab; --good: #1a7f43; --bad: #a4341f;
  --warn: #8a6100;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e9ec; --dim: #9aa4b0; --line: #333a42; --bg: #14171a;
    --panel: #1c2126; --link: #79b8ff; --good: #4cc38a; --bad: #f0806c;
    --warn: #d9a441;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.1rem 4rem; }
a { color: var(--link); }
header.top { border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
header.top .wrap { display: flex; gap: 1.2rem; align-items: baseline;
  padding-top: .9rem; padding-bottom: .9rem; flex-wrap: wrap; }
header.top .name { font-weight: 700; font-size: 1.05rem; text-decoration: none;
  color: var(--ink); }
header.top nav { margin-left: auto; display: flex; gap: 1rem; font-size: .92rem; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: .2rem 0 .3rem; }
h2 { font-size: 1.25rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 1.5rem 0 .4rem; }
.sub { color: var(--dim); margin: 0 0 1.4rem; }
.scroller { overflow-x: auto; margin: .8rem 0 1.2rem; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
caption { text-align: left; color: var(--dim); font-size: .88rem;
  padding-bottom: .4rem; }
th, td { text-align: left; padding: .42rem .7rem .42rem 0; white-space: nowrap;
  border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--dim); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em; }
td.num, th.num { text-align: right; padding-right: 1.1rem; }
/* A cell holding a sentence rather than a value. Left nowrap it pushes every
   other column off the side of the scroller, where nobody finds it.
   Not named `.wrap`: that is the page container, and a `td class="wrap"`
   silently inherits its 4rem bottom padding. */
td.prose, th.prose { white-space: normal; min-width: 11rem; }
.cite { display: block; color: var(--dim); font-size: .85em; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem;
  margin: .8rem 0 1.4rem; font-size: .95rem; }
dt { color: var(--dim); }
dd { margin: 0; }
.note { background: var(--panel); border-left: 3px solid var(--line);
  padding: .7rem .9rem; margin: 1rem 0; font-size: .92rem; }
.note-warn { border-left-color: var(--warn); }
.ev { text-decoration: none; font-size: .78em; font-weight: 700;
  vertical-align: .25em; color: var(--dim); cursor: help; }
.ev-v { color: var(--good); } .ev-a { color: var(--warn); }
.verdict { font-weight: 600; }
.v-good { color: var(--good); } .v-usable { color: var(--good); }
.v-marginal { color: var(--warn); } .v-unlikely { color: var(--bad); }
.cards { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0; }
.card { border: 1px solid var(--line); border-radius: 7px; padding: .8rem .9rem; }
.card h3 { margin: 0 0 .3rem; }
.headline { border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); padding: 1rem 1.1rem; margin: 1rem 0 1.4rem; }
.headline .band { font-size: 1.45rem; font-weight: 700; }
.cols { columns: 3 12rem; column-gap: 1.6rem; font-size: .95rem; }
.cols > span { display: block; break-inside: avoid; }
.cols .data { color: var(--dim); }
.dim { color: var(--dim); font-size: .85em; padding-left: .35em; }
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1rem;
  color: var(--dim); font-size: .88rem; }
input[type=search], input[type=text] {
  font: inherit; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--ink); width: 15rem;
}
button { font: inherit; padding: .55rem 1rem; border-radius: 6px;
  border: 1px solid var(--link); background: var(--link); color: #fff; }
/* Present for a screen reader, absent for everyone else. Labels matter most on
   the two inputs whose placeholder is their only visible name, and a
   placeholder is gone the moment anyone types. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* The header search. Global rather than page-scoped because it is in the header
   of every page; scoped tightly under .find for the same reason. */
.find { position: relative; }
.find input[type=search] { width: 11rem; padding: .32rem .55rem; font-size: .92rem; }
.find input[type=search]:focus { width: 15rem; }
/* Over the page, not in it. The header is a flex row, and a results list that
   took part in that layout would shove the navigation about on every keystroke. */
.find ul { position: absolute; z-index: 40; top: 100%; right: 0; min-width: 17rem;
  max-height: 21rem; overflow-y: auto; margin: .3rem 0 0; padding: 0;
  list-style: none; background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 6px 20px rgba(0, 0, 0, .13); }
.find ul:empty { display: none; }
.find li { border-bottom: 1px solid var(--line); }
.find li:last-child { border-bottom: 0; }
.find a { display: block; padding: .4rem .7rem; text-decoration: none;
  color: var(--ink); font-size: .93rem; }
.find li.on a, .find a:hover { background: var(--panel); }
.find .where { color: var(--dim); font-size: .85em; padding-left: .4em; }
@media (max-width: 34rem) {
  /* Below this the header is already two rows. A box that grows on focus makes
     it three, and the page jumps down as you type. */
  .find { width: 100%; }
  .find input[type=search], .find input[type=search]:focus { width: 100%; }
}