/* Owned by Cyrus Hojjatie. Copyright (c) 2026 Cyrus Hojjatie. All rights reserved.
   Ownership recorded 2026-10-23. Proprietary and confidential; no use, copying or distribution without written permission. */
[hidden] { display: none !important; }

/* The brand fonts, self-hosted (public/fonts, built by scripts/build-fonts.py
   from the Google Fonts downloads; SIL Open Font License, texts alongside).
   Bump ?v= here and in the preload links (views.js) when a file changes. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 600; font-stretch: 100% 125%; font-display: swap; src: url('fonts/archivo.woff2?v=1') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/ibm-plex-sans.woff2?v=1') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2?v=1') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2?v=1') format('woff2'); }

/* Bone. The page is the first bone (#E6DECE) at 80% brightness, then 7%
   brighter (owner's request, 2026-10-08), with the old night navy as ink;
   panels, fields and lines are the same bone a touch lighter or darker,
   scaled together. The strand's teal, deepened, is the
   primary color (links, buttons, the logo's strand), and the chemistry
   colors are dark cuts of the label tints so they read on the page (the
   vial labels keep the originals). Every text color here passes 4.5:1 on
   the background; ink and secondary text have twice been taken about 15% darker
   for crisper reading, then every text color (ink, secondary, faint, the teal
   as text, accent, warning, error and the chemistry colors) 15% darker again
   (owner's request, 2026-10-08); fills, borders and the logo keep the teal
   #13333C. Prices are bold (.price). */
:root {
  color-scheme: light;
  --bg: #C5BEB1;
  --surface: #CBC7BC;
  --surface-2: #D2CFC7;
  --line: #B4AB9A;
  --line-strong: #9D947F;
  --text: #06090B;
  --text-soft: #1A1F25;
  --text-faint: #252B2F;
  --heading: #040709;
  --prose: #0C1013;
  /* raised panels catch a little light on their top edge */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .35);
  --shadow: rgba(40, 32, 18, .2);
  --field: var(--bg);
  --metal: #13333C;
  --metal-hover: #0C252C;
  --metal-ink: #F5F1E8;
  /* the teal as text (links, teal labels): 15% darker than the fill color */
  --metal-text: #102B33;
  --metal-text-hover: #0A1F25;
  --accent: #09383E;
  --warn: #403004;
  --nonpolar: #174134;
  --acid: #64261A;
  --base: #253177;
  --special: #144047;
  --error: #5A1F17;
  --navy: #131D25;
  --display: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif; /* Plex Sans carries the Greek (α, β…) Archivo and Plex Mono lack */
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Sans', ui-monospace, monospace;
  --gutter: clamp(16px, 4.5vw, 64px);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga';
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--metal-text); text-decoration-color: rgba(16, 43, 51, .55); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: var(--metal-text-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
sub { font-size: .72em; line-height: 0; }

h1, h2, h3 { font-family: var(--display); color: var(--heading); margin: 0; font-stretch: 110%; text-wrap: balance; }
h1 { font-weight: 300; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-weight: 400; font-size: clamp(1.55rem, 2.4vw, 2.05rem); line-height: 1.12; letter-spacing: -.018em; }
h3 { font-weight: 500; font-size: 1.06rem; line-height: 1.3; letter-spacing: -.005em; font-stretch: 105%; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: calc(760px + 2 * var(--gutter)); padding-top: clamp(40px, 6vw, 72px); padding-bottom: 24px; }
.lede { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--text-soft); max-width: 56ch; margin: 22px 0 0; }
.note { color: var(--text-soft); font-size: .92rem; }
.opt { color: var(--text-faint); font-weight: 400; }
.page-title { font-weight: 300; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -.024em; margin-bottom: 24px; }

/* research-use notice */
.ruo-strip { -webkit-font-smoothing: antialiased; background: var(--navy); border-bottom: 1px solid var(--navy); color: #D9B865; padding: 9px var(--gutter); text-align: center; font-size: .8rem; letter-spacing: .01em; }

/* header */
.site-head { border-bottom: 1px solid var(--line); background: rgba(197, 190, 177, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.site-head-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.brand { display: block; line-height: 0; }
.brand-logo { display: block; height: 42px; width: auto; }
.site-nav { display: flex; gap: 4px 30px; flex-wrap: wrap; align-items: center; }
.site-nav a { color: var(--text-soft); text-decoration: none; font-size: .93rem; padding: 6px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--metal); }
/* Desktop Account menu: Your account, Sign out (a form button, POST /logout) */
.nav-out { display: contents; }
.nav-out button { background: none; border: 0; font: inherit; cursor: pointer; }
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid transparent; color: var(--text-soft); font-size: .93rem; cursor: pointer; user-select: none; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary::after { content: ""; width: 4px; height: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.acct-menu[open] > summary::after { transform: translateY(1px) rotate(225deg); }
@media (max-width: 780px) { .acct-menu > summary::after { display: none; } } /* just above the phone menu: keeps the header on one line */
.acct-menu > summary:hover, .acct-menu[open] > summary { color: var(--text); }
.acct-menu > summary[aria-current="page"] { color: var(--text); border-bottom-color: var(--metal); }
.acct-panel { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 180px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); box-shadow: 0 18px 40px var(--shadow); z-index: 40; }
.site-nav .acct-panel a, .acct-panel .nav-out button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .93rem; }
.acct-panel .nav-out button { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.site-nav .acct-panel a:hover, .acct-panel .nav-out button:hover, .acct-panel .nav-out button:focus-visible { background: rgba(19, 51, 60, .08); }
.cart-link { display: inline-flex; gap: 8px; align-items: center; }
.cart-count { font-family: var(--mono); font-size: .74rem; color: var(--metal-text); border: 1px solid var(--line-strong); border-radius: 999px; min-width: 24px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 .95rem var(--body); letter-spacing: .01em; padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line-strong); cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary { background: var(--metal); border-color: var(--metal); color: var(--metal-ink); }
.btn-primary:hover { background: var(--metal-hover); border-color: var(--metal-hover); color: var(--metal-ink); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { border-color: var(--text-soft); color: var(--text); }
.btn-block { width: 100%; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); } /* the headline sits level with the spotlight card (owner's request, 2026-10-25) */
.hero h1 { max-width: 15ch; text-wrap: balance; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* compound record: the featured compound as a data sheet */
.record { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 26px 0; box-shadow: var(--edge); }
.record-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.record-head h2 { font-size: 1.6rem; font-weight: 400; letter-spacing: -.01em; }
.record-label { font-size: .8rem; color: var(--text-faint); }
.record-data { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 0; border-top: 1px solid var(--line); }
.record-data > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.record-data > div:nth-child(odd) { padding-right: 16px; }
.record-data > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.record-data > div:last-child:nth-child(odd), .spec-list > div:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
.record-data dt, .spec-list dt { font-size: .78rem; color: var(--text-faint); margin-bottom: 3px; }
.record-data dd, .spec-list dd { margin: 0; font-family: var(--mono); font-size: .9rem; color: var(--text); font-variant-numeric: tabular-nums; }
.record-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 20px; font-size: .92rem; color: var(--text-soft); }
.record-foot strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* featured carousel: slides share one grid cell, so the card keeps the height
   of its tallest compound and nothing below it jumps as it turns */
.feat { position: relative; }
.feat-track { display: grid; }
.feat-slide { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.feat-slide.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.feat-slide .record-foot { margin-top: auto; }
.feat-slide .record-head h2 { text-wrap: balance; }
.feat-slide .record-head h2 span { white-space: nowrap; }
.feat-tag { flex: none; font-size: .74rem; line-height: 1; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--metal-text); white-space: nowrap; }
.feat-tag-new { color: var(--accent); border-color: rgba(10, 66, 73, .5); }
.feat-tag-featured { color: var(--text-faint); }
.feat-cap { margin: 0 0 8px; font-size: .78rem; color: var(--text-faint); }
.feat-seq { margin: 0; font-family: var(--mono); font-size: 1.02rem; font-weight: 500; letter-spacing: .14em; line-height: 1.55; overflow-wrap: anywhere; }
.feat-seq span { color: var(--rc); }
.feat-text { margin: 0; font-family: var(--mono); font-size: .95rem; line-height: 1.5; color: var(--metal-text); overflow-wrap: anywhere; }
.feat-parts { list-style: none; margin: 0; padding: 0; }
.feat-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-family: var(--mono); font-size: .9rem; color: var(--text); }
.feat-parts li + li { border-top: 1px solid var(--line); }
.feat-parts li span:last-child { color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feat-nav { display: flex; align-items: center; justify-content: center; margin-top: -8px; padding: 0 0 14px; }
.feat-dots { display: flex; }
.feat-dot { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.feat-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background-color .2s ease, transform .2s ease; }
.feat-dot:hover i { background: var(--text-faint); }
.feat-dot[aria-current="true"] i { background: var(--metal); transform: scale(1.2); }
.feat-arrow { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); color: var(--metal-text); cursor: pointer; box-shadow: var(--edge), 0 6px 18px var(--shadow); transition: border-color .15s ease, color .15s ease; }
.feat-prev { left: -20px; }
.feat-next { right: -20px; }
.feat-arrow:hover { border-color: var(--accent); color: var(--accent); }
.feat-arrow:focus-visible, .feat-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .feat-nav { justify-content: space-between; margin-top: -4px; padding: 0 0 14px; }
  .feat-arrow { position: static; margin: 0; width: 36px; height: 36px; box-shadow: var(--edge); }
}
@media (max-width: 520px) {
  /* keep the featured card's data in two columns so it stays compact */
  .feat .record-data { grid-template-columns: 1fr 1fr; }
  .feat .record-data > div:nth-child(odd) { padding-right: 12px; }
  .feat .record-data > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); }
  .feat .record-data > div:last-child:nth-child(odd) { padding-right: 0; }
  .feat .record-data dd { font-size: .84rem; }
}

/* sequence, set as type */
.seq { list-style: none; margin: 0 0 0 -9px; padding: 0; display: flex; flex-wrap: wrap; row-gap: 12px; } /* every row starts flush (each residue carries 9 px each side; the list steps back by one) */
.res { position: relative; display: grid; justify-items: center; padding: 0 9px; }
.res:not(:last-child)::after { content: ''; position: absolute; right: -4px; top: .78em; width: 8px; height: 1px; background: var(--line-strong); }
.res-code { font-family: var(--mono); font-size: .95rem; font-weight: 500; color: var(--rc); line-height: 1.5; }
.res-n { font-family: var(--mono); font-size: .66rem; color: var(--text-faint); line-height: 1; font-variant-numeric: tabular-nums; }
.r-nonpolar { --rc: var(--nonpolar); }
.r-acidic { --rc: var(--acid); }
.r-basic { --rc: var(--base); }
.r-special { --rc: var(--special); }
.seq-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 16px 0 0; font-size: .78rem; }
.seq-key span { color: var(--rc); }

/* home sections */
.block { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); background: linear-gradient(var(--line), var(--line)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px; }
.block-tight { padding-top: 8px; padding-bottom: clamp(56px, 7vw, 96px); }
.block-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); align-items: baseline; margin-bottom: clamp(32px, 4vw, 52px); }
.block-head p { margin: 0; color: var(--text-soft); max-width: 52ch; }

.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.check-item { border-top: 1px solid var(--metal); padding-top: 22px; }
.check-item .method { font-family: var(--mono); font-size: .78rem; color: var(--text-faint); margin-bottom: 18px; }
.check-item h3 { margin-bottom: 10px; }
.check-item p:last-child { color: var(--text-soft); margin: 0; max-width: 38ch; }

/* catalog as data rows */
.cat { border-top: 1px solid var(--line-strong); }
.cat-row { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 1.4fr)) minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px 12px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background-color .15s ease; }
a.cat-row:hover, a.cat-row:focus-visible { background: var(--surface); color: var(--text); }
.cat-head { padding-top: 12px; padding-bottom: 12px; font-size: .78rem; color: var(--text-faint); }
.cat-name { display: grid; gap: 4px; }
.cat-name strong { font-family: var(--display); font-weight: 500; font-size: 1.15rem; font-stretch: 108%; letter-spacing: -.005em; }
.cat-name small { color: var(--text-soft); font-size: .9rem; }
.cat-data { font-family: var(--mono); font-size: .88rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cat-price { font-family: var(--mono); font-size: .95rem; text-align: right; font-variant-numeric: tabular-nums; }
/* catalog rows with a size picker and Add to cart; the compound name's link
   covers the whole row, the controls sit above it */
.cat-buyable .cat-row { position: relative; grid-template-columns: minmax(0, 4.6fr) minmax(0, 1.05fr) minmax(0, .75fr) minmax(320px, 2.7fr); }
.cat-buyable .cat-row:not(.cat-head):hover { background: var(--surface); }
/* rows off screen skip layout and paint until they're near (measured: about half the catalog's main-thread time on a slow phone); auto keeps each row's last real size */
.cat-buyable .cat-row:not(.cat-head) { content-visibility: auto; contain-intrinsic-block-size: auto 196px; }
@media (max-width: 760px) { .cat-buyable .cat-row:not(.cat-head) { contain-intrinsic-block-size: auto 330px; } }
.cat-buyable .cat-row:has(.cat-link:focus-visible) { background: var(--surface); outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-link { color: inherit; text-decoration: none; }
.cat-link:focus-visible { outline: none; }
.cat-link::after { content: ''; position: absolute; inset: 0; }
.cat-buy-cell { position: relative; z-index: 1; }
/* each compound's vial, small, as it appears on its product page */
.cat-name.cat-name-thumb { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
.cat-ranked .cat-name.cat-name-thumb { grid-template-columns: 2.4ch auto minmax(0, 1fr); column-gap: 14px; }
.cat-name-thumb .cat-rank { grid-row: auto; padding-top: 0; }
.cat-text { display: grid; gap: 5px; min-width: 0; }
/* name, tags, tagline, then the sequence in its chemistry colors */
.cat-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 .72rem/1.5 var(--body); color: var(--text-soft); white-space: nowrap; }
.tag-new { color: var(--accent); border-color: rgba(10, 66, 73, .5); }
.cat-seq, .cat-struct { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-size: .8rem; }
.cat-seq { letter-spacing: .14em; }
.cat-seq span { color: var(--rc); }
.cat-seq .cat-seq-more { margin-left: .4em; letter-spacing: 0; color: var(--text-faint); }
.cat-struct { color: var(--text-faint); }

/* catalog: the sequence can be read residue by residue (public/site.js).
   It sits above the row's link so it can be hovered, tapped and dragged. */
.cat-seq[data-explore], .cat-blend { position: relative; z-index: 1; justify-self: start; max-width: 100%; overflow: visible; white-space: normal; text-overflow: clip; touch-action: pan-y; cursor: default; border-radius: 4px; }
[data-explore="seq"] > span { display: inline-block; transform-origin: 50% 80%; transition: transform .14s ease, opacity .14s ease; }
[data-explore="seq"].is-on > span { opacity: .28; }
[data-explore="seq"].is-on > span.is-same { opacity: 1; background: linear-gradient(var(--rc), var(--rc)) no-repeat 0 100% / calc(100% - .14em) 2px; }
[data-explore="seq"].is-on > span.is-cur { opacity: 1; transform: translateY(-3px) scale(1.5); }
[data-explore="seq"].is-on > .cat-seq-more.is-cur { transform: none; color: var(--text); }
.cat-seq[data-explore]:focus-visible, .cat-blend:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.cat-blend .cat-comp { transition: opacity .14s ease, color .14s ease; }
.cat-blend.is-on .cat-comp { opacity: .45; }
.cat-blend.is-on .cat-comp.is-cur { opacity: 1; color: var(--text); background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 1px; }
@media (hover: none) { [data-explore] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }

/* the residue card */
.seq-tip { position: fixed; left: 0; top: 0; z-index: 90; width: min(330px, calc(100vw - 16px)); padding: 16px 16px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); box-shadow: 0 18px 48px var(--shadow), 0 2px 6px rgba(58, 44, 20, .08), var(--edge); color: var(--text); pointer-events: none; opacity: 0; transition: opacity .14s ease, transform .16s cubic-bezier(.2, .7, .2, 1); }
.seq-tip.is-in { opacity: 1; }
.seq-tip.no-glide { transition: none; }
.seq-tip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--surface-2); border: solid var(--line-strong); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.seq-tip.is-below::after { top: -7px; bottom: auto; border-width: 1px 0 0 1px; }
/* a component card the cursor can move into; ::before bridges the gap to the name */
.seq-tip.is-live { pointer-events: auto; }
.seq-tip.is-live::before { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; }
.seq-tip.is-live.is-below::before { top: -14px; bottom: auto; }
.seq-tip .tip-seq[data-explore] { touch-action: pan-y; cursor: default; }
.tip-cap { margin: 12px 0 -4px; font: .7rem/1.4 var(--mono); color: var(--text-faint); }
.tip-cap .h-touch { display: none; }
@media (hover: none) { .tip-cap .h-mouse { display: none; } .tip-cap .h-touch { display: inline; } }
.tip-link { display: inline-block; margin-top: 10px; font-size: .84rem; color: var(--accent); text-decoration: none; }
.tip-link::after { content: '\2192'; margin-left: .4em; }
.tip-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the residue card for a component's sequence opens beside the component card */
.seq-tip-sub { z-index: 91; }
.seq-tip-sub.is-right::after { left: -7px; right: auto; top: var(--ay); bottom: auto; margin: -6px 0 0; border-width: 0 0 1px 1px; }
.seq-tip-sub.is-left::after { left: auto; right: -7px; top: var(--ay); bottom: auto; margin: -6px 0 0; border-width: 1px 1px 0 0; }
.seq-tip-sub.is-flat::after { display: none; }
.tip-head { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: start; }
.tip-tile { position: relative; display: grid; place-items: center; height: 72px; border: 1.5px solid var(--rc); border-radius: 9px; background: color-mix(in srgb, var(--rc) 13%, transparent); }
.tile-n { position: absolute; top: 5px; left: 7px; font: 500 .68rem/1 var(--mono); color: var(--text-soft); }
.tile-l { margin-top: -2px; font: 500 2.05rem/1 var(--mono); color: var(--rc); }
.tile-c { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: .7rem/1 var(--mono); color: var(--text-soft); }
.tip-id strong, .tip-title strong { display: block; font: 500 1.08rem/1.2 var(--display); font-stretch: 108%; color: var(--heading); }
.tip-kind { display: block; margin-top: 3px; font: .76rem/1.4 var(--mono); color: var(--rc); }
.tip-id p { margin: 8px 0 0; font-size: .84rem; line-height: 1.45; color: var(--text-soft); }
.tip-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tip-title span { font: .74rem var(--mono); color: var(--text-faint); white-space: nowrap; }
.tip-spec { margin: 6px 0 0; font: .82rem/1.4 var(--mono); color: var(--text-soft); }
.tip-seq { margin: 10px 0 0; font: .82rem/1.65 var(--mono); letter-spacing: .14em; word-break: break-all; }
.tip-seq span { color: var(--rc); }
.tip-struct { margin: 10px 0 12px; font: .8rem/1.5 var(--mono); color: var(--text-soft); overflow-wrap: anywhere; }
.tip-strip { display: flex; align-items: flex-end; gap: 1px; height: 14px; margin: 14px 0 9px; }
.tip-strip.is-dense { gap: 0; }
.tip-strip i { flex: 1 1 0; height: 5px; border-radius: 1px; background: var(--rc); opacity: .3; }
.tip-strip i.is-same { opacity: 1; }
.tip-strip i.is-cur { height: 14px; opacity: 1; }
.tip-foot { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; font: .74rem/1.4 var(--mono); color: var(--text-faint); }
.cat-thumb { position: relative; z-index: 2; display: block; width: 97px; height: 151px; }
.thumb-stage { position: absolute; left: 0; top: 0; width: 97px; height: 151px; overflow: hidden; border-radius: 14px; background: radial-gradient(ellipse 62% 56% at 50% 50%, #FFFFFF, #EEF3F6 82%), #EEF3F6; border: 1px solid #D4CCBC; box-shadow: 0 6px 16px rgba(58, 44, 20, .14); transform-origin: 0 50%; transition: transform .22s ease, box-shadow .22s ease; }
.cat-thumb .vial-mini { position: absolute; display: block; left: 50%; top: 50%; width: 153px; height: 350px; margin: -175px 0 0 -76.5px; transform: scale(.39); transform-origin: 50% 50%; }
.cat-thumb .vial-mini > span { display: block; }
.cat-name .lbl strong { font: inherit; font-weight: 600; letter-spacing: inherit; } /* keep the row's name style off the label */
.cat-thumb .vial-img { position: absolute; left: 0; top: 0; width: 153px; max-width: none; height: 350px; }
.cat-buy { display: flex; gap: 8px; margin: 0; }
.cat-buy .cat-size { flex: 1 1 auto; min-width: 0; width: auto; padding: 9px 30px 9px 12px; font-size: .88rem; background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; }
.cat-buy .cat-add { flex: none; padding: 9px 16px; font-size: .88rem; white-space: nowrap; }
.cat-buy .cat-add:disabled { cursor: not-allowed; }
@media (max-width: 1100px) {
  .cat-buyable .cat-row { grid-template-columns: minmax(0, 4fr) minmax(0, 1.1fr) minmax(0, .8fr); }
  .cat-buyable .cat-head > :last-child { display: none; }
  .cat-buy-cell { grid-column: 1 / -1; justify-self: end; width: min(100%, 380px); }
}

/* catalog: count and sort control */
.cat-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.cat-count { margin: 0; color: var(--text-soft); font-size: .92rem; }
.sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sort-label { font-size: .85rem; color: var(--text-faint); }
.sort ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sort a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-soft); font-size: .88rem; text-decoration: none; }
.sort a:hover { color: var(--text); border-color: var(--text-faint); }
.sort a[aria-current="true"] { color: var(--metal-ink); background: var(--metal); border-color: var(--metal); }
.sort a[aria-current="true"] .muted { color: inherit; opacity: .8; }
.cat-tools + .cat-count { margin-bottom: 14px; }

/* end of the catalog: where to go next */
.next-steps { padding-top: 0; background: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.next-card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--edge); color: var(--text); text-decoration: none; transition: border-color .15s ease; }
.next-card:hover, .next-card:focus-visible { border-color: var(--accent); color: var(--text); }
.next-card strong { font: 400 clamp(1.25rem, 2vw, 1.55rem)/1.2 var(--display); font-stretch: 108%; color: var(--heading); }
.next-card strong::after { content: '\2192'; margin-left: .5em; color: var(--accent); }
.next-card span:last-child { color: var(--text-soft); max-width: 46ch; }
.next-k { font-family: var(--mono); font-size: .76rem; color: var(--accent); }

/* product page: continue browsing */
/* product page: the sections further down skip layout and paint until they're near (as the catalog rows) */
.product-main > .sheet ~ .sheet, .related { content-visibility: auto; contain-intrinsic-block-size: auto 420px; }
.related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 36px); }
.related-head h2 { margin: 0; }
.rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.rel-card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 14px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--edge); color: var(--text); text-decoration: none; transition: border-color .15s ease; }
.rel-card:hover, .rel-card:focus-visible { border-color: var(--accent); color: var(--text); }
.rel-card .cat-thumb { width: 100%; height: 210px; margin-bottom: 10px; }
.rel-card .thumb-stage { width: 100%; height: 100%; border-radius: 12px; box-shadow: none; }
.rel-card .vial-mini { transform: scale(.54); transition: transform .3s ease; }
.rel-card:hover .vial-mini { transform: scale(.58); }
.rel-card .lbl strong { font: inherit; font-weight: 600; letter-spacing: inherit; }
.rel-why { font-family: var(--mono); font-size: .74rem; color: var(--accent); }
.rel-card > strong { font: 500 1.1rem/1.25 var(--display); font-stretch: 108%; }
.rel-price { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: .9rem; color: var(--text-soft); }

/* homepage lists: most popular (ranked) and new arrivals */
.list-side { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.list-side p { margin: 0; color: var(--text-soft); }
.list-link { font-size: .95rem; white-space: nowrap; }
.list-foot { margin: 22px 0 0; text-align: right; }
.cat-ranked .cat-name { grid-template-columns: 2.4ch minmax(0, 1fr); column-gap: 14px; }
.cat-rank { grid-row: 1 / span 2; font-family: var(--mono); font-size: .9rem; color: var(--metal-text); padding-top: .3rem; font-variant-numeric: tabular-nums; }
.more-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--metal-text); font: 500 .95rem var(--body); cursor: pointer; text-align: left; }
.more-toggle:hover { background: var(--surface); }
.more-toggle svg { transition: transform .2s ease; }
.more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .more-toggle svg { transition: none; } }

/* process (a real sequence, so it's numbered) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; border-top: 1px solid var(--line-strong); }
.steps li { counter-increment: step; padding: 22px 22px 0 0; position: relative; }
.steps li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(step); display: block; font-family: var(--mono); font-size: .78rem; color: var(--metal-text); margin-bottom: 18px; }
.steps h3 { margin-bottom: 8px; }
.steps p { margin: 0; color: var(--text-soft); font-size: .94rem; }

.ruo-panel { border: 1px solid rgba(75, 56, 5, .45); border-radius: 18px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(32px, 6vw, 96px); }
.ruo-panel h2 { grid-row: span 2; }
.ruo-panel p { margin: 0; color: var(--text-soft); max-width: 58ch; }
.ruo-panel a { color: var(--warn); text-decoration-color: rgba(75, 56, 5, .45); }

/* page heads */
.page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(32px, 4vw, 48px); }
.crumbs { display: flex; gap: 10px; padding-top: 28px; font-size: .85rem; color: var(--text-faint); }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* product page */
.product { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(56px, 7vw, 96px); }
.product-head { padding-bottom: clamp(32px, 4vw, 48px); }
.product-head h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); }
/* each spec-sheet section opens on a rule with a short satin-metal index mark, like a gauge */
.sheet { padding: 25px 0 36px; background: linear-gradient(var(--metal), var(--metal)) no-repeat left top / 28px 1px, linear-gradient(var(--line-strong), var(--line-strong)) no-repeat left top / 100% 1px; }
.sheet-h { font-family: var(--body); font-stretch: 100%; font-size: .82rem; font-weight: 500; letter-spacing: 0; color: var(--text); margin-bottom: 20px; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.spec-list > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-list > div:nth-child(odd) { padding-right: 20px; }
.spec-list > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.areas { margin: 0; display: grid; gap: 20px; }
.areas dt { font-family: var(--display); font-weight: 500; font-stretch: 105%; margin-bottom: 4px; }
.areas dd { margin: 0; color: var(--text-soft); max-width: 62ch; }

.buy-box { position: sticky; top: 104px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 16px;box-shadow: var(--edge); }
.buy-box fieldset { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.buy-box legend { font-size: .82rem; font-weight: 500; color: var(--text-soft); margin-bottom: 10px; }
.variant { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.variant:hover { border-color: var(--line-strong); }
.variant:has(input:checked) { border-color: var(--metal); background: rgba(19, 51, 60, .06); }
.variant input { accent-color: var(--metal); width: 16px; height: 16px; margin: 0; }
.variant-price { font-family: var(--mono); font-size: .9rem; font-variant-numeric: tabular-nums; }
.qty { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; color: var(--text-soft); margin-bottom: 14px; }
.buy-box .qty input { width: 96px; }
.ship-note { margin: 14px 0 0; font-size: .84rem; line-height: 1.5; color: var(--text-soft); }
.ruo-box { border-top: 1px solid var(--line); padding-top: 16px; font-size: .82rem; color: var(--text-soft); }
.ruo-box strong { color: var(--warn); font-weight: 500; }
.ruo-box p { margin: 0; }
.ruo-box p + p { margin-top: 6px; }

/* tables (cart, orders) */
.spec { width: 100%; border-collapse: collapse; font-size: .94rem; }
.spec th, .spec td { text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.spec thead th { font-size: .78rem; font-weight: 400; color: var(--text-faint); border-bottom-color: var(--line-strong); }
.spec tbody th { font-weight: 400; color: var(--text); }
.spec td { font-variant-numeric: tabular-nums; }
.spec tfoot th, .spec tfoot td { border-bottom: 0; border-top: 1px solid var(--line-strong); font-weight: 400; color: var(--text-soft); padding-top: 10px; padding-bottom: 10px; }
.spec tfoot tr + tr th, .spec tfoot tr + tr td { border-top-color: var(--line); }
.spec tfoot .total-row th, .spec tfoot .total-row td { font-weight: 600; color: var(--heading); padding-top: 13px; padding-bottom: 13px; }
.ship-progress { margin: 12px 0 18px; font-size: .9rem; color: var(--text-soft); }
.ship-progress strong { font-family: var(--mono); font-weight: 500; color: var(--metal-text); }
.ship-progress.is-free { color: var(--nonpolar); }

/* forms */
input[type=text], input[type=email], input[type=number], input:not([type]) {
  font: inherit; color: var(--text); background: var(--field);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; width: 100%;
  transition: border-color .15s ease;
}
input:hover { border-color: var(--text-faint); }
input:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.checkout { display: grid; gap: 22px; }
.checkout fieldset { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px; margin: 0; display: grid; gap: 14px; box-shadow: var(--edge); }
/* the heading sits inside the box, not on its border (owner, 2026-11-11): a floated legend
   is an ordinary grid item, so the fieldset's gap spaces it from the first field */
.checkout legend { float: left; width: 100%; font-family: var(--display); font-weight: 400; font-stretch: 108%; font-size: 1.05rem; padding: 0; margin: 0 0 -4px; }
.checkout label { display: grid; gap: 6px; font-size: .9rem; color: var(--text-soft); }
.row3 { display: grid; grid-template-columns: 1.6fr 1.5fr 1fr; gap: 12px; }
.ship-scope { margin: -4px 0 0; font-size: .86rem; color: var(--text-soft); }
.field-error { margin: 0; color: var(--error); font-size: .88rem; }
/* address confirmation popup (checkout) */
.ack-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(19, 29, 37, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ack-card { width: min(100%, 520px); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 26px; box-shadow: var(--edge), 0 24px 60px var(--shadow); }
.ack-card h2 { margin: 0 0 10px; font-size: 1.4rem; }
.ack-card p { margin: 0 0 14px; color: var(--text-soft); }
.ack-addr { margin: 0 0 18px; padding: 12px 14px; font-style: normal; font-family: var(--mono); font-size: .92rem; line-height: 1.55; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.ack-card .check { border: 1px solid rgba(75, 56, 5, .45); border-radius: 12px; padding: 12px; }
.ack-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ack-actions .btn { flex: 1 1 auto; }
html.has-modal { overflow: hidden; }
small.flag { color: var(--warn); }
/* street address with suggestions (Google, when set up) */
.addr-field { position: relative; display: grid; gap: 6px; }
.addr-field > label { font-size: .9rem; color: var(--text-soft); }
.addr-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 6px 0 0; padding: 6px; list-style: none; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--edge), 0 16px 36px var(--shadow); }
.addr-list li { padding: 9px 10px; border-radius: 8px; cursor: pointer; line-height: 1.35; }
.addr-list li strong { display: block; font-weight: 500; color: var(--text); }
.addr-list li span { display: block; font-size: .84rem; color: var(--text-soft); }
.addr-list li[aria-selected="true"], .addr-list li:hover { background: rgba(19, 51, 60, .08); }
.addr-list .addr-credit { padding: 6px 10px 2px; cursor: default; font-size: .74rem; color: var(--text-soft); text-align: right; }
.addr-list .addr-credit:hover { background: none; }
.attest { border-color: rgba(75, 56, 5, .45) !important; }
.check { grid-template-columns: 22px 1fr !important; align-items: start; color: var(--text) !important; font-size: .95rem !important; }
.check input { width: 17px; height: 17px; margin-top: 4px; accent-color: var(--metal); }
.pay-note { border-left: 2px solid var(--base); padding: 4px 0 4px 16px; color: var(--text-soft); font-size: .92rem; }
.pay-note strong { color: var(--text); font-weight: 500; }
.pay-note p { margin: 0; }
.error { border: 1px solid var(--acid); color: var(--error); border-radius: 12px; padding: 12px 16px; }

/* cart */
.cart-table { margin-bottom: 24px; }
.cart-qty { width: 84px !important; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--acid); }
.cart-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.empty { border: 1px dashed var(--line-strong); border-radius: 16px; padding: 36px; text-align: center; color: var(--text-soft); }

/* prose */
.prose { max-width: calc(760px + 2 * var(--gutter)); padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.prose h2 { margin: 2.2em 0 .6em; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.prose p, .prose li { max-width: 66ch; color: var(--prose); }
.prose strong { color: var(--text); font-weight: 500; }
.prose dl.research dt { font-family: var(--display); font-weight: 500; font-stretch: 105%; margin-top: 18px; }
.prose dl.research dd { margin: 4px 0 0; color: var(--text-soft); }
.prose-fig { margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prose-fig figcaption { margin-top: 16px; color: var(--text-soft); font-size: .9rem; }

/* admin */
.table-wrap { position: relative; overflow-x: auto; max-width: 100%; }
.admin-table { font-size: .85rem; min-width: 900px; }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 64px); padding-bottom: 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
.foot-logo { display: block; height: 40px; width: auto; margin-bottom: 18px; }
.foot-grid > div p { color: var(--text-soft); max-width: 56ch; font-size: .92rem; }
.foot-grid nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: start; }
.foot-grid nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.foot-grid nav a { color: var(--text-soft); text-decoration: none; font-size: .92rem; }
.foot-grid nav a:hover { color: var(--text); }
.foot-fine { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--text-faint); }
.site-foot .foot-fine.foot-ruo { margin-top: 8px; padding-top: 0; border-top: 0; } /* the payment processor's footer disclaimer, under the copyright line */

/* entry agreement popup (src/entry.js): once per browser session */
.gate-open, .gate-open body { overflow: hidden; }
/* touch devices, while the go-to-cart prompt is open: the page behind stays put
   (on <html> only: body as a scroll box of its own would carry the sticky header away) */
html.dialog-open { overflow: hidden; overscroll-behavior: none; }
.gate { position: fixed; inset: 0; z-index: 95; display: grid; overflow-y: auto; padding: 16px; background: rgba(7, 10, 13, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .25s ease; }
.gate.is-leaving { opacity: 0; pointer-events: none; }
.intro-pending .gate { visibility: hidden; } /* the entry screen asks first; site.js lifts this if it doesn't show */
.gate-card { width: 100%; max-width: 520px; margin: auto; padding: 28px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 24px 60px rgba(7, 10, 13, .35), var(--edge); }
.gate-card:focus { outline: none; }
.gate-logo { display: block; width: 112px; height: auto; margin-bottom: 20px; }
.gate-card h2 { margin: 0 0 8px; }
.gate-card > p { margin: 0 0 18px; color: var(--text-soft); }
.agree-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.agree { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .92rem; line-height: 1.5; color: var(--text); cursor: pointer; }
.agree input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--metal); cursor: pointer; }
.agree a { color: var(--metal-text); font-weight: 500; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gate-card.is-waiting [data-gate-enter] { opacity: .74; } /* not yet: dimmer, still readable */
.gate-card > .gate-note { margin: 14px 0 0; font-size: .8rem; color: var(--text-faint); }
@media (max-width: 480px) { .gate-card { padding: 22px 18px; } .gate-actions .btn { flex: 1 1 auto; } }

/* entry screen */
.intro-open, .intro-open body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); transition: opacity .6s ease; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro-stage, .intro-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.intro-static { position: absolute; left: 50%; top: 44%; width: min(80vw, 640px); height: auto; transform: translate(-50%, -50%); }
.intro-cta { position: absolute; left: 0; right: 0; bottom: max(5vh, 28px); display: grid; justify-items: center; gap: 12px; padding: 0 16px; opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.intro-cta.is-ready { opacity: 1; transform: none; pointer-events: auto; }
.intro-enter { font: 600 .95rem var(--body); letter-spacing: .12em; padding: 12px 30px; border-radius: 999px; border: 1px solid var(--metal); background: var(--surface-2); color: var(--heading); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 0 rgba(58, 44, 20, .25), 0 6px 16px rgba(58, 44, 20, .22);  cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.intro-enter:hover { border-color: var(--metal); background: var(--metal); color: var(--metal-ink); text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); }
.intro-fine { margin: 0; font-size: .8rem; font-weight: 500; color: var(--heading); text-shadow: 0 1px 0 rgba(255, 255, 255, .45), 0 -1px 0 rgba(58, 44, 20, .12); text-align: center; max-width: 46ch; }
/* the entry agreement on the entry screen: all three boxes before entering */
.intro-cta { margin: 0; }
.intro-agree { width: min(100%, 560px); padding: 14px 18px 16px; gap: 9px; border: 1px solid rgba(19, 51, 60, .3); border-radius: 14px; background: rgba(210, 207, 199, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 22px rgba(58, 44, 20, .16); }
.intro-agree legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; max-width: none; text-align: left; font-weight: 600; letter-spacing: .02em; }
.intro-agree .agree { font-size: .84rem; line-height: 1.45; font-weight: 500; color: var(--heading); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.intro-cta.is-waiting .intro-enter { opacity: .74; }
.intro-static { object-fit: contain; }

/* today's spotlight compound: 10% off (src/spotlight.js) */
.price-was { font-family: var(--body); font-weight: 400; font-size: .86em; color: var(--text-faint); text-decoration-thickness: 1.5px; margin-right: .2em; }
.tag-spot { color: var(--metal-ink); background: var(--metal); border-color: var(--metal); white-space: normal; }
.cat-buyable .cat-row.is-spotlight { margin: 6px 0; border-bottom: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--metal), 0 8px 22px var(--shadow); }
.cat-buyable .cat-row.is-spotlight:hover { background: var(--surface-2); }
.buy-box.is-spotlight { box-shadow: inset 0 0 0 2px var(--metal), var(--edge); }
.spot-banner { display: grid; gap: 2px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--metal); color: var(--metal-ink); font-size: .9rem; }
.spot-banner strong { font-weight: 600; }
.spot-note { margin-left: 6px; font-size: .78rem; color: var(--metal-text); font-weight: 600; }
.feat-tag-spotlight { color: var(--metal-ink); background: var(--metal); border-color: var(--metal); }
/* every price on the site is bold */
.price { font-family: var(--body); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; } /* Plex Sans: plain zeros and a real semibold (the mono has slashed zeros and no 600 loaded) */
/* quantity fields with up and down arrows (site.js enhanceQty) */
.stepper { position: relative; display: inline-block; }
.stepper input { padding-right: 34px; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btns { position: absolute; top: 3px; right: 3px; bottom: 3px; width: 26px; display: grid; grid-template-rows: 1fr 1fr; gap: 1px; }
.stepper-btns button { display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--metal-text); cursor: pointer; }
.stepper-btns button:hover { background: var(--metal); color: var(--metal-ink); }
.stepper-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .steps li, .steps li + li { padding: 22px 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .steps { border-top: 0; }
}
@media (max-width: 860px) {
  .hero, .product, .block-head, .ruo-panel, .foot-grid { grid-template-columns: 1fr; }
  .ruo-panel h2 { grid-row: auto; }
  .checks { grid-template-columns: 1fr; }
  .buy-box { position: static; }
  /* phones: price, size, stock and Add to cart (or "email me") right under
     the vial, before the sequence and specifications */
  .product { row-gap: 0; }
  .product-main { display: contents; }
  .product-head { order: 0; }
  .buy-box { order: 1; margin: 0 0 clamp(28px, 6vw, 40px); }
  .product-main > .sheet { order: 2; }
  .cat-head { display: none; }
  .cat-row { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 20px 4px; }
  .cat-name { grid-column: 1 / -1; }
  .cat-data::before, .cat-price::before { content: attr(data-k); display: block; font-family: var(--body); font-size: .72rem; color: var(--text-faint); }
  .cat-price { text-align: left; }
  .cat-buyable .cat-row { grid-template-columns: 1fr 1fr; }
  .cat-buy-cell { justify-self: stretch; width: auto; }
  .next-steps { grid-template-columns: 1fr; }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-card .cat-thumb { height: 180px; }
  .rel-card .vial-mini { transform: scale(.46); }
  .rel-card > strong { font-size: 1rem; }
}
@media (max-width: 520px) {
  .cat-struct:not(.cat-blend) { white-space: normal; overflow-wrap: anywhere; } /* the whole structure, not cut off (WCAG 1.4.10) */
  .brand-logo { height: 36px; }
  .site-nav { gap: 2px 18px; font-size: .9rem; }
  .site-head-in { padding-top: 12px; padding-bottom: 12px; }
  .record { padding: 20px 18px 0; }
  .record-data, .spec-list { grid-template-columns: 1fr; }
  .record-data > div:nth-child(even), .spec-list > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 label:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* inputs not covered above */
input[type=password], input[type=tel], input[type=url], input[type=date], input[type=search], textarea, select {
  font: inherit; color: var(--text); background: var(--field);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; width: 100%;
  transition: border-color .15s ease;
}
textarea { resize: vertical; line-height: 1.5; }
input[type=search] { -webkit-appearance: none; appearance: none; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
textarea:focus-visible, select:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-faint); }
.warn { color: var(--warn); }
.flash-warn { margin: 0 0 16px; border: 1px solid rgba(75, 56, 5, .6); border-radius: 12px; padding: 10px 14px; color: var(--warn); }
.flash-warn p { margin: 0; }
.erase { margin-top: 4px; }
.erase summary { cursor: pointer; color: var(--error); }
.erase .hint { margin: 8px 0; }
.erase-guest { margin-top: 20px; }
.panel .hint + .hint { margin-top: 8px; }
.row-delete { margin-top: 6px; font-size: .86rem; }
.row-delete summary { cursor: pointer; color: var(--text-soft); }
.link-danger { color: var(--error); }
.right { text-align: right; }
.ok { color: var(--nonpolar); border: 1px solid rgba(27, 77, 61, .45); border-radius: 12px; padding: 10px 14px; }
.error ul { margin: 0; padding-left: 18px; }
.r-polar { --rc: var(--warn); }

/* per-size lot info on product pages */
.lot { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lot > div { padding: 12px 0; }
.lot > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.lot dt { font-size: .72rem; color: var(--text-faint); margin-bottom: 2px; }
.lot dd { margin: 0; font-family: var(--mono); font-size: .8rem; color: var(--text); overflow-wrap: anywhere; }
.variant.is-out, .variant.is-soon { background: transparent; } /* still selectable: choosing one shows "email me" */
.variant.is-out .variant-price { color: var(--text-soft); } /* the tag says it is out; a struck price read as a sale (2026-10-26) */
.variant small { display: block; font-size: .75rem; color: var(--warn); }
.variant .tier-note { color: var(--accent); font-size: .78rem; margin-top: 2px; }
.tag-out { color: var(--warn); border-color: rgba(75, 56, 5, .55); margin-left: 6px; }
/* a button that can't be used still says why ("Out of stock", "Coming soon"), so it stays readable: a quiet outline, not a faded copy */
.btn[disabled], .btn[disabled]:hover { opacity: 1; cursor: not-allowed; background: rgba(19, 51, 60, .07); border-color: var(--line-strong); color: var(--text-soft); box-shadow: none; text-shadow: none; }

/* sign in / register / account */
.auth { max-width: calc(480px + 2 * var(--gutter)); padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.auth .lede { margin: 0 0 24px; }
.form-card { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-top: 16px; box-shadow: var(--edge); }
.form-card label { display: grid; gap: 6px; font-size: .9rem; color: var(--text-soft); }
.form-card .check { grid-template-columns: 22px 1fr; display: grid; align-items: start; color: var(--text); }
.form-card .check input { width: 17px; height: 17px; margin-top: 4px; accent-color: var(--metal); }
.auth-alt { margin-top: 20px; color: var(--text-soft); font-size: .92rem; }
.account { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.account-side .form-card { margin-top: 0; }
.signout { margin-top: 18px; }

/* admin */
.admin { padding-top: 28px; padding-bottom: clamp(56px, 7vw, 96px); }
.admin-nav { display: flex; gap: 6px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.admin-nav a { padding: 10px 14px; color: var(--text-soft); text-decoration: none; font-size: .92rem; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.admin-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--metal); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-head .page-title { margin: 0; }

/* admin orders: status badges, filters, order page */
.badge { display: inline-block; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: .78rem; line-height: 1.5; white-space: nowrap; }
.st-pending_payment { color: var(--metal-text); }
.st-paid { color: var(--accent); }
.st-shipped { color: var(--base); }
.st-complete { color: var(--nonpolar); }
.st-cancelled { color: var(--acid); }
.order-filter { margin: -4px 0 18px; }
.order-filter a[aria-current="true"] .muted { color: inherit; opacity: .8; }
.orders-table td { vertical-align: top; }
.nowrap { white-space: nowrap; }
.back-link { margin: 0 0 10px; font-size: .88rem; }
.order-head { align-items: flex-end; }
.order-sub { margin: 8px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.order-actions form { margin: 0; }
.order-actions .btn { padding: 10px 18px; font-size: .9rem; }
.order-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; }
.order-steps li { padding: 12px 0 0; border-top: 3px solid var(--line-strong); font-size: .84rem; color: var(--text-faint); }
.order-steps li.done { border-top-color: var(--nonpolar); color: var(--text-soft); }
.order-steps li.now { border-top-color: var(--metal); color: var(--heading); font-weight: 500; }
.order-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.order-main, .order-side { display: grid; gap: 20px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--edge); min-width: 0; }
.panel h2 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 400; }
.kv { display: grid; gap: 0; margin: 0; }
.kv > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv dt { font-size: .82rem; color: var(--text-faint); }
.kv dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.kv-inline { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; margin: 0 0 28px; }
.kv-inline > div { grid-template-columns: 1fr; gap: 2px; padding: 0; border: 0; }
.panel details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.panel details:first-child, .panel h2 + details { border-top: 0; padding-top: 0; margin-top: 0; }
.panel summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.stack-form { display: grid; gap: 12px; margin-top: 12px; }
.stack-form label { display: grid; gap: 6px; font-size: .86rem; color: var(--text-soft); }
.stack-form .btn { justify-self: start; padding: 10px 20px; font-size: .9rem; }
.stack-form input[type=date] { font: inherit; color: var(--text); color-scheme: light; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; width: 100%; }
.stack-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-form { margin: 14px 0 0; }
.inline-form .btn { padding: 10px 18px; font-size: .9rem; }
.history-h { margin: 22px 0 10px; font-size: .9rem; font-weight: 500; color: var(--text-soft); }
.history { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.history li { display: grid; gap: 1px; padding-left: 14px; border-left: 2px solid var(--line-strong); font-size: .9rem; }
.history li span { font-size: .76rem; color: var(--text-faint); }
.history li small { color: var(--text-soft); font-size: .8rem; }
@media (max-width: 960px) { .order-grid { grid-template-columns: 1fr; } .order-side { order: -1; } }
.order-steps small { display: block; color: var(--warn); font-size: .76rem; }
@media (max-width: 520px) {
  .order-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
  .stack-form .row2 { grid-template-columns: 1fr; }
}
.admin-form { display: grid; gap: 22px; margin-top: 8px; }
.admin-form fieldset { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px; margin: 0; display: grid; gap: 14px; min-width: 0; box-shadow: var(--edge); }
.admin-form legend { font-family: var(--display); font-weight: 400; font-stretch: 108%; font-size: 1.05rem; padding: 0 8px; }
.admin-form label { display: grid; gap: 6px; font-size: .9rem; color: var(--text-soft); }
.admin-form .btn-ghost { justify-self: start; padding: 9px 18px; font-size: .88rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { margin: 0; font-size: .86rem; color: var(--text-faint); max-width: 80ch; }
.rowset { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 10px; align-items: start; }
.rowset .link-btn { padding-top: 12px; }
.var-table { width: 100%; border-collapse: collapse; min-width: 1060px; }
.var-table th { text-align: left; font-size: .74rem; font-weight: 400; color: var(--text-faint); padding: 0 6px 8px; }
.var-table td { padding: 4px 6px; vertical-align: middle; }
.var-table input, .var-table select { padding: 9px 10px; font-size: .88rem; }
.var-table td:first-child input:not([type=hidden]) { min-width: 140px; }
.admin-actions { display: flex; align-items: center; gap: 20px; }
.status-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.status-form select { padding: 7px 30px 7px 10px; font-size: .84rem; width: auto; }
.admin .spec td, .admin .spec th { vertical-align: top; }
@media (max-width: 860px) {
  .account { grid-template-columns: 1fr; }
  .grid2, .rowset { grid-template-columns: 1fr; }
  .lot { grid-template-columns: 1fr; }
  .lot > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
.var-table select { min-width: 88px; }

/* Popups that close on a tap outside ("View this item in your cart?" and
   the quantity picker): the dialog element itself covers
   the whole screen, clear, and the box you see is inside it. A tap anywhere
   outside the box then lands on the dialog element (site.js closeOnBackdrop),
   never on ::backdrop, which iPhones don't reliably pass on to the page.
   One finger dragging on the dimmed part moves nothing (site.js holdStill);
   two can still zoom. */
.go-cart, .qp { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; color: var(--text); overflow: hidden; touch-action: pinch-zoom; }
.go-cart[open], .qp[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }

@keyframes confirm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.flying-vial { position: fixed; left: 0; top: 0; width: 40px; z-index: 200; pointer-events: none; will-change: transform; }
.flying-vial svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .go-cart-box { animation: none; } }

/* product page: the vial as it ships, with the product's own label.
   Vial drawn at 9 px per mm; the label is laid out in label pixels
   (1 mm = 3.7795 px, 1 mm bleed) and scaled onto it. */
.vial-stage { width: min(100%, 540px); box-sizing: border-box; margin: 26px 0 0; display: grid; place-items: center; padding: 26px 24px 30px; background: radial-gradient(ellipse 42% 62% at 50% 50%, #FFFFFF, #EEF3F6 78%), #EEF3F6; border: 1px solid #D4CCBC; border-radius: 18px; box-shadow: 0 14px 34px rgba(58, 44, 20, .16); }
.vial { position: relative; width: 153px; height: 350px; }
.vial-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.vial-label { position: absolute; left: 0; top: 124px; width: 153px; height: 198px; overflow: hidden; box-shadow: 0 -0.5px 0 rgba(19, 29, 37, .25), 0 0.5px 0 rgba(19, 29, 37, .25); }
.vial-label-in { position: absolute; left: 2.25px; top: -9px; width: 158.74px; height: 90.71px; transform: scale(2.3813); transform-origin: 0 0; }
/* the label wrapping a cylinder: edges fall into shade, a satin sheen
   across the face (lighter than on the old dark stock, so the bone reads) */
.vial-label::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(23, 18, 10, .5) 0%, rgba(23, 18, 10, .22) 6%, rgba(23, 18, 10, .06) 16%, rgba(23, 18, 10, 0) 24%, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .24) 36%, rgba(255, 255, 255, .08) 43%, rgba(255, 255, 255, 0) 50%, rgba(23, 18, 10, 0) 70%, rgba(23, 18, 10, .1) 82%, rgba(23, 18, 10, .28) 93%, rgba(23, 18, 10, .52) 100%); }

/* the label itself, in label pixels: the site's bone stock and ink */
.lbl { position: relative; width: 158.74px; height: 90.71px; overflow: hidden; background: #B8B2A5; color: #0F151B; font-family: var(--body); line-height: 1; text-align: center; }
.lbl-band { position: absolute; left: 0; right: 0; bottom: 0; height: 13.78px; padding: 0 9px 3.78px 0; background: #131D25; display: flex; align-items: center; -webkit-font-smoothing: antialiased; }
/* under the front panel: the research-use notice, gold on navy like the site's strip */
.lbl-band-ruo { flex: none; width: 58.58px; padding-left: 7.8px; font-size: 4.3px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: #D9B865; white-space: nowrap; }
.lbl-seq { flex: 1; min-width: 0; padding-left: 4px; display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 500; }
.lbl-seq.is-short { flex: none; justify-content: flex-start; gap: 3.4px; } /* a few letters stay together instead of spreading round the vial */
.lbl-seq span { white-space: nowrap; }
.lbl-seq b { font-weight: inherit; }
.lbl-seq i { font-style: normal; color: #BFCAD2; } /* peptide shorthand around the letters: Ac-, -NH₂, (MPA), ·Cu(II) */
.lbl-band-text { flex: 1; min-width: 0; padding-left: 4px; overflow: hidden; font-family: var(--mono); line-height: 1.7; letter-spacing: .04em; color: #A8DDE4; white-space: nowrap; text-align: left; }
.lbl-end, .lbl-line { position: absolute; display: block; width: .8px; background: var(--lbl-div); } /* the sequence-colored divider, set once per label (--lbl-div) */
.lbl-end { top: 7.38px; bottom: 16.98px; }
.lbl.is-print .lbl-end > svg, .lbl.is-print .lbl-line > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* print: the divider as solid shapes, not a gradient */
.lbl-end-l { left: 7.2px; } .lbl-end-r { right: 7.6px; } /* about 1 mm inside the trim; 7.2 not 7.6 on the left, where a .8 px line at 1:1 can round away to nothing */
.lbl-line { top: 3.6px; bottom: 3.2px; }
.lbl-panels { position: absolute; left: 3.78px; top: 3.78px; width: 151.18px; height: 73.15px; display: grid; grid-template-columns: 54.8px 54.8px 41.57px; }
.lbl-front { min-width: 0; padding: 3.8px 2.4px 2px 6.6px; /* top: the logo sits 1 mm inside the trim */ display: flex; flex-direction: column; align-items: center; }
.lbl-front > * { flex-shrink: 0; }
.lbl-logo { display: block; width: 48px; height: auto; margin-bottom: 2.2px; }
.lbl-id { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 1.3px; }
.lbl-name span { white-space: nowrap; }
.lbl-name { font-family: var(--display); font-weight: 400; font-stretch: 104%; line-height: 1.05; letter-spacing: -.01em; color: #0A1117; text-wrap: balance; }
.lbl-size { display: flex; flex-direction: column; align-items: center; gap: 2px; } /* room for the size's descenders (the g of mg) above the line under it */
.lbl-size span { font-family: var(--mono); font-weight: 500; font-size: 8px; color: #13333C; }
.lbl-size small { font-size: 4.1px; line-height: 1.2; color: #273038; }
/* the chain strip: one segment per residue, and its length */
.lbl-chain { width: 100%; margin-top: 1.9px; display: flex; align-items: center; gap: 1.4px; }
.lbl-strip { flex: 1; display: flex; gap: .35px; height: 1.7px; }
.lbl-strip.is-dense { gap: 0; }
.lbl-strip i { flex: 1 1 0; border-radius: .2px; }
.lbl-chain span { font-family: var(--mono); font-weight: 500; font-size: 3.8px; line-height: 1; color: #273038; white-space: nowrap; }
/* the rest of the research-use notice, just above the band's "For research use only" */
.lbl-ruo { width: 100%; margin-top: 1.9px; font-size: 3.9px; font-weight: 500; line-height: 1.2; color: #4B3805; }
.lbl-data { position: relative; min-width: 0; padding: 3.6px 3px 3.2px 3.4px; display: flex; flex-direction: column; justify-content: space-around; text-align: left; }
.lbl-rows { display: grid; grid-template-columns: 14.5px minmax(0, 1fr); column-gap: 1.6px; row-gap: 1.1px; align-items: baseline; }
.lbl-rows span { font-size: 3.9px; line-height: 1.2; color: #273038; white-space: nowrap; }
.lbl-rows .lbl-v { font-family: var(--mono); font-size: 4.5px; color: #0F151B; }
.lbl-rows.is-parts { grid-template-columns: auto minmax(0, 1fr); } /* a blend: each component and its amount */
.lbl-storage { font-size: 4.1px; line-height: 1.25; color: #273038; }
.lbl-qr { position: relative; min-width: 0; }
/* the printed label's last panel: a QR code to this size's certificate page, then Lot and Date
   (light fields, printed when known or left to write in). Clear of the end divider on the right. */
.lbl-qr.is-print { padding: 3.8px 6.8px 1.6px 2.9px; display: flex; flex-direction: column; }
.lbl-qr-code { aspect-ratio: 1; border-radius: .8px; background: #F4F1EA; overflow: hidden; }
.lbl-qr-code svg { display: block; width: 100%; height: 100%; }
.lbl-qr-cap { margin-top: 1.4px; font-size: 3.9px; font-weight: 500; line-height: 1.1; color: #273038; white-space: nowrap; }
.lbl-fields { margin-top: auto; display: flex; flex-direction: column; gap: 1.8px; }
.lbl-field { height: 11.6px; padding: 1.1px 1.4px 1.3px; border-radius: .8px; background: #F4F1EA; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.lbl-field span { font-size: 3.9px; font-weight: 600; line-height: 1; letter-spacing: .02em; color: #273038; }
.lbl-field b { font-family: var(--mono); font-weight: 500; font-size: 4.6px; line-height: 1; color: #0F151B; white-space: nowrap; }

@media (max-width: 640px) {
  .vial-stage { padding: 24px 20px 28px; }
}


/* ---- added 2026-10-07: QA fixes and new features ---- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--metal); color: var(--metal-ink); text-decoration: none; }
.skip-link:focus { top: 12px; }
.store-block { font-style: normal; font-size: .9rem; line-height: 1.6; color: var(--text-soft); margin: 12px 0 0; }
.store-block strong { color: var(--text); font-weight: 500; }
h1, .page-title, .cat-title strong, .product-head h1, .admin td, .rel-card strong { overflow-wrap: anywhere; }

/* catalog: today's spotlight, at the top */

/* product page */
.cart-quote { margin: 16px 0 0; font-size: .9rem; }
.cart-quote span { color: var(--text-soft); }
.quote-cart { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface, transparent); font-size: .92rem; }
@media (max-width: 640px) { .cart-quote span { display: block; } }
.quote-note { margin: 10px 0 0; font-size: .86rem; color: var(--text-soft); }

/* cart and checkout */
.cart-notice { border: 1px solid rgba(75, 56, 5, .45); border-radius: 12px; padding: 10px 14px; color: var(--warn); }
.why { display: inline-block; color: var(--accent); font-size: .78rem; }
.csv-links { margin: -6px 0 10px; color: var(--text-soft); font-size: .86rem; }
.csv-links span { margin-right: 4px; }
.cat-csv { margin: 10px 0 0; }
.cat-csv span { margin: 0; }
.cart-cat + br { display: none; }
.cart-cat { display: block; margin: 2px 0 4px; color: var(--text-faint); font: 500 .74rem/1.35 var(--mono); letter-spacing: .02em; }
.summary-edit { margin: -8px 0 0; font-size: .88rem; }
.checkout textarea { font: inherit; }
.pay-note { margin-top: 18px; }
.confirm-note { margin: 12px 0 0; font-size: .86rem; color: var(--warn); }
/* form fields: one size everywhere; 16 px on phones so iPhones don't zoom in */
.checkout input, .checkout select, .checkout textarea, .form-card input, .form-card select, .stack-form input, .stack-form select, .stack-form textarea, .addr-field input { font-size: .95rem; }
/* iPhone/iPad Safari zooms the page on focusing a field under 16px: phones in either orientation and tablets */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1100px) {
  input, select, textarea, .checkout input, .checkout select, .checkout textarea, .form-card input, .stack-form input, .stack-form select, .addr-field input, .cat-size { font-size: 16px !important; }
}
/* quantity arrows: big enough to tap */
@media (pointer: coarse) {
  .stepper input { padding-right: 46px; min-height: 52px; }
  .stepper-btns { width: 38px; }
  .stepper-btns button { min-height: 24px; }
  .stepper input { -webkit-touch-callout: none; } /* press and hold opens the picker, not the copy menu */
}
/* press and hold a quantity (phones): the field rings while the hold counts down */
.stepper.is-holding input { animation: qp-hold .42s linear forwards; }
@keyframes qp-hold { from { box-shadow: 0 0 0 0 rgba(19, 51, 60, .0); } to { box-shadow: 0 0 0 4px rgba(19, 51, 60, .35); border-color: var(--metal); } }
.qty > span { display: grid; gap: 2px; }
.qty-hint { font-size: .74rem; color: var(--text-faint); }
.qty-tip { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--metal); border-radius: 4px; background: rgba(19, 51, 60, .06); font-size: .86rem; color: var(--text-soft); }
html.qp-lock { overflow: hidden; }

/* the quantity picker: a sheet from the bottom with a list that snaps to a band */
.qp::backdrop { background: rgba(19, 29, 37, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.qp[open] { padding: 0; justify-content: flex-end; } /* (the dialog covers the screen: see the popups above) */
.qp-sheet { width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--surface-2); box-shadow: 0 -12px 40px var(--shadow); animation: qp-in .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes qp-in { from { transform: translateY(40%); opacity: 0; } }
@media (min-width: 640px) { .qp[open] { padding: 16px; justify-content: center; } .qp-sheet { border-bottom: 1px solid var(--line-strong); border-radius: 22px; } }
.qp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.qp-head h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
.qp-link { min-height: 44px; padding: 0 12px; border: 0; background: transparent; font: 500 1rem var(--body); color: var(--metal-text); cursor: pointer; justify-self: start; border-radius: 10px; }
.qp-done { justify-self: end; font-weight: 600; }
.qp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qp-sub { margin: 12px 20px 0; text-align: center; font-size: .9rem; color: var(--text-soft); }
.qp-wheel { position: relative; height: 240px; margin: 8px 0 4px; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.qp-band { position: absolute; left: 20px; right: 20px; top: 96px; height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(19, 51, 60, .08); pointer-events: none; }
.qp-list { position: relative; height: 100%; margin: 0; padding: 96px 0; box-sizing: border-box; list-style: none; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
.qp-list::-webkit-scrollbar { display: none; }
.qp-list li { height: 48px; display: grid; place-items: center; scroll-snap-align: center; font: 400 1.4rem var(--body); font-variant-numeric: tabular-nums lining-nums; color: var(--text-soft); cursor: pointer; user-select: none; -webkit-user-select: none; }
.qp-list li.is-on { color: var(--heading); font-weight: 600; }
.qp-wheel:has(.qp-list:focus-visible) .qp-band { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.qp-total { margin: 4px 20px 0; min-height: 1.5em; text-align: center; font-size: 1rem; color: var(--text); }
.qp-total small { color: var(--text-soft); font-size: .8rem; }
.qp-ship { margin: 2px 20px 0; text-align: center; font-size: .84rem; color: var(--text-soft); }
.qp-ship.is-free { color: var(--metal-text); font-weight: 600; }
.qp-note { margin: 6px 20px 0; text-align: center; font-size: .84rem; color: var(--text-soft); }
.qp-add { display: flex; width: calc(100% - 40px); margin: 14px 20px 0; }
@media (prefers-reduced-motion: reduce) { .qp-sheet, .stepper.is-holding input { animation: none; } .stepper.is-holding input { box-shadow: 0 0 0 4px rgba(19, 51, 60, .35); } }

/* order page */
.order-page .back-link { margin-bottom: 6px; }
.order-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: -6px 0 14px; }
.order-kv { margin: 0 0 20px; }
.order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.order-meta address, .order-meta p { font-style: normal; margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.order-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
@media (max-width: 560px) { .order-meta { grid-template-columns: 1fr; } }

/* account */
.account-main { min-width: 0; display: grid; gap: 14px; align-content: start; }
.account-side { display: grid; gap: 16px; align-content: start; }
.account-side .panel h2 { font-size: 1.02rem; }
.account-orders td, .account-lots td, .account-lots th { vertical-align: top; }
#lots { margin-top: 36px; }
.account-lots { margin-bottom: 36px; }
.track-link a, .order-table a { overflow-wrap: anywhere; word-break: break-all; }
.addr-saved, .team-list, .session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.addr-saved li, .team-list li, .session-list li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--line); }
.addr-saved li:first-child, .team-list li:first-child, .session-list li:first-child { border-top: 0; padding-top: 0; }
.addr-saved address { font-style: normal; font-size: .9rem; line-height: 1.5; }
.session-list li { flex-direction: column; gap: 2px; }
.inline-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-actions form { margin: 0; }
.invite p { margin: 0 0 12px; }
.tag-ok { color: var(--nonpolar); border-color: rgba(27, 77, 61, .5); }
.form-alt { justify-self: center; font-size: .9rem; }

/* contact */
.contact-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 96px); }
.contact-page .store-block { font-size: 1rem; margin: 18px 0; }
@media (max-width: 860px) { .contact-page { grid-template-columns: 1fr; } }
.quote-line { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) auto; }

/* admin */
.admin-nav { flex-wrap: wrap; row-gap: 0; }
.order-search { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.order-search input[type=search], .order-search input:not([type]) { flex: 1 1 260px; width: auto; }
.order-search select { width: auto; }
.order-search input[type=search] { font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 20px; }
.tile { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--edge); }
.tile-k { font-size: .8rem; color: var(--text-faint); }
.tile strong { font-size: 1.5rem; font-weight: 500; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 0 0 20px; }
.dash-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; font-size: .9rem; padding-top: 8px; border-top: 1px solid var(--line); }
.dash-list li:first-child { border-top: 0; padding-top: 0; }
.dash-errors form { margin-top: 12px; }
.err-table td { vertical-align: top; font-size: .88rem; overflow-wrap: anywhere; }
.err-table td small { display: block; margin-top: 2px; }
@media (max-width: 760px) { .err-table thead { display: none; } .err-table tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); } .err-table td { border: 0; padding: 0; } .err-table td:nth-child(3), .err-table td:nth-child(4) { grid-column: 1 / -1; } }
.dash-list li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-gaps { border-color: rgba(75, 56, 5, .45); margin-bottom: 20px; }
.setup-gaps ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: .9rem; }
.bar { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--metal); border-radius: 999px; }
.badge-flag { color: var(--warn); border-color: rgba(75, 56, 5, .6); }
.badge-hold { color: var(--acid); }
.risk-panel { margin: 0 0 20px; border-color: rgba(75, 56, 5, .45); }
.flag-list { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.btn-danger { color: var(--acid) !important; border-color: rgba(118, 45, 31, .5) !important; }
.var-list { display: grid; gap: 12px; }
.var-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; background: var(--bg); }
.var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.var-grid .span2 { grid-column: span 2; }
.var-grid label { font-size: .82rem; }
.var-grid input, .var-grid select { padding: 9px 10px; }
.var-grid input[type=file] { padding: 6px 0; border: 0; background: none; }
.var-card > .link-btn { justify-self: start; }
@media (max-width: 520px) { .var-grid { grid-template-columns: 1fr 1fr; } .var-grid .span2 { grid-column: 1 / -1; } }
.stock-panel, .spot-panel { margin: 20px 0; }
.lot-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.lot-fields legend { font-size: .86rem; color: var(--text-soft); padding: 0; margin-bottom: 6px; }
.codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.key { font-size: 1.1rem; letter-spacing: .06em; }
.setup-steps { display: grid; gap: 10px; padding-left: 20px; }
.copyable { -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
.narrow-card { max-width: 520px; }
.muted-row td { color: var(--text-faint); }
.export-form .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stack-form .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin .products-table { min-width: 960px; }
/* admin lists become cards on phones */
@media (max-width: 640px) {
  .admin-table, .admin .products-table { min-width: 0 !important; }
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; background: var(--surface); }
  .admin-table td { border: 0 !important; padding: 4px 0 !important; }
  .admin-table td[data-k]:not([data-k=""])::before { content: attr(data-k); display: block; font-size: .72rem; color: var(--text-faint); }
  .export-form .row3, .stack-form .row3, .row3 { grid-template-columns: 1fr; }
  .dash-list li { grid-template-columns: auto minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .bar-row .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- stock status (src/availability.js): coming soon, out of stock, low,
   and new stock in the last 24 hours. Static highlights only: the navy and
   gold of the research-use strip mark new stock. ---- */
.cat-name strong .tag, .rel-price .tag, .record-foot .tag { margin-left: 8px; vertical-align: 1px; }
.variant .tag { margin-left: 6px; }
.tag-fresh { background: var(--navy); border-color: var(--navy); color: #D9B865; font-weight: 600; letter-spacing: .01em; }
.tag-soon { color: var(--accent); border-color: rgba(10, 66, 73, .55); background: rgba(10, 66, 73, .06); }
.tag-low { color: var(--warn); border-color: rgba(75, 56, 5, .55); font-weight: 600; }
.cat-row.is-fresh { background: linear-gradient(90deg, rgba(217, 184, 101, .26), rgba(217, 184, 101, 0) 65%); box-shadow: inset 3px 0 0 var(--navy); }
.cat-buyable .cat-row.is-fresh:hover { background: linear-gradient(90deg, rgba(217, 184, 101, .34), rgba(217, 184, 101, .04) 65%); }
.cat-row.is-unavailable .thumb-stage { filter: saturate(.55); opacity: .82; }
.cat-row.is-unavailable .cat-price { color: var(--text-soft); }
.cat-stock { display: block; margin-top: 2px; font: 500 .76rem/1.3 var(--body); color: var(--text-soft); white-space: nowrap; }
.cat-stock.is-low { color: var(--warn); font-weight: 600; }
.cat-notify { min-width: 0; }

/* "Just in": a navy band like the research-use strip, with gold for new stock */
.just-in { margin: 0 0 18px; padding: 14px 16px 16px; border-radius: 16px; background: var(--navy); color: #E9E4D8; }
.just-in-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font: 500 .92rem var(--body); color: #E9E4D8; }
.just-in-h .tag { margin: 0; background: #D9B865; border-color: #D9B865; color: var(--navy); }
.just-in-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.just-in-list a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(217, 184, 101, .35); color: #E9E4D8; text-decoration: none; background: rgba(255, 255, 255, .03); }
.just-in-list a:hover, .just-in-list a:focus-visible { border-color: #D9B865; background: rgba(217, 184, 101, .08); }
.just-in-list strong { color: #F5F1E8; font-weight: 600; }
.just-in-list span { font-size: .8rem; color: #D9B865; }
.just-in-list .just-in-price { color: #C9C3B6; }
.just-in-list .price { color: #F5F1E8; }
.just-in-list .price-was { color: #A9A397; }
.hero + .wrap .just-in { margin-top: 8px; }

/* product page: banners, the stock note and the "email me" box */
.fresh-banner, .soon-banner, .out-banner { display: grid; gap: 2px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; font-size: .9rem; }
.fresh-banner { background: var(--navy); color: #E9E4D8; }
.fresh-banner strong { color: #D9B865; font-weight: 600; }
.soon-banner { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--text); }
.soon-banner strong { color: var(--accent); font-weight: 600; }
.out-banner { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px rgba(75, 56, 5, .6); color: var(--text); }
.out-banner strong { color: var(--warn); font-weight: 600; }
.buy-box.is-fresh { box-shadow: inset 0 0 0 2px var(--navy), var(--edge); }
.variant.is-fresh { box-shadow: inset 3px 0 0 var(--navy); }
.stock-note { margin: 8px 0 0; font-size: .86rem; color: var(--text-soft); text-align: center; }
.stock-note.is-low { color: var(--warn); font-weight: 600; }
.notify { margin: 0 0 16px; padding: 14px 16px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--accent), var(--edge); }
.notify h2 { margin: 0 0 4px; font: 400 1.1rem var(--display); font-stretch: 108%; color: var(--heading); }
.notify-sub { margin: 0 0 10px; font-size: .86rem; color: var(--text-soft); }
.notify-form { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-form input[type=email] { flex: 1 1 180px; min-width: 0; }
.notify-form .btn { flex: 0 0 auto; }
.notify-count { margin: 10px 0 0; font-size: .82rem; color: var(--accent); font-weight: 500; }
.notify .ok, .notify .error { margin: 0 0 10px; }

/* cart: lines that can't be bought as they stand */
.cart-avail { display: block; margin-top: 4px; color: var(--warn); font-weight: 600; font-size: .8rem; }
@media (max-width: 640px) {
  .notify-form .btn { width: 100%; }
}
@media (pointer: coarse) { .notify-form input[type=email] { font-size: 16px; } }

/* phones: the smallest labels one step up so they read at arm's length */
@media (max-width: 640px) {
  .tag, .feat-tag { font-size: .76rem; }
  .rel-why, .tip-title span, .tip-foot, .qty-hint, .addr-list .addr-credit { font-size: .78rem; }
  .lot dt, .cat-data::before, .cat-price::before, .admin-table td[data-k]:not([data-k=""])::before, .var-table th { font-size: .76rem; }
  .res-n { font-size: .7rem; }
  .tile-n { font-size: .72rem; }
}

/* ---- header: search, cart, and the menu on phones ---- */
.site-nav { margin-left: auto; }
.cart-link { color: var(--text-soft); text-decoration: none; font-size: .93rem; padding: 6px 0; border-bottom: 1px solid transparent; }
.cart-link:hover { color: var(--text); }
.cart-link[aria-current="page"] { color: var(--text); border-bottom-color: var(--metal); }
.head-search, .menu-search { position: relative; }
.head-search { width: 200px; }
.head-search input, .menu-search input { padding: 8px 38px 8px 14px; border-radius: 999px; font-size: .88rem; }
.head-search button, .menu-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); cursor: pointer; }
.head-search button:hover, .menu-search button:hover { color: var(--text); background: rgba(19, 51, 60, .08); }
.menu { display: none; position: relative; }
.menu-btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: .9rem; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.menu-btn::-webkit-details-marker { display: none; }
.menu[open] > .menu-btn { background: var(--metal); border-color: var(--metal); color: var(--metal-ink); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(330px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-2); box-shadow: 0 18px 40px var(--shadow); z-index: 40; }
.menu-search { margin-bottom: 6px; }
.menu-search input { padding-top: 11px; padding-bottom: 11px; font-size: 16px; }
.menu-panel nav { display: grid; }
.menu-panel nav a { display: block; padding: 12px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 1rem; }
.menu-panel nav a:hover, .menu-panel nav a[aria-current="page"] { background: rgba(19, 51, 60, .08); }
.menu-panel .nav-out button { display: block; width: 100%; text-align: left; padding: 12px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; font-size: 1rem; color: var(--text); }
.menu-panel .nav-out button:hover { background: rgba(19, 51, 60, .08); }
@media (min-width: 761px) and (max-width: 1060px) { .head-search { display: none; } }
@media (max-width: 760px) {
  .site-head-in { flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .brand { margin-right: auto; }
  .brand-logo { height: 32px; }
  .site-nav, .head-search { display: none; }
  .menu { display: block; }
  .cart-link { min-height: 40px; padding: 0 6px; border: 0; }
  /* the research-use strip in two short lines rather than two tall ones */
  .ruo-strip { padding: 6px var(--gutter); font-size: .76rem; line-height: 1.3; text-wrap: balance; }
  /* slimmer once scrolled (site.js): the header keeps its height in the page,
     so nothing below moves; what it gives up is clipped away (taps go
     through), and it slides up while scrolling down */
  .site-head { height: 57px; transition: transform .24s ease, clip-path .2s ease; }
  .site-head-in { height: 56px; transition: padding .2s ease; }
  .site-head .brand-logo { transition: height .2s ease; }
  .site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transition: bottom .2s ease; }
  .head-small .site-head { border-bottom-color: transparent; clip-path: inset(0 0 12px 0); }
  .head-small .site-head::after { bottom: 11px; }
  .head-small .site-head-in { height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .head-small .brand-logo { height: 26px; }
  .head-away .site-head { transform: translateY(-100%); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-head, .site-head-in, .site-head .brand-logo, .site-head::after { transition: none; }
}

/* ---- today's spotlight, a slim bar under the header ---- */
.deal-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px var(--gutter); background: var(--metal); color: var(--metal-ink); font-size: .88rem; line-height: 1.35; text-decoration: none; }
.deal-bar:hover { background: var(--metal-hover); color: var(--metal-ink); }
.deal-k { flex: none; padding: 2px 9px; border-radius: 999px; background: #D9B865; color: var(--navy); font-size: .76rem; font-weight: 600; }
.deal-t strong { font-weight: 600; }
.deal-go { flex: none; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .deal-bar { justify-content: flex-start; font-size: .84rem; } .deal-until { display: none; } .deal-go { margin-left: auto; } }

/* ---- catalog search, sort menu ---- */
.cat-search { position: relative; display: flex; gap: 8px; margin: 0 0 18px; }
.cat-search input { flex: 1; min-width: 0; padding: 13px 16px 13px 44px; border-radius: 999px; font-size: 1rem; }
.cat-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); line-height: 0; color: var(--text-soft); pointer-events: none; }
.cat-search .btn { flex: none; padding: 11px 24px; }
.cat-empty { padding: 26px 4px; border-top: 1px solid var(--line); color: var(--text-soft); }
.cat-empty p { margin: 0 0 8px; }
.cat-empty strong { color: var(--text); font-weight: 600; }
.sort-select { display: none; align-items: center; gap: 8px; }
.sort-select label { font-size: .88rem; color: var(--text-soft); white-space: nowrap; }
.sort-select select { width: auto; min-width: 0; padding: 9px 36px 9px 12px; font-size: 16px; }
.sort-select .btn { padding: 8px 14px; }
@media (max-width: 760px) {
  .cat-tools { gap: 10px; margin-bottom: 12px; }
  .cat-type { max-width: 100%; }
  .cat-type ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cat-type ul::-webkit-scrollbar { display: none; }
  .cat-type a { white-space: nowrap; }
  .sort-pills { display: none; }
  .sort-select { display: flex; }
  .page-head .lede { font-size: 1rem; }
}
@media (max-width: 640px) { .cat-search .btn { display: none; } }

/* ---- "Just in": a strip you swipe on phones ---- */
@media (max-width: 640px) {
  .just-in { padding: 12px 0 12px 14px; }
  .just-in-h { padding-right: 14px; margin-bottom: 8px; font-size: .86rem; }
  .just-in-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: 14px; scrollbar-width: none; }
  .just-in-list::-webkit-scrollbar { display: none; }
  .just-in-list li { flex: 0 0 min(72%, 250px); scroll-snap-align: start; }
}

/* ---- product page: price and stock under the name; quick-add bar on phones ---- */
.prod-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 12px 0 0; font-size: .95rem; color: var(--text-soft); }
.prod-sum-stock::before { content: "·"; margin: 0 10px; color: var(--text-faint); font-weight: 400; }
.prod-sum-ship { flex-basis: 100%; margin-top: 2px; font-size: .86rem; }
.prod-sum-price .price { font-size: 1.15rem; color: var(--text); }
.prod-sum-deal { margin-left: 6px; font-size: .8rem; font-weight: 600; color: var(--metal-text); }
.prod-sum-stock { font-weight: 600; }
.prod-sum-stock.is-in { color: var(--nonpolar); }
.prod-sum-stock.is-out, .prod-sum-stock.is-soon { color: var(--warn); }
/* phones: price and stock don't fit one line, so the stock word takes its own line without the dot (it used to wrap with a stray "·") */
@media (max-width: 520px) { .prod-sum-stock { flex-basis: 100%; } .prod-sum-stock::before { content: none; } }
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); background: rgba(210, 207, 199, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -8px 24px var(--shadow); }
.buy-bar-info { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 2px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.buy-bar-size { overflow: hidden; font-size: .84rem; color: var(--text-soft); white-space: nowrap; text-overflow: ellipsis; }
.buy-bar-price { font-size: 1.05rem; }
.buy-bar .btn { flex: none; padding: 12px 22px; }
body.has-buy-bar { padding-bottom: 78px; }
@media (min-width: 861px) { .buy-bar { display: none !important; } }

/* ---- cart: things to add for free shipping ---- */
.suggest { margin: 4px 0 20px; padding: 14px 16px 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.suggest h2 { margin: 0 0 4px; font: 600 .95rem var(--body); letter-spacing: 0; color: var(--text); }
.suggest ul { list-style: none; margin: 0; padding: 0; }
.suggest li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.suggest li:first-child { border-top: 0; }
.suggest-name { display: grid; color: var(--text); text-decoration: none; }
.suggest-name strong { font-weight: 600; }
.suggest-name small { font-size: .86rem; color: var(--text-soft); }
.suggest-name small .price { color: var(--text); }
.suggest-note { font-size: .8rem; font-weight: 600; color: var(--nonpolar); }
.suggest .btn { padding: 8px 18px; font-size: .88rem; }

/* ---- page not found ---- */
.nf-h { margin: 28px 0 10px; font: 600 1rem var(--body); letter-spacing: 0; color: var(--text); }
.nf-list { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.nf-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.nf-list a:hover strong { text-decoration: underline; }
.nf-list a > span:not(.nf-price) { grid-column: 1; font-size: .86rem; color: var(--text-soft); }
.nf-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.nf-search { margin: 24px 0 8px; }

/* ---- footer: the new compounds and restocks list ---- */
.foot-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 430px); align-items: center; gap: 14px 40px; margin: 0 0 32px; padding: 0 0 28px; border-bottom: 1px solid var(--line); }
.foot-sub h2 { margin: 0 0 4px; font: 600 1rem var(--body); letter-spacing: 0; color: var(--text); }
.foot-sub p { margin: 0; max-width: 60ch; font-size: .9rem; color: var(--text-soft); }
.foot-sub-form { display: flex; gap: 8px; }
.foot-sub-form input { flex: 1; min-width: 0; }
.foot-sub-form .btn { flex: none; padding: 11px 20px; }
@media (max-width: 760px) { .foot-sub { grid-template-columns: 1fr; } }

/* ---- order placed: what happens next, and keeping it in an account ---- */
.next-steps-order { margin: 28px 0 0; }
.order-steps { list-style: none; counter-reset: os; display: grid; gap: 14px; margin: 12px 0 0; padding: 0; }
.order-steps li { counter-increment: os; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; }
.order-steps li::before { content: counter(os); grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--metal); color: var(--metal-ink); font: 600 .8rem var(--mono); }
.order-steps strong { font-weight: 600; }
.order-steps span { font-size: .92rem; color: var(--text-soft); }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
/* the sticky header shouldn't cover what a jump lands on */
.buy-box, .notify, :target { scroll-margin-top: 76px; }
@media (max-width: 640px) { .cat-lede { display: none; } } /* phones: the products come first (the research-use strip is above) */

/* ---- quick add: "+1" buttons and the panel that confirms them ---- */
.quick-one { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-variant-numeric: tabular-nums; }
.quick-one svg { flex: none; }
.buy-actions { display: flex; gap: 10px; }
.buy-actions > .btn-primary { flex: 1 1 auto; width: auto; }
.quick-wide { flex: none; padding: 13px 18px; white-space: nowrap; }
.incart-note { margin: 10px 0 0; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }
.incart-added { display: block; color: var(--metal-text); font-weight: 600; }
/* product page: the notes under the buttons line up with them (left), stock first, then the cart line */
.buy-box .stock-note { margin: 10px 0 0; line-height: 1.45; text-align: left; }
.buy-box .stock-note:not([hidden]) + .incart-note { margin-top: 4px; }
.cat-buy .cat-quick { flex: none; min-width: 44px; padding: 9px 12px; font-size: .88rem; }
.bb-quick { flex: none; min-width: 48px; padding: 12px 14px !important; }
.rel-item { position: relative; }
.rel-quick { position: absolute; right: 12px; bottom: 14px; z-index: 2; min-width: 44px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 .86rem var(--body); cursor: pointer; box-shadow: var(--edge); }
.rel-quick:hover { background: var(--metal); border-color: var(--metal); color: var(--metal-ink); }
.rel-item .rel-price { padding-right: 56px; }
.qa-toast { position: fixed; z-index: 60; right: 24px; top: 92px; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--text); box-shadow: 0 18px 44px rgba(40, 32, 18, .28); opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; } /* fades away over half a second */
.qa-toast.is-in { opacity: 1; transform: none; transition-duration: .2s, .25s; transition-timing-function: ease, cubic-bezier(.16, 1, .3, 1); }
.qa-line { display: grid; gap: 2px; margin: -4px -6px; padding: 4px 6px; border-radius: 8px; color: inherit; font-size: .92rem; line-height: 1.35; text-decoration: none; }
.qa-line strong { font-weight: 600; }
.qa-line span { font-size: .86rem; color: var(--text-soft); }
.qa-line .qa-limit { color: var(--warn); font-weight: 600; }
.qa-line:hover { background: rgba(19, 51, 60, .07); }
.qa-line:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none), (pointer: coarse) { .qa-toast { cursor: pointer; } .qa-toast .qa-actions, .qa-toast .qa-x { cursor: auto; } }
.qa-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; gap: 10px; align-items: start; }
.qa-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--metal); color: var(--metal-ink); }
.qa-text { display: grid; gap: 2px; margin: 0; font-size: .92rem; line-height: 1.35; }
.qa-text strong { font-weight: 600; }
.qa-text span { font-size: .86rem; color: var(--text-soft); }
.qa-text .qa-limit { color: var(--warn); font-weight: 600; }
.qa-x { width: 32px; height: 32px; margin: -6px -8px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.qa-x:hover { background: rgba(19, 51, 60, .08); color: var(--text); }
.qa-sum { margin: 10px 0 0; font-size: .9rem; }
.qa-ship { display: grid; gap: 6px; margin: 8px 0 0; font-size: .84rem; color: var(--text-soft); }
.qa-ship.is-free { color: var(--nonpolar); font-weight: 600; }
.qa-bar { display: block; height: 6px; border-radius: 999px; background: rgba(19, 51, 60, .12); overflow: hidden; }
.qa-bar i { display: block; height: 100%; border-radius: inherit; background: var(--metal); transition: width .4s ease; }
.qa-ship.is-free .qa-bar i { background: var(--nonpolar); }
.qa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qa-actions .btn { flex: 1 1 auto; padding: 9px 14px; font-size: .88rem; }
@media (max-width: 760px) {
  .qa-toast { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; transform: translateY(8px); }
  body.has-buy-bar .qa-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .quick-wide { padding: 13px 16px; }
}
@media (max-width: 360px) { .quick-wide span { display: none; } .quick-wide::after { content: "1"; } }
@media (prefers-reduced-motion: reduce) { .qa-toast, .qa-bar i { transition: none; } }

/* ---- phones: "View this item in your cart?" from a tap on the panel ---- */
.go-cart::backdrop { background: rgba(19, 29, 37, .45); }
.go-cart-box { width: min(360px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 22px 20px 20px; text-align: center; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface-2); box-shadow: var(--edge); animation: confirm-in .22s cubic-bezier(.16, 1, .3, 1); } /* (the dialog covers the screen: see the popups above) */
.go-cart h2 { margin: 0 0 2px; font-size: 1.3rem; }
/* the item, as the panel shows it */
.go-cart-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.go-cart-item[hidden] { display: none; }
.go-cart-item .qa-text { margin: 0; color: var(--text); }
.go-cart-sum { margin: 0 0 6px; font-size: .84rem; color: var(--text-soft); }
.go-cart .btn { min-height: 52px; font-size: 1rem; }

/* ---- desktop: the cart summary under Cart ---- */
.site-head-in { position: relative; }
.mini-cart { position: absolute; top: calc(100% - 6px); right: var(--gutter); z-index: 45; width: 380px; padding: 14px 16px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--text); box-shadow: 0 18px 44px rgba(40, 32, 18, .28); opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .2s ease; }
.mini-cart.is-in { opacity: 1; transform: none; }
.mini-cart::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* the gap under Cart still counts as on it */
.mc-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: .92rem; }
.mc-head span { color: var(--text-soft); font-size: .86rem; }
.mc-list { list-style: none; margin: 0 -6px; padding: 0; max-height: min(320px, 50vh); overflow-y: auto; border-top: 1px solid var(--line); }
.mc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 9px 6px; border-bottom: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; }
.mc-line:hover, .mc-line:focus-visible { background: rgba(19, 51, 60, .07); }
.mc-line:hover .mc-name { text-decoration: underline; text-underline-offset: 3px; }
.mc-name { font-weight: 600; font-size: .92rem; }
.mc-size { grid-column: 1; font-size: .84rem; color: var(--text-soft); }
.mc-total { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.mc-sub { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: .92rem; }
.mc-empty { margin: 0 0 4px; color: var(--text-soft); }
.mini-cart .qa-actions .btn { white-space: nowrap; }
@media (max-width: 760px), (hover: none) { .mini-cart { display: none !important; } }

/* ---- cart: the item you came to see ---- */
.cart-table tr[data-id]:focus { outline: none; }
.cart-table tr.is-focus > td { animation: line-focus 4s ease-out; }
.cart-table tr.is-focus > td:first-child { box-shadow: inset 3px 0 0 var(--metal); }
@keyframes line-focus { 0%, 40% { background-color: rgba(19, 51, 60, .16); } 100% { background-color: rgba(19, 51, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .cart-table tr.is-focus > td { animation: none; background-color: rgba(19, 51, 60, .12); } .mini-cart { transition: none; } }

/* ---- signed out: the policies and list pages (views.js outsideLayout) ---- */
.out-nav { display: flex; gap: 8px; }
.out-nav .btn { padding: 9px 18px; font-size: .9rem; }
.out-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.out-foot a { color: var(--text-soft); text-decoration: none; font-size: .9rem; }
.out-foot a:hover { color: var(--text); text-decoration: underline; }
.is-outside .foot-fine { margin-top: 22px; }
@media (max-width: 420px) { .out-nav { gap: 6px; } .out-nav .btn { padding: 8px 12px; font-size: .84rem; } }

/* checkout: the order's email is the account's */
.acct-email { display: grid; gap: 6px; font-size: .9rem; color: var(--text-soft); }
.acct-email-v { font-family: var(--mono); font-size: .92rem; color: var(--text); padding: 11px 13px; border: 1px dashed var(--line-strong); border-radius: 10px; overflow-wrap: anywhere; }
.acct-email small { margin-top: -2px; font-size: .8rem; color: var(--text-faint); }

/* ---- sign in and create account: the front door (src/views-auth.js) ----
   A card on the bone page: the brand on navy (like the research-use strip
   and the label's band) beside the form. On phones the card stacks: a slim brand bar, the form, then the vials and
   what an account gives. */
.auth-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.auth-page { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: clamp(20px, 4vw, 52px) 16px 26px; overflow: hidden; }
.auth-card { position: relative; width: min(100%, 1060px); margin: auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); border-radius: 24px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 30px 70px rgba(40, 32, 18, .26), 0 1px 0 rgba(255, 255, 255, .4) inset; }

.auth-hero { position: relative; display: flex; flex-direction: column; padding: 32px 38px 34px; background: radial-gradient(120% 64% at 50% 56%, #1C2B36 0%, #131D25 60%, #0E161D 100%); color: #D3CCBE; -webkit-font-smoothing: antialiased; }
.auth-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth-logo { display: block; line-height: 0; }
.auth-logo img { display: block; width: 164px; height: auto; }
.auth-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(217, 184, 101, .5); border-radius: 999px; color: #D9B865; font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.auth-show { display: flex; flex-direction: column; flex: 1; }
.auth-tag { margin: 34px 0 8px; font-family: var(--display); font-weight: 300; font-stretch: 112%; font-size: clamp(1.7rem, 2.5vw, 2.1rem); line-height: 1.12; letter-spacing: -.02em; color: #F1EADC; text-wrap: balance; }
.auth-sub-tag { margin: 0; max-width: 42ch; font-size: .95rem; line-height: 1.5; color: #BFB8AA; }
.auth-names { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: #C9D2D8; max-width: 34em; } /* the compounds named for search (2026-11-11) */
.auth-names span { color: #D9B865; font-weight: 500; }
.auth-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 3px; font-size: .88rem; line-height: 1.45; color: #D9B865; font-weight: 500; } /* what's inside (2026-10-26), gold on the navy panel */
/* the vials, one after another (site.js); the label is the product's own */
.sc { position: relative; height: 374px; margin: 36px 0 10px; }
.sc-item { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.sc-item.is-on { opacity: 1; }
.sc-vial { position: absolute; left: 50%; top: 0; margin-left: -76.5px; transform: scale(.78); transform-origin: 50% 0; }
/* The vial stands on the product page's white studio backdrop (owner,
   2026-11-11): clear glass takes on what is behind it, so straight on the
   navy panel it went dark and didn't match the product pages. */
.sc-vial::before { content: ""; position: absolute; left: -46px; right: -46px; top: -24px; bottom: -12px; z-index: -1; border-radius: 22px; background: radial-gradient(ellipse 42% 62% at 50% 50%, #FFFFFF, #EEF3F6 78%), #EEF3F6; border: 1px solid #D4CCBC; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.sc .vial-img { position: absolute; left: 0; top: 0; width: 153px; max-width: none; height: 350px; }
.sc-cap { position: absolute; left: 0; right: 0; top: 286px; margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.sc-name { font-family: var(--display); font-stretch: 108%; font-size: 1.04rem; line-height: 1.2; color: #EFE8DA; }
.sc-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; max-width: 100%; }
.sc-seq { font: 600 .8rem var(--mono); letter-spacing: .07em; overflow-wrap: anywhere; }
.sc-seq i { font-style: normal; font-weight: 400; color: #BFCAD2; }
.sc-meta, .sc-text { font: 400 .74rem var(--mono); letter-spacing: .05em; color: #ABA495; }
.sc-from { margin-top: 2px; font-size: .84rem; line-height: 1.3; color: #D9B865; } /* the vial's own from price (2026-10-26), gold like the facts line */
.sc-from b { font-weight: 600; font-variant-numeric: tabular-nums; }
.auth-points { list-style: none; margin: auto 0 0; padding: 20px 0 0; border-top: 1px solid rgba(217, 184, 101, .22); display: grid; gap: 10px; }
.auth-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: .88rem; line-height: 1.45; color: #D0C9BB; }
.auth-points svg { margin-top: 2px; color: #A8DDE4; }

.auth-panel { padding: 30px 40px 34px; display: flex; flex-direction: column; justify-content: center; outline: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 26px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; }
.auth-tabs a { padding: 9px 12px; border-radius: 999px; text-align: center; font-weight: 500; font-size: .93rem; color: var(--text-soft); text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.auth-tabs a:hover { color: var(--text); }
.auth-tabs a[aria-current="page"] { background: var(--metal); color: var(--metal-ink); box-shadow: 0 1px 2px rgba(7, 10, 13, .3); }
.auth-head h1 { margin: 0 0 8px; font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; }
.auth-head p { margin: 0 0 20px; font-size: .95rem; color: var(--text-soft); }
.auth-panel > .ok, .auth-panel > .error, .auth-pane > .ok, .auth-pane > .error { margin: 0 0 16px; font-size: .92rem; }
.auth-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-k { font-size: .88rem; font-weight: 500; color: var(--text-soft); }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-link { font-size: .84rem; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.pw { position: relative; }
.pw input { padding-right: 48px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft); cursor: pointer; }
.pw-eye:hover { color: var(--text); background: rgba(19, 51, 60, .08); }
.pw-eye[aria-pressed="false"] .eye-off { display: none; }
.pw-rule { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-faint); }
.pw-rule svg { flex: none; opacity: .3; transition: opacity .2s ease; }
.pw-rule.is-met { color: var(--nonpolar); }
.pw-rule.is-met svg { opacity: 1; }
.code-input { font-family: var(--mono); font-size: 1.15rem !important; letter-spacing: .3em; }
.auth-agree { padding: 12px 14px 14px; gap: 10px; border: 1px solid rgba(75, 56, 5, .42); border-radius: 12px; }
.auth-agree legend { padding: 0 6px; margin-left: -6px; font-size: .76rem; font-weight: 600; letter-spacing: .05em; color: var(--warn); }
.auth-agree .agree { font-size: .84rem; line-height: 1.45; }
.auth-go { margin-top: 2px; padding-top: 14px; padding-bottom: 14px; font-size: 1rem; }
.auth-alt { margin: 18px 0 0; text-align: center; font-size: .9rem; color: var(--text-soft); }
.auth-panel .hint { margin: 0; font-size: .84rem; color: var(--text-soft); }
/* Google sign-in (src/views-auth.js): Google's light button as its guidelines
   ask (white, a #747775 outline, #1F1F1F text, the full-color G, which only
   ever sits on white), pill-shaped like the site's buttons; then "or with your
   email". The account page uses the same button. */
.g-form { margin: 0; }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid #747775; border-radius: 999px; background: #FFFFFF; color: #1F1F1F; font: 500 1rem/1.25 "Google Sans", Roboto, Arial, sans-serif; letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, box-shadow .15s ease; }
.g-btn:hover { background: #F7F8F8; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.g-btn:active { background: #EEEEEE; box-shadow: none; }
.g-btn:focus-visible { outline: 2px solid var(--metal); outline-offset: 2px; }
.g-mark { flex: none; display: block; width: 20px; height: 20px; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: .84rem; color: var(--text-soft); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.auth-pane > .auth-note { margin: 0 0 16px; }
.auth-pane > .g-inapp { margin: 0 0 18px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
/* which Google account (the step after Google; the account page) */
.g-who { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); }
.g-who .g-mark, .g-linked .g-mark { box-sizing: content-box; padding: 6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(31, 31, 31, .12); }
.g-who > span { display: grid; gap: 1px; min-width: 0; }
.g-who-k { font-size: .76rem; color: var(--text-soft); }
.g-who strong { font-weight: 600; overflow-wrap: anywhere; }
.g-linked { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; overflow-wrap: anywhere; }
.g-linked > span { min-width: 0; }
.auth-done { display: grid; justify-items: center; gap: 12px; padding: 18px 0 6px; text-align: center; }
.auth-done h1 { margin: 0; font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.auth-done p { margin: 0; color: var(--text-soft); }
.auth-done-icon { color: var(--metal); }
.auth-done .btn { margin-top: 8px; }
.auth-foot { position: relative; max-width: 780px; margin-top: 24px; text-align: center; font-size: .8rem; line-height: 1.5; color: var(--text-faint); }
.auth-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 8px; }
.auth-foot a { color: var(--text-soft); text-decoration: none; }
.auth-foot a:hover { color: var(--text); text-decoration: underline; }
.auth-foot p { margin: 0; }
@media (max-width: 1000px) and (min-width: 881px) { .auth-hero { padding: 28px 28px 30px; } .auth-panel { padding: 28px 30px 30px; } }
@media (max-width: 880px) {
  .auth-page { padding: 12px 10px 22px; }
  .auth-card { width: min(100%, 560px); grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .auth-hero { display: contents; }
  .auth-brand { order: 1; padding: 14px 18px; background: #131D25; }
  .auth-logo img { width: 124px; }
  .auth-eyebrow { padding: 5px 10px; font-size: .64rem; letter-spacing: .12em; }
  .auth-panel { order: 2; padding: 22px 20px 26px; }
  .auth-tabs { margin-bottom: 20px; }
  .auth-show { order: 3; padding: 24px 20px 26px; background: radial-gradient(120% 60% at 50% 46%, #1C2B36 0%, #131D25 62%, #0E161D 100%); }
  .auth-tag { margin-top: 0; font-size: 1.6rem; }
  .sc { height: 340px; margin-top: 32px; }
  .sc-vial { transform: scale(.7); }
  .sc-cap { top: 256px; }
  .auth-foot { margin-top: 20px; padding: 0 6px; }
}
@media (max-width: 440px) {
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { padding: 12px 14px; }
  .auth-logo img { width: 112px; }
  .auth-eyebrow { gap: 6px; padding: 5px 8px; letter-spacing: .1em; }
  .auth-panel { padding: 20px 16px 24px; }
  .auth-show { padding: 22px 16px 24px; }
}
/* the smallest phones: the logo and the 21+ badge still share one row */
@media (max-width: 360px) {
  .auth-brand { gap: 10px; padding: 11px 12px; }
  .auth-logo img { width: 98px; }
  .auth-eyebrow { gap: 5px; padding: 4px 7px; font-size: .6rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .sc-item { transition: none; } }

/* ---- catalog head (owner's request, 2026-10-25): the first compounds on the first screen ---- */
.page-head-tight { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 36px; padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(16px, 2vw, 24px); }
.page-head-tight h1 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
.page-head-tight .lede { flex: 1 1 380px; margin: 0; font-size: 1rem; }
.just-in-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--navy); color: #E9E4D8; min-width: 0; }
.just-in-line-h { flex: none; margin: 0; font: inherit; line-height: 0; }
.just-in-line-h .tag { margin: 0; background: #D9B865; border-color: #D9B865; color: var(--navy); }
.just-in-line ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.just-in-line ul::-webkit-scrollbar { display: none; }
.just-in-line li { flex: none; }
.just-in-line a { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(217, 184, 101, .35); color: #F5F1E8; text-decoration: none; font-size: .86rem; white-space: nowrap; }
.just-in-line a:hover, .just-in-line a:focus-visible { border-color: #D9B865; background: rgba(217, 184, 101, .08); }
.just-in-line strong { font-weight: 600; }
.just-in-line a span { color: #D9B865; font-size: .8rem; }
.cat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
/* research filters (length, charge at pH 7, termini) */
.cat-research { margin: -4px 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cat-research summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; cursor: pointer; font-size: .9rem; color: var(--text); list-style: none; min-height: 24px; }
.cat-research summary::-webkit-details-marker { display: none; }
.cat-research summary::before { content: ''; align-self: center; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; }
.cat-research[open] summary::before { transform: rotate(45deg); }
.filt-n { font-size: .8rem; color: var(--text-soft); }
.filt-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 2px 0 14px; }
.filt-field { display: grid; gap: 4px; min-width: 0; }
.filt-field label { font-size: .8rem; color: var(--text-soft); }
.filt-field select { width: auto; max-width: 100%; padding: 7px 34px 7px 12px; font-size: .9rem; border-radius: 999px; }
.filt-acts { display: flex; align-items: center; gap: 14px; min-height: 38px; }
.filt-acts .btn { padding: 7px 14px; }
.filt-clear { font-size: .88rem; }
.filt-note { flex-basis: 100%; margin: 0; font-size: .78rem; color: var(--text-soft); max-width: 70ch; }
@media (max-width: 640px) {
  .filt-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .filt-field select { width: 100%; }
}
.fam-select { display: flex; align-items: center; gap: 8px; }
.fam-select label { font-size: .88rem; color: var(--text-soft); white-space: nowrap; }
.fam-select select { width: auto; min-width: 0; max-width: 260px; padding: 7px 34px 7px 12px; font-size: .9rem; border-radius: 999px; }
.fam-select .btn { padding: 7px 14px; }
.cat-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 12px; }
.cat-hint { margin: 0; font-size: .86rem; color: var(--text-soft); }
.cat-seq[data-explore], .cat-blend, .prod-seq[data-explore] { cursor: help; }
.cat-hint .hint-short { display: none; }
@media (max-width: 760px) {
  /* phones: type pills, then Family and Sort side by side */
  .cat-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .cat-filters { display: contents; }
  .cat-type { grid-column: 1 / -1; }
  .fam-select, .sort-select { min-width: 0; }
  .fam-select label, .sort-select label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fam-select select, .sort-select select { width: 100%; border-radius: 12px; }
  .cat-hint .hint-long { display: none; }
  .cat-hint .hint-short { display: inline; }
  .page-head-tight { padding-top: 18px; padding-bottom: 10px; }
  .page-head-tight h1 { font-size: 2rem; }
  .cat-filters { width: 100%; }
  .fam-select select { font-size: 16px; max-width: 100%; }
  .cat-meta { margin-bottom: 8px; }
  .cat-hint { font-size: .82rem; }
}
@media (max-width: 640px) { .just-in-line { margin-bottom: 10px; } }

/* ---- product page tools (owner's request, 2026-10-25): explorer, copy, FASTA, spec sheet ---- */
.sheet-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.sheet-top .sheet-h { margin-bottom: 0; }
.sheet-top + * { margin-top: 16px; }
.sheet-tools { display: flex; align-items: center; gap: 6px; }
.tool-link, .copy-btn { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--metal-text); font: 500 .78rem var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.tool-link:hover, .copy-btn:hover { border-color: var(--text-faint); color: var(--metal-hover, var(--metal-text)); }
.copy-btn.is-done { color: var(--text); border-color: var(--metal); }
.spec-list dd .copy-btn { margin-left: 10px; padding: 1px 8px; font-size: .72rem; vertical-align: 1px; }
.seq-hint { margin: 10px 0 0; font-size: .82rem; color: var(--text-soft); }
.cite { margin: 14px 0 0; font-size: .86rem; color: var(--text-soft); }
.prod-seq[data-explore] { position: relative; z-index: 1; touch-action: pan-y; border-radius: 4px; }
.prod-seq[data-explore]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.prod-seq > li { transition: opacity .14s ease, transform .14s ease; transform-origin: 50% 70%; }
.prod-seq.is-on > li { opacity: .3; }
.prod-seq.is-on > li.is-same { opacity: 1; }
.prod-seq.is-on > li.is-same .res-code { background: linear-gradient(var(--rc), var(--rc)) no-repeat 0 100% / 100% 2px; }
.prod-seq.is-on > li.is-cur { opacity: 1; transform: translateY(-2px) scale(1.18); }
@media (max-width: 760px) {
  /* phones: a shorter vial, so the specifications start sooner */
  .product-head .vial-stage { padding: 14px 16px 16px; margin-top: 18px; }
  .product-head .vial-stage .vial { zoom: .68; }
}

/* ---- checkout: for the purchasing office (owner's request, 2026-10-25) ---- */
.po-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.po-box .hint { margin: 2px 0 0; font-size: .84rem; color: var(--text-soft); }
@media (max-width: 640px) { .po-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- header search suggestions (owner's request, 2026-10-25; public/site.js) ---- */
.ss-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); box-shadow: 0 18px 48px var(--shadow), var(--edge); text-align: left; }
.ss-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.ss-item:hover, .ss-item.is-active { background: rgba(19, 51, 60, .08); }
.ss-item.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.ss-thumb .cat-thumb { width: 44px; height: 68px; }
.ss-thumb .thumb-stage { width: 44px; height: 68px; border-radius: 8px; box-shadow: none; }
.ss-thumb .vial-mini { transform: scale(.18) !important; }
.ss-text { display: grid; gap: 2px; min-width: 0; }
.ss-text strong { font-weight: 600; font-size: .95rem; }
.ss-meta { font-size: .8rem; color: var(--text-soft); }
.ss-meta .price { font-size: .8rem; }
.ss-why { font-size: .8rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-mono { font-family: var(--mono); letter-spacing: .04em; }
.ss-why mark { background: rgba(217, 184, 101, .55); color: var(--text); border-radius: 3px; padding: 0 1px; }
.ss-none { margin: 0; padding: 12px 10px; font-size: .88rem; color: var(--text-soft); }
.ss-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); font-size: .86rem; font-weight: 500; color: var(--metal-text); text-decoration: none; }
.ss-all:hover { text-decoration: underline; }
.menu-search .ss-panel { position: static; width: auto; margin-top: 8px; box-shadow: none; max-height: none; }
.cat-dym { margin: 0 0 8px; }
.ss-field { position: relative; display: block; }

/* ---- product page: Chemistry (owner's request, 2026-10-25; src/chem.js) ---- */
.chem-list dd { line-height: 1.55; }
.chem-ion { display: inline-block; margin-right: 14px; white-space: nowrap; }
.chem-list sup { font-size: .7em; }
.chem-sub { font-family: var(--body); font-size: .8rem; color: var(--text-soft); margin-left: 6px; }
.chem-figs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px 28px; margin-top: 20px; }
.chem-fig { margin: 0; min-width: 0; }
.chem-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 8px; font-size: .86rem; }
.chem-fig figcaption strong { font-weight: 600; color: var(--text); }
.chem-fig figcaption span { color: var(--text-soft); font-size: .8rem; }
.hp-wrap { position: relative; padding-left: 92px; }
.hp-k { position: absolute; left: 0; font-size: .74rem; color: var(--text-soft); }
.hp-up { top: 4px; } .hp-down { bottom: 4px; }
.hp-plot { display: block; width: 100%; height: 96px; overflow: visible; touch-action: pan-y; cursor: help; border-radius: 4px; }
.hp-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hp-plot rect { fill: var(--rc); transition: opacity .14s ease; }
.hp-plot .hp-zero { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hp-plot.is-on rect { opacity: .28; }
.hp-plot.is-on rect.is-same { opacity: .75; }
.hp-plot.is-on rect.is-cur { opacity: 1; }
.ch-plot { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.ch-plot .ch-zero { stroke: var(--line-strong); stroke-width: 1; }
.ch-plot .ch-seven { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.ch-plot .ch-line { fill: none; stroke: var(--metal); stroke-width: 2; stroke-linejoin: round; }
.ch-plot .ch-dot { fill: var(--metal); }
.ch-plot .ch-pi { fill: var(--surface-2); stroke: var(--metal); stroke-width: 2; }
.ch-plot .ch-t { font: 10px var(--body); fill: var(--text-soft); }
.ch-plot .ch-pi-t { font-weight: 600; fill: var(--text); }
.iso-plot .iso-bar { fill: var(--metal); opacity: .55; }
.iso-plot .iso-bar.is-top { opacity: 1; }
.iso-note { margin: 6px 0 0; font-size: .8rem; color: var(--text-soft); max-width: 420px; }
@media (forced-colors: active) { .iso-plot .iso-bar { fill: CanvasText; opacity: 1; } }
/* Windows contrast themes drop gradients, so the drawn select arrow goes: use the native one */
@media (forced-colors: active) { select { appearance: auto; background-image: none; } }
/* amino acid composition (Chemistry panel) */
.comp { margin-top: 22px; }
.comp-h { margin: 0 0 10px; font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.comp-h span { font-weight: 400; color: var(--text-soft); font-size: .8rem; }
.comp-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 14px; }
.comp-bar i { display: block; background: var(--rc); min-width: 2px; }
.comp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px 18px; align-items: start; }
.comp-t { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.comp-t th[scope="row"], .comp-t td { font-family: var(--mono); }
.comp-t caption { text-align: left; padding: 0 0 5px; border-bottom: 2px solid var(--rc); font-size: .8rem; font-weight: 500; line-height: 1.4; }
.comp-k { display: block; color: var(--text); }
.comp-tot { display: block; font-weight: 400; font-family: var(--mono); color: var(--text-soft); font-size: .76rem; }
.comp-head th { padding: 0; }
.comp-t th[scope="row"], .comp-t td { padding: 4px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; }
.comp-t th[scope="row"] { text-align: left; color: var(--text); }
.comp-t abbr { text-decoration: none; }
.comp-c { color: var(--text-faint); margin-left: 2px; }
.comp-t td:last-child { width: 4.2em; color: var(--text-soft); }
.comp-t td.comp-none { text-align: left; color: var(--text-soft); font-family: inherit; }
.comp-t.is-none caption { border-bottom-color: var(--line-strong); }
.chem-note { margin: 14px 0 0; font-size: .8rem; color: var(--text-soft); }
.hp-key { display: none; }
.chem-plain { font-family: var(--body); font-size: .9rem; }
@media (max-width: 760px) {
  .chem-figs { grid-template-columns: minmax(0, 1fr); }
  .hp-wrap { padding-left: 0; }
  .hp-k { display: none; }
  .hp-key { display: block; margin-bottom: 6px; font-size: .78rem; color: var(--text-soft); }
}

/* ---- Compare (views.compare, owner's request 2026-10-25) ---- */
.cmp-pick-wrap { display: inline-flex; align-items: center; gap: 8px; }
.cat-buy-cell .cmp-pick-wrap { display: flex; margin-top: 8px; }
.cmp-pick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--metal-text); font: 500 .78rem var(--body); cursor: pointer; white-space: nowrap; user-select: none; }
.cmp-pick input { width: 14px; height: 14px; margin: 0; accent-color: var(--metal); }
.cmp-pick.is-on { border-color: var(--metal); background: rgba(19, 51, 60, .08); color: var(--text); }
.cmp-pick.is-full { opacity: .74; cursor: not-allowed; }
.cmp-view { font-size: .8rem; font-weight: 600; color: var(--metal-text); white-space: nowrap; }
.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0 0 22px; }
.cmp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.cmp-add label { font-size: .9rem; color: var(--text-soft); }
.cmp-add select { width: auto; min-width: 220px; padding: 9px 36px 9px 12px; font-size: 16px; }
.cmp-add .btn { padding: 9px 18px; }
.cmp-full { margin: 0; font-size: .9rem; }
.cmp-diff { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.cmp-diff input { accent-color: var(--metal); width: 16px; height: 16px; }
.cmp-links { display: inline-flex; gap: 8px; margin-left: auto; }
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; }
.cmp-corner, .cmp th[scope="row"] { width: 196px; }
.cmp th[scope="row"] { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; font-weight: 500; font-size: .86rem; color: var(--text-soft); border-top: 1px solid var(--line); }
.cmp td { padding: 12px 16px; vertical-align: top; font-size: .92rem; border-top: 1px solid var(--line); overflow-wrap: break-word; }
.cmp td .mono, .cmp .cat-seq { overflow-wrap: anywhere; }
.cmp-col .tag { white-space: normal; }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th { background: rgba(255, 255, 255, .07); }
.cmp-col { padding: 0 16px 18px; text-align: left; vertical-align: top; font-weight: 400; }
.cmp-col .cat-thumb { margin-bottom: 12px; }
.cmp-name { display: inline; margin-right: 6px; font: 400 1.25rem/1.2 var(--display); color: var(--heading); text-decoration: none; }
.cmp-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-tag { display: block; margin: 6px 0 10px; color: var(--text-soft); font-size: .84rem; line-height: 1.4; }
.cmp-price { display: block; margin-bottom: 8px; }
.cmp-buy { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cmp-buy .cat-size { flex: 1 1 140px; min-width: 0; padding: 9px 30px 9px 12px; font-size: .88rem; background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; }
.cmp-buy .cat-add { flex: none; padding: 9px 16px; font-size: .88rem; }
.cmp-remove { display: inline-block; font-size: .82rem; color: var(--text-soft); }
.cmp-size { display: block; white-space: nowrap; }
.cmp-size + .cmp-size { margin-top: 3px; }
.cmp-size small { color: var(--text-soft); font-size: .78rem; }
.cmp .cat-seq { display: inline-block; font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
.cmp .chem-ion { display: block; margin: 0 0 2px; }
.cmp-diff-only tbody tr[data-same] { display: none; }
.cmp-chart { margin: 30px 0 8px; max-width: 760px; }
.cmp-chart figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 8px; }
.cmp-chart figcaption span { color: var(--text-soft); font-size: .84rem; }
.cmp-chart > svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmp-chart .ch-t { fill: var(--text-soft); font: 500 11px var(--body); }
.cmp-chart .ch-seven { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.cmp-grid { stroke: var(--line); stroke-width: 1; }
.cmp-grid.is-zero { stroke: var(--line-strong); }
.cmp-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.cmp-l1 { stroke: var(--metal); }
.cmp-l2 { stroke: var(--acid); stroke-dasharray: 8 5; }
.cmp-l3 { stroke: var(--base); stroke-dasharray: 2 4; }
.cmp-pi { fill: var(--surface-2); stroke-width: 2; stroke-dasharray: none; }
.cmp-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .88rem; }
.cmp-key li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-key svg { flex: none; overflow: visible; }
.cmp-empty { margin-top: 10px; }
@media (max-width: 640px) {
  .cmp { min-width: 0; }
  /* the row names move into each cell (td::before). The row headers stay for
     screen readers in a zero-width first column (display: none would drop them). */
  .cmp-corner, .cmp th[scope="row"] { width: 0; max-width: 0; padding: 0; border-width: 0; overflow: hidden; white-space: nowrap; font-size: 1px; color: transparent; }
  .cmp td { padding: 10px 8px; font-size: .86rem; }
  .cmp td::before { content: attr(data-k); content: attr(data-k) / ""; display: block; margin-bottom: 3px; color: var(--text-faint); font-size: .72rem; font-weight: 500; overflow-wrap: normal; }
  .cmp-col { padding: 0 8px 14px; }
  .cmp-name { font-size: 1.05rem; }
  .cmp-tag { display: none; }
  .cmp-buy .cat-size, .cmp-buy .cat-add { flex: 1 1 100%; }
  .cmp-buy .cat-size { padding: 8px 24px 8px 8px; font-size: .8rem; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; }
  .cmp-buy .cat-add { padding: 9px 6px; font-size: .82rem; white-space: nowrap; }
  .cmp-col .cat-thumb { margin-bottom: 8px; }
  .cmp td .mono { font-size: .8rem; }
  .cmp .chem-ion { white-space: normal; }
  .cmp .chem-sub { display: block; margin-left: 0; }
  .cmp-col .tag { font-size: .7rem; margin-top: 4px; }
  .cmp-size { white-space: normal; }
  .cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th { background: none; }
  .cmp-links { margin-left: 0; }
  .cmp-add { flex: 1 1 100%; min-width: 0; }
  .cmp-add select { min-width: 0; flex: 1 1 120px; }
}
@media (pointer: coarse) { .cmp-pick { min-height: 36px; padding: 6px 14px 6px 11px; font-size: .84rem; } .cmp-pick input { width: 17px; height: 17px; } .cmp-view { padding: 8px 2px; } }

/* ---- cart approvals (src/approvals.js) ---- */
.approval-box { margin: 26px 0 8px; }
.approval-box h2 { margin: 0 0 6px; font-size: 1.15rem; }
.ap-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 16px; margin: 12px 0 14px; }
.ap-fields label { display: grid; align-content: start; gap: 6px; font-size: .9rem; color: var(--text-soft); }
.ap-fields textarea { min-height: 44px; resize: vertical; }
.ap-hint { margin-top: 18px; }
.ap-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-soft); }
.ap-meta strong, .ap-decided strong { color: var(--text); font-weight: 600; }
.ap-note { margin: 10px 0 16px; padding: 10px 16px; border-left: 3px solid var(--metal); background: var(--surface); border-radius: 0 10px 10px 0; color: var(--prose); white-space: pre-line; }
.ap-decided { margin: 12px 0 4px; color: var(--text-soft); }
.ap-table td:nth-child(2), .ap-table th:nth-child(2) { width: 64px; }
.ap-table td:last-child, .ap-table th:last-child { text-align: right; width: 120px; }
.ap-table tfoot th { text-align: left; }
.ap-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; margin: 22px 0 8px; }
.ap-actions form { margin: 0; }
.ap-actions .hint { max-width: 420px; margin: 8px 0 0; }
.ap-decline > summary { list-style: none; cursor: pointer; }
.ap-decline > summary::-webkit-details-marker { display: none; }
.ap-decline[open] > summary { margin-bottom: 12px; }
.ap-decline form { display: grid; gap: 10px; min-width: min(360px, 100%); }
.ap-decline label { display: grid; align-content: start; gap: 6px; font-size: .9rem; color: var(--text-soft); }
.badge.ap-pending, .badge.is-wait { background: rgba(64, 48, 4, .1); color: var(--warn); border-color: rgba(64, 48, 4, .35); }
.badge.ap-approved { background: rgba(19, 51, 60, .1); color: var(--metal-text); border-color: var(--metal); }
.badge.ap-declined { background: rgba(90, 31, 23, .08); color: var(--error); border-color: rgba(90, 31, 23, .35); }
.badge.ap-withdrawn, .badge.ap-expired { color: var(--text-soft); }
.approvals { margin: 6px 0 26px; }
.ap-k { margin: 10px 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.ap-list { margin: 0; padding: 0; list-style: none; }
.ap-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.crumbs-inline { margin: 0 0 4px; font-size: .88rem; color: var(--text-soft); }
@media (max-width: 640px) { .ap-fields { grid-template-columns: 1fr; } }
/* touch screens: small text links and buttons get at least 24 px of height to tap (WCAG 2.5.8; measured 2026-10-25) */
@media (pointer: coarse) {
  .crumbs a, .field-link, .cmp-remove, .cmp-name, .crumbs-inline a, .foot-grid nav a, .map-data th a { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
  .foot-grid nav ul { gap: 4px; }
  .copy-btn, .tool-link { min-height: 32px; padding-left: 12px; padding-right: 12px; }
  .link-btn { min-height: 32px; }
  .panel details > summary { padding-top: 6px; padding-bottom: 6px; }
}
.ap-actions:has(> .copy-btn) { align-items: center; }

/* saved lists (account page) and "Save this cart as a list" (cart) */
.slists { margin-top: 36px; }
.slist { border-top: 1px solid var(--line); }
.slist:last-of-type { border-bottom: 1px solid var(--line); }
.slist summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0; cursor: pointer; min-height: 24px; }
.slist summary { list-style: none; }
.slist summary::-webkit-details-marker { display: none; }
.slist summary::before { content: ''; align-self: center; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; margin-right: 4px; }
.slist[open] summary::before { transform: rotate(45deg); }
.slist-name { font-weight: 600; color: var(--text); }
.slist-t { margin: 0 0 10px; }
.slist-t th[scope="row"] { font-weight: 400; text-align: left; }
.slist-acts { margin: 6px 0 12px; }
.slist-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 12px 0 16px; border-top: 1px dashed var(--line); }
.slist-rename { display: flex; align-items: flex-end; gap: 8px; }
.slist-rename label { display: grid; gap: 4px; font-size: .82rem; color: var(--text-soft); }
.slist-rename input { width: 220px; max-width: 100%; }
.list-box { margin: 18px 0 8px; }
.list-box h2 { margin: 0 0 6px; font-size: 1.15rem; }
.list-box .hint { margin-bottom: 12px; }
.list-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.list-form label { display: grid; gap: 4px; font-size: .86rem; color: var(--text-soft); flex: 1 1 200px; }
.list-form [hidden] { display: none; }
@media (max-width: 640px) {
  .slist-rename { flex-wrap: wrap; } .slist-rename input { width: 100%; }
  .list-form .btn { width: 100%; }
}

/* Lot page (/lot/<lot>) and the admin lot test data */
.lot-head { display: block; }
.lot-head .back-link { margin-bottom: 8px; }
.lot-page > * { max-width: 760px; }
.lot-await { margin-bottom: 24px; }
.lot-await h2 { font-size: 1.05rem; margin-bottom: 6px; }
.lot-results th { width: 46%; color: var(--text-soft); }
.lot-chrom { margin: 28px 0 0; }
.lot-chrom img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lot-chrom figcaption { margin-top: 8px; font-size: .86rem; }
.lot-page .inline-actions { margin-top: 28px; }
.lot-link { margin-top: 6px; }
#lot-data { margin-top: 28px; }
#lot-data .span2 { grid-column: span 2; }
.lot-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lot-index li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.lot-head .lede { margin-top: 8px; }

/* Admin → Emails (previews) */
.em-lede { margin: -8px 0 22px; }
.em-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.em-list h2 { margin: 18px 0 6px; font: 500 .78rem var(--body); color: var(--text-faint); }
.em-group:first-child h2 { margin-top: 0; }
.em-list ul { margin: 0; padding: 0; list-style: none; }
.em-list a { display: block; padding: 5px 10px; border-left: 2px solid transparent; color: var(--text-soft); font-size: .9rem; text-decoration: none; }
.em-list a:hover { color: var(--text); }
.em-list a[aria-current="page"] { border-left-color: var(--metal); color: var(--text); }
.em-view h2 { margin: 0 0 10px; }
.em-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0 0 16px; font-size: .9rem; }
.em-meta dt { color: var(--text-faint); }
.em-meta dd { margin: 0; overflow-wrap: anywhere; }
.em-frame { display: block; width: 100%; max-width: 680px; height: 760px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.em-text { margin-top: 16px; max-width: 680px; }
.em-text pre { margin: 10px 0 0; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: .82rem/1.55 var(--mono); background: var(--surface); border-radius: 10px; }
@media (max-width: 860px) {
  .em-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .em-list { columns: 2; column-gap: 20px; }
  .em-group { break-inside: avoid; }
  .em-group h2 { margin-top: 0; padding-top: 14px; }
  .em-view { order: -1; } /* the email first, the list of others below it */
  .em-frame { height: 620px; }
}


/* For purchasing (2026-10-26) */
.purchasing-page { padding-block: 28px 48px; display: grid; gap: 20px; }
.purchasing-page .page-title { margin-bottom: 0; }
.po-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.po-docs { margin: 16px 0 0; display: grid; gap: 0; }
.po-doc { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.po-doc dt { font-weight: 600; color: var(--text-soft); }
.po-doc dd { margin: 0; overflow-wrap: anywhere; }
.po-doc address { font-style: normal; }
.po-ask { color: var(--text-soft); }
.po-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.po-sds { columns: 2 16rem; margin: 0 0 10px; padding: 0; list-style: none; }
.po-sds li { break-inside: avoid; padding: 3px 0; }
.po-box .po-help { margin: -2px 0 8px; }
.doc-row { flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .po-grid { grid-template-columns: minmax(0, 1fr); }
  .po-doc { grid-template-columns: minmax(0, 1fr); }
}
.prod-sum-lead { flex-basis: 100%; font-size: .86rem; color: var(--text-soft); }
.lead-note { margin: 10px 0; color: var(--text-soft); font-size: .92rem; }
/* New lot released (src/lotnotice.js) */
.lot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; padding: 10px 44px 10px 16px; position: relative; border: 1px solid var(--line-strong); border-left: 4px solid var(--metal); border-radius: 10px; background: var(--surface); }
.lot-bar strong { font-weight: 600; }
.lot-bar-x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lot-bar-x:hover { background: var(--line); }
.lot-notices { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lot-notices .hint { margin: 0; flex: 1 1 18rem; }
.spec-smiles dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.smiles { font-family: var(--mono); font-size: .82rem; overflow-wrap: anywhere; word-break: break-all; min-width: 0; flex: 1 1 14rem; }

/* Admin → Inventory and Finance (2026-10-26) */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.fin-table td.num, .fin-table th.num, .inv-lines td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table th, .fin-table td { padding: 7px 10px; font-size: .88rem; }
.fin-table thead th { white-space: nowrap; }
.fin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 12px; margin: 18px 0; }
.fin-card { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fin-card dt { font-size: .82rem; color: var(--text-soft); }
.fin-card dd { margin: 4px 0 0; font: 600 1.3rem var(--body); font-variant-numeric: tabular-nums; }
.fin-card dd span { display: block; margin-top: 4px; font-size: .78rem; font-weight: 400; color: var(--text-soft); }
.fin-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.fin-range { flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 8px 0 4px; }
.fin-range label { display: grid; gap: 2px; font-size: .84rem; }
.fin-range a[aria-current] { font-weight: 600; }
.fin-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font-size: .9rem; }
.admin section.panel + section.panel { margin-top: 16px; }
.warn-box { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--line-strong); border-left: 4px solid var(--metal); border-radius: 10px; background: var(--surface); }
.warn-box ul { margin: 4px 0 0; padding-left: 1.2em; }
.inv-upload { flex-wrap: wrap; align-items: center; gap: 10px; }
.inv-lines td { vertical-align: top; padding: 6px 6px; }
.inv-lines input, .inv-lines select { min-width: 0; width: 100%; padding: 7px 8px; font-size: .86rem; }
.inv-lines td:nth-child(3) { min-width: 12rem; }
.inv-lines td:nth-child(3) input { margin-top: 4px; }
.inv-lines td:nth-child(4) { min-width: 8rem; }
.inv-lines .inv-num { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.inv-lines td:nth-child(7) input { width: 8rem; }
.inv-src { max-width: 16rem; font-size: .8rem; color: var(--text-soft); overflow-wrap: anywhere; }
.inv-src .tag { display: inline-block; margin-top: 4px; }
.inv-src span:first-child { display: block; }
.inv-lines tr.is-new td { background: rgba(19, 51, 60, .05); }
.inv-skipped { margin: 12px 0; font-size: .86rem; }
.inv-skipped ul { margin: 6px 0 0; padding-left: 1.2em; color: var(--text-soft); }
@media (max-width: 760px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
.fin-table tbody th[scope=row] { min-width: 9.5rem; }
.postage-form { flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; margin-top: 12px; }
.postage-form label { display: grid; gap: 2px; }
.postage-form input { width: 9rem; }
.postage-form .hint { flex-basis: 100%; margin: 0; }

/* Lab tools (2026-10-26) */
.budget-form { flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; margin: 8px 0 12px; }
.budget-form label { display: grid; gap: 2px; }
.budget-form input { width: 9rem; }
.budget-note { margin: 10px 0; font-size: .92rem; }
.budget-over { display: block; margin-top: 4px; color: var(--warn, #403004); }
.offer-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.offer-box label input { width: 6rem; }
.seq-wrap { overflow-wrap: anywhere; word-break: break-all; }
.check-group { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 0; padding: 0; margin: 8px 0; }
.check-group legend { width: 100%; margin-bottom: 4px; font-size: .92rem; }
.quote-accept { margin-top: 18px; }
.quote-decline { margin-top: 14px; }

/* Buy box (2026-10-26): price per mg under each size's price, and what arrives */
.variant-price .per-mg { display: block; margin-top: 2px; font-size: .74rem; font-weight: 400; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; }
.receive-note { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--text-soft); }
.receive-note p { margin: 0; }
.receive-h { margin-bottom: 4px !important; font-weight: 600; color: var(--text); }
/* Checkout: the purchasing fields fold for individual buyers (2026-10-26) */
.po-fold { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--edge); padding: 0 22px; }
.po-fold > summary { cursor: pointer; position: relative; padding: 16px 0 16px 24px; font-weight: 600; color: var(--text); list-style: none; }
.po-fold > summary::-webkit-details-marker { display: none; }
.po-fold > summary::before { content: ""; position: absolute; left: 4px; top: 22px; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.po-fold[open] > summary::before { transform: rotate(45deg); top: 20px; }
.po-fold > summary .opt { display: block; font-weight: 400; font-size: .86rem; color: var(--text-soft); }
.po-fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.checkout .po-fold > .po-box { border: 0; background: none; box-shadow: none; padding: 0; margin: 0 0 20px; }
.po-fold > .po-box > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the summary says it */
.cart-acct { margin: 14px 0 0; font-size: .9rem; color: var(--text-soft); } /* signed out (2026-10-26) */
/* Buyer's guides (2026-10-26) */
.guide-list { margin: 40px 0 0; }
.guide-list ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.guide-list a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--text); }
.guide-list a:hover { border-color: var(--line-strong); }
.guide-list a strong { font-weight: 600; color: var(--metal-text); }
.guide-list a span { font-size: .9rem; color: var(--text-soft); }
.guide-meta { margin: -6px 0 14px; font-size: .86rem; color: var(--text-soft); }
/* ---- Peptide tools (/tools, 2026-10-26; src/views-tools.js, public/tools.js) ---- */
.tools-form label { display: grid; gap: 6px; font-size: .86rem; color: var(--text-soft); }
.tools-form textarea { width: 100%; font-family: var(--mono); }
.tools-form .row3 { margin-top: 12px; }
.tools-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.tools-form .tools-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .86rem; color: var(--text-soft); }
.tools-form .tools-pick label { display: inline; }
.tools-form .error { margin-top: 14px; }
.tools-empty { margin-top: 18px; }
.tools-empty p { margin: 0; }
.tools-empty p + p { margin-top: 10px; font-size: .86rem; }
.tools-res { margin-top: 8px; }
.tools-note { margin: 0 0 6px; font-size: .95rem; }
.tools-cta { margin: 18px 0 0; font-size: .92rem; }
.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px 28px; }
.ms-t { font-size: .84rem; }
.ms-t th, .ms-t td { padding: 7px 4px; }
.ms-t td.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-check { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.ms-form { margin-top: 4px; }
.ms-form textarea { width: 100%; font-family: var(--mono); font-size: .86rem; }
.ms-go { display: flex; align-items: end; }
.ms-out { margin-top: 14px; display: grid; gap: 10px; }
.ms-out p { margin: 0; }
.ms-res tr.is-target td { color: var(--text); font-weight: 500; }
.ms-res tr.is-none td { color: var(--text-faint); }
/* helical wheel (the Chemistry panel, src/views-catalog.js wheelFigure) */
.whl { margin-top: 22px; }
.whl-in { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px 28px; align-items: center; }
.whl-plot { display: block; width: 100%; max-width: 320px; height: auto; }
.whl-path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.whl-arrow { fill: none; stroke: var(--metal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.whl-t rect { fill: var(--rc); }
.whl-t text { font: 600 12px var(--mono); fill: #ECE7DC; }
.whl-n { font: 9px var(--mono); fill: var(--text-faint); }
.whl-facts { margin: 0; display: grid; gap: 10px; font-size: .86rem; }
.whl-facts dt { color: var(--text-soft); font-size: .8rem; }
.whl-facts dd { margin: 2px 0 0; color: var(--text); }
.whl-note { margin: 10px 0 0; font-size: .8rem; color: var(--text-soft); max-width: 640px; }
@media (forced-colors: active) { .whl-t rect { fill: Canvas; stroke: CanvasText; } .whl-t text { fill: CanvasText; } .whl-arrow, .whl-path { stroke: CanvasText; } }
@media (max-width: 760px) { .whl-in, .ms-grid { grid-template-columns: minmax(0, 1fr); } .whl-plot { margin: 0 auto; } .tools-form .row3 { grid-template-columns: 1fr 1fr; } }
/* ---- Lot record (2026-10-26; src/views-lot.js): /quality/lots, lot history, compare, your lots ---- */
.lot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 18px; }
.lot-stats > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lot-stats dt { font-size: .78rem; color: var(--text-soft); }
.lot-stats dd { margin: 4px 0 0; font: 500 1.25rem var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.lot-stats dd small { display: block; margin-top: 2px; font: .74rem var(--body); color: var(--text-faint); }
.lot-rec th[scope="row"] { white-space: nowrap; }
.lot-rec td small, .lot-cmp td small { display: block; margin-top: 3px; font-size: .78rem; }
.lot-rec tr.is-rejected th, .lot-rec tr.is-rejected td { background: rgba(90, 31, 23, .05); }
.lot-reason { color: var(--error); }
.lot-rejected { border-color: var(--acid); margin-bottom: 18px; }
.lot-rejected h2 { color: var(--error); }
.lot-rejected p { margin: 0 0 6px; }
.lot-sub { margin-top: 28px; }
.lot-note { margin: 18px 0 0; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lot-cite { font-size: .84rem; overflow-wrap: anywhere; }
.lot-cmp-form, .lot-filter { margin: 18px 0; align-items: center; }
.lot-filter { margin-top: 0; }
.lot-trend { margin: 4px 0 18px; max-width: 460px; }
.lot-bar { fill: var(--metal); opacity: .8; }
.lot-bar.is-rejected { fill: none; stroke: var(--error); stroke-width: 1.5; stroke-dasharray: 3 2; opacity: 1; }
.lot-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.lot-thumbs a { display: grid; gap: 4px; text-decoration: none; font-size: .78rem; color: var(--text-soft); }
.lot-thumbs img { width: 100%; height: 96px; object-fit: cover; object-position: left center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lot-cmp td { vertical-align: top; }
.lot-cmp-img { width: 100%; max-width: 360px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lot-mine { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: .86rem; }
.lot-mine-h { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.lot-mine ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
@media (forced-colors: active) { .lot-bar { fill: CanvasText; } .lot-bar.is-rejected { fill: none; stroke: CanvasText; } }
/* ---- Catalog map (/catalog/map, 2026-10-26; src/views-map.js, public/map.js) ---- */
.cat-maplink { margin: 0 0 4px; }
.map-axes { margin: 0 0 14px; align-items: center; }
.map-fig { margin: 0; }
.map-wrap { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 6px; overflow: hidden; }
.map-plot { display: block; width: 100%; height: auto; }
.map-grid { stroke: var(--line); stroke-width: 1; }
.map-zero { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 3; }
.map-t { font: 11px var(--mono); fill: var(--text-soft); }
.map-ax { font: 600 12px var(--body); fill: var(--text); }
.map-l { font: 11px var(--body); fill: var(--text); }
.is-narrow .map-l, .is-narrow .map-t { font-size: 13px; }
.map-pt { cursor: pointer; }
.map-pt .mk { fill: var(--ink); stroke: var(--surface); stroke-width: 1.2; }
.map-pt .mk-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.map-pt .mk-open { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.map-pt:hover .mk, .map-pt.is-on .mk, .map-pt:focus-visible .mk { stroke: var(--text); stroke-width: 2.2; }
.map-pt:hover .map-l, .map-pt.is-on .map-l { font-weight: 600; }
.map-pt .mk-hit { fill: transparent; }
.map-pt:focus { outline: none; }
.map-pt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-pt:focus-visible .map-l { text-decoration: underline; }
.ink-a { --ink: var(--metal); } .ink-b { --ink: var(--acid); } .ink-c { --ink: var(--base); } .ink-d { --ink: var(--nonpolar); }
.map-tip { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 3px; max-width: 260px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--edge); font-size: .82rem; pointer-events: none; }
.map-tip .mono { font-size: .78rem; }
.map-tip-fam, .map-tip-tag { color: var(--text-soft); }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 2px 0; font-size: .8rem; color: var(--text-soft); }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key .mk { fill: var(--ink); } .map-key .mk-line { fill: none; stroke: var(--ink); stroke-width: 2.4; } .map-key .mk-open { fill: none; stroke: var(--ink); stroke-width: 2; }
.map-data { margin-top: 18px; }
.map-data summary { cursor: pointer; color: var(--accent); }
@media (forced-colors: active) { .map-pt .mk, .map-key .mk { fill: CanvasText; } .map-grid { stroke: GrayText; } }
/* phones and small tablets: the narrow plot (views-map.js SIZES), at most 440 px so its text stays near 13 px */
.map-plot.is-narrow { display: none; }
@media (max-width: 760px) { .map-plot.is-wide { display: none; } .map-plot.is-narrow { display: block; max-width: 440px; margin: 0 auto; } }
.map-tip-hint { color: var(--text-soft); font-size: .76rem; }
.map-axes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.map-axes select { width: auto; min-width: 220px; max-width: 100%; }
/* ---- Peptides 101: the synthesis stepper (2026-10-26; public/learn.js) ---- */
.spps { margin: 18px 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.spps figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 10px; font-size: .9rem; }
.spps figcaption span { color: var(--text-soft); font-size: .82rem; }
.spps-steps { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 16px; }
.spps.is-stepping .spps-steps { list-style: none; padding: 0; min-height: 12.5rem; }
.spps-step p { margin: 6px 0 0; font-size: .92rem; }
.spps-h { font-weight: 600; color: var(--text); margin-top: 0 !important; }
.spps-miss { color: var(--text-soft); font-size: .86rem !important; }
.spps-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 10px 0 2px; }
.spps-r { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 4px; background: var(--rc); color: #ECE7DC; font: 600 .82rem var(--mono); }
.spps-r.is-new { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.spps-resin { margin-left: 4px; padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: 4px; font-size: .74rem; color: var(--text-soft); }
.spps-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.spps-ctl input[type=range] { flex: 1 1 160px; height: 28px; accent-color: var(--metal); }
.spps-n { font-size: .82rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.spps-pick { margin: 8px 0; align-items: center; }
.spps-pick select { width: auto; max-width: 100%; }
@media (forced-colors: active) { .spps-r { background: Canvas; color: CanvasText; border: 1px solid CanvasText; } }
/* Admin → Products: share images (2026-10-26; public/share.js) */
.share-preview { display: block; width: 100%; max-width: 420px; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; }
/* ---- 3D structure (2026-10-26; src/views-structure.js, public/viewer3d.js) ---- */
.struct-view { margin: 4px 0 12px; }
.struct-stage { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #CBC7BC; }
.struct-stage canvas { display: block; cursor: grab; }
.struct-stage canvas:active { cursor: grabbing; }
.struct-stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.struct-tip { position: absolute; left: 0; top: 0; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-strong); font: 500 .8rem var(--mono); pointer-events: none; }
.struct-reset { margin-top: 10px; }
.struct-cite { font-size: .86rem; margin: 8px 0 0; }
/* ---- Daily sequence (/daily, 2026-10-26; public/daily.js) ---- */
.daily { max-width: 560px; }
.dly-no { margin: 0 0 10px; font-size: .86rem; }
.dly-grid { display: grid; gap: 6px; margin-bottom: 18px; }
.dly-row { display: grid; grid-template-columns: repeat(5, 3rem) minmax(0, 1fr); gap: 6px; align-items: center; }
.dly-t { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid var(--line-strong); border-radius: 8px; font: 500 1.35rem var(--mono); color: var(--text); background: var(--surface); }
.dly-t.is-typed { border-color: var(--text-soft); }
.dly-t.is-hit { background: var(--metal); border-color: var(--metal); color: #ECE7DC; }
.dly-t.is-near { border: 2px dashed var(--metal); color: var(--metal-text); background: var(--surface-2); }
.dly-t.is-miss { background: transparent; border-color: var(--line); color: var(--text-faint); }
.dly-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; padding-left: 8px; font: .78rem var(--mono); color: var(--text-soft); }
.dly-form label { display: block; font-size: .86rem; color: var(--text-soft); margin-bottom: 6px; }
.dly-in-row { display: flex; gap: 8px; }
.dly-in-row input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: .2em; font-size: 1.1rem; }
.dly-keys { display: grid; gap: 6px; margin-top: 14px; }
.dly-keyrow { display: flex; flex-wrap: wrap; gap: 6px; }
.dly-key { min-width: 2.4rem; height: 2.6rem; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--rc, var(--text)); font: 600 1rem var(--mono); cursor: pointer; }
.dly-key.dly-wide { min-width: 5.5rem; color: var(--text); font: 500 .9rem var(--body); }
.dly-key.is-hit { background: var(--metal); color: #ECE7DC; border-color: var(--metal); }
.dly-key.is-near { border: 2px dashed var(--metal); }
.dly-key.is-miss { opacity: .45; }
.dly-msg { min-height: 1.4em; margin: 12px 0 0; font-size: .9rem; color: var(--text-soft); }
.dly-done { margin-top: 16px; }
.dly-done p { margin: 0 0 8px; }
.dly-done-h { font-weight: 600; color: var(--text); }
.dly-how { margin-top: 22px; font-size: .9rem; }
.dly-how summary { cursor: pointer; color: var(--accent); min-height: 28px; display: flex; align-items: center; }
.dly-how ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.dly-how li { display: flex; align-items: center; gap: 10px; }
.dly-legend { width: 2rem; height: 2rem; font-size: 1rem; }
@media (forced-colors: active) { .dly-t.is-hit { background: CanvasText; color: Canvas; } }
@media (max-width: 420px) { .dly-row { grid-template-columns: repeat(5, 2.6rem) minmax(0, 1fr); } .dly-t { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; } .dly-key { min-width: 2.1rem; } }
/* ---- Amino acid reference (/learn/amino-acids, 2026-10-26) ---- */
.aa-class { margin: 28px 0 8px; font-size: 1.15rem; border-left: 4px solid var(--rc); padding-left: 10px; }
.aa-t th[scope="row"] { white-space: nowrap; }
.aa-one { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 5px; background: var(--rc); color: #ECE7DC; font: 600 .95rem var(--mono); }
.aa-side { overflow-wrap: anywhere; }
.aa-t td, .aa-t th { padding: 9px 6px; font-size: .88rem; }

/* ---- paying: checkout choice, order page, crypto pay page (src/views-pay.js) ---- */
.pay-choice-opt span { display: grid; gap: 3px; }
.pay-choice-opt strong { font-weight: 500; color: var(--text); }
.pay-choice-opt small { font-size: .86rem; line-height: 1.5; color: var(--text-soft); }
.pay-choice-opt + .pay-choice-opt { border-top: 1px solid var(--line); padding-top: 14px; }
.how-to-pay { margin: 26px 0 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--edge); padding: 22px; display: grid; gap: 12px; }
.how-to-pay .sheet-h { margin: 0; }
.how-to-pay p { margin: 0; }
.pay-app { display: grid; gap: 12px; }
.pay-steps { color: var(--text-soft); font-size: .94rem; max-width: 62ch; }
.pay-other { border-top: 1px solid var(--line); padding-top: 12px; }
.pay-other summary { cursor: pointer; font-size: .92rem; color: var(--metal-text); }
.pay-other-item { display: grid; gap: 10px; padding: 14px 0 4px; }
.pay-other-item + .pay-other-item { border-top: 1px solid var(--line); }
.pay-other-item h3 { margin: 0; font-family: var(--body); font-size: .92rem; font-weight: 500; }
.pay { display: grid; gap: 22px; }
.pay .page-title { margin-bottom: 0; }
.pay .lede { margin-top: 0; }
.pay .back-link { margin: 0; }
.pay-test { margin: 0; border: 1px solid var(--warn); color: var(--warn); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.pay-test strong { font-weight: 500; }
.pay-due { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); padding: 14px 0; }
.pay-due span { color: var(--text-soft); font-size: .92rem; }
.pay-due strong { font-size: 1.35rem; font-weight: 400; }
/* Stripe's embedded card form (/order/:id/card, public/card.js) */
.card-form { margin: 18px 0; min-height: 120px; }
.pay-options fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pay-options legend { font-family: var(--display); font-weight: 400; font-stretch: 108%; font-size: 1.05rem; margin-bottom: 12px; padding: 0; }
.pay-option-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pay-option { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; box-shadow: var(--edge); }
.pay-option:hover { border-color: var(--line-strong); }
.pay-option:focus-visible { outline: 2px solid var(--metal); outline-offset: 2px; }
.pay-option.is-active { border-color: var(--metal); background: var(--surface-2); }
.pay-option-name { font-weight: 500; }
.pay-option-meta { font-size: .84rem; color: var(--text-soft); }
.pay-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--edge); padding: 22px; display: grid; gap: 18px; }
.pay-grid { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 24px; align-items: start; }
.pay-qr { margin: 0; display: grid; gap: 8px; justify-items: center; }
.pay-qr svg { width: 100%; height: auto; border-radius: 10px; display: block; border: 1px solid var(--line); }
.pay-qr figcaption { font-size: .8rem; color: var(--text-faint); }
.pay-fields { margin: 0; display: grid; gap: 14px; min-width: 0; }
.pay-fields dt { font-size: .78rem; color: var(--text-faint); margin-bottom: 4px; }
.pay-fields dd { margin: 0; overflow-wrap: anywhere; }
.pay-fields .link-btn { margin-left: 6px; }
.pay-amount { font-size: 1.3rem; color: var(--metal-text); }
.pay-addr { font-size: .86rem; }
.pay-faint { color: var(--text-soft); }
.pay-hint { display: block; font-size: .82rem; color: var(--text-soft); margin-top: 4px !important; }
.pay-remaining { color: var(--warn) !important; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-wallets { display: contents; }
.pay-wallets img { border-radius: 4px; }
.pay-deeplinks p { margin: 0; font-size: .9rem; color: var(--text-soft); }
.pay-status { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--text); font-size: .94rem; }
.pay-status.is-seen { border-color: rgba(23, 65, 52, .45); color: var(--nonpolar); }
.pay-status a { color: inherit; }
.pay-error { margin: 0; border: 1px solid var(--acid); color: var(--error); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.pay-info { margin: 0; border: 1px solid var(--line-strong); color: var(--text-soft); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.pay-done p { margin: 0; }
.pay-done p + p { margin-top: 8px; }
.pay .pay-note p + p { margin-top: 8px; }
.admin-pay-with { display: grid; gap: 10px; margin: 0 0 12px; }
.admin-pay-with p { margin: 0; font-size: .92rem; }
.app-row { align-items: end; }
@media (min-width: 640px) {
  .pay-app .pay-fields { grid-template-columns: repeat(3, max-content); column-gap: 40px; }
  .pay-app .pay-fields .pay-hint { max-width: 24ch; }
}
@media (max-width: 600px) {
  .how-to-pay, .pay-panel { padding: 18px 16px; }
  .pay-grid { grid-template-columns: 1fr; }
  .pay-qr { max-width: 240px; justify-self: center; width: 100%; }
  .pay-actions .btn, .pay-app .btn { width: 100%; }
}
.admin .hint + .sheet-h, .admin .table-wrap + .sheet-h { margin-top: 28px; }
.next-steps-order .order-steps li { align-content: start; } /* steps of different lengths stay top-aligned */
.pay-net { display: block; margin-top: 8px; }
.pay-net select { font: inherit; font-size: .9rem; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--field); color: var(--text); max-width: 100%; }
.pay-bank { display: grid; gap: 6px; justify-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.pay-bank p { margin: 0; overflow-wrap: anywhere; }
.pay-bank .mono { font-size: .9rem; line-height: 1.6; }
.pay-bank-h, .pay-report-h { font-size: .78rem; color: var(--text-faint); }
.pay-report-box { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.pay-report { display: grid; gap: 10px; max-width: 520px; }
.pay-report label { display: grid; gap: 4px; font-size: .88rem; color: var(--text-soft); }
.pay-report input, .pay-report select { font: inherit; font-size: .95rem; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--field); color: var(--text); }
.pay-report .btn { justify-self: start; }
.pay-reported { margin: 0; border: 1px solid rgba(23, 65, 52, .45); color: var(--nonpolar); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.app-bank { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.app-bank textarea { font: .92rem var(--mono); }
.pay-routes { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.pay-routes summary { cursor: pointer; font-size: .92rem; color: var(--metal-text); }
.pay-routes ul { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 6px; font-size: .92rem; color: var(--text-soft); }
.pay-routes strong { color: var(--text); font-weight: 500; }
.pay-app-go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.pay-app-qr { margin: 0; display: flex; align-items: center; gap: 12px; max-width: 300px; }
.pay-app-qr svg { width: 96px; height: 96px; flex: none; border-radius: 8px; border: 1px solid var(--line); }
.pay-app-qr figcaption { font-size: .82rem; color: var(--text-faint); }
@media (max-width: 760px), (pointer: coarse) { .pay-app-qr { display: none; } }
@media (min-width: 761px) {
  .pay-report { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto; align-items: end; max-width: none; }
}
.paid-report { margin: 0 0 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--edge); padding: 22px; display: grid; gap: 12px; }
.paid-report .sheet-h { margin: 0; }
.paid-report .note { margin: 0; }
.pay-report-why { margin: 0; font-size: .88rem; color: var(--text-soft); grid-column: 1 / -1; }
.pay-report-file input { padding: 7px 10px; }
.paid-report-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; }
.paid-report-list span:first-child { color: var(--text-faint); margin-right: 8px; }
.order-pause { display: grid; gap: 10px; border-color: var(--warn); }
.order-pause h2 { margin: 0; font-size: 1.05rem; }
.order-pause p { margin: 0; }
.badge-proof { border-color: var(--nonpolar); color: var(--nonpolar); }
@media (min-width: 761px) {
  .paid-report .pay-report { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); align-items: end; }
  .paid-report .pay-report .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 761px) {
  .paid-report .pay-report .pay-report-file, .paid-report .pay-report label:nth-of-type(4) { grid-column: 1 / -1; }
}
/* crypto preview (no wallet connected yet; src/crypto/networks.js): the QR code's place, no address */
.pay-qr.is-preview { display: grid; justify-items: center; align-content: start; gap: 8px; }
.pay-qr-ph { width: 168px; aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(19, 51, 60, .05) 10px 20px); }
.pay-addr-ph { color: var(--text-soft); font-style: italic; }
.pay-preview-tag { display: block; margin-top: 4px; font-style: normal; color: var(--warn); }