@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+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(/assets/fonts/plex-mono-500.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(/assets/fonts/plex-mono-600.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 700; font-display: swap; src: url(/assets/fonts/plex-sans.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; }
: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: #d97706;
  --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;
  --b1: #cdeed8; --b2: #e6f5ea; --b3: #ecece6; --b4: #fbeedb; --b5: #f8d9d6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111211; --panel: #181a19; --ink: #e9e9e4; --ink-2: #b4b4ad; --ink-3: #8f8f88;
    --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;
    --b1: #174a2c; --b2: #1b3324; --b3: #262826; --b4: #3a2b12; --b5: #45201c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111211; --panel: #181a19; --ink: #e9e9e4; --ink-2: #b4b4ad; --ink-3: #8f8f88;
  --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;
  --b1: #174a2c; --b2: #1b3324; --b3: #262826; --b4: #3a2b12; --b5: #45201c;
  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; }
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; }
.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 #3a3a37; 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 { overflow-x: auto; border: 1px solid var(--line); }
.scroll.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to right, #000 calc(100% - 36px), rgba(0, 0, 0, .25)); }
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: 0; 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 { opacity: .6; }
.grid tr.oosr:hover td { opacity: 1; }
.grid td.prod { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.grid td.prod a { color: var(--ink-2); }
.grid td.prod a::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; }
.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); }
.prose .ret { margin: 4px 0 10px; font-size: 13px; }
.narrowtbl { max-width: 760px; }

/* home board */
.board td { vertical-align: middle; }
.board td.pick { line-height: 1.25; padding-top: 3px; padding-bottom: 3px; }
.pick .pv { font: 600 12px var(--mono); }
.pick .pm { font: 11px var(--mono); color: var(--ink-3); }
.pick .pvend { display: block; font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .ul { font: 500 11px var(--sans); color: var(--mid); margin-left: 3px; }
.board td.name .sub { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.board th, .board td { padding-left: 7px; padding-right: 7px; }

/* 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; }
.dots .d-flag { background: var(--dot-flag); }
.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(--line-2); 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; }
.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); }

.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; }

/* the grid: stores x peptides */
.pgrid th.gh { white-space: normal; min-width: 58px; max-width: 76px; line-height: 1.2; text-transform: none; letter-spacing: 0; font-size: 11px; text-align: right; }
.pgrid th.gh a { color: var(--ink-2); }
.pgrid td.gc { text-align: right; font: 500 11px var(--mono); padding: 3px 6px; border-left: 1px solid var(--bg); }
.pgrid td.gc a { color: var(--ink); text-decoration: none; display: block; }
.pgrid td.gc:hover { outline: 1px solid var(--ink-2); outline-offset: -1px; }
.pgrid td.b1 { background: var(--b1); } .pgrid td.b2 { background: var(--b2); } .pgrid td.b3 { background: var(--b3); }
.pgrid td.b4 { background: var(--b4); } .pgrid td.b5 { background: var(--b5); }
.pgrid td.empty { background: transparent; color: var(--line-2); text-align: center; }
.pgrid td.name, .pgrid thead th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; max-width: 190px; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--line); }
.pgrid thead th:first-child { background: var(--panel); z-index: 3; }
.grid-wrap { max-height: calc(100vh - 150px); }
.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); }

/* buyer reports */
.cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.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; }
.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(--line-2); border-radius: 2px; padding: 5px 7px; }
.fgrid input, .fgrid select { height: 32px; }
.fgrid input[type="file"] { height: auto; padding: 6px; border-style: dashed; }
.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; }
.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; overflow-x: auto; 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)); border: 1px solid var(--line); margin: 6px 0 4px; }
.pick-c { padding: 8px 10px; border-left: 1px solid var(--line); min-width: 0; }
.pick-c:first-child { border-left: 0; }
.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); }
.glance .pk-h .tag { vertical-align: 0; }
.listings td.st .sub { white-space: nowrap; }
.listings .rep-name { display: none; }

@media (min-width: 1280px) {
  /* Wide screens: the listings table fits, so its header can stick to the page under the top bar. */
  .lwrap { overflow: visible; }
  .lwrap .grid thead th { top: 40px; }
}
@media (max-width: 1180px) {
  .asof { display: none; }
}
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  .mstrip { display: block; }
  .formcols { grid-template-columns: minmax(0, 1fr); }
  .formside { position: static; max-width: 760px; }
  .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-c { border-left: 0; border-top: 1px solid var(--line); }
  .pick-c:nth-child(-n+3) { border-top: 0; }
  .pick-c:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .nav-main { display: none; }
  .menu { display: block; }
  .top-in { gap: 10px; }
}
@media (max-width: 760px) {
  .cols.even { grid-template-columns: 1fr; }
  h1 { font-size: 20px; }
  .lede { font-size: 13px; }
}
@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; }

  /* Picks: one swipeable row of cards. */
  .picks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; gap: 8px; padding-bottom: 4px; }
  .pick-c, .pick-c:not(:nth-child(3n+1)), .pick-c:nth-child(-n+3) { flex: 0 0 78%; scroll-snap-align: start; border: 1px solid var(--line); }
  .glance .pick-c { flex-basis: 62%; }

  /* Home board: the peptide column stays put while the numbers scroll. */
  .board td.name, .board thead th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; box-shadow: 1px 0 0 var(--line); max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
  .board thead th:first-child { background: var(--panel); z-index: 3; }
  .board tr.grp th { position: sticky; left: 0; }
  .pgrid td.name, .pgrid thead th:first-child { max-width: 120px; }

  /* 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; } 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 td.sz::after, table.listings td.pk::after, table.listings td.pr::after, table.listings td.st::after, table.listings td.fr::after { content: "\00a0\00B7\00a0"; color: var(--ink-3); }
  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; }

  /* Directories keep the columns that answer the question; the rest is on each row's page. */
  #stores th:nth-child(n+5), #stores td:nth-child(n+5) { 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(4), #vendors td:nth-child(4), #vendors th:nth-child(6), #vendors td:nth-child(6) { display: none; }
}
@media (max-width: 400px) {
  .brand { font-size: 11px; letter-spacing: 0; }
  .brand .mark { display: none; }
}