/* Fonts are subset to these characters (src/fonts-full has the originals; see ops/perf-phone.md). */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-mono-400.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2190-2199, U+2212, U+25B2, U+25BC; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex-mono-500.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2190-2199, U+2212, U+25B2, U+25BC; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-mono-600.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2190-2199, U+2212, U+25B2, U+25BC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/plex-sans.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2190-2199, U+2212, U+25B2, U+25BC; }
:root {
  --bg: #ffffff;
  --panel: #f6f6f4;
  --ink: #141414;
  --ink-2: #4a4a48;
  --ink-3: #66665f;
  --line: #e2e2dd;
  --line-2: #cfcfc8;
  --top: #141414;
  --top-ink: #f2f2ee;
  --link: #0b4fa8;
  --good: #0a7a3c;
  --good-bg: #e5f4ea;
  --mid: #8a5a00;
  --mid-bg: #fbf0d9;
  --bad: #b3261e;
  --bad-bg: #fbe7e5;
  --bad-solid: #b3261e;
  --dot-one: #0b4fa8;
  --dot-kit: #b45309;
  --dot-flag: #b3261e;
  --hover: #f3f6fb;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs: 13px;
  --field: #8a8a83;
  --b1: #cdeed8; --b2: #e6f5ea; --b3: #ecece6; --b4: #fbeedb; --b5: #f8d9d6;
  --s1: #1f8a4c; --s2: #3f9a63; --s3: #8a8a83; --s4: #b8791a; --s5: #d4574c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111211; --panel: #181a19; --ink: #e9e9e4; --ink-2: #b4b4ad; --ink-3: #9d9d96;
    --line: #2a2c2b; --line-2: #3a3c3a; --top: #070807; --top-ink: #e9e9e4; --link: #7fb0ff;
    --good: #5fd08e; --good-bg: #13301f; --mid: #f0b64a; --mid-bg: #33280f; --bad: #ff8a80; --bad-bg: #3a1714; --bad-solid: #c62828;
    --dot-one: #7fb0ff; --dot-kit: #f0a23a; --dot-flag: #ff8a80; --hover: #1b2230; --field: #6b6d69;
    --b1: #174a2c; --b2: #1b3324; --b3: #262826; --b4: #3a2b12; --b5: #45201c;
    --s1: #35b86c; --s2: #2c7a4d; --s3: #6f716a; --s4: #b8812a; --s5: #c0503f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111211; --panel: #181a19; --ink: #e9e9e4; --ink-2: #b4b4ad; --ink-3: #9d9d96;
  --line: #2a2c2b; --line-2: #3a3c3a; --top: #070807; --top-ink: #e9e9e4; --link: #7fb0ff;
  --good: #5fd08e; --good-bg: #13301f; --mid: #f0b64a; --mid-bg: #33280f; --bad: #ff8a80; --bad-bg: #3a1714; --bad-solid: #c62828;
  --dot-one: #7fb0ff; --dot-kit: #f0a23a; --dot-flag: #ff8a80; --hover: #1b2230; --field: #6b6d69;
  --b1: #174a2c; --b2: #1b3324; --b3: #262826; --b4: #3a2b12; --b5: #45201c;
    --s1: #35b86c; --s2: #2c7a4d; --s3: #6f716a; --s4: #b8812a; --s5: #c0503f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs)/1.45 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.top :focus-visible { outline-color: #7fd6a0; }
html { scroll-padding-top: 52px; }
.bpw a:focus-visible, .pk-s a:focus-visible, .mlist .who a:focus-visible, .hgrid th.pn a:focus-visible { outline-offset: -2px; }
.grid th .sortbtn { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
h1 { font-size: 24px; line-height: 1.2; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin: 20px 0 6px; font-weight: 600; }
q { quotes: "\201C" "\201D"; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--bg); padding: 6px 10px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* top bar */
.top { background: var(--top); color: var(--top-ink); position: sticky; top: 0; z-index: 20; }
.top-in { max-width: 1440px; margin: 0 auto; padding: 0 16px; height: 40px; display: flex; align-items: center; gap: 16px; }
.brand { font: 600 14px/1 var(--mono); color: var(--top-ink); letter-spacing: 0.08em; white-space: nowrap; }
.brand b { color: #7fd6a0; font-weight: 600; }
.brand .mark { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; background: url(/favicon.svg) center / contain no-repeat; }
.brand:hover { text-decoration: none; }
.nav-main { display: flex; gap: 2px; }
.nav-main a { color: #b9b9b2; padding: 11px 9px; font-weight: 500; white-space: nowrap; }
.nav-main a.on, .nav-main a:hover { color: #fff; text-decoration: none; box-shadow: inset 0 -2px 0 #7fd6a0; }
.search { margin-left: auto; }
.cursel { height: 26px; border: 1px solid #6b6b66; background: #1f1f1d; color: #eee; font: 500 11px var(--mono); border-radius: 2px; padding: 0 4px; }
.asof { font: 11px var(--mono); color: #a3a39c; white-space: nowrap; cursor: help; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; color: #e6e6e0; font: 500 12px var(--sans); padding: 5px 8px; border: 1px solid #3a3a37; border-radius: 2px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: #2a2a27; }
.menu nav { position: absolute; right: 0; top: 34px; background: var(--top); border: 1px solid #3a3a37; min-width: 200px; padding: 4px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.menu nav a { display: block; color: #e6e6e0; padding: 10px 14px; font-weight: 500; }
.menu nav a.on { color: #7fd6a0; }

main { max-width: 1440px; margin: 0 auto; padding: 14px 16px 28px; }
.head { margin: 4px 0 10px; }
.head.narrow, .prose { max-width: 760px; }
.lede { margin: 0; color: var(--ink-2); max-width: 900px; font-size: 14px; }
.howto { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; max-width: 900px; }
.howto b { color: var(--ink-2); font-weight: 600; }
.crumbs { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.note { color: var(--ink-3); font-size: 12px; margin: 6px 0 0; }
.note.key { margin: 0 0 6px; max-width: 1100px; }
.note.key b { color: var(--ink-2); }
.note.fix { margin-top: 18px; }
.sub { display: block; color: var(--ink-3); font-size: 11px; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.nil { color: var(--ink-3); }
.bad { color: var(--bad); }
.cheap { color: var(--good); font-weight: 600; }
.dear { color: var(--bad); }
.oos { color: var(--bad); font-size: 12px; }
.ins { color: var(--good); font-size: 12px; }
.mstrip { display: none; border: 1px solid var(--bad); background: var(--bad-bg); color: var(--ink); padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.mstrip b { color: var(--bad); }
.related { font-size: 13px; color: var(--ink-2); max-width: 1000px; }
ul.plain { margin: 0; padding: 0; list-style: none; }
ul.plain li { padding: 4px 0; border-bottom: 1px solid var(--line); }

/* layout */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cols.even { grid-template-columns: 1fr 1fr; }
.cols > * { min-width: 0; }
.narrowcols { max-width: 900px; }
.tbar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tbar h2 { margin-bottom: 4px; }
.legend { font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.legend i.d-one { background: var(--dot-one); }
.legend i.d-kit { background: var(--dot-kit); }
.legend i.d-flag { background: var(--dot-flag); }

/* tables */
.scroll { border: 1px solid var(--line); }
table.grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.grid thead th { background: var(--panel); font: 600 11px/1.3 var(--sans); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--line-2); vertical-align: bottom; position: sticky; top: 40px; z-index: 2; }
.grid th[data-sort] { cursor: pointer; user-select: none; }
.grid th[data-sort]:hover { color: var(--ink); }
.grid th.asc::after { content: " \25B2"; font-size: 8px; }
.grid th.desc::after { content: " \25BC"; font-size: 8px; }
.grid tbody tr:hover { background: var(--hover); }
.grid td.num { text-align: right; font-family: var(--mono); font-size: 12px; }
.grid th.num { text-align: right; }
.grid td.strong { font-weight: 600; }
.grid td.name { font-weight: 500; }
.grid td.name .sub { font-weight: 400; }
.grid tr.grp th { background: var(--bg); color: var(--ink-3); font-size: 11px; padding-top: 10px; border-bottom: 1px solid var(--line-2); position: static; }
.grid tr.flag td { background: var(--bad-bg); }
.grid tr.oosr td { color: var(--ink-2); background: var(--panel); }
.grid td.prod { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.grid td.prod a { color: var(--ink-2); }
/* The arrow sits outside the link text, so a label cut with an ellipsis keeps it. */
.grid td.prod a { display: inline-block; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.grid td.prod::after { content: " \2197"; color: var(--link); }
.grid td.pay { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.flagtxt { color: var(--bad); }
.compact td, .compact th { padding: 3px 6px; }
.deftbl td, .deftbl th { white-space: normal; }
.deftbl + p { margin-top: 10px; }
.wraptbl td, .wraptbl th { white-space: normal; overflow-wrap: anywhere; }
.wraptbl td:first-child { width: 30%; }
.deftbl td:first-child { white-space: nowrap; width: 1%; }
@media (max-width: 480px) { .deftbl td:first-child { white-space: normal; } }
.scroll > table.grid { border: 0; }
table.grid + .note { margin-top: 6px; }
.side-col .grid, .prose .grid { border: 1px solid var(--line); }
.ret td, .ret th { white-space: normal; }
.ret th { width: 180px; font-weight: 500; color: var(--ink-2); }
.ret td.num:first-child { width: 1%; white-space: nowrap; text-align: left; }
.prose .ret { margin: 4px 0 10px; font-size: 13px; }
.narrowtbl { max-width: 760px; }

/* home: the price grid (desktop). Never wider than the page: site.js shows the seller
   columns that fit and pages through the rest. */
.dgrid { margin-top: 4px; }
.gctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 4px 0 8px; font-size: 12px; }
.glab { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--field); border-radius: 2px; }
.seg button { font: 500 12px var(--sans); color: var(--ink-2); background: var(--bg); border: 0; border-left: 1px solid var(--line-2); padding: 5px 10px; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); background: var(--hover); }
.seg button.on { background: var(--ink); color: var(--bg); }
.seg .n { font: 11px var(--mono); color: var(--ink-3); margin-left: 3px; }
.seg button.on .n { color: inherit; opacity: .75; }
.gpage { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--ink-2); }
.gpage button { width: 30px; height: 26px; border: 1px solid var(--field); background: var(--bg); color: var(--ink); font: 600 16px/1 var(--sans); cursor: pointer; border-radius: 2px; }
.gpage button:hover:not([aria-disabled="true"]) { background: var(--hover); }
.gpage button[aria-disabled="true"] { opacity: .35; cursor: default; }
.gctl .legend { margin-left: auto; }
.gpickb { font: 500 12px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--field); border-radius: 2px; padding: 5px 10px; cursor: pointer; }
.gpickb:hover, .gpickb[aria-expanded="true"] { background: var(--hover); }
.gcmp { font: 500 12px var(--sans); }
.gpick { border: 1px solid var(--line-2); background: var(--panel); padding: 8px 10px; margin: 0 0 8px; }
.gpick-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.gpick-h input { height: 28px; width: 220px; max-width: 100%; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 13px var(--sans); padding: 0 7px; border-radius: 2px; }
.gpick-h button { font: 500 12px var(--sans); border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); padding: 5px 10px; border-radius: 2px; cursor: pointer; }
.gpick-h #gpickdone { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gpick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 18px; max-height: 330px; overflow: hidden auto; }
.gpick li { break-inside: avoid; padding: 2px 0; font-size: 12px; }
.gpick label { min-height: 24px; }
.gpick label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.gpick .pn { overflow-wrap: anywhere; }
.gpick .score { font-size: 11px; line-height: 15px; min-width: 32px; flex: none; }
.gpick .nil { margin-left: auto; font-size: 11px; white-space: nowrap; }
.grid-legend { gap: 2px; }
.grid-legend i { width: 14px; height: 10px; border-radius: 1px; margin-left: 8px; }
.grid-legend i.b1 { background: var(--b1); } .grid-legend i.b2 { background: var(--b2); } .grid-legend i.b3 { background: var(--b3); }
.grid-legend i.b4 { background: var(--b4); } .grid-legend i.b5 { background: var(--b5); }
.grid-legend i.brk { box-shadow: inset 0 0 0 2px var(--ink); }
table.hgrid { border-collapse: collapse; font-variant-numeric: tabular-nums; border: 1px solid var(--line); }
.hgrid th, .hgrid td { border-bottom: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; text-align: left; vertical-align: middle; }
.hgrid thead th { background: var(--panel); font: 600 11px/1.3 var(--sans); color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; vertical-align: bottom; position: sticky; top: 40px; z-index: 2; }
.hgrid thead tr:first-child th { height: 142px; }
.hgrid thead .ssr th { top: 182px; height: 22px; padding: 2px 0; text-align: center; border-bottom: 1px solid var(--line-2); }
.hgrid th.pn { width: 158px; min-width: 158px; max-width: 158px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hgrid tbody th.pn a { font-weight: 500; }
.hgrid th.pn .sub { overflow: hidden; text-overflow: ellipsis; }
.hgrid .bp { width: 196px; min-width: 196px; max-width: 196px; line-height: 1.25; }
.hgrid td.bp { overflow: hidden; }
.bpv { font: 600 12px var(--mono); }
.hgrid .pm { font: 11px var(--mono); color: var(--ink-3); }
.bpw { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.bpw .score { font-size: 11px; line-height: 15px; min-width: 32px; }
.ul { font: 500 11px var(--sans); color: var(--mid); }
.hgrid td.bp.unr .bpv { color: var(--ink-2); }
.spark { display: block; margin: 2px 0 0 auto; color: var(--ink-3); overflow: visible; }
.spark.down { color: var(--good); } .spark.up { color: var(--bad); }
.mmed .spark { display: inline-block; margin: 0 0 0 6px; vertical-align: -2px; }
.hgrid .md { width: 70px; min-width: 70px; text-align: right; font: 12px var(--mono); border-right: 1px solid var(--line-2); }
.hgrid thead th.md { font: 600 11px/1.3 var(--sans); }
.hgrid th.sh, .hgrid th.ss, .hgrid td.gc { width: var(--gcw, 50px); min-width: var(--gcw, 50px); max-width: var(--gcw, 50px); }
.hgrid thead th.sh { padding: 4px 0 6px; text-transform: none; letter-spacing: 0; text-align: center; }
.hgrid th.sh a { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.2 var(--sans); color: var(--ink); }
.hgrid th.sh.nl a { color: var(--mid); }
.hgrid th.sh:hover, .hgrid th.sh.hot { background: var(--hover); box-shadow: inset 0 -3px 0 var(--link); }
.hgrid .ss .score { min-width: 26px; padding: 0 2px; font-size: 11px; line-height: 16px; }
.hgrid td.gc { text-align: right; font: 500 11px var(--mono); padding: 0; border-left: 1px solid var(--bg); }
.hgrid td.gc a { color: var(--ink); display: block; padding: 5px 5px; min-height: 24px; }
.hgrid td.e { padding: 3px 5px; }
.hgrid tbody a { scroll-margin-top: 230px; }
.hgrid td.gc a:hover { text-decoration: none; }
.hgrid td.gc:hover { outline: 1px solid var(--ink-2); outline-offset: -1px; }
.hgrid td.b1 { background: var(--b1); } .hgrid td.b2 { background: var(--b2); } .hgrid td.b3 { background: var(--b3); }
.hgrid td.b4 { background: var(--b4); } .hgrid td.b5 { background: var(--b5); }
.mbar i.b1, .mkey i.b1 { background: var(--s1); } .mbar i.b2 { background: var(--s2); } .mbar i.b3, .mkey i.b3 { background: var(--s3); } .mbar i.b4 { background: var(--s4); } .mbar i.b5, .mkey i.b5 { background: var(--s5); }
.hgrid td.br { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.hgrid td.so a { color: var(--ink-2); text-decoration: line-through; }
.hgrid td.e { color: var(--field); text-align: center; }
.hgrid tr.grp th { background: var(--bg); color: var(--ink-3); font-size: 11px; font-weight: 600; padding-top: 10px; border-bottom: 1px solid var(--line-2); text-transform: none; }
.hgrid tbody tr:not(.grp):hover > th, .hgrid tbody tr:not(.grp):hover > td.bp, .hgrid tbody tr:not(.grp):hover > td.md { background: var(--hover); }
.hgrid .off { display: none; }
/* Before site.js runs: a safe number of seller columns for the screen width. */
@media (max-height: 700px) { .hgrid thead th { position: static; } }
@media (min-width: 1400px) { .hgrid:not(.js) tbody tr > :nth-child(n+24), .hgrid:not(.js) thead tr:first-child > :nth-child(n+24), .hgrid:not(.js) .ssr > :nth-child(n+21) { display: none; } }
@media (min-width: 1200px) and (max-width: 1399px) { .hgrid:not(.js) tbody tr > :nth-child(n+19), .hgrid:not(.js) thead tr:first-child > :nth-child(n+19), .hgrid:not(.js) .ssr > :nth-child(n+16) { display: none; } }
@media (max-width: 1199px) { .hgrid:not(.js) tbody tr > :nth-child(n+11), .hgrid:not(.js) thead tr:first-child > :nth-child(n+11), .hgrid:not(.js) .ssr > :nth-child(n+8) { display: none; } }
.hgrid tr.grp > th { display: table-cell !important; }

/* home: phones get cards, one per peptide, never a sideways table */
.mgrid { display: none; }
.mjump { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.mjump a { font: 500 12px var(--sans); padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink); background: var(--bg); }
.mkey i { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin: 0 3px 0 2px; }
.mkey i.b4 { background: var(--s4); }
.mgh { margin: 16px 0 6px; scroll-margin-top: 50px; }
.mcard { border: 1px solid var(--line); margin: 0 0 6px; }
.mcard summary { list-style: none; display: block; padding: 9px 11px 8px; cursor: pointer; }
.mcard summary::-webkit-details-marker { display: none; }
.mcard[open] summary { background: var(--panel); }
.mtop, .msub, .mfoot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mname { font: 600 15px var(--sans); color: var(--link); }
.mbest { font: 600 17px var(--mono); white-space: nowrap; }
.mbest small { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 2px; }
.msub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.msub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msub .score { font-size: 11px; line-height: 15px; min-width: 32px; }
.mmed { font: 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.mbar { display: flex; gap: 1px; height: 12px; margin-top: 8px; }
.mbar i { flex: 1 1 0; min-width: 2px; }
.mbar i.me { box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }
.mfoot { font-size: 11px; color: var(--ink-3); margin-top: 5px; }
.mopen { color: var(--link); font-weight: 500; }
.mopen::after { content: " \25BE"; }
.mcard[open] .mopen::after { content: " \25B4"; }
.mlist { list-style: none; margin: 0; padding: 0 11px; border-top: 1px solid var(--line); }
.mlist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mlist .rk { font: 11px var(--mono); color: var(--ink-3); }
.mlist .who { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.mlist .who a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlist .who .score, .mlist .who .ul { flex: none; }
.mlist .who .score { font-size: 11px; line-height: 15px; min-width: 32px; }
.mlist .pk { font: 11px var(--mono); color: var(--ink-3); }
.mlist .pr { font: 600 13px var(--mono); text-align: right; }
@media (max-width: 480px) {
  .mlist li { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 1px; }
  .mlist .who a { white-space: normal; overflow-wrap: anywhere; }
  .mlist .pk { grid-column: 2; grid-row: 2; }
  .mlist .pr { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .msub { flex-wrap: wrap; row-gap: 2px; }
  .msub > span:first-child { white-space: normal; }
}
.mall { display: block; padding: 9px 11px 10px; font-size: 13px; font-weight: 500; }

/* home: supporting panels under the grid */
.band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 20px; align-items: start; }
.band .grid { border: 1px solid var(--line); }
.band td.name { white-space: normal; }
.band td.name .tag { white-space: nowrap; }

/* scores */
.score { display: inline-block; min-width: 38px; text-align: center; font: 600 11px/18px var(--mono); border-radius: 2px; padding: 0 4px; }
.score.big { font-size: 15px; line-height: 24px; padding: 0 7px; }
.s-hi { background: var(--good-bg); color: var(--good); }
.s-mid { background: var(--mid-bg); color: var(--mid); }
.s-lo { background: var(--bad-bg); color: var(--bad); }
.score + .n { display: inline-block; min-width: 50px; text-align: left; margin-left: 5px; font: 11px var(--mono); color: var(--ink-3); }
.chg { font: 500 11px var(--mono); margin-right: 6px; }
.chg.down { color: var(--good); }
.chg.up { color: var(--bad); }
.chg.new { color: var(--ink-3); text-transform: uppercase; }
.side-col td.name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.side-col .compact td, .side-col .compact th { padding: 3px 5px; }

/* charts */
.chart { border: 1px solid var(--line); padding: 4px 18px 6px; margin: 8px 0 10px; }
.chart .tbar .note { margin-left: auto; }
.dots { position: relative; height: 112px; margin: 2px 0 0; }
.dots .dot { position: absolute; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; box-shadow: 0 0 0 1px var(--bg); }
.dots .dot:hover { transform: scale(1.8); z-index: 2; }
.dots .d-one { background: var(--dot-one); opacity: 0.8; }
.dots .d-kit { background: var(--dot-kit); opacity: 0.85; border-radius: 1px; }
.dots .d-flag { background: var(--dot-flag); }
@media (max-width: 620px) { .dots { height: 150px; } .dots .dot { width: 5px; height: 5px; margin-left: -2.5px; } .dots .d-kit { border-radius: 0; } }
/* Far above other stores: a hollow ring, a little larger than a dot so the hole shows. */
.dots .d-far { width: 9px; height: 9px; margin-left: -4.5px; background: none; border: 1.5px solid var(--ink-2); }
.legend i.d-far { background: none; border: 1.5px solid var(--ink-2); }
.legend .lg-pair { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 620px) { .dots .d-far { width: 7px; height: 7px; margin-left: -3.5px; } }
.dots .tk { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--line); }
.dots .tk b { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); font: 400 11px var(--mono); color: var(--ink-3); background: var(--bg); padding: 0 2px; }
.histsvg { display: block; width: 100%; height: 110px; }
.histsvg .h-med { fill: none; stroke: var(--dot-one); stroke-width: 2; vector-effect: non-scaling-stroke; }
.histsvg .h-low { fill: none; stroke: var(--dot-kit); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.legend i.l-med, .legend i.l-low { width: 14px; height: 0; border-radius: 0; border-top: 2px solid var(--dot-one); }
.legend i.l-low { border-top: 2px dashed var(--dot-kit); }
.h-axis { display: flex; justify-content: space-between; gap: 12px; font: 11px var(--mono); color: var(--ink-3); margin-top: 2px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 6px 0 8px; font-size: 12px; }
.filters input[type="search"], .filters select { height: 28px; border: 1px solid var(--field); background: var(--bg); color: var(--ink); font: inherit; padding: 0 6px; border-radius: 2px; }
.filters input[type="search"] { width: 190px; }
.filters label { display: inline-flex; gap: 5px; align-items: center; color: var(--ink-2); }
.filters .count { margin-left: auto; color: var(--ink-3); font-family: var(--mono); font-size: 11px; }

/* key-value */
table.kv { border-collapse: collapse; width: 100%; margin-bottom: 8px; }
.kv th { text-align: left; font-weight: 500; color: var(--ink-3); width: 150px; padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.kv td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.kv .sub { display: inline; margin-left: 6px; white-space: normal; }

/* alerts and tags */
.alert { border: 1px solid var(--bad); background: var(--bad-bg); color: var(--ink); padding: 8px 10px; margin: 8px 0 4px; }
.alert b { color: var(--bad); }
.alert p { margin: 0 0 6px; }
.alert p:last-child { margin: 0; }
.alert q { font-style: italic; }
.alert.soft { border-color: var(--line-2); background: var(--panel); }
.alert.soft b { color: var(--ink); }
.tag { display: inline-block; font: 500 11px/15px var(--mono); padding: 0 4px; border: 1px solid var(--line-2); color: var(--ink-3); border-radius: 2px; vertical-align: 1px; white-space: nowrap; }
.tag.warn { border-color: var(--mid); color: var(--mid); background: var(--mid-bg); }
.tag.v-verified { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.tag.v-unverified { border-color: var(--mid); color: var(--mid); background: var(--mid-bg); }
.tag.v-shared { border-color: var(--line-2); color: var(--ink-2); }
.tag.v-flagged { border-color: var(--bad-solid); color: #fff; background: var(--bad-solid); }
.tag.ev-ok { border-color: var(--good); color: var(--good); background: var(--good-bg); }
h1 .tag { font-size: 12px; vertical-align: 5px; margin-left: 6px; }
.vline { margin: 0 0 6px; }
.vline .tag { font-size: 12px; }
details.more { margin-top: 6px; }
details.more summary { cursor: pointer; color: var(--link); font-size: 13px; padding: 4px 0; }
.alert.verdict { border-width: 1px 1px 1px 3px; }
.alert.verdict.v-verified { border-color: var(--good); background: var(--good-bg); }
.alert.verdict.v-unverified { border-color: var(--mid); background: var(--mid-bg); }
.alert.verdict.v-shared { border-color: var(--line-2); background: var(--panel); }
.alert.verdict.v-flagged { border-color: var(--bad); background: var(--bad-bg); }
.alert-h { color: var(--bad); }
.alerts { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.alerts li { padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.alerts li:last-child { border-bottom: 0; }
.alerts li > a { font-weight: 600; }
.alerts q { display: block; margin: 3px 0 2px; color: var(--ink); }
.alerts .src { display: block; font-size: 11px; color: var(--ink-3); }
.warnlist { border: 1px solid var(--line); max-width: 1000px; }
.wl { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.wl:last-child { border-bottom: 0; }
.wl-h { font-weight: 600; }
.wl-h .nil { font-weight: 400; font-size: 12px; }
.wl-b { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

/* prose */
.prose p, .prose li { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.prose p { margin: 0 0 10px; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 10px; }
.prose h2 { margin-top: 24px; }
.prose b { color: var(--ink); }
.prose ul.guides { list-style: none; padding: 0; }
.prose ul.guides li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.guide table.grid { margin: 6px 0 12px; font-size: 13px; }
.guide table.grid td, .guide table.grid th { white-space: normal; }

.foot { max-width: 1440px; margin: 0 auto; padding: 14px 16px 30px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; display: grid; gap: 4px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }


/* buyer reports */
.cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.howrep { margin-top: 22px; max-width: 760px; }
.steps { margin: 6px 0 8px; padding-left: 20px; }
.steps li { margin: 0 0 6px; line-height: 1.5; }
.askrep { margin-top: 22px; }
.asklist { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.asklist li { padding: 5px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.btn-cta { display: inline-block; padding: 7px 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 600 12px var(--sans); border-radius: 2px; cursor: pointer; }
.btn-cta:hover { text-decoration: none; opacity: .9; }
.nf-form { margin: 14px 0 4px; max-width: 520px; }
.nf-form label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.nf-row { display: flex; gap: 6px; }
.nf-row input { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid var(--field); background: var(--bg); color: var(--ink); font: 14px var(--sans); border-radius: 2px; }
.nf-guess { margin-top: 16px; }
.nf-guess li { padding: 3px 0; }
.btn-cta.bad { background: var(--bad-solid); border-color: var(--bad-solid); color: #fff; }
.btn-cta.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); margin-left: 6px; }
.reps { display: grid; gap: 10px; margin: 8px 0; }
.rep { border: 1px solid var(--line); padding: 9px 12px; }
.rep-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13px; }
.rep-d { font-weight: 600; }
.oc { font: 600 11px var(--mono); padding: 1px 5px; border-radius: 2px; border: 1px solid var(--line-2); }
.oc.o-good { color: var(--good); background: var(--good-bg); border-color: var(--good); }
.oc.o-mid { color: var(--mid); background: var(--mid-bg); border-color: var(--mid); }
.oc.o-bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }
.rt { font: 600 11px var(--mono); color: var(--ink-2); }
.rep-meta { color: var(--ink-3); font-size: 11px; margin: 3px 0 5px; }
.rep-meta i { font-style: normal; padding: 0 2px; }
.edited-note { color: var(--mid); }
.rep-b p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.rep-f { font-size: 12px; }
.rep-resp { margin: 6px 0 2px 14px; padding: 6px 10px; border-left: 3px solid var(--line-2); background: var(--panel); }
.reps.mini .rep { padding: 6px 8px; }
.reps.mini .rep-b { max-height: 4.6em; overflow: hidden; }
.cstrip { border: 1px solid var(--line); background: var(--panel); padding: 6px 10px; margin: 8px 0; font-size: 12px; color: var(--ink-2); }
.cstrip.bad { border-color: var(--bad); }
.cstrip.quiet { background: transparent; border: 0; padding: 0; margin: 6px 0; }

/* forms */
.formcols { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 300px); gap: 28px; align-items: start; }
.formside { position: sticky; top: 56px; border: 1px solid var(--line); background: var(--panel); padding: 4px 14px 12px; }
.formside h2 { margin-top: 10px; }
.formside ol { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.formside li { margin: 0 0 6px; }
.subform { max-width: 760px; min-width: 0; }
.kinds { border: 0; padding: 0; margin: 0 0 12px; display: flex; gap: 16px; flex-wrap: wrap; font-weight: 500; }
.kinds label { display: inline-flex; gap: 6px; align-items: center; min-height: 30px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fgrid label, .fgrid .mfield { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); font-weight: 500; min-width: 0; }
.fgrid .wide { grid-column: 1 / -1; }
.fgrid input, .fgrid select, .fgrid textarea { width: 100%; min-width: 0; font: 13px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--field); border-radius: 2px; padding: 5px 7px; }
.fgrid input, .fgrid select { height: 32px; }
.fgrid input[type="file"] { height: auto; padding: 6px; }
.fgrid input[type="file"]::file-selector-button { font: 600 12px var(--sans); color: var(--bg); background: var(--ink); border: 0; border-radius: 2px; padding: 6px 10px; margin-right: 10px; cursor: pointer; }
.mfield .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formmsg { font-weight: 500; }
.rq { font-weight: 400; color: var(--ink-3); font-size: 11px; }
.fgrid [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.formmsg.ok { color: var(--good); }
.formmsg.err { color: var(--bad); }
.evbox { border: 1px dashed var(--line-2); padding: 8px 10px; }
.evbox .req { color: var(--bad); font-weight: 400; margin-left: 4px; }
.evbox .req.opt { color: var(--ink-3); }
.filelist { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); }
.vbox { border: 1px solid var(--line); padding: 8px 12px; background: var(--panel); }
.vbox pre.token { font: 600 13px var(--mono); background: var(--bg); border: 1px solid var(--line-2); padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.note.ok { color: var(--good); } .note.err { color: var(--bad); }
#dreport { margin: 8px 0 14px; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink-2); margin: 12px 0; max-width: 760px; }
.consent input { margin-top: 2px; flex: none; width: 16px; height: 16px; }

/* peptide page: summary and best picks */
.about { margin: 6px 0 0; color: var(--ink-2); max-width: 900px; font-size: 13px; }
.about .aka, .about .asof-note { color: var(--ink-3); }
.about.brands { color: var(--ink-3); font-size: 12px; }
.picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 6px 0 4px; }
.pick-c { padding: 8px 10px; min-width: 0; background: var(--bg); }
.pk-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.pk-v { font: 600 20px/1.25 var(--mono); margin-top: 3px; }
.pk-v .u { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 3px; }
.pk-v .score { font-size: 16px; line-height: 24px; }
.pk-m { font: 11px var(--mono); color: var(--ink-2); }
.pk-s { margin-top: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-h { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.pk-h a { white-space: nowrap; }
.pick-c.empty .nil { margin-top: 8px; font-size: 12px; }
.gl-v { font: 600 15px/1.5 var(--sans); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-v .u { font: 400 11px var(--sans); color: var(--ink-3); }
@media (max-width: 620px) { .gl-v { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 400px) { .pk-s { white-space: normal; } }
.glance .pk-h .tag { vertical-align: 0; }
.listings td.st .sub { white-space: nowrap; }
.listings .rep-name { display: none; }
table.listings .lk { display: none; font-size: 12px; margin-left: 6px; white-space: nowrap; }
.listings td.name .dom { font-size: 11px; }
.listings td.name .dom a { color: var(--ink-3); }
/* Tables wrap text instead of growing sideways (the site never scrolls horizontally). */
#stores td, #vendors td, #stores th, #vendors th, table.listings td.name, table.listings td.fr { white-space: normal; }
#stores td .sub, #vendors td .sub, table.listings td.name .sub { white-space: normal; }
#stores td.name { min-width: 170px; word-break: break-word; }
#vendors td.name { min-width: 170px; }
table.listings td.name { min-width: 150px; }
table.listings td.fr { max-width: 150px; }
#stores td.pay, #vendors td.pay { max-width: 170px; }

/* Responsive rules. Nothing on the site scrolls sideways: tables drop their least useful
   columns as the screen narrows, then turn into cards; scripts/ui-test.js checks it. */
@media (min-width: 1280px) {
  /* The listings table fits here, so its header can stick to the page under the top bar. */
  .lwrap .grid thead th { top: 40px; }
}
@media (max-width: 1279px) {
  table.listings .prod, table.listings .pv1 { display: none; }
  table.listings .lk { display: inline; }
}
@media (max-width: 1180px) {
  .asof { display: none; }
}
@media (max-width: 1100px) {
  .hgrid th.pn { width: 132px; min-width: 132px; max-width: 132px; }
  .hgrid .bp { width: 164px; min-width: 164px; max-width: 164px; }
  .hgrid .md { width: 62px; min-width: 62px; }
  .cols { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr 1fr; }
  .mstrip { display: block; }
  .formcols { grid-template-columns: minmax(0, 1fr); }
  .formside { position: static; max-width: 760px; }
  table.listings .fr, table.listings .vm { display: none; }
  #vendors th:nth-child(4), #vendors td:nth-child(4), #vendors th:nth-child(6), #vendors td:nth-child(6) { display: none; }
  #stores .pay { display: none; }
}
@media (max-width: 900px) {
  .nav-main { display: none; }
  .menu { display: block; }
  .top-in { gap: 10px; }

  /* Listing tables become two-line cards: store and $/mg first, details under them. */
  table.listings, table.listings tbody { display: block; }
  table.listings thead { display: none; }
  table.listings tr { display: flex; flex-wrap: wrap; align-items: baseline; padding: 7px 10px; border-bottom: 1px solid var(--line); }
  table.listings tr[hidden] { display: none; }
  table.listings td { display: block; border: 0; padding: 0; white-space: nowrap; text-align: left; font-size: 12px; }
  table.listings td.rk, table.listings td.pv1, table.listings td.prod, table.listings td.vm { display: none; }
  table.listings td.name { order: 1; flex: 1 1 calc(100% - 120px); min-width: 0; white-space: normal; font-size: 13px; }
  table.listings td.name .rep-name { display: inline; color: var(--ink-2); }
  table.listings td.mg { order: 2; flex: 0 0 120px; text-align: right; font-size: 14px; }
  table.listings td.sz { order: 3; } table.listings td.pk { order: 4; } table.listings td.pr { order: 5; }
  table.listings td.st { order: 6; } table.listings td.fr { order: 7; display: block; } table.listings td.sto { order: 8; }
  table.listings td.sc { order: 9; margin-left: auto; text-align: right; }
  table.listings td.sz, table.listings td.pk, table.listings td.pr, table.listings td.st, table.listings td.fr, table.listings td.sto { font: 12px var(--mono); color: var(--ink-2); }
  table.listings tr { column-gap: 12px; }
  table.listings tr.oosr { background: var(--panel); }
  table.listings tr.oosr td { background: none; }
  /* A likely error tints the whole card, and its note wraps under the $/mg instead of widening it. */
  table.listings tr.flag { background: var(--bad-bg); }
  table.listings tr.flag td { background: none; }
  table.listings td.mg .flagtxt, table.listings td.mg .fartxt { display: block; white-space: normal; font: 500 11px var(--sans); }
  table.listings td.fr:empty, table.listings td.sto:empty { display: none; }
  table.listings td.st .sub { display: inline; margin-left: 4px; }
  table.listings td.st .tag { margin-left: 4px; }
}
@media (max-width: 760px) {
  .narrowtbl th:nth-child(4), .narrowtbl td:nth-child(4), .narrowtbl th:nth-child(5), .narrowtbl td:nth-child(5) { display: none; }
  .narrowtbl td.name, .narrowtbl th { white-space: normal; }
  .dgrid { display: none; }
  .mgrid { display: block; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .cols.even { grid-template-columns: 1fr; }
  h1 { font-size: 20px; }
  .lede { font-size: 13px; }
  #stores .sf, #stores .pay { display: none; }
  #stores td, #vendors td.name { white-space: normal; }
  #stores td.name { width: 56%; word-break: break-word; }
  #stores td.name .sub, #vendors td.name .sub { white-space: normal; }
  #vendors th:nth-child(5), #vendors td:nth-child(5), #vendors th:nth-child(7), #vendors td:nth-child(7) { display: none; }
}
@media (max-width: 620px) {
  main { padding: 10px 12px 24px; }
  .top-in { padding: 0 12px; gap: 8px; }
  .brand { font-size: 12px; letter-spacing: .03em; }
  .brand .mark { width: 13px; height: 13px; margin-right: 6px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .filters input[type="search"] { width: 100%; }
  .filters .count { margin-left: 0; width: 100%; }
  .chart { padding: 4px 10px 6px; }
  .h-axis { flex-direction: column; gap: 0; }
  .kv th { width: 110px; }
  .kv td { word-break: break-word; }


  /* Domain check list: each domain becomes a two-line card. */
  #stores, #stores tbody { display: block; }
  #stores thead { display: none; }
  #stores tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
  #stores tr[hidden] { display: none; }
  #stores td { display: block; border: 0; padding: 0; }
  #stores td.name { flex: 1 1 100%; width: auto; min-width: 0; }
  #stores td:nth-child(2) { font-size: 12px; }

  .domtbl .dst, .domtbl .dchk { display: none; }
  table.domtbl td .sub.dstat { display: block; }
  #stores td:has(> .nil:only-child) { display: none; }
  .domtbl td { white-space: normal; word-break: break-word; }
  .grid td.name { white-space: normal; }
}
@media (max-width: 400px) {
  .band .grid th:nth-child(4), .band .grid td:nth-child(4) { display: none; }
  #vendors th:nth-child(3), #vendors td:nth-child(3) { display: none; }
  .brand { font-size: 11px; letter-spacing: 0; }
  .brand .mark { display: none; }
}

/* watchlist */
.watchb { font: 500 12px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--field); border-radius: 2px; padding: 3px 9px; margin-left: 8px; vertical-align: 4px; cursor: pointer; }
.watchb[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.watch { border: 1px solid var(--line); background: var(--panel); padding: 2px 12px 8px; margin: 4px 0 10px; }
.watch h2 { margin-top: 10px; }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 4px 18px; }
.wl-list li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wl-list li > a { font-weight: 600; }
.wl-list .wb { font: 600 13px var(--mono); margin-left: 6px; }
.wl-list .wv { display: block; font-size: 11px; }
.wl-list .chg { white-space: nowrap; }
.wl-list .wsince { font: 400 11px var(--sans); }
.wl-list .wx { font: 11px var(--sans); color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; float: right; }

/* Visual QA round 1 */
h1, h2, h3, .crumbs { text-wrap: balance; }
.lede, .note, .about, th .sub { text-wrap: pretty; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
.domtbl { width: auto; min-width: 60%; }
.domtbl .sub.dstat { display: none; }
@media (max-width: 900px) {
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picks .pick-c:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .foot { padding-left: 12px; padding-right: 12px; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .foot-links a, .crumbs a, table.listings .lk, th .sortbtn { display: inline-block; padding: 6px 0; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}

/* Vendors directory on phones: two-line cards instead of a squeezed table. */
@media (max-width: 620px) {
  #vendors, #vendors tbody { display: block; }
  #vendors thead { display: none; }
  #vendors tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  #vendors tr[hidden] { display: none; }
  #vendors td { display: block !important; border: 0; padding: 0; text-align: left; font-size: 12px; }
  #vendors td.name { flex: 1 1 100%; font-size: 13px; }
  #vendors td:nth-child(4), #vendors td.pay, #vendors td.pp { display: none !important; }
  #vendors td:nth-child(3) .sub { display: inline; margin-left: 4px; }
  #vendors td:nth-child(3)::before { content: "Tests "; color: var(--ink-3); font-family: var(--sans); }
  #vendors td.sf::before { content: "Ships from "; color: var(--ink-3); }
  #vendors td.vm::before { content: "vs median "; color: var(--ink-3); font-family: var(--sans); }
}
@media (max-width: 620px) { #vendors td.e0 { display: none !important; } }
/* Vendor pages: the store's own policies at a glance */
.polstrip { margin: 4px 0 10px; }
.polstrip h2 { margin-top: 14px; }
.polstrip dl { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; }
.polstrip dl > div { background: var(--bg); padding: 6px 10px; min-width: 0; flex: 1 1 240px; }
.polstrip dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.polstrip dd { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
@media (max-width: 620px) { .polstrip dl > div { flex-basis: 40%; } }
.linkbtn { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
/* Links inside sentences get a non-color cue (WCAG 1.4.1); whole-cell and list links keep the clean look. */
.prose p a, .prose li a, .prose td a, .note a, .lede a, .about a, .howto a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose p a:hover, .prose li a:hover, .prose td a:hover, .note a:hover, .lede a:hover { text-decoration-thickness: 2px; }
.prose a.btn-cta { text-decoration: none; }
/* Grid cell facts shown on keyboard focus (title tooltips never appear on focus). */
.gtip { position: absolute; z-index: 40; max-width: 320px; padding: 4px 8px; border-radius: 2px; background: var(--ink); color: var(--bg); font: 12px/1.35 var(--sans); pointer-events: none; }
.gtip[hidden] { display: none; }
/* Visual QA pass 2 */
@media (max-width: 620px) { table.listings td.name { flex: 1 1 calc(100% - 132px); } #vendors .tn { display: none; } }
.msub .mmed { margin-left: auto; }
.prose a b { color: inherit; }
.wraptbl td:first-child a { white-space: nowrap; }
table.grid.domtbl { width: auto; min-width: 60%; }
.scroll:has(> table.domtbl) { width: fit-content; min-width: 60%; max-width: 100%; }
.scroll > table.grid.domtbl { width: 100%; }
table.deftbl { margin-bottom: 12px; }
.pk-m { text-wrap: pretty; }
@media (min-width: 621px) { table.stacked tbody tr.first td { border-top: 2px solid var(--line-2); } table.stacked tbody tr.first:first-child td { border-top: 0; } }
.warnlist ~ ul.plain { max-width: 1000px; }
.hgrid th.pn .sub { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evbox .req { margin-left: 0; }
.hist-soon { margin: 10px 0 0; }
.prose pre.code { margin: 8px 0 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; font: 12px/1.45 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
.prose pre.code code { font: inherit; background: none; padding: 0; }
/* Tables that become one card per row on phones; each cell names its column. */
@media (max-width: 620px) {
  table.cardtbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  table.cardtbl, table.cardtbl tbody, table.cardtbl tr, table.cardtbl th, table.cardtbl td { display: block; width: auto; }
  table.cardtbl tr { padding: 8px 10px; border-bottom: 1px solid var(--line); }
  table.cardtbl tbody th[scope="row"] { border: 0; padding: 0 0 4px; width: auto; }
  table.cardtbl td { border: 0; padding: 2px 0; }
  table.cardtbl td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-2); }
}
.sub.was { color: var(--good, #2e7d32); font-family: var(--sans); }
.chg.back { color: var(--good); border: 1px solid var(--good); border-radius: 2px; padding: 0 3px; font-size: 11px; }
.regact a, .kv .sub a, .wl-b a, .alert a, .wl-h .nil a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.regact a:hover, .kv .sub a:hover, .wl-b a:hover, .alert a:hover, .wl-h .nil a:hover { text-decoration-thickness: 2px; }
.regacts-l { list-style: none; margin: 0; padding: 0; }
h3.wl-h { font-size: 13px; line-height: 1.45; margin: 0; }
.regact .ra-d { font-weight: 600; }
/* Visual QA pass 3 */
.regacts { max-width: 1000px; }
@media (max-width: 620px) {
  table.stacked tbody tr.first:not(:first-child) { border-top: 2px solid var(--line-2); }
  table.listings td.pr { display: contents; }
  table.listings td.pr > .cur { order: 5; }
  table.listings td.pr .sub.was { order: 10; flex-basis: 100%; margin-left: 0; }
  #stores td:empty { display: none; }
}
@media (max-width: 900px) { table.listings td.st .lk { margin-left: 12px; } }
.kv th { text-wrap: balance; }
/* Phones: skip layout of rows and cards until they scroll near the screen (ops/perf-phone.md). */
@media (max-width: 900px) { table.listings tbody tr { content-visibility: auto; contain-intrinsic-size: auto 60px; } }
@media (max-width: 620px) { #stores tbody tr, #vendors tbody tr, table.cardtbl tbody tr { content-visibility: auto; contain-intrinsic-size: auto 56px; } }
@media (max-width: 760px) { .mcard { content-visibility: auto; contain-intrinsic-size: auto 104px; } }
@media (max-width: 900px) { table.listings td.fr:has(> .nil:only-child) { display: none; } }
.regacts { margin: 14px 0 10px; }
.regact { border-left: 3px solid var(--mid); background: var(--mid-bg); padding: 8px 12px; margin: 6px 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.regact q { font-style: italic; }
@media (max-width: 620px) { table.listings td.pr .sub.was { display: inline; margin-left: 0; } table.listings td.pr { text-align: left; } }
.cl { display: none; }
@media (max-width: 900px) { table.listings .cl { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
.grid tbody th[scope="row"] { font-weight: 500; text-align: left; }
.wraptbl tbody th[scope="row"] { width: 30%; white-space: normal; }
.wraptbl tbody th[scope="row"] a { white-space: nowrap; }
.deftbl tbody th[scope="row"] { white-space: nowrap; width: 1%; }
@media (max-width: 480px) { .deftbl tbody th[scope="row"] { white-space: normal; } }
.sitenote { margin: 18px 0 6px; }
.sitenote p { max-width: 900px; }
.sitenote .sn-d { display: none; }
.sitenote summary { cursor: pointer; }
@media (max-width: 620px) { .sitenote .sn-d { display: block; } .sitenote .sn-full { display: none; } }
/* Store pages: the site note fills the left column under "Who runs this store" while the policies run down
   the right. The 1fr row keeps it right under the short table; one column keeps the order who, policies, note. */
.cols > .sitenote { margin: 0; }
.cols > .sitenote h2 { margin-top: 0; }
.cols > .sitenote > p:last-child { margin-bottom: 0; }
@media (min-width: 761px) {
  .cols.storecols { grid-template-rows: auto 1fr; }
  .cols.storecols > .polcol { grid-column: 2; grid-row: 1 / span 2; }
  .cols.storecols > .sitenote { grid-column: 1; grid-row: 2; }
}
/* Filing notes: a marker on the row, the full note under the table. */
.sub.rnote { display: block; font-size: 11px; }
.sub.rnote a { color: var(--ink-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rnotes { margin: 6px 0 0; padding-left: 20px; max-width: 900px; }
.rnotes li { margin: 2px 0; }
@media (max-width: 900px) { table.listings td.name .sub.rnote { display: block; flex-basis: 100%; } }
/* Source names can be long (a forum thread title): let them wrap instead of widening the table. */
.grid td.srcn { white-space: normal; overflow-wrap: anywhere; }
/* "N listings" on phone cards in the stores list; the number alone in the desktop column. */
.lsw { display: none; }
@media (max-width: 620px) { #stores .lsw { display: inline; color: var(--ink-3); font-family: var(--sans); } }
/* Filing-note link: a 24 px target, clear of the top bar on the way back (a11y review 5). */
.sub.rnote { margin-top: 6px; }
.sub.rnote a { display: inline-block; padding: 5px 0; scroll-margin-top: 80px; }
.rnotes li:target { background: var(--hover); }
/* Fraud warnings on /alerts/ are a list with a heading per domain (a11y review 5). */
ul.warnlist { list-style: none; margin: 0; padding: 0; }