/* Protein annotation leaderboard. Palette from the kmerseek landing page
   (seanome/kmerseek docs/assets/site.css). One meaning per colour across the site:
   --k-letters / --k-profiles / --k-shapes / --k-kmers / --k-models  the kind of method
   --measured  numbers measured on Sherlock      --reported  numbers a submitter reported
   --muted     words, never data                  --accent    links and the selected chip */
@font-face{font-family:"Fantasque Sans Mono";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/FantasqueSansMono-Regular.woff2") format("woff2")}
@font-face{font-family:"Fantasque Sans Mono";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/FantasqueSansMono-Bold.woff2") format("woff2")}

:root{--bg:#F6F7F5;--surface:#FFFFFF;--ink:#1C211F;--muted:#5E6663;--hair:#D9DDDA;
  --accent:#145A63;--chip:#EEF1EF;--null:#8E9290;--strip-a:#8C6D46;--strip-b:#DCCBAB;
  --k-letters:#0072B2;--k-profiles:#E69F00;--k-shapes:#009E73;--k-kmers:#CC3311;--k-models:#6B4C9A;
  --measured:#1C211F;--reported:#8A5A00;--warn:#9A6200;--warn-bg:#FCEBC4;--nr:#8E9290;
  --shadow:0 14px 34px -26px rgba(0,40,50,.75)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#141716;--surface:#1B1F1E;--ink:#E6EAE8;
  --muted:#A3ABA7;--hair:#2E3432;--accent:#7FD1D9;--chip:#232826;--null:#555B59;--strip-a:#A88A5F;--strip-b:#5E4C33;
  --k-letters:#56B4E9;--k-profiles:#F0B640;--k-shapes:#3CC79A;--k-kmers:#FF6E54;--k-models:#B39DDB;
  --measured:#E6EAE8;--reported:#F2C46B;--warn:#F2C46B;--warn-bg:#3A2E12;--nr:#7C8380;--shadow:0 18px 44px -28px rgba(0,0,0,.85);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#141716;--surface:#1B1F1E;--ink:#E6EAE8;
  --muted:#A3ABA7;--hair:#2E3432;--accent:#7FD1D9;--chip:#232826;--null:#555B59;--strip-a:#A88A5F;--strip-b:#5E4C33;
  --k-letters:#56B4E9;--k-profiles:#F0B640;--k-shapes:#3CC79A;--k-kmers:#FF6E54;--k-models:#B39DDB;
  --measured:#E6EAE8;--reported:#F2C46B;--warn:#F2C46B;--warn-bg:#3A2E12;--nr:#7C8380;--shadow:0 18px 44px -28px rgba(0,0,0,.85);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Source Sans 3",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.2}
h1{font-size:1.9rem;margin:0 0 6px}
h2{font-size:1.3rem;margin:34px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--hair)}
h3{font-size:1.08rem;margin:22px 0 6px}
a{color:var(--accent)}
.mono{overflow-wrap:anywhere}
code,pre,.mono,kbd{font-family:"Fantasque Sans Mono",ui-monospace,Menlo,monospace;font-feature-settings:normal}
code{font-size:.92em;background:var(--chip);border-radius:4px;padding:1px 4px}
pre{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:12px 14px;overflow-x:auto;line-height:1.45;font-size:.88rem}
pre code{background:none;padding:0}

header.site{background:var(--surface);border-bottom:1px solid var(--hair);position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding-top:10px;padding-bottom:8px}
header.site .brand{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none}
nav.site{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-size:.98rem}
nav.site a,.navpop a{color:var(--muted);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
nav.site a[aria-current="page"],.navpop a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
header.site details{position:relative}
header.site details>summary{cursor:pointer;list-style:none;color:var(--muted)}
header.site details>summary::-webkit-details-marker{display:none}
header.site details>summary::after{content:" ▾"}
header.site details>summary.cur{color:var(--ink);border-bottom:2px solid var(--accent)}
.navpop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--hair);border-radius:8px;
  box-shadow:var(--shadow);padding:6px 14px;display:flex;flex-direction:column;gap:4px;min-width:190px;z-index:31}
.navpop a{padding:6px 0}
.navmenu{display:none;margin-left:auto}
.navmenu>summary{white-space:nowrap;font-weight:600;color:var(--ink) !important;border:1px solid var(--hair);border-radius:999px;padding:4px 12px;background:var(--chip)}
html{scroll-padding-top:64px}
@media (max-width:820px){
  nav.site{display:none}
  .navmenu{display:block}
  header.site .wrap{flex-wrap:nowrap;align-items:center;gap:10px}
  header.site .brand{font-size:1rem;line-height:1.2;min-width:0}
}
.wrap{max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px}
main.wrap{padding-top:22px;padding-bottom:40px;position:relative;z-index:0}
.source{font-size:.9rem;color:var(--muted);margin:0 0 18px}
.asof{font-size:.85rem;color:var(--muted);margin:-6px 0 10px}
.lede{font-size:1.05rem;max-width:72ch}
.prose{max-width:76ch}
.muted{color:var(--muted)}
footer.site{border-top:1px solid var(--hair);color:var(--muted);font-size:.9rem}
footer.site .wrap{padding-top:14px;padding-bottom:30px}

/* Filter chips */
.filters{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:10px 14px;margin:14px 0 6px;box-shadow:var(--shadow)}
.chiprow{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:4px 14px;padding:7px 0;border-bottom:1px solid var(--hair)}
.chiprow:last-child{border-bottom:none}
.chiprow .axis{font-weight:600;font-size:.95rem}
.chiprow .axis small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;line-height:1.3}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipgroup{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chipgroup .glabel{font-size:.8rem;color:var(--muted);margin-right:2px}
button.chip{font:inherit;font-size:.9rem;line-height:1.2;border:1px solid var(--hair);background:var(--chip);color:var(--ink);
  border-radius:999px;padding:4px 11px;cursor:pointer;min-height:30px}
button.chip:hover{border-color:var(--accent)}
button.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
button.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.axisnote{font-size:.88rem;color:var(--muted);margin:6px 0 0}
@media (max-width:640px){.chiprow{grid-template-columns:1fr}}

.prices{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end;margin:10px 0 4px;font-size:.92rem}
.prices label{display:flex;flex-direction:column;gap:2px}
.prices input{font:inherit;font-family:"Fantasque Sans Mono",monospace;width:9.5em;padding:4px 6px;border:1px solid var(--hair);border-radius:6px;background:var(--surface);color:var(--ink)}

/* Tables */
figure{margin:18px 0}
figcaption{font-size:.92rem;color:var(--ink);max-width:90ch;margin:0 0 10px}
figcaption b{font-family:Fraunces,Georgia,serif}
.tablebox{overflow-x:auto;border:1px solid var(--hair);border-radius:8px;background:var(--surface);isolation:isolate}
table.lb{border-collapse:collapse;width:100%;font-size:.92rem}
table.lb th,table.lb td{padding:6px 9px;border-bottom:1px solid var(--hair);text-align:right;vertical-align:top}
table.lb th{font-weight:600;font-size:.84rem;line-height:1.25;background:var(--chip);position:relative}
table.lb th button{all:unset;cursor:pointer;display:block;width:100%}
table.lb th button:focus-visible{outline:2px solid var(--accent)}
table.lb th .key{display:block;font-family:"Fantasque Sans Mono",monospace;font-weight:400;color:var(--muted);font-size:.78rem}
table.lb th[aria-sort="ascending"] .arrow::after{content:" ▲"}
table.lb th[aria-sort="descending"] .arrow::after{content:" ▼"}
table.lb td.num{font-family:"Fantasque Sans Mono",monospace;white-space:nowrap}
table.lb td.txt,table.lb th.txt{text-align:left}
table.lb tr:hover td{background:var(--chip)}
td.missing{color:var(--muted);font-family:"Source Sans 3",sans-serif !important;white-space:nowrap;text-align:center !important}
.prov{display:inline-block;font-size:.72rem;font-weight:700;border-radius:3px;padding:0 4px;margin-left:3px;vertical-align:1px}
.prov.measured{border:1.5px solid var(--measured);color:var(--measured)}
.prov.reported{border:1.5px dashed var(--reported);color:var(--reported)}
.kind{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:0}
.k-letters{background:var(--k-letters)}.k-profiles{background:var(--k-profiles)}.k-shapes{background:var(--k-shapes)}
.k-kmers{background:var(--k-kmers)}.k-models{background:var(--k-models)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;margin:8px 0 10px;align-items:center}
.legend .item{display:inline-flex;align-items:center;gap:6px;min-width:0}
@media (max-width:640px){.legend .item.kwrap{flex-wrap:wrap}}
.legend svg,.legend .kind{flex:none}

/* Plot */
.plotbox{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:6px;isolation:isolate;position:relative}
.plotbox svg{display:block;width:100%;height:auto}
.plotbox text{font-family:"Source Sans 3",sans-serif;fill:var(--ink)}
.plotbox .tick text{font-family:"Fantasque Sans Mono",monospace;font-size:12px;fill:var(--muted)}
.plotbox .grid{stroke:var(--hair)}
.plotbox .frontier{stroke:var(--ink);stroke-width:1.6;fill:none}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--ink);border-radius:6px;padding:6px 9px;font-size:.85rem;
  box-shadow:var(--shadow);max-width:280px;display:none;z-index:2}
.axispick{margin:10px 0 4px}
.pickrow{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:4px 12px;align-items:center;padding:4px 0}
.picklabel{font-weight:600;font-size:.95rem}
@media (max-width:640px){.pickrow{grid-template-columns:1fr}}
button.chip:disabled{opacity:.45;cursor:not-allowed;border-style:dashed}
button.chip:disabled:hover{border-color:var(--hair)}

/* Cards and coverage */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:6px 22px 18px;box-shadow:var(--shadow);max-width:900px}
@media (max-width:600px){.card{padding:4px 14px 14px}}
dl.facts{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 16px;margin:10px 0}
dl.facts dt{font-weight:600}
dl.facts dd{margin:0}
@media (max-width:600px){dl.facts{grid-template-columns:1fr}}
.yes{font-weight:700}
ul.tools{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
ul.tools li{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:10px 12px}
table.cov{border-collapse:collapse;font-size:.88rem}
table.cov th,table.cov td{padding:3px 6px;border-bottom:1px solid var(--hair);text-align:center}
table.cov th.txt,table.cov td.txt{text-align:left;white-space:nowrap}
table.cov thead th{vertical-align:bottom;font-weight:600;font-size:.82rem}
.sq{display:inline-block;width:13px;height:13px;border:1.5px solid var(--ink);border-radius:2px;vertical-align:-1px}
.sq.on{background:var(--ink)}
table.cov tr.axisrow td{background:var(--chip);font-weight:600;text-align:left}
.katex{font-size:1.05em}
table.lb td.txt:first-child{white-space:nowrap}
/* Long container names and hashes wrap at phone width instead of widening the page. */
:not(pre) > code{overflow-wrap:anywhere}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}
main.wrap{min-width:0}
.tag{display:inline-block;font-size:.72rem;line-height:1.3;border:1px solid var(--hair);border-radius:3px;padding:0 4px;color:var(--muted);white-space:nowrap}
.tag.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}
.tag.warn::before{content:"! ";font-weight:700;color:var(--warn)}
td.none{color:var(--muted);text-align:center !important;white-space:nowrap}
.runs{font-size:.8em}
/* Tool name stays in view while the table scrolls sideways. */
table.lb td.txt:first-child,table.lb th:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
table.lb th:first-child{background:var(--chip)}
table.lb tr:hover td.txt:first-child{background:var(--chip)}
details.prose{margin:6px 0 10px}
details.prose summary{cursor:pointer;color:var(--accent)}

/* Region pile-up */
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px}
.pu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pu-panel{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:6px 8px;cursor:pointer;min-width:0}
.pu-panel.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pu-panel:focus-visible{outline:2px solid var(--accent)}
.pu-t{font-size:.82rem;line-height:1.25}
.pu-curve{width:100%;height:auto}
.pu-ov{width:100%;height:150px;image-rendering:pixelated;border:1px solid var(--hair)}
.pu-ro{font-size:.74rem;color:var(--muted);line-height:1.3;font-family:"Fantasque Sans Mono",monospace}
.pu-curve .grid,.pu-fcurve .grid,#pu-hist .grid{stroke:var(--hair)}
.pu-curve .edge,.pu-fcurve .edge,#pu-hist .edge{stroke:var(--muted);stroke-dasharray:3 2}
.pu-curve .tk,.pu-fcurve .tk,#pu-hist .tk{font:11px "Fantasque Sans Mono",monospace;fill:var(--muted)}
.pu-fcurve .lab,#pu-hist .lab{font:12px "Source Sans 3",sans-serif;fill:var(--ink)}
.pu-focus{max-width:700px}
[hidden]{display:none !important}
.pu-fcurve{width:100%;height:auto;display:block}
.pu-scroll{position:relative;max-height:620px;overflow:auto}
.pu-fheat{display:block;width:100%;image-rendering:pixelated}
.pu-tip{position:absolute;left:12px;right:12px;max-width:none}
.pu-res{font-size:.78rem;margin:4px 0;padding:6px;white-space:pre;overflow-x:auto}
#pu-scorebar .bar{display:inline-block;width:80px;height:10px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--kind) 25%,var(--surface)),var(--kind))}
#pu-hist{width:100%;height:auto}
.refs{font-size:.9rem;color:var(--muted)}
.pu-w{display:block;font-size:.74rem;color:var(--muted);line-height:1.25;margin-top:1px}
.pu-fcurve .tk{font-size:15px}
.pu-fcurve .lab{font-size:15px}
#pu-scorebar .name{margin-right:4px}
.pu-w{min-height:5.1em}

/* Claims card: status by mark and word (● alive, × retired, ○ untested), no status colours,
   so no colour here competes with the kind-of-method colours. */
.cl-card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:18px 22px 16px;max-width:900px;margin:0 0 22px;box-shadow:var(--shadow)}
@media (max-width:600px){.cl-card{padding:14px}}
.cl-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.cl-title{font-size:1.45rem;margin:0;border:none;padding:0}
.cl-file{color:var(--muted);font-size:.9rem}
.cl-file a{color:inherit}
.cl-pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.cl-pill{border-radius:999px;padding:3px 12px;font-size:.92rem;background:var(--chip);border:1px solid var(--hair)}
.cl-pill.alive{border-color:var(--ink)}
.cl-pill.retired{text-decoration:none}
.cl-pill.plain{background:transparent}
.cl-sub{color:var(--muted);font-size:.9rem;margin:2px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.cl-rows{list-style:none;padding:0;margin:0}
.cl-row{display:grid;grid-template-columns:22px 1fr;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--hair)}
.cl-row:last-child{border-bottom:none}
.cl-mark{font-size:1.15rem;line-height:1.4;color:var(--ink);text-align:center}
.cl-row[data-status="untested"] .cl-mark,.cl-row[data-status="untested"] .cl-claim{color:var(--muted)}
.cl-claim{font-size:1.12rem;font-weight:600;line-height:1.3}
.cl-row[data-status="retired"] .cl-claim{text-decoration:line-through;text-decoration-thickness:1px}
.cl-kill{color:var(--muted);font-size:.95rem}
.cl-verdict{font-size:.95rem}
.cl-st{font-weight:600}
.cl-more{margin-top:4px;font-size:.88rem}
.cl-more summary{cursor:pointer;color:var(--accent)}
.cl-more ul{margin:4px 0;padding-left:18px}
.cl-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cl-btn{border:1px solid var(--hair);border-radius:10px;padding:7px 16px;color:var(--ink);text-decoration:none;background:var(--surface)}
.cl-btn:hover,.cl-btn:focus-visible{border-color:var(--ink)}

/* Tool cards index */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tc-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:14px 0 10px}
.tc-search input{font:inherit;width:min(420px,100%);padding:9px 16px;border:1px solid var(--hair);border-radius:999px;background:var(--surface);color:var(--ink)}
.tc-search input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tc-search{flex:1 1 260px;min-width:0}
.tc-chips{margin:0 0 10px}
.tc-chips .chip{font-family:"Fantasque Sans Mono",monospace;font-size:.86rem}
.tc-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:14px}
.tc{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:16px 18px 0;display:flex;flex-direction:column;min-width:0}
.tc-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tc-tags{display:flex;flex-wrap:wrap;gap:6px}
.tc-tag{font-family:"Fantasque Sans Mono",monospace;font-size:.78rem;border:1px solid var(--hair);border-radius:999px;padding:1px 9px;color:var(--muted)}
.dg{width:110px;height:66px;flex:none}
.dg-t{font:12px "Source Sans 3",sans-serif;fill:var(--muted)}
.tc-name{font-size:1.25rem;margin:8px 0 4px;border:none;padding:0}
.tc-name a{color:var(--ink);text-decoration:none}
.tc-name a:hover,.tc-name a:focus-visible{text-decoration:underline}
.tc-desc{color:var(--muted);margin:0 0 12px;flex:1}
.tc-foot{border-top:1px solid var(--hair);margin:0 -18px;padding:10px 18px;font-family:"Fantasque Sans Mono",monospace;font-size:.82rem;color:var(--muted)}
.tc-foot b{color:var(--ink);font-weight:600}

/* Leaderboard: the table comes first; filters and prices fold away above it. */
details.choices{background:var(--surface);border:1px solid var(--hair);border-radius:10px;margin:12px 0 10px;box-shadow:var(--shadow)}
details.choices>summary{cursor:pointer;padding:10px 14px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;list-style:none}
details.choices>summary::-webkit-details-marker{display:none}
details.choices>summary::before{content:"▸";color:var(--accent)}
details.choices[open]>summary::before{content:"▾"}
.choices-label{font-weight:600;color:var(--accent)}
.choices-now{color:var(--muted);font-size:.92rem;min-width:0}
details.choices>.filters{box-shadow:none;border:0;border-top:1px solid var(--hair);border-radius:0;margin:0}
details.choices>.prices{padding:0 14px 12px}
details.key{margin:4px 0 8px}
details.key>summary{cursor:pointer;color:var(--accent);font-size:.92rem}

/* Definitions beside column names and labels (terms.js). */
button.term{font:600 .78rem/1 "Source Sans 3",sans-serif;width:22px;height:22px;padding:0;margin:0 0 0 4px;border-radius:50%;
  border:1px solid var(--muted);background:var(--surface);color:var(--muted);cursor:pointer;vertical-align:1px;flex:none}
button.term:hover,button.term[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
button.term:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
table.lb th button.term{all:revert;font:600 .78rem/1 "Source Sans 3",sans-serif;width:22px;height:22px;padding:0;margin:3px 0 0;border-radius:50%;
  border:1px solid var(--muted);background:var(--surface);color:var(--muted);cursor:pointer}
table.lb th button.term[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
table.lb th button.term:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.term-tip{position:fixed;z-index:50;display:block;background:var(--surface);color:var(--ink);border:1px solid var(--ink);border-radius:8px;
  padding:8px 11px;box-shadow:var(--shadow);font:400 .9rem/1.4 "Source Sans 3",sans-serif;text-align:left;white-space:normal}
.term-tip[hidden]{display:none !important}
.term-tip a{white-space:nowrap}
.pricehead{flex-basis:100%;font-weight:600}

/* How the scores work. One meaning per mark, the same in every figure:
   --ex-true   a true domain (box on the protein line)
   --ink       a call that counts (filled bar); the points and lines of a score
   --null      a call that does not count (dashed outline): below the cutoff, or merged away
   --accent    the cutoff you set */
:root{--ex-true:#AA3377}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ex-true:#E58FC0}}
:root[data-theme="dark"]{--ex-true:#E58FC0}
.ex-fig{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:12px 14px;margin:14px 0 22px;max-width:820px;isolation:isolate;min-width:0}
@media (max-width:600px){.ex-fig{padding:10px 8px}}
.ex-fig figcaption{margin-bottom:8px}
.ex-made-up{display:inline-block;font-size:.78rem;font-weight:700;border:1.5px dashed var(--ink);border-radius:3px;padding:0 5px;margin-right:6px}
.ex-box{margin:6px 0;min-width:0}
.ex-box svg{display:block;max-width:100%;height:auto}
.ex-fig text{font-family:"Source Sans 3",sans-serif;fill:var(--ink)}
.ex-fig text.mono{font-family:"Fantasque Sans Mono",monospace}
.ex-lab{font-size:13px}
.ex-note{font-size:12px;fill:var(--muted) !important}
.ex-off{fill:var(--null) !important;color:var(--null)}
.ex-glyph{font-size:14px;font-weight:700}
.ex-domlab{font-size:12px;font-weight:600;fill:var(--bg) !important}
.ex-tk{font:11px "Fantasque Sans Mono",monospace;fill:var(--muted) !important}
.ex-axlab{font-size:12.5px}
.ex-backbone{stroke:var(--muted);stroke-width:2}
.ex-tick{stroke:var(--muted)}
.ex-true{fill:var(--ex-true)}
.ex-kept{fill:var(--ink)}
.ex-drop{fill:var(--surface);stroke:var(--null);stroke-width:1.3;stroke-dasharray:3 2}
.ex-grid{stroke:var(--hair)}
.ex-line{stroke:var(--ink);stroke-width:1.8;fill:none}
.ex-line-thin{stroke:var(--ink);stroke-width:1;fill:none}
.ex-cut{stroke:var(--accent);stroke-width:2.2}
.ex-dot-cut{fill:var(--accent)}
.ex-ring{fill:none;stroke:var(--ink);stroke-width:2}
.ex-ring-small{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.ex-dot{fill:var(--ink)}
.ex-dot-off{fill:var(--surface);stroke:var(--null);stroke-width:1.3;stroke-dasharray:2 1.5}
.ex-area{fill:color-mix(in srgb,var(--ink) 16%,var(--surface))}
.ex-area-off{fill:none;stroke:var(--null);stroke-width:1;stroke-dasharray:3 2}
.ex-bracket{stroke:var(--muted);stroke-width:1.3;fill:none}
.ex-median{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 3}
.ex-controls{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:8px 0}
.ex-controls label{display:flex;flex-direction:column;gap:2px;font-size:.92rem;min-width:0;flex:1 1 240px}
.ex-controls input[type=range]{width:100%;height:32px;margin:0;accent-color:var(--accent)}
.ex-controls input[type=number]{font:inherit;font-family:"Fantasque Sans Mono",monospace;width:9em;max-width:100%;padding:4px 6px;border:1px solid var(--hair);border-radius:6px;background:var(--surface);color:var(--ink)}
.ex-read{font-size:.95rem;margin:6px 0;line-height:1.6}
.ex-read .v{font-family:"Fantasque Sans Mono",monospace;font-weight:700}
.ex-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.88rem;margin:4px 0 6px;align-items:center}
.ex-legend .item{display:inline-flex;align-items:center;gap:6px}
.ex-legend svg{flex:none}
table.ex-t{border-collapse:collapse;font-size:.88rem;margin:6px 0}
table.ex-t th,table.ex-t td{padding:3px 7px;border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
table.ex-t th:first-child,table.ex-t td:first-child{text-align:left}
table.ex-t .ex-now{font-weight:700;background:var(--chip)}
table.ex-t tr.ex-off td{color:var(--null)}
.ex-scroll{overflow-x:auto;max-width:100%}

/* Leaderboard, one row per tool. Tool and Fmax first; AUPRC and median IoU from 641 px up;
   the rest after "More columns". On a phone the tool name and Fmax stay put when the table
   scrolls sideways. */
.verdict{max-width:76ch;font-size:1rem;margin:4px 0 8px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--surface)}
table.lb .c-more{display:none}
table.lb.allcols .c-more{display:table-cell}
@media (max-width:640px){table.lb .c-wide{display:none}table.lb.allcols .c-wide{display:table-cell}}
table.lb.allcols{min-width:760px}
table.lb td.tool{min-width:12em}
table.lb td.tool .set{display:block;font-size:.84rem;color:var(--muted)}
table.lb td.tool .tags{display:block;margin-top:2px;line-height:1.6}
table.lb td.txt:first-child{white-space:normal}
table.lb tr.sub td{background:var(--bg)}
table.lb tr.sub td.tool{padding-left:26px}
table.lb tr.sub td.tool .kind{opacity:.5}
button.moreset{all:unset;display:block;margin-top:3px;font-size:.84rem;color:var(--accent);cursor:pointer;text-decoration:underline}
button.moreset:focus-visible{outline:2px solid var(--accent)}
.nr{color:var(--nr);font-weight:700}
td.missing .mw{color:var(--muted)}
td.missing i{color:var(--muted)}
.tablebtns{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:4px;vertical-align:middle}
.tablebtns .chip{min-height:26px;padding:2px 10px;font-size:.84rem}
.keyline{font-size:.85rem;gap:4px 14px;margin:4px 0 8px}
.prose.oneline{margin:4px 0}
@media (max-width:640px){
  table.lb{--toolw:11.5em}
  table.lb td.tool,table.lb th:first-child{width:var(--toolw);min-width:var(--toolw);max-width:var(--toolw)}
  table.lb.allcols td[data-col="fmax"],table.lb.allcols th[data-col="fmax"]{position:sticky;left:var(--toolw);z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--hair)}
  table.lb th,table.lb td{padding:6px 6px}
}
.legend .item .sub{display:inline-flex;align-items:center;gap:3px;margin-right:6px}
.pickchip{display:inline-flex;align-items:center}

/* Tool cards index: name, numbers, one line, then Figure 1's bar per relative. */
.tc{padding:14px 18px 12px;gap:4px}
.tc-name{margin:0 0 2px}
.tc-nums{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.92rem}
.tc-nums b{font-family:"Fantasque Sans Mono",monospace;font-size:1.05rem}
.tc-desc{margin:2px 0 4px;flex:none}
.tc-tags{margin-top:4px}
.strip{display:block;width:100%;max-width:420px;height:auto}
.st-base{stroke:var(--muted);stroke-width:1}
.st-grid{stroke:var(--hair);stroke-dasharray:2 2}
.st-t{font:11px "Fantasque Sans Mono",monospace;fill:var(--muted)}
.st-l{font:12px "Source Sans 3",sans-serif;fill:var(--muted)}
.st-nr{stroke:var(--nr);stroke-width:1.6}
.strip-none{font-size:.88rem;color:var(--muted);margin:4px 0}
.tc-fbox{padding:6px 14px 12px;border-top:1px solid var(--hair)}
.tc-frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0}
.tc-flab{font-weight:600;font-size:.92rem;min-width:13em}
details.tc-filters{margin:8px 0 6px}
.tcfig figcaption{max-width:90ch}

/* Tool card */
.crumb{font-size:.92rem;color:var(--muted);margin:0 0 8px}
.card-rest{margin-top:16px}
.cardfig{margin:10px 0 6px}
svg.cf{display:block;width:100%;max-width:440px;height:auto}
.cf-h{font:600 12.5px "Source Sans 3",sans-serif;fill:var(--ink)}
.cf-l{font:12px "Source Sans 3",sans-serif;fill:var(--ink)}
.cf-n{font:11.5px "Source Sans 3",sans-serif;fill:var(--muted)}
.cf-t{font:11px "Fantasque Sans Mono",monospace;fill:var(--muted)}
.cf-row{stroke:var(--hair)}
.cf-grid{stroke:var(--hair);stroke-dasharray:2 2}
.cf-o{fill:var(--muted)}
.cl-group{font-size:1rem;margin:14px 0 0;padding:6px 0;border-bottom:1px solid var(--hair)}
.cl-pill.retired,.cl-row[data-status="retired"] .cl-mark{color:var(--ink)}
.na{color:var(--muted);font-weight:700}
table.cov .nr,table.cov .na{font-size:1rem;line-height:1}

.todo li{margin:3px 0}
table.cov.cov-exp{font-size:.8rem}
table.cov.cov-exp thead th{min-width:0;width:6.2em;max-width:7em;font-size:.74rem;line-height:1.2}
table.cov.cov-exp td{padding:3px 4px}
table.cov td.txt{white-space:normal;min-width:9em;max-width:14em}
.toc{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:10px 16px;max-width:76ch;margin:8px 0 14px;font-size:.95rem}
.toc ol{margin:4px 0 0;padding-left:20px}
.toc li{margin:2px 0}
.ex-more{margin:4px 0 14px}
.capmore{display:inline}
.capmore>summary{display:inline;cursor:pointer;color:var(--accent)}
.capmore[open]{display:block;margin-top:2px}
/* Region pile-up, small multiples: curves 90 px tall, two columns on a phone. */
.pu-curve{width:100%;height:90px;display:block}
.pu-curve .pu-cap{opacity:.9}
@media (max-width:640px){.pu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pu-ov{height:110px}.pu-panel{padding:5px 6px}}
.pu-hist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.pu-hcell{background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:6px;min-width:0}
.pu-hcell svg{display:block;width:100%;height:auto}
.pu-hcell .grid{stroke:var(--hair)}
.pu-hcell .edge{stroke:var(--muted);stroke-dasharray:3 2}
.pu-hcell .tk{font:12px "Fantasque Sans Mono",monospace;fill:var(--muted)}
.pu-hcell .lab{font:600 12px "Source Sans 3",sans-serif;fill:var(--ink)}
#pu-all{margin-left:4px;min-height:26px;padding:2px 10px;font-size:.84rem}
.pu-howto{margin:4px 0 14px}
.nowrap{white-space:nowrap}
table.cov .mono,td.num{overflow-wrap:normal;white-space:nowrap}

/* Everyday words under each column name in Table 1, and the technical part of a definition. */
.th-plain{display:block;font-weight:400;font-size:.8rem;color:var(--muted);line-height:1.2;margin-top:2px;white-space:normal}
.term-detail{display:block;margin-top:6px;color:var(--muted)}

/* Figure 4 readout: one box per number, F at the cutoff and Fmax set apart. */
.ex-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.ex-tile{border:1px solid var(--hair);border-radius:8px;background:var(--bg);padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ex-tl{font-size:.82rem;font-weight:600;color:var(--muted)}
.ex-tv{font-family:"Fantasque Sans Mono",monospace;font-size:1.6rem;font-weight:700;color:var(--ink);line-height:1.1}
.ex-ts{font-size:.8rem;color:var(--muted);line-height:1.3}
.ex-ts .v{font-family:"Fantasque Sans Mono",monospace;font-weight:700;color:var(--ink)}
.ex-tile.now{border:2px solid var(--accent)}
.ex-tile.best{border:2px solid var(--ink)}
@keyframes exflash{from{background:var(--accent-soft,rgba(31,95,103,.18))}to{background:var(--bg)}}
.ex-tile.flash{animation:exflash .9s ease-out}
@media (prefers-reduced-motion:reduce){.ex-tile.flash{animation:none}}

/* Draggable call in Figure 6 and draggable numbers in Figure 8. */
.ex-hint{font-size:.9rem;color:var(--muted);margin:6px 0 2px}
.ex-drag{touch-action:none;user-select:none}
.ex-grab{cursor:grab}
.ex-drag.dragging .ex-grab,.ex-drag.dragging{cursor:grabbing}
.ex-handle{fill:var(--surface);stroke:var(--ink);stroke-width:2;cursor:ew-resize}
.ex-exact{margin-top:8px;font-size:.9rem}
.ex-formula{font-size:1.15rem;line-height:2.1;margin:10px 0}
.scrub,.scrub-demo{font-family:"Fantasque Sans Mono",monospace;font-weight:700;color:var(--accent);
  border-bottom:2px dashed var(--accent);cursor:ew-resize;touch-action:none;user-select:none;padding:0 2px}
.scrub:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scrub.scrubbing{background:var(--surface);border-bottom-style:solid}