/* Peptide Knowledge — peptideknowledge.net
   Layout concept: a lab reference library. Sticky top bar, a reading column near 68ch,
   an "On this page" rail on wide screens, and spec-sheet briefs with a residue strip. */
/* Fallback faces sized to the web fonts' widths, so text wraps the same before and after
   the fonts arrive and the page does not jump (layout shift). */
@font-face { font-family: "PK Body Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 103.9%; }
@font-face { font-family: "PK Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 500 800; size-adjust: 101.3%; }
@font-face { font-family: "PK Mono Fallback"; src: local("Consolas"); size-adjust: 109%; }
:root {
  --bg: #f4f7f7;
  --surface: #ffffff;
  --surface-2: #eaf0f0;
  --ink: #12212a;
  --muted: #53646d;
  --line: #d5dfe1;
  --accent: #0a6c68;
  --accent-ink: #ffffff;
  --accent-soft: #dcefec;
  --ok: #2e6a33; --ok-soft: #e3f1e2;
  --info: #2b4f87; --info-soft: #e3eaf6;
  --warn: #8d5300; --warn-soft: #faefd9;
  --neutral: #4d5b63; --neutral-soft: #e9eef0;
  --danger: #a23a2a; --danger-soft: #f8e4df;
  --font-display: "Bricolage Grotesque", "PK Display Fallback", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "PK Body Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "PK Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 10px;
  --wrap: 1180px;
  --read: 41.6rem; /* 68ch of Public Sans, fixed so a centred column does not jump when the font loads */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d161b; --surface: #142028; --surface-2: #1a2a33; --ink: #e3ecee; --muted: #94a7af; --line: #26363f;
    --accent: #3fc0b6; --accent-ink: #062120; --accent-soft: #143633;
    --ok: #7ccf83; --ok-soft: #173020; --info: #8db2f0; --info-soft: #182a45;
    --warn: #f0b660; --warn-soft: #36290f; --neutral: #b2c0c6; --neutral-soft: #1f2d35;
    --danger: #f08b78; --danger-soft: #3a1d17;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d161b; --surface: #142028; --surface-2: #1a2a33; --ink: #e3ecee; --muted: #94a7af; --line: #26363f;
  --accent: #3fc0b6; --accent-ink: #062120; --accent-soft: #143633;
  --ok: #7ccf83; --ok-soft: #173020; --info: #8db2f0; --info-soft: #182a45;
  --warn: #f0b660; --warn-soft: #36290f; --neutral: #b2c0c6; --neutral-soft: #1f2d35;
  --danger: #f08b78; --danger-soft: #3a1d17;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.65 var(--font-body);
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); font-weight: 650; }
h3 { font-size: 1.12rem; font-weight: 650; }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.eyebrow { font: 600 0.8125rem/1.25 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 16px; }

.wrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.site-header {
  position: relative; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font: 700 1.12rem/1 var(--font-display); letter-spacing: -0.01em; }
.brand-name span { color: var(--accent); }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: nowrap; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav .nav-cta { background: var(--accent); color: var(--accent-ink); }
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); }
@media (min-width: 1024px) { .site-header { position: sticky; } }
@media (min-width: 721px) and (max-width: 1023px) {
  .site-header .wrap { gap: 4px 24px; }
  .nav { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 720px) {
  .site-header .wrap { gap: 8px; }
  .nav { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nav a { white-space: normal; justify-content: center; text-align: center; line-height: 1.2; padding: 4px 6px; font-size: 1rem; background: var(--surface-2); }
}

/* ---------- Research-use banner ---------- */
.ruo { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.ruo .wrap { padding-block: 7px; }

/* ---------- Generic sections ---------- */
main { display: block; }
.section { padding-block: clamp(40px, 6vw, 72px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 10px; margin-bottom: 28px; max-width: var(--read); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 42.5rem; }
.prose { max-width: var(--read); display: grid; gap: 16px; }
.prose h2 { margin-top: 18px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 9px;
  font-weight: 600; text-decoration: none; border: 1px solid transparent; font-size: 0.98rem;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(32px, 5vw, 56px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 20px; }
.hero h1 span { color: var(--accent); }
.equation {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 3vw, 28px);
  display: grid; gap: 18px;
}
.eq-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; font-family: var(--font-mono); }
.eq-term { display: grid; gap: 2px; }
.eq-term b { font: 600 clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1 var(--font-mono); color: var(--ink); }
.eq-term small { font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.eq-op { color: var(--muted); font-size: 1.3rem; }
.eq-result b { color: var(--accent); }
.equation .syringe-wrap { border-top: 1px dashed var(--line); padding-top: 14px; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Category index ---------- */
.cat-grid { columns: 4 240px; column-gap: 32px; }
.cat-block { display: grid; gap: 10px; align-content: start; break-inside: avoid; margin-bottom: 28px; }
.cat-block h3 { padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.cat-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cat-block li { position: relative; }
.cat-block li a { font-weight: 600; }
.cat-block li a::after { content: ""; position: absolute; inset: -4px 0; }
.cat-block li span { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

/* ---------- Glossary ---------- */
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; margin: 0; }
.glossary div { padding-block: 14px; border-top: 1px solid var(--line); }
.glossary dt { font-weight: 700; font-family: var(--font-display); }
.glossary dd { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 0.8125rem/1.2 var(--font-body); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-neutral { background: var(--neutral-soft); color: var(--neutral); }

/* ---------- Regulatory table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ---------- Callouts ---------- */
.note { border-radius: var(--radius); padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
.note-warn { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
.note-warn strong { color: var(--warn); }
.disclaimer { font-size: 0.88rem; color: var(--muted); max-width: 43.1rem; }

/* ---------- Library ---------- */
.lib-tools { display: grid; gap: 14px; margin-bottom: 28px; }
.search { width: 100%; max-width: 520px; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: 500 0.88rem/1 var(--font-body); min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lib-group { display: grid; gap: 14px; margin-bottom: 36px; }
.lib-group h2 { font-size: 1.3rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card {
  display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card h3 { font-size: 1.15rem; }
.card .kind { font: 500 0.8125rem/1.2 var(--font-mono); color: var(--muted); white-space: nowrap; }
.card p { color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.card .seq-mini { font: 500 0.8125rem/1.35 var(--font-mono); color: var(--accent); overflow-wrap: anywhere; }
.empty { color: var(--muted); padding: 24px 0; }

/* ---------- Brief page ---------- */
.crumbs { font-size: 0.88rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs { align-items: center; }
.crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.brief-head { display: grid; gap: 14px; padding-block: 32px 24px; }
.brief-head .aka { color: var(--muted); font-size: 1.05rem; }
.brief-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.brief-meta .tag { font: 500 0.8125rem/1.2 var(--font-mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; }
.residues { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; }
.residues-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.res { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 32px; min-height: 48px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 600 0.95rem/1 var(--font-mono); padding: 5px 4px; }
.res i { font: 400 0.8125rem/1 var(--font-mono); color: var(--muted); font-style: normal; }
.res-text { font: 500 0.95rem/1.5 var(--font-mono); overflow-wrap: anywhere; }
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; padding-bottom: 64px; }
.brief-body { display: grid; gap: 34px; min-width: 0; }
.brief-body section { display: grid; gap: 12px; max-width: var(--read); }
.brief-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.brief-body .refs { font-size: 0.92rem; color: var(--muted); }
.rail { position: sticky; top: 96px; align-self: start; display: grid; gap: 18px; }
.rail nav ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.rail nav a { display: block; padding: 11px 12px; line-height: 1.5; color: var(--muted); text-decoration: none; font-size: 0.92rem; margin-left: -2px; border-left: 2px solid transparent; }
.rail nav a:hover { color: var(--ink); border-left-color: var(--accent); }
.facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.facts div { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font: 600 0.8125rem/1.25 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 0.93rem; }
.related { display: flex; gap: 8px; flex-wrap: wrap; }
.related a { font-size: 0.9rem; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; background: var(--surface); }
@media (max-width: 900px) {
  .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; order: -1; }
  .rail nav { display: none; }
}

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 2.5vw, 24px); display: grid; gap: 22px; }
.field { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field legend, .field > label { font-weight: 600; font-size: 0.95rem; padding: 0; }
.field legend small, .field > label small { font-weight: 400; color: var(--muted); }
.select, .num-input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); width: 100%; min-height: 44px;
}
.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  font: 500 0.9rem/1 var(--font-mono); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); cursor: pointer; min-width: 56px; min-height: 44px;
}
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.other-row { display: flex; gap: 8px; align-items: center; }
.other-row .num-input { max-width: 160px; }
.unit-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.unit-toggle button { font: 600 0.875rem/1 var(--font-mono); min-height: 44px; min-width: 56px; padding: 9px 14px; border: 0; background: var(--bg); color: var(--ink); cursor: pointer; }
.unit-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.result { padding: 16px; display: grid; gap: 4px; border-right: 1px solid var(--line); background: var(--surface); }
.result:nth-child(2n) { border-right: 0; }
.result:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.result .label { font: 600 0.8125rem/1.25 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.result .value { font: 600 clamp(1.25rem, 1rem + 0.9vw, 1.65rem)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result .sub { font-size: 0.82rem; color: var(--muted); }
.result.key .value { color: var(--accent); }
.draw-line { font-size: 1.05rem; }
.draw-line strong { color: var(--accent); font-family: var(--font-mono); }
.warnings { display: grid; gap: 8px; }
.warnings p { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 10px 12px; font-size: 0.92rem; }
.warnings p.soft { background: var(--warn-soft); color: var(--warn); }
.syringe svg { display: block; width: 100%; height: auto; }
.syr-barrel { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.syr-fill { fill: var(--accent); opacity: 0.85; }
.syr-over { fill: var(--danger); opacity: 0.85; }
.syr-tick { stroke: var(--ink); }
.syr-label { fill: var(--muted); font: 500 10px var(--font-mono); }
.syr-metal { fill: var(--muted); }
.syr-plunger { fill: var(--neutral-soft); stroke: var(--ink); stroke-width: 1.2; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .results { grid-template-columns: minmax(0, 1fr); }
  .result { border-right: 0; border-bottom: 1px solid var(--line); }
  .result:last-child { border-bottom: 0; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; max-width: 49rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font: 600 1.05rem/1.4 var(--font-display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 1.5rem/1 var(--font-mono); color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 20px; color: var(--muted); display: grid; gap: 10px; max-width: var(--read); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 40px; margin-top: 24px; }
.site-footer .wrap { display: grid; gap: 24px; }
.foot-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: start; }
.foot-links { display: flex; gap: 0 20px; flex-wrap: wrap; }
.foot-links a { color: var(--ink); text-decoration: none; font-size: 0.94rem; display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a:hover { color: var(--accent); }
.site-footer .small { font-size: 0.82rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Blog ---------- */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.post-meta { font: 500 0.8rem/1.4 var(--font-mono); color: var(--muted); letter-spacing: 0.02em; }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post-tags .tag { font: 500 0.8125rem/1.2 var(--font-mono); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 9px; }
.post-card h3 { font-size: 1.2rem; }
.post-article { display: grid; gap: 16px; max-width: 45.3rem; padding-block: 32px 64px; }
.post-body { font-size: 1.06rem; }
.post-body h2 { font-size: 1.4rem; margin-top: 12px; }
.post-body h3 { margin-top: 8px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.post-nav a { display: grid; gap: 2px; min-height: 44px; align-content: center; text-decoration: none; font-weight: 600; min-width: 0; }
.post-nav a small { font: 500 0.8125rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.post-nav a.next { text-align: right; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.editor .panel textarea, .editor .panel input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); width: 100%; }
.editor #pf-body { min-height: 320px; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.55; }
.editor #pf-code { min-height: 140px; font-family: var(--font-mono); font-size: 0.8rem; }
.editor .help { font-size: 0.85rem; color: var(--muted); }
.editor .status { color: var(--warn); font-size: 0.9rem; min-height: 1.2em; }
.editor .msg { color: var(--accent); font-size: 0.9rem; min-height: 1.2em; }
.editor .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.editor button.btn { cursor: pointer; font: inherit; font-weight: 600; }
@media (max-width: 900px) { .editor { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .post-nav { grid-template-columns: minmax(0, 1fr); } .post-nav a.next { text-align: left; } }

/* ---- video, sourcing, supplier links (added Oct 31, 2026) ---- */
.video { margin: 8px 0 20px; display: grid; gap: 8px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: 0.85rem; color: var(--muted); }
.disclosure { background: var(--info-soft); border-color: transparent; }
.disclosure strong { color: var(--info); }
.checklist { display: grid; gap: 10px; }
.supplier { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 2.5vw, 24px); display: grid; gap: 10px; }
.supplier h3 { margin: 0; }
.supplier-disclosure { background: var(--info-soft); border-radius: 8px; padding: 10px 12px; font-size: 0.92rem; }
.supplier-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 8px; background: var(--surface); }
.supplier-box ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.supplier-box .small, .small { font-size: 0.85rem; color: var(--muted); }
.catalog { display: grid; gap: 20px; }
.catalog-group h3 small { font: 500 0.8rem var(--font-mono); color: var(--muted); }
.catalog-group ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.catalog-group li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
.catalog-group li span { min-width: 0; }
.muted { color: var(--muted); }
.steps-mini { display: grid; gap: 6px; margin: 0 0 22px; padding-left: 22px; max-width: var(--read); }
@media (max-width: 640px) { .catalog-group li { grid-template-columns: minmax(0, 1fr); } }
.lib-supplier { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.lib-supplier h2 { margin: 0; }
.calc-disclaimer { margin: 0 0 24px; }
.video-card { position: relative; aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; align-content: center; gap: 14px; padding: 20px; text-align: center; text-decoration: none; color: var(--ink); border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 40%, var(--surface) 0%, var(--surface-2) 100%); }
.video-card:hover .video-play, .video-card:focus-visible .video-play { filter: brightness(1.08); }
.video-play { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.video-play svg { margin-left: 3px; }
.video-text { display: grid; gap: 4px; max-width: 28.15rem; }
.video-text strong { font-size: 1.02rem; line-height: 1.3; }
.video-text span { font-size: 0.85rem; color: var(--muted); }

/* Move Marketing layout fix, Nov 2 2026: the video card kept its 16:9 box at its content-sized width,
   which pushed the reconstitution post 159 to 174 px wider than a 375 or 390 px phone. */
.video-card { min-width: 0; }

/* Move Marketing polish, Nov 4 2026: phone reading size, tap targets, home page length,
   sticky results on wide screens. Layout only; no copy, facts or prices change here. */

/* The hosting badge is not part of the site. */
#lovable-badge { display: none !important; }

/* Standalone links ("See all posts", "All blog posts", store and PubMed links) get a 44 px target. */
.more-link, #brief-link, .supplier-box li > a, .refs li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }

/* Category index: every category opens on wide screens; phones start collapsed (see index.html). */
.cat-block > summary { list-style: none; }
.cat-block > summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) { .cat-block > summary { pointer-events: none; } }

/* Calculator and blog editor: the results and the preview stay in view while you change the inputs. */
@media (min-width: 901px) {
  .calc > .panel:last-child, .editor > .panel:last-child { position: sticky; top: 16px; }
  .editor > .panel:last-child { max-height: calc(100vh - 32px); overflow: auto; }
}
@media (min-width: 1024px) {
  .calc > .panel:last-child, .editor > .panel:last-child { top: 88px; }
  .editor > .panel:last-child { max-height: calc(100vh - 104px); }
}

@media (max-width: 720px) {
  /* 16 px reading text on phones; caps labels, pills and tags stay at 13 px */
  .ruo { font-size: 1rem; line-height: 1.45; }
  .cat-block li span, .glossary dd, .card p, td, .disclaimer, .crumbs, .brief-body .refs, .facts dd,
  .related a, .chip, .field legend, .field > label, .seg button, .result .sub, .warnings p,
  .foot-links a, .site-footer .small, .video figcaption, .video-text span, .supplier-disclosure,
  .supplier-box .small, .small, .catalog-group li, .catalog-group h3 small, .post-meta, .btn,
  .editor .help, .editor .status, .editor .msg, .editor #pf-body, .editor #pf-code { font-size: 1rem; }
  .foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: 100%; }

  /* collapsed categories read as a tappable list */
  .cat-grid { columns: auto; }
  .cat-block { margin-bottom: 0; gap: 0; border-bottom: 1px solid var(--line); }
  .cat-block:first-child { border-top: 1px solid var(--line); }
  .cat-block > summary { cursor: pointer; position: relative; display: flex; align-items: center; min-height: 52px; padding: 8px 36px 8px 0; }
  .cat-block > summary h3 { padding-bottom: 0; border-bottom: 0; }
  .cat-block > summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--font-mono); color: var(--accent); }
  .cat-block[open] > summary::after { content: "\2212"; }
  .cat-block[open] > ul { padding-bottom: 16px; }
}

/* Regulatory table: one card per compound on phones instead of a squeezed three-column table. */
@media (max-width: 640px) {
  #regulation table, #regulation tbody, #regulation tr, #regulation td { display: block; }
  #regulation thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #regulation tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  #regulation tr:last-child { border-bottom: 0; }
  #regulation td { padding: 0; border: 0; }
  #regulation td > a:only-child { margin-block: 0; font-weight: 600; }
  #regulation td:last-child { flex-basis: 100%; color: var(--muted); }
  #regulation .pill { white-space: normal; line-height: 1.25; }
}
details.cat-block { display: block; }
details.cat-block > ul { margin-top: 10px; }
@media (max-width: 720px) { details.cat-block > ul { margin-top: 0; } }
.foot-links a, .crumbs a, td > a:only-child { min-width: 44px; }
.cat-block > summary { display: flex; align-items: center; min-height: 44px; }
.cat-block > summary h3 { flex: 1; }
@media (max-width: 1199px) { .foot-links { flex-basis: 100%; } }
@media (max-width: 720px) { .res, .res-text, .field legend small, .field > label small, .unit-toggle button { font-size: 1rem; } }

/* Production launch: preserve the supplied polish and explicit control state. */
[hidden] { display: none !important; }
button, input, select, textarea, .btn, [role="button"] { min-width: 44px; min-height: 44px; }
.nav a { flex: 0 0 auto; }
.nav a, .ruo, .btn, .cat-block li span, .glossary dd, table, .disclaimer,
.chip, .card p, .crumbs, .brief-body .refs, .rail nav a, .facts dd, .related a,
.field legend, .field > label, .seg button, .unit-toggle button, .result .sub,
.warnings p, .foot-links a, .site-footer .small, .editor #pf-body,
.editor .help, .editor .status, .editor .msg, .video figcaption,
.supplier-disclosure, .supplier-box .small, .small, .catalog-group li,
.video-text span, .res-text, .res { font-size: 1rem; }
@media (max-width: 720px) { .site-header .wrap { justify-content: center; } }
.calculator-jump { justify-self: center; justify-content: center; }
#compound { scroll-margin-top: 8px; }
.steps-mini code { overflow-wrap: anywhere; }
.draft-save { margin-bottom: 18px; }
.draft-save .status { margin-top: 0; }
.draft-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }