/* Self-hosted, so first paint no longer waits on a third-party round trip.
   Taken from Google Fonts. Archivo and IBM Plex Sans are variable, so their
   weights share one file each; IBM Plex Mono is static and needs one per
   weight. unicode-range keeps latin-ext off the wire unless a page needs it. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Type scale: 11 / 12 / 13 / 14 / 16 / 20 / 27 / 52.
 *
 * There were 23 distinct sizes in here, in half-pixel steps, none of them
 * chosen against the others - the residue of a hundred small edits. Eight
 * deliberate steps do the same work, and every size moved by 2px or less.
 * clamp() headings keep their fluid ranges; only fixed sizes were snapped.
 *
 * Adding a size means deciding it belongs in this list, which is the point.
 */

:root{
  --ground:#F5F7F9; --surface:#FFFFFF; --sunken:#ECEFF3;
  --ink:#121822; --muted:#59637A; --line:#DFE4EC; --line-soft:#EBEEF3;
  --accent:#1D4E89; --accent-ink:#FFFFFF; --accent-soft:#E7EEF7;
  --good:#0E7A46; --good-soft:#E4F2EA;
  --warn:#96620B; --warn-soft:#FAEFDA;
  --bad:#A93028;  --bad-soft:#F8E6E4;
  --flat:#59637A; --flat-soft:#EDEFF3;
  --shadow:0 1px 2px rgba(16,26,44,.06),0 8px 24px -12px rgba(16,26,44,.18);
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1116; --surface:#161B23; --sunken:#1C222C;
    --ink:#E7ECF3; --muted:#97A1B2; --line:#28303B; --line-soft:#1F262F;
    --accent:#6FADE8; --accent-ink:#0E1116; --accent-soft:#152639;
    --good:#4FC98D; --good-soft:#0F2620;
    --warn:#E0A94B; --warn-soft:#292014;
    --bad:#EF8078;  --bad-soft:#2B1917;
    --flat:#97A1B2; --flat-soft:#1C222C;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1116; --surface:#161B23; --sunken:#1C222C;
  --ink:#E7ECF3; --muted:#97A1B2; --line:#28303B; --line-soft:#1F262F;
  --accent:#6FADE8; --accent-ink:#0E1116; --accent-soft:#152639;
  --good:#4FC98D; --good-soft:#0F2620;
  --warn:#E0A94B; --warn-soft:#292014;
  --bad:#EF8078;  --bad-soft:#2B1917;
  --flat:#97A1B2; --flat-soft:#1C222C;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 16px/1.55 "IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto; padding:22px 20px 88px}
h1,h2,h3,.disp{font-family:"Archivo","Archivo Narrow",ui-sans-serif,system-ui,sans-serif; text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}

/* ── header ─────────────────────────────────────────────── */
.top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:34px}
.mark{display:flex; align-items:center; gap:9px; font-family:"Archivo",sans-serif; font-weight:800;
      font-size:16px; letter-spacing:-.015em; color:var(--ink)}
.chip{width:15px; height:21px; border-radius:3px; background:var(--surface);
      border:1.5px solid var(--ink); position:relative; flex:none}
.chip::before{content:""; position:absolute; inset:1.5px 1.5px auto; height:5px;
      background:var(--ink); border-radius:1px 1px 0 0}
.demo{font-size:11px; letter-spacing:.055em; text-transform:uppercase; font-weight:600;
      color:var(--warn); background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);
      padding:5px 9px; border-radius:999px; white-space:nowrap}

/* ── search ─────────────────────────────────────────────── */
/* The headline sits directly above the search box now; the 7px below it was
   spacing for a paragraph that no longer exists. */
.ask{font-size:clamp(27px,5.6vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.08;
     margin:0 0 20px}
.sub{color:var(--muted); margin:0 0 22px; font-size:16px; max-width:56ch}
.searchbox{position:relative}
.field{display:flex; align-items:center; gap:11px; background:var(--surface);
       border:1.5px solid var(--line); border-radius:12px; padding:0 14px;
       box-shadow:var(--shadow); transition:border-color .13s, box-shadow .13s}
.searchbox.open .field{border-radius:12px 12px 0 0}
.field:focus-within{border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft)}
.field svg{flex:none; color:var(--muted)}
#q{flex:1; border:0; outline:0; background:none; color:var(--ink); padding:15px 0;
   font:500 17px/1.4 "IBM Plex Sans",sans-serif}
#q::placeholder{color:var(--muted); font-weight:400}
.clr{border:0; background:none; color:var(--muted); cursor:pointer; font-size:20px; line-height:1;
     padding:6px; border-radius:6px}
.clr:hover{color:var(--ink); background:var(--sunken)}
.ac{position:absolute; z-index:30; left:0; right:0; top:100%; background:var(--surface);
    border:1.5px solid var(--accent); border-top:0; border-radius:0 0 12px 12px;
    box-shadow:var(--shadow); max-height:330px; overflow-y:auto}
.opt{display:flex; align-items:baseline; gap:10px; padding:10px 14px; cursor:pointer;
     border-top:1px solid var(--line-soft)}
.opt:first-child{border-top:0}
.opt[aria-selected="true"]{background:var(--accent-soft)}
.opt b{font-weight:600; font-size:14px}
.opt .set{color:var(--muted); font-size:13px; flex:1; min-width:0; overflow:hidden;
          text-overflow:ellipsis; white-space:nowrap}
.opt .num{color:var(--muted); font-size:12px}
.none{padding:14px; color:var(--muted); font-size:14px}
.dot{width:7px; height:7px; border-radius:50%; flex:none}
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}   .dot.flat{background:var(--flat)}

/* ── the slab ───────────────────────────────────────────── */
.slab{margin-top:24px; background:var(--surface); border:1.5px solid var(--line);
      border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.label{padding:15px 20px; display:flex; align-items:center; justify-content:space-between;
       gap:16px; flex-wrap:wrap; border-bottom:1.5px solid var(--line)}
.label.good{background:var(--good-soft); border-bottom-color:color-mix(in srgb,var(--good) 32%,transparent)}
.label.warn{background:var(--warn-soft); border-bottom-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.label.bad {background:var(--bad-soft);  border-bottom-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.label.flat{background:var(--flat-soft)}
.who{min-width:0}
.who h2{margin:0; font-size:20px; font-weight:700; letter-spacing:-.015em}
.who p{margin:2px 0 0; font-size:13px; color:var(--muted)}
.call{font-family:"Archivo",sans-serif; font-weight:800; font-size:14px; letter-spacing:-.01em;
      white-space:nowrap}
.label.good .call{color:var(--good)} .label.warn .call{color:var(--warn)}
.label.bad .call{color:var(--bad)}   .label.flat .call{color:var(--flat)}

/* ── grade vs. raw ──────────────────────────────────────── */
/* The two choices next to each other with the winner marked. It replaced two
   panels that between them restated the expected value, the odds and the raw
   price - all of which are already in the highlights above. */
.versus{padding:17px 20px 18px; border-bottom:1.5px solid var(--line)}
.wrap .vhead h2{margin:0 0 13px; font-size:14px; font-weight:700; letter-spacing:-.005em}
/* Natural heights, not stretched. The raw side is one certain number and the
   graded side is a number plus its distribution; forcing them to match left a
   third of the raw card empty. The asymmetry is the point. */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.path{position:relative; padding:14px 16px; border-radius:var(--r);
  background:var(--sunken); border:1.5px solid var(--line-soft)}
/* The winner is marked, not just larger: on a page about a decision, the reader
   should not have to compare two numbers to find out which one won. */
.path.wins{background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 42%,transparent)}
.path.wins::after{content:"✓"; position:absolute; top:11px; right:13px;
  font-size:13px; font-weight:700; color:var(--good)}
.path .k{margin:0; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted)}
.path .v{margin:5px 0 6px; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:27px; letter-spacing:-.03em; line-height:1}
.path.wins .v{color:var(--good)}
.path .n{margin:0; font-size:12px; line-height:1.5; color:var(--muted)}
@media (max-width:560px){ .paths{grid-template-columns:1fr} }

/* ── grade ladder ───────────────────────────────────────── */
.ladder{padding:18px 20px 18px}
.lhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px}
.wrap .lhead h2{margin:0; font-size:14px; font-weight:700; letter-spacing:-.005em}
.lhead span{font-size:12px; color:var(--muted)}
.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:440px}
th{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
   text-align:right; padding:9px 0 7px; border-bottom:1px solid var(--line)}
th:first-child{text-align:left}
td{padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:14px; text-align:right;
   font-variant-numeric:tabular-nums}
td:first-child{text-align:left}
tr:last-child td{border-bottom:0}
.g{display:inline-flex; align-items:center; gap:9px}
.gnum{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px; width:3.9em;
      display:inline-block; white-space:nowrap}
.bar{position:relative; width:78px; height:8px; border-radius:3px; background:var(--sunken); flex:none}
.bar i{position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--accent); display:block}
tr.beats .bar i{background:var(--good)}
.share{color:var(--muted); font-size:12px; width:3.6em; display:inline-block}
.net{font-weight:600}
tr.beats .net{color:var(--good)}
tr.loses .net{color:var(--muted)}
.foot{margin:12px 0 0; font-size:12px; color:var(--muted); line-height:1.5}

/* ── assumptions ────────────────────────────────────────── */
.tune{border-top:1.5px solid var(--line); background:var(--sunken); padding:16px 20px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px}
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px}
.inp{display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--line);
     border-radius:8px; padding:0 10px}
.inp:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.inp span{color:var(--muted); font-size:14px}
.inp input{width:100%; border:0; outline:0; background:none; color:var(--ink); padding:8px 0 8px 3px;
  font:500 14.5px/1 "IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.seg{display:flex; background:var(--surface); border:1.5px solid var(--line); border-radius:8px; padding:2px}
.seg button{flex:1; border:0; background:none; cursor:pointer; padding:8px 6px; border-radius:6px;
  color:var(--muted); font:600 13px/1 "IBM Plex Sans",sans-serif; white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}

.notice{margin-top:26px; border:1px solid var(--line); border-left:3px solid var(--warn);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0; padding:14px 16px;
  font-size:13px; color:var(--muted); line-height:1.55}
.notice b{color:var(--ink); font-weight:600}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px}
[hidden]{display:none!important}
@keyframes rise{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.enter{animation:none}}
@media (max-width:560px){ .head{grid-template-columns:1fr} .kpi .v{font-size:27px} }
.empty{padding:20px}
.empty p{margin:0 0 13px; font-size:14px; color:var(--muted); line-height:1.6; max-width:62ch}
/* The one number we do have on a card nobody has graded. It leads, because it
   is the whole of what the page can tell you. */
.empty p.rawonly{font-size:15px; color:var(--ink); margin-bottom:14px}
.empty p.rawonly b{font-size:22px; font-weight:650; letter-spacing:-.01em}
.empty p.q{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:500;
  font-size:14px; background:var(--accent-soft); border-radius:8px; padding:11px 13px}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 var(--accent); animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.known{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  margin:0; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:8px;
  overflow:hidden}
.known div{background:var(--surface); padding:11px 13px}
.known dt{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px}
.known dd{margin:0; font-size:14px; font-weight:500}

/* ── server-rendered additions ─────────────────────────── */
a{color:inherit}
.results{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:8px}
.results a{display:flex; align-items:baseline; gap:10px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; text-decoration:none}
.results a:hover{border-color:var(--accent)}
.results b{font-weight:600; font-size:14px}
.results .set{color:var(--muted); font-size:13px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.results .num{color:var(--muted); font-size:12px}
.back{display:inline-flex; align-items:center; gap:6px; color:var(--muted);
  text-decoration:none; font-size:13px; margin-bottom:16px}
.back:hover{color:var(--accent)}
.asof{margin-top:14px; font-size:12px; color:var(--muted)}
form.searchform{margin:0}

/* ── report button on error pages ───────────────────────── */
.report{margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px; align-items:flex-start; max-width:60ch}
.report label{font-size:13px; font-weight:600; color:var(--ink)}
.report .opt{font-weight:400; color:var(--muted)}
.report textarea{width:100%; background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line); border-radius:9px; padding:11px 12px; resize:vertical;
  font:400 14.5px/1.5 "IBM Plex Sans",sans-serif}
.report textarea:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.btn{cursor:pointer}
.btn{display:inline-block; background:var(--accent); color:var(--accent-ink);
  text-decoration:none; font:600 14.5px/1 "IBM Plex Sans",sans-serif;
  padding:11px 18px; border-radius:9px; border:1.5px solid var(--accent)}
.btn:hover{filter:brightness(1.08)}
.report details{font-size:13px; color:var(--muted); width:100%}
.report summary{cursor:pointer; padding:4px 0}
.report summary:hover{color:var(--accent)}
.report pre{background:var(--sunken); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; overflow-x:auto; font:500 12.5px/1.6 "IBM Plex Mono",monospace;
  color:var(--ink); white-space:pre-wrap; word-break:break-word; margin:8px 0 0}

/* ── type-ahead suggestions ─────────────────────────────── */
.searchbox{position:relative}
.searchbox.open .field{border-radius:12px 12px 0 0; border-color:var(--accent)}
/* type="search" renders a native clear button in Chrome and Safari but not
   Firefox, so leaving it produces two X's on some browsers and one on others.
   Ours is suppressed-and-replaced rather than removed, so the control looks and
   behaves the same everywhere and can carry a real aria-label. */
#q::-webkit-search-cancel-button,
#q::-webkit-search-decoration,
#q::-webkit-search-results-button{-webkit-appearance:none; appearance:none; display:none}
#q::-ms-clear{display:none}
.clr{border:0; background:none; color:var(--muted); cursor:pointer; font-size:20px;
  line-height:1; padding:6px; border-radius:6px}
.clr:hover{color:var(--ink); background:var(--sunken)}
.ac{position:absolute; z-index:40; left:0; right:0; top:100%; background:var(--surface);
  border:1.5px solid var(--accent); border-top:0; border-radius:0 0 12px 12px;
  box-shadow:var(--shadow);
  /* Ten rows, then it scrolls. 57px is one row plus its divider. */
  max-height:570px; overflow-y:auto; overscroll-behavior:contain}
.ac .opt{display:flex; align-items:center; gap:11px; padding:8px 13px; cursor:pointer;
  border-top:1px solid var(--line-soft); text-decoration:none; color:inherit; height:57px}
.ac .opt:first-child{border-top:0}
.ac .opt[aria-selected="true"]{background:var(--accent-soft)}
.ac img, .ac .noimg{width:34px; height:47px; border-radius:3px; flex:none; object-fit:cover;
  background:var(--sunken); border:1px solid var(--line-soft)}
.ac .txt{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.ac .txt b{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.ac .set{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.ac .gem{color:var(--muted); font-size:12px; font-family:"IBM Plex Mono",monospace;
  white-space:nowrap; flex:none}
.ac .num{color:var(--faint); font-size:12px; font-family:"IBM Plex Mono",monospace;
  white-space:nowrap; flex:none}
.ac .none{padding:15px 14px; color:var(--muted); font-size:14px}
@media (max-width:520px){ .ac .gem{display:none} }

.wrap h2{font-family:"Archivo",sans-serif; font-size:20px; font-weight:700;
  letter-spacing:-.02em; margin:28px 0 10px}
/* Prose lists only.
 *
 * As `.wrap ul` this had specificity (0,1,1) and beat every component list,
 * which are all single classes at (0,1,0) - so it silently reimposed a 22px
 * left indent and killed the top margin on the highlights, the search results
 * and the set list. The highlight boxes ended up inset from the bar they sit
 * under and touching the labels above them.
 *
 * Every component list carries a class; a list written in prose does not. */
.wrap ul:not([class]){margin:0 0 6px; padding-left:22px; line-height:1.7; color:var(--muted)}
.wrap ul:not([class]) b, .wrap p b{color:var(--ink); font-weight:600}
.wrap p{max-width:66ch; margin:0 0 12px; color:var(--muted)}

/* ── browse: sets, set pages, related ───────────────────── */
.era{margin-top:30px}
.era h2{font-family:"Archivo",sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--muted);text-transform:uppercase;margin:0 0 12px}
.setlist{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.setlist a{display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;text-decoration:none;color:inherit}
.setlist a:hover{border-color:var(--accent)}
.setlist b{font-size:14px;font-weight:600}
.setlist span{font-size:12px;color:var(--muted)}

/* These are the whole home page and the only way out of a card page, so they
   were sized like a list when they are the primary thing on screen: a 40px
   thumbnail and 14px name left a lot of empty tile around very little content.
   Everything moves up one step together - art, name, set line and gem rate - so
   the tile keeps its proportions rather than just growing its text. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:20px}
.tile{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;text-decoration:none;color:inherit;min-width:0}
.tile:hover{border-color:var(--accent)}
.tile img,.tile .noart{width:50px;height:69px;border-radius:4px;flex:none;object-fit:cover;
  background:var(--sunken);border:1px solid var(--line-soft)}
.tile .tt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.tile .tt b{font-size:16px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tt .sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tile .gem{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;flex:none;
  text-align:right;line-height:1.15}
.tile .gem small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.related{margin-top:36px;border-top:1px solid var(--line);padding-top:24px}
.related h2{font-family:"Archivo",sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0}

/* ── ladder bar widths ──────────────────────────────────
   Generated classes rather than inline styles: a strict CSP blocks the
   style attribute, which silently emptied every bar on the page. */
.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%}
/* ── card identity ──────────────────────────────────────── */
.cardhead{display:flex;gap:20px;align-items:flex-start;margin-top:24px;flex-wrap:wrap}
.cardhead .art{width:168px;border-radius:9px;border:1px solid var(--line);background:var(--sunken);
  flex:none;object-fit:cover;aspect-ratio:5/7}
.cardhead .idm{flex:1;min-width:240px}
.cardhead h1{font-family:"Archivo",sans-serif;font-size:clamp(24px,4.4vw,33px);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;margin:0}
.cardhead .line{color:var(--muted);font-size:14px;margin:7px 0 0}
/* Part of the heading, not a second heading: the card's name is what is being
   read, and the set and number identify which printing of it. Lighter and a
   size down so it reads as the qualifier it is. */
/* At 0.62em and weight 600 this was neither the same thing as the name nor
   clearly beneath it - two heavy Archivo cuts a third apart in size, which
   reads as two headings that failed to line up. Half the size and two weights
   lighter makes the relationship obvious, and once the size does the work the
   gap can come back in. The margin is in em of the span, so it resolves against
   the smaller text: .8em here is about 7px against a 33px name. */
.cardhead h1 .hset{display:inline-block; margin-left:.8em;
  font-weight:500; font-size:.5em; letter-spacing:0;
  color:var(--muted); white-space:nowrap; vertical-align:baseline}
/* Four equal columns, so the dividers land on an even rhythm instead of being
   pushed around by how long each value happens to be. Auto-fit sized them by
   content, which left "Number" holding a short value in a wide cell while
   "Rarity" wrapped in a narrow one. */
/* Fits however many facts there are. It was hard-coded to four, and once the
   set and number moved into the heading the fourth cell stayed behind as an
   empty box on the end of the row. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;margin:18px 0 0;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:9px;overflow:hidden}
.facts div{background:var(--surface);padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.2}
/* One type treatment for all four values, and a two-line floor so a value that
   wraps does not make its neighbours look stranded at the top of a tall cell. */
.facts dd{margin:0;font-size:13px;font-weight:500;line-height:1.35;min-height:2.7em;
  text-wrap:balance;overflow-wrap:anywhere}
/* IBM Plex Mono sets a wide comma; without this "103,617" reads as two numbers. */
.facts dd.mono{letter-spacing:-.02em}
@media (max-width:560px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts dd{min-height:0}
}

/* ── the score, on a scale ──────────────────────────────── */
.scale{position:relative;
  margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:20px 22px;box-shadow:var(--shadow)}
/* The score and the band are one sentence - "58 out of 100, a good bet" - so
   they sit together on a shared baseline rather than being centred against each
   other, which left a 52px number and 20px text floating at unrelated heights.
   The help link is a utility, not part of the sentence, so it moves out of the
   middle of it and to the end of the row. */
/* The right padding keeps the band clear of the help link. It is out of flow
   now, so on a narrow screen the verdict wrapped straight underneath it. */
.scale .verdict{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-right:26px}
.scale .sc{display:flex;align-items:baseline;gap:2px;font-family:"Archivo",sans-serif;
  font-variant-numeric:tabular-nums}
.scale .sc b{font-size:52px;font-weight:800;letter-spacing:-.045em;line-height:.9}
.scale .sc span{font-size:14px;font-weight:600;color:var(--muted)}
.scale.good .sc b{color:var(--good)} .scale.warn .sc b{color:var(--warn)}
.scale.bad .sc b{color:var(--bad)}   .scale.flat .sc b{color:var(--flat)}
.scale .vt{flex:1;min-width:120px}
.designation{font-family:"Archivo",sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
.scale.good .designation{color:var(--good)} .scale.warn .designation{color:var(--warn)}
.scale.bad .designation{color:var(--bad)}
.because{margin:4px 0 0;font-size:14px;color:var(--muted)}
.scale .track{position:relative;display:flex;gap:4px;height:28px;margin-top:22px}
/* Tall enough to carry the score each band starts at. The bands are different
   widths on purpose - 0-25, 25-45, 45-72, 72-100 - and the number on the bar is
   what explains why one is wider than the next. Underneath, it just looked like
   a caption that had come loose from uneven boxes. */
.scale .seg{display:flex;align-items:center;height:100%;border-radius:6px;
  padding-left:9px;min-width:0;overflow:hidden}
.scale .seg b{font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.scale .seg.on b{color:var(--ink)}
/* Widths are proportional to the score range each band covers (0/25/45/72), so
   the pin - positioned at score% - always lands over its own band. Equal
   quarters would put a 45 over "Marginal" while the heading said otherwise. */
/* Every band is muted; only the one the card landed in takes full colour.
   Done with alpha on the background rather than opacity on the element, so the
   number printed inside stays legible either way. */
.scale .seg.bad{width:25%;background:color-mix(in srgb,var(--bad) 26%,transparent)}
.scale .seg.warn{width:20%;background:color-mix(in srgb,var(--warn) 26%,transparent)}
.scale .seg.good{width:27%;background:color-mix(in srgb,var(--good) 26%,transparent)}
.scale .seg.best{width:28%;background:color-mix(in srgb,var(--good) 26%,transparent)}
.scale .seg.bad.on{background:color-mix(in srgb,var(--bad) 72%,transparent)}
.scale .seg.warn.on{background:color-mix(in srgb,var(--warn) 72%,transparent)}
.scale .seg.good.on,.scale .seg.best.on{background:color-mix(in srgb,var(--good) 72%,transparent)}
.scale .pin{position:absolute;top:-4px;width:4px;height:36px;border-radius:3px;
  background:var(--ink);box-shadow:0 0 0 3px var(--surface);margin-left:-2px}

/* Tight to the bar. Each label names the segment directly above it, so the gap
   to the bar has to be visibly smaller than the gap to whatever follows - at
   10px against 22px it still read as a row floating between the two. */
.ticks{display:flex;gap:4px;list-style:none;padding:0;margin:6px 0 0}
.ticks li{min-width:0;padding-right:8px;color:var(--muted);opacity:.62}
/* display:block matters: overflow and text-overflow do nothing on an inline
   box, so the ellipsis here never applied and "Thin Margin" simply ran out of
   its column and collided with "Good Bet" at 320px. */
.ticks li b{display:block;font-size:11px;font-weight:600;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* On a narrow phone the columns are too tight for these labels on one line.
   Wrapping keeps all four readable, where clipping would leave "Thin Mar…". */
@media (max-width:430px){
  .ticks li b{white-space:normal;overflow:visible;line-height:1.25}
}
/* The band the card actually landed in, tied back to the heading above. */
.ticks li.on{opacity:1}
.ticks li.on b{color:var(--ink)}
.ticks li.bad.on b{color:var(--bad)} .ticks li.warn.on b{color:var(--warn)}
.ticks li.good.on b,.ticks li.best.on b{color:var(--good)}
.ticks li.bad{width:25%} .ticks li.warn{width:20%}
.ticks li.good{width:27%} .ticks li.best{width:28%;padding-right:0}

/* pin positions — classes, because CSP blocks the style attribute */
.pin.p0{left:0%}.pin.p1{left:1%}.pin.p2{left:2%}.pin.p3{left:3%}.pin.p4{left:4%}.pin.p5{left:5%}.pin.p6{left:6%}.pin.p7{left:7%}.pin.p8{left:8%}.pin.p9{left:9%}
.pin.p10{left:10%}.pin.p11{left:11%}.pin.p12{left:12%}.pin.p13{left:13%}.pin.p14{left:14%}.pin.p15{left:15%}.pin.p16{left:16%}.pin.p17{left:17%}.pin.p18{left:18%}.pin.p19{left:19%}
.pin.p20{left:20%}.pin.p21{left:21%}.pin.p22{left:22%}.pin.p23{left:23%}.pin.p24{left:24%}.pin.p25{left:25%}.pin.p26{left:26%}.pin.p27{left:27%}.pin.p28{left:28%}.pin.p29{left:29%}
.pin.p30{left:30%}.pin.p31{left:31%}.pin.p32{left:32%}.pin.p33{left:33%}.pin.p34{left:34%}.pin.p35{left:35%}.pin.p36{left:36%}.pin.p37{left:37%}.pin.p38{left:38%}.pin.p39{left:39%}
.pin.p40{left:40%}.pin.p41{left:41%}.pin.p42{left:42%}.pin.p43{left:43%}.pin.p44{left:44%}.pin.p45{left:45%}.pin.p46{left:46%}.pin.p47{left:47%}.pin.p48{left:48%}.pin.p49{left:49%}
.pin.p50{left:50%}.pin.p51{left:51%}.pin.p52{left:52%}.pin.p53{left:53%}.pin.p54{left:54%}.pin.p55{left:55%}.pin.p56{left:56%}.pin.p57{left:57%}.pin.p58{left:58%}.pin.p59{left:59%}
.pin.p60{left:60%}.pin.p61{left:61%}.pin.p62{left:62%}.pin.p63{left:63%}.pin.p64{left:64%}.pin.p65{left:65%}.pin.p66{left:66%}.pin.p67{left:67%}.pin.p68{left:68%}.pin.p69{left:69%}
.pin.p70{left:70%}.pin.p71{left:71%}.pin.p72{left:72%}.pin.p73{left:73%}.pin.p74{left:74%}.pin.p75{left:75%}.pin.p76{left:76%}.pin.p77{left:77%}.pin.p78{left:78%}.pin.p79{left:79%}
.pin.p80{left:80%}.pin.p81{left:81%}.pin.p82{left:82%}.pin.p83{left:83%}.pin.p84{left:84%}.pin.p85{left:85%}.pin.p86{left:86%}.pin.p87{left:87%}.pin.p88{left:88%}.pin.p89{left:89%}
.pin.p90{left:90%}.pin.p91{left:91%}.pin.p92{left:92%}.pin.p93{left:93%}.pin.p94{left:94%}.pin.p95{left:95%}.pin.p96{left:96%}.pin.p97{left:97%}.pin.p98{left:98%}.pin.p99{left:99%}
.pin.p100{left:100%}
tr.even .net{color:var(--muted)}
tr.even .bar i{background:var(--muted)}
/* No pill: a filled, rounded chip in a column of plain numbers reads as a
   button somebody could press. It is a value like the others, so it is set like
   the others - same size, same column, muted because it is the row that does
   not move the decision either way. */
.be{font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:700;
  color:var(--muted);letter-spacing:.005em;white-space:nowrap}
tr.loses .net{color:var(--bad)}

/* ── cost controls ──────────────────────────────────────── */
/* The assumptions behind every number on the page, stated and editable. Given
   the same card panel as the verdict, because they carry the same weight. */
.cost{margin-top:24px; background:var(--surface); border:1.5px solid var(--line);
  border-radius:14px; padding:16px 20px 18px; box-shadow:var(--shadow)}
/* Each fee owns the controls that change it, and the three read left to right.
   No operators between them: at 12px they were specks stranded in the gap, and
   three labelled tiles in a row already read as a sum. */
/* Natural heights. Stretching all three to the grading tile - which carries
   four controls - left the other two two-thirds empty. */
.costcalc{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start;
  margin:14px 0 0}
.costcalc .ci{background:var(--sunken); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:14px 16px; min-width:0;
  display:flex; flex-direction:column; gap:12px}
.costcalc .ci.total{background:var(--surface); border-color:var(--line)}
.ci .k{margin:0; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted)}
.ci .v{font-family:"Archivo",sans-serif; font-weight:800; font-size:27px;
  letter-spacing:-.03em; line-height:1; white-space:nowrap}
/* Named `neg`, not `cost`: as `.cost` it collided with the section's own class
   and every value inherited the panel's background, border and padding. */
.ci .v.neg{color:var(--bad)}
/* A blended average can come out negative - the graded outcome is worth less
   than what it cost to get there - and it was rendering in the same colour as a
   profit, with only a minus sign to separate them. Money that is gone reads red
   everywhere else on the page; it reads red here too. */
.paths .v.loss{color:var(--bad)}

.ci .n{margin:0; font-size:12px; line-height:1.5; color:var(--muted)}
.costcalc .pair{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.costcalc .f{display:flex; flex-direction:column; gap:5px; min-width:0}
.costcalc .fs{border:0; margin:0; padding:0; min-width:0}
.costcalc .fs legend,.costcalc label{padding:0; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.costcalc .fs legend{margin-bottom:5px}
/* Folded away by default: four inputs of equal weight made this tile twice the
   height of the others and buried the choice that matters among three that most
   people never touch. */
.more{display:flex; flex-direction:column; gap:10px}
.more summary{cursor:pointer; font-size:11px; font-weight:600; color:var(--accent);
  list-style:none; padding:2px 0}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+ "; font-weight:700}
.more[open] summary::before{content:"\2212 "}
.more summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.costform select:disabled{opacity:.45; cursor:not-allowed}
@media (max-width:720px){ .costcalc{grid-template-columns:1fr} }

/* The form is a wrapper now, not a layout: .costcalc lays the fees out and the
   form exists only so one submit carries every control. It used to BE the grid
   of inputs, and left that way it squeezed the whole calculator into 150px
   columns - labels breaking one word per line. */
.costform{display:block}
.costform .f{display:flex; flex-direction:column; gap:5px; min-width:0}
.costform label{font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted)}
.costform select,.costform input{width:100%; min-width:0; font:inherit; font-size:14px;
  color:var(--ink); background:var(--sunken); border:1.5px solid var(--line);
  border-radius:9px; padding:9px 11px; appearance:none}
.costform select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px}
.costform input{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.costform select:focus-visible,.costform input:focus-visible,.buylink:focus-visible,
.costform button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* The unit lives inside the field rather than beside it, so "90" and "%" read
   as one value instead of a number that happens to sit near a symbol. */
.unit{position:relative; display:flex; align-items:center}
.unit>span{position:absolute; right:12px; font-size:13px; color:var(--muted); pointer-events:none}
.unit>input{padding-right:30px}
.unit.money>span{left:12px; right:auto}
.unit.money>input{padding-left:24px; padding-right:11px}
.costform button{margin-top:14px; font:inherit; font-weight:600; font-size:14px;
  padding:10px 20px; border-radius:9px; border:1.5px solid transparent; cursor:pointer;
  background:var(--accent); color:var(--accent-ink)}
.costform button:hover{filter:brightness(1.08)}
.ladder .fine{margin:14px 0 0}
.fine{margin:14px 0 0; font-size:12px; line-height:1.55; color:var(--muted); max-width:72ch}
.fine strong{color:var(--ink); font-weight:600}

@media (prefers-reduced-motion:reduce){.costform button{transition:none}}
.fine.warnline{margin:0 0 14px; padding:10px 13px; border-radius:var(--r);
  background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  color:var(--ink); max-width:none}

/* The comparison under each headline number. Label left, value right, on the
   same rows in both panels so the two read as one table split down the middle. */
.vs{margin:12px 0 0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft)}
.vs>div{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line-soft)}
.vs>div:last-child{border-bottom:0}
.vs dt{font-size:12px; color:var(--muted)}
.vs dd{margin:0; font-size:13px; font-weight:600; white-space:nowrap}
.vs .sub{padding-top:6px}
.vs .sub dt{font-size:11px}

/* Grading company: four radio pills, not a fifth dropdown. It is a four-way
   choice between names people already know, so it should be visible at rest. */
.costform fieldset.seg{border:0; margin:0; padding:0; min-width:0}
.costform fieldset.seg legend{padding:0; margin:0 0 5px; font-size:11px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.pills{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.pill{position:relative; display:block}
/* The input stays in the layout and keyboard order; the label is the visible
   control. Hiding it with display:none would take it out of both. */
.pill input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.pill span{display:block; text-align:center; font-size:14px; font-weight:600; padding:9px 8px;
  border:1.5px solid var(--line); border-radius:9px; background:var(--sunken); color:var(--muted)}
.pill input:checked+span{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.pill input:focus-visible+span{outline:2px solid var(--accent); outline-offset:2px}
.pill:hover span{border-color:var(--accent)}

/* ── the search bar, louder ─────────────────────────────── */
/* This is the whole product: one box, one card. On the card page it was reading
   as chrome - a dark field on a dark ground with a muted placeholder - when it
   is the only way to ask the next question. Taller, brighter, and with a real
   border, so it looks like the thing you are meant to use. */
.searchform{margin:0 0 4px}
.field{background:var(--sunken); border-width:2px; border-radius:14px; padding:0 18px; gap:13px}
.field:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.field:focus-within{background:var(--surface); box-shadow:0 0 0 4px var(--accent-soft)}
.field svg{width:20px; height:20px; color:var(--accent)}
#q{padding:18px 0; font-size:20px; font-weight:500}
#q::placeholder{color:var(--muted); opacity:.85}
.searchbox.open .field,.ac{border-radius:14px 14px 0 0}
.ac{border-radius:0 0 14px 14px; border-width:2px; border-top:0}
@media (max-width:560px){ #q{padding:15px 0; font-size:16px} .field{padding:0 14px} }

/* ── contact, in the footer ─────────────────────────────── */
.foot{margin-top:52px; padding-top:26px; border-top:1px solid var(--line)}
.fnav{display:flex; flex-wrap:wrap; gap:20px}
.fnav a{font-size:13px; font-weight:600; color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; min-height:24px}
.fnav a:hover{color:var(--accent); text-decoration:underline}
/* A standing page, not a panel: full measure, room to breathe. */
.page{margin-top:26px; max-width:60ch}
/* 60ch is the right measure for one column of prose and far too narrow for two,
   so the legal page takes the full wrap instead. */
.page.legal{max-width:none}
.page h1{font-family:"Archivo",sans-serif; font-size:clamp(26px,4.6vw,34px); font-weight:800;
  letter-spacing:-.03em; line-height:1.1; margin:0}
.page .lede{margin:10px 0 22px; font-size:16px; line-height:1.6; color:var(--muted)}
.contact{display:flex; flex-direction:column; gap:14px; margin-top:22px}
/* A way out of a page that has no other links. */
.back{margin:0 0 16px; font-size:13px}
.back a,a.back{color:var(--accent); font-weight:600; text-decoration:none}
.back a:hover,a.back:hover{text-decoration:underline}
.cf{display:flex; flex-direction:column; gap:5px}
.cf label{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted)}
.contact input,.contact textarea{width:100%; font:inherit; font-size:14px; color:var(--ink);
  background:var(--sunken); border:1.5px solid var(--line); border-radius:9px; padding:11px 13px}
.contact textarea{resize:vertical; min-height:96px; line-height:1.5}
.contact input:focus-visible,.contact textarea:focus-visible,
.contact button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.contact input::placeholder,.contact textarea::placeholder{color:var(--muted); opacity:.75}
.contact button{align-self:flex-start; font:inherit; font-weight:600; font-size:14px;
  padding:11px 22px; border:1.5px solid transparent; border-radius:9px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink)}
.contact button:hover{filter:brightness(1.08)}
/* Off-screen rather than display:none - a bot reading the markup fills it, and
   a screen reader never reaches it because the wrapper is aria-hidden. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.foot .fine{margin-top:14px}

/* ── legal pages ────────────────────────────────────────── */
.legal{max-width:68ch}
/* Two documents on one page, so their titles outrank the clause headings. */
.operator{margin:0 0 6px; font-size:14px; line-height:1.6; color:var(--muted); max-width:62ch}
.operator a{color:var(--accent); text-decoration:none}
.operator a:hover{text-decoration:underline}
.legal h2{margin:44px 0 6px; font-family:"Archivo",sans-serif; font-size:20px;
  font-weight:700; letter-spacing:-.02em; padding-top:26px; border-top:1px solid var(--line)}
.legal h3{margin:0 0 8px; font-size:16px; font-weight:700; letter-spacing:-.01em}

/* Clause left, summary right. The pairing is the whole point - a summary beside
   the thing it summarises gets read, one in a preamble does not - so on a phone
   they stack in that same order rather than collapsing into two separate lists. */
.pp{display:grid; grid-template-columns:1fr; gap:0}
.pp .pr{padding:20px 0 6px}
.pp .ps{padding:0 0 20px; border-bottom:1px solid var(--line-soft)}
.pp .ps:last-child{border-bottom:0}
.ps{color:var(--muted)}
.ps p{margin:0 0 8px; font-size:13px; line-height:1.65}
/* The column headings only mean anything once there are two columns. */
.pcols{display:none}
@media (min-width:820px){
  .pp{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); column-gap:38px}
  .pp .pr{padding:22px 0 8px; border-top:1px solid var(--line-soft)}
  .pp .ps{padding:22px 0 8px; border-top:1px solid var(--line-soft); border-bottom:0}
  .pp > :nth-child(1),.pp > :nth-child(2){border-top:0}
  .pcols{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    column-gap:38px; margin:14px 0 0; font-size:11px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
}
/* Stacked, the two columns lose the one thing that told them apart - being in
   different columns - and the summary reads as another paragraph of the clause
   above it. The rule and the label put that distinction back where the layout
   cannot. */
@media (max-width:819px){
  .pp .ps{border-left:2px solid var(--line); padding:0 0 20px 13px}
  .pp .ps::before{content:"In short"; display:block; margin-bottom:5px;
    font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); opacity:.8}
}
/* The one clause that changes by where the reader is. */
.eunote{border-left:2px solid var(--accent); padding-left:13px; margin-top:12px}
.legal p,.legal li{font-size:14px; line-height:1.65; color:var(--muted)}
.legal p{margin:0 0 11px}
.legal ul{margin:0 0 11px; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.legal b{color:var(--ink); font-weight:600}
.legal a{color:var(--accent)}
/* Header for the pre-typing list, so "Recently searched" is not mistaken for
   results of a query the visitor did not run. */
.achead{margin:0; max-width:none;   /* .wrap p caps at 66ch, which halves it */
  padding:9px 14px 7px; font-size:11px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line-soft); background:var(--sunken)}

/* ── most searched, on the home page ────────────────────── */
.popular{margin-top:38px}
.popular .lhead{margin-bottom:12px}
.popular h2{margin:0; font-size:14px; font-weight:700; letter-spacing:-.01em}

/* ── why the score is what it is ────────────────────────── */
/* Three cards rather than three items on a shared rule. Floating in a row they
   read as a caption strip under the scale; boxed, they read as the three facts
   the verdict rests on. */
.highlights{list-style:none; margin:22px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:10px}
/* Stacked on a narrow screen. This lived 400 lines higher in the file, above
   the rule it was meant to override, so it lost the cascade on equal
   specificity and never applied - three boxes stayed side by side at 320px and
   pushed the page 37px wider than the viewport. It has to sit after the base
   rule, not before it. */
@media (max-width:620px){ .highlights{grid-template-columns:1fr; gap:14px} }
.highlights li{display:flex; flex-direction:column; gap:5px; margin:0;
  padding:14px 16px; border-radius:var(--r);
  background:var(--sunken); border:1px solid var(--line-soft)}
.highlights .hv{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin:0;
  min-width:0}
.highlights b{font-family:"Archivo",sans-serif; font-weight:800; font-size:27px;
  letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums;
  color:var(--ink)}
.highlights .hl{font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted)}
.scale.good .highlights b,.scale.best .highlights b{color:var(--good)}
.scale.warn .highlights b{color:var(--warn)}
.scale.bad .highlights b{color:var(--bad)}

/* ── buy links, in the card header ──────────────────────── */
/* The only thing on the page that earns anything, so styled as the action it
   is: filled, high contrast, a real tap target.

   The label sits on the same line as the buttons rather than above them. As a
   row of tiny grey capitals it read as a section header for a section one line
   tall, and stacked the block three deep to hold two links. Inline, it is a
   sentence the buttons finish. */
.buy{margin-top:18px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px}
/* Equal widths, and never a wrapped label. Sized to their own text the two
   buttons came out 30px apart, which reads as a mistake rather than a pair;
   sized to fit the column they were narrow enough to break "Check price on
   TCGplayer" across two lines. The 280px track is wider than the longer label,
   so a column that cannot hold two of them drops to one full-width button. */
/* Side by side wherever two will fit.
   flex:1 is what makes that possible: .buys is a flex item in .buy, so without
   it the grid shrank to its own content - 246px in a 592px parent - and 1fr
   tracks resolved against that, forcing a single column no matter how small the
   minimum track was. Filling the parent first gives the two columns real room. */
.buys{flex:1 1 100%; min-width:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px}
.buylink{position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; min-width:0;
  min-height:42px; padding:0 11px; border-radius:10px;
  background:var(--accent); color:var(--accent-ink);
  border:1.5px solid transparent; box-shadow:var(--shadow);
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease}
/* A sheen crossing the button every few seconds. Motion catches the eye where
   colour alone has stopped registering, but a button that moves continuously
   becomes something to look away from - so it is one pass, then a long pause,
   and it stops entirely while the pointer is on it, where the hover state takes
   over and the animation would only fight it. */
.buylink::after{content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.42) 50%,
    transparent 58%);
  transform:translateX(-130%); animation:sheen 6s ease-in-out infinite}
.buys a:nth-child(2)::after{animation-delay:.5s}
@keyframes sheen{ 0%,70%{transform:translateX(-130%)} 86%,100%{transform:translateX(130%)} }
.buylink:hover{filter:brightness(1.09); transform:translateY(-2px);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}
.buylink:hover::after{animation:none; transform:translateX(-130%)}
.buylink:hover .ext{transform:translate(2px,-2px)}
.buylink:active{transform:translateY(0)}
.buylink:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.buylink .bn{font-family:"Archivo",sans-serif; font-weight:700; font-size:15px;
  white-space:nowrap;
  letter-spacing:-.015em}
.buylink .ext{opacity:.7; flex:none; transition:transform .14s ease}
/* Stylised wordmarks, drawn in CSS: the CSP admits images from one host only,
   so a fetched logo would be a blocked request and an outage risk. Each sits on
   a light chip - eBay's mark is four brand colours and TCGplayer's is orange,
   and neither survives being dropped onto a saturated fill. */
.mk{display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:#fff; border-radius:5px; padding:4px 6px;
  font-family:"Archivo",sans-serif; font-weight:800; line-height:1}
.mk.ebay{font-size:14px; letter-spacing:-.04em}
.mk.ebay i{font-style:normal}
.mk.ebay .e{color:#E53238} .mk.ebay .b{color:#0064D2}
.mk.ebay .a{color:#F5AF02} .mk.ebay .y{color:#86B817}
/* Square, like eBay's, so the two chips match. */
.mk.tcg{padding:3px}
.mk.tcg img{display:block; width:20px; height:20px}
@media (prefers-reduced-motion:reduce){
  .buylink,.buylink .ext{transition:none}
  .buylink:hover{transform:none}
  .buy .buylink::after{animation:none; display:none}
}
 /* `.costform button` is two classes deep and out-specified a bare .js-hidden,
   so the button the script had just hidden carried on showing. */
.js-hidden,.costform button.js-hidden{display:none}
/* Costs read as costs: signed and in the same red the ladder uses for a loss. */
.ci .v.cost{color:var(--bad)}
.ci.total{background:var(--sunken)}

/* A verdict on a handful of graded copies is still the verdict the maths gives;
   what it needs is a note on how much weight to put on it, sitting beside the
   answer rather than replacing it. Muted and small on purpose: it qualifies the
   result, it is not competing with it. */
.costflags{margin:0 0 12px}
.flag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--warn); background:var(--warn-soft);
  border:1.5px solid color-mix(in srgb,var(--warn) 45%,transparent);
  border-radius:999px; padding:4px 11px}

/* Beside the card's name, because that is the first thing read and this
   qualifies everything under it. Back to a pill: next to a 100/100 the fill
   read as an error state, but against a heading it reads as a label on the
   card, which is what it is. Sized and weighted well below the h1 so it
   annotates the name rather than competing with it. */
.lowpop{display:inline-block; vertical-align:middle; margin-left:12px;
  transform:translateY(-2px);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.03em; line-height:1.2;
  color:var(--warn); background:var(--warn-soft);
  border:1.5px solid color-mix(in srgb,var(--warn) 42%,transparent);
  border-radius:999px; padding:5px 12px; white-space:nowrap}

/* ── how the score works ────────────────────────────────── */
/* Pinned to the panel's own corner rather than aligned inside the verdict row.
   align-self only reaches the top of that row, and the row is baseline-aligned
   around a 52px number, so "top" there still sat 19px down from the panel. */
.help{position:absolute; top:16px; right:16px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:50%;text-decoration:none;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:12px;line-height:1;
  color:var(--muted);background:var(--sunken);border:1.5px solid var(--line);
  align-self:center;transition:color .12s ease,border-color .12s ease}
.help:hover{color:var(--accent);border-color:var(--accent)}
.help:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A :target modal, so it opens with JavaScript off like the rest of the page. */
.modal{display:none}
.modal:target{display:block;position:fixed;inset:0;z-index:80;
  padding:24px 16px;overflow-y:auto}
.modal .scrim{position:fixed;inset:0;background:rgba(4,7,12,.68);
  backdrop-filter:blur(2px);cursor:default}
.modal .sheet{position:relative;max-width:660px;margin:0 auto;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  padding:18px 22px 24px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.modal .lhead{margin-bottom:14px}
.modal .x{font-size:27px;line-height:1;color:var(--muted);text-decoration:none;padding:0 4px}
.modal .x:hover{color:var(--ink)}
.modal p{margin:0 0 13px;font-size:13px;line-height:1.6;color:var(--muted);max-width:none}
.modal b{color:var(--ink);font-weight:600}
.modal h3{margin:20px 0 7px;font-size:13px;font-weight:700;letter-spacing:-.005em}

table.heat{width:100%;border-collapse:separate;border-spacing:3px;min-width:400px}
table.heat caption{caption-side:top;text-align:right;font-size:11px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding-bottom:6px}
/* Both axes are now word-for-word the labels on the card page above, and hold
   the same numbers: Odds of Profit down the side, Profit Multiple across the
   top. A reader can find their own card on this grid. */
th .ax{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.25;text-align:right}
table.heat th{font-size:11px;font-weight:600;color:var(--muted);text-align:center;
  border:0;padding:2px;text-transform:none;letter-spacing:.02em}
table.heat th[scope="row"]{text-align:right;padding-right:6px}
/* Colour carries the band; the number inside carries the exact score, so the
   grid is still readable to anyone who cannot separate the hues. */
td.hm{border:0;padding:6px 0;text-align:center;border-radius:5px;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:600;color:var(--ink)}
/* A ramp, not four arbitrary tints. The old values put warn and good at the
   same 30% and only best stood out, so the four bands read as two: red-ish,
   brown-ish, and then two greens a shade apart. */
td.hm.bad{background:color-mix(in srgb,var(--bad) 40%,transparent)}
td.hm.warn{background:color-mix(in srgb,var(--warn) 42%,transparent)}
td.hm.good{background:color-mix(in srgb,var(--good) 34%,transparent)}
td.hm.best{background:color-mix(in srgb,var(--good) 78%,transparent)}
td.hm.here{outline:2px solid var(--ink);outline-offset:1px}
.hmkey{display:flex;flex-wrap:wrap;gap:7px 16px;list-style:none;padding:0;margin:12px 0 0}
.hmkey li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.hmkey li::before{content:"";width:11px;height:11px;border-radius:3px}
.hmkey .bad::before{background:color-mix(in srgb,var(--bad) 40%,transparent)}
.hmkey .warn::before{background:color-mix(in srgb,var(--warn) 42%,transparent)}
.hmkey .good::before{background:color-mix(in srgb,var(--good) 34%,transparent)}
.hmkey .best::before{background:color-mix(in srgb,var(--good) 78%,transparent)}
/* Says which rate is actually being used, so the service level sitting at a
   different number is explained rather than looking stuck. */
.using{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;
  background:var(--accent-soft);color:var(--accent);font-size:11px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.affnote{margin:11px 0 0; font-size:11px; line-height:1.5; color:var(--muted); max-width:70ch}
.affnote a{color:var(--muted); border-bottom:1px dotted var(--line); text-decoration:none}
.affnote a:hover{color:var(--ink)}
/* One of these numbers is certain and the other is an average. Side by side
   without a marker, they read as equivalent - which is the single most
   misleading thing this panel could do. */
.path .cert{display:inline-block; margin:6px 0 0; padding:2px 7px; border-radius:4px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--flat-soft); color:var(--muted)}
.path .cert.sure{background:var(--accent-soft); color:var(--accent)}
.path .v{margin:7px 0 6px}
.acts{display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:16px}
.btn.discord{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  min-height:40px; padding:0 16px; border-radius:9px; background:#5865F2; color:#fff;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:14px}
.btn.discord:hover{filter:brightness(1.08)}
.btn.discord:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* The average, split into what actually happens to you. */
/* Beside the number, not under it: the split is a reading OF that number, and
   stacking it made the card tall enough to unbalance the pair. */
.vrow{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.odds{margin:0; display:flex; flex-direction:column; gap:3px}
.odds>div{display:flex; align-items:baseline; gap:7px}
.odds dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:600; min-width:34px; text-align:right}
.odds dd{margin:0; font-size:12px; color:var(--muted)}
.odds .win dt{color:var(--good)}
.odds .even dt{color:var(--muted)}
.odds .lose dt{color:var(--bad)}
/* Drawn, not fetched: the CSP admits images from one host, so an icon pulled
   from Discord would be a blocked request and a dependency on their uptime. */
.fnav .dlink{display:inline-flex; align-items:center; gap:6px}
.fnav .dmark{flex:none; color:#5865F2}
.fnav .dlink:hover .dmark{color:var(--accent)}
/* ── discord, in the header ─────────────────────────────── */
.topr{display:flex; align-items:center; gap:12px}
.dbtn{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:7px 13px; border-radius:8px; background:#5865F2; color:#fff;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; line-height:1;
  transition:filter .12s ease}
.dbtn .dmark{flex:none; color:#fff}
.dbtn:hover{filter:brightness(1.09)}
.dbtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* On a phone the wordmark, the button and the chip do not fit on one line, and
   "Join our" is the part that carries no information. */
@media (max-width:520px){ .dbtn span{display:none} .dbtn{padding:7px 10px} }
/* A verdict needs a population to be a verdict. */

.scale.flat .designation{color:var(--muted)}
.scale.flat .sc b{color:var(--muted)}
.scale.flat .highlights b{color:var(--muted)}

/* Keyboard users land on the header links on every page; this gives them one
   key to the content instead. Off-screen until focused, then it appears. */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink); font-weight:600;
  font-size:14px; padding:10px 16px; border-radius:0 0 9px 0; text-decoration:none}
.skip:focus{left:0}