/* Layout helpers for redesigned pages on peptidetech.is (hand-written; the design system itself is public/hub/pt.css). */
.pt-root .hub-flex-7 { flex: 7 1 560px; min-width: 0; }
.pt-root .hub-flex-5 { flex: 5 1 380px; min-width: 0; }
.pt-root main > .pt-wrap, .hub-page-root > .pt-wrap { box-sizing: border-box; }
@media (max-width: 720px) { .pt-root main > .pt-wrap, .hub-page-root > .pt-wrap { padding: 16px 16px 48px !important; } }
/* Sort controls with many options scroll instead of widening the page. */
.pt-root .hub-scroll-x { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* Mobile menu: the design system hides the nav below 920px and the search below 1180px. */
.pt-root .hub-menu { display: none; position: relative; }
.pt-root .hub-menu > summary { list-style: none; cursor: pointer; }
.pt-root .hub-menu > summary::-webkit-details-marker { display: none; }
.pt-root .hub-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(320px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 12px; border-radius: 18px; background: var(--surface-200); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-float); }
.pt-root .hub-menu-panel a { padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-sans); }
.pt-root .hub-menu-panel a[aria-current] { background: var(--brand-soft); }
.pt-root .hub-menu-panel .pt-search { margin-bottom: 6px; }
@media (max-width: 1180px) { .pt-root .hub-menu { display: block; } }
@media (min-width: 921px) { .pt-root .hub-menu-panel a { display: none; } }

/* ---------- page frame ---------- */
.pt-root .hub-page { padding: 24px 32px 64px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; min-width: 0; }
.pt-root .hub-muted { color: var(--ink-subtle); }
.pt-root .hub-note { margin: 12px 4px 0; color: var(--ink-subtle); font-size: 13px; line-height: 19px; }
.pt-root .hub-strong { font: 650 15px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.pt-root a.hub-strong:hover { text-decoration: underline; }
.pt-root .hub-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pt-root .hub-lead { margin: 0; color: var(--ink-muted); max-width: 64ch; }
.pt-root .hub-prose { margin: 0; color: var(--ink-muted); max-width: 72ch; }
.pt-root .hub-prose p { margin: 0 0 10px; }
.pt-root .hub-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-root .hub-hero { border-radius: 28px; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pt-root .hub-hero-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; }
.pt-root .hub-hero-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-root .hub-hero-side { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.pt-root .hub-h1 { margin: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
/* A vendor record's own icon beside its name (components/hub/parts.jsx VendorLogo). */
.pt-root .hub-h1-row { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.pt-root .hub-h1-row > .hub-h1 { min-width: 0; }
.pt-root .hub-h1-logo { margin-top: 6px; border-radius: 12px; }
.pt-root .hub-h1-rest { color: var(--ink-muted); font-weight: 500; }
.pt-root .hub-strip { border-radius: 24px; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.pt-root .hub-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pt-root .hub-push { margin-left: auto; }
.pt-root .hub-page h1, .pt-root .hub-page .display-xl, .pt-root .hub-page .display-lg { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
.pt-root .hub-stats { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: flex-end; }
.pt-root .hub-sizes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.pt-root a.pt-chip { text-decoration: none; }
.pt-root .pt-chip.is-on, .pt-root .pt-chip[aria-current] { background: var(--accent-soft); border-color: var(--accent); }
.pt-root .hub-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pt-root .hub-main { flex: 1.65 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pt-root .hub-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Rows of panels that end level: long sections run full width and shorter panels sit side
   by side in a row, so no column runs on beside an empty one (two or three across on
   desktop, one on phones). A .hub-col stacks panels in one cell; its last panel fills. */
.pt-root .hub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.pt-root .hub-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pt-root .hub-col > :last-child { flex: 1 1 auto; }
/* Questions fill their panel; two columns once the panel is wide enough. */
.pt-root .hub-faq-list { container-type: inline-size; }
@container (min-width: 860px) { .pt-root .hub-faq-list .pt-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* Methodology weights: two by two rather than three and one. */
.pt-root .hub-weights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .pt-root .hub-weights { grid-template-columns: minmax(0, 1fr); } }
/* "List your store" call to action (home side column, vendor directory). */
.pt-root .hub-partner { display: flex; flex-direction: column; gap: 12px; }
.pt-root .hub-partner ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-muted); }
.pt-root .hub-partner .pt-btn { align-self: flex-start; }
.pt-root .hub-section { border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pt-root .hub-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.pt-root .hub-toolbar-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 100%; min-width: 0; }
.pt-root .hub-filters { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
#offers { scroll-margin-top: 96px; }

/* ---------- tables ---------- */
.pt-root .hub-table-wrap { position: relative; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); max-width: 100%; }
.pt-root .hub-table { width: 100%; border-collapse: collapse; }
.pt-root .hub-table-wide { min-width: 860px; }
.pt-root .hub-table th, .pt-root .hub-table td { padding: 10px 12px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
.pt-root .hub-table thead th { border-top: 0; background: var(--surface-300); font: 600 12px/16px var(--font-sans); color: var(--ink-subtle); white-space: nowrap; }
.pt-root .hub-table tbody th { font-weight: 600; }
.pt-root .hub-table tbody th a { color: var(--ink); }
.pt-root .hub-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- buttons in every state ----------
   app/globals.css styles the legacy buttons' hover and press with
   .pt-btn:not(:disabled):hover/:active from --btn-* variables that the legacy
   Button sets inline. The hub's variant classes set them here, so those rules
   keep the hub's own colours: without them a hovered primary button's text
   turned light on the mint fill, and a pressed button lost its fill. */
.pt-root .pt-btn-primary { --btn-fg: var(--on-accent); --btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #ffffff), var(--accent)); --btn-hbg: linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 78%, #ffffff), var(--accent-strong)); --btn-abg: var(--btn-hbg); }
.pt-root .pt-btn-secondary { --btn-fg: var(--ink); --btn-bg: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); }
.pt-root .pt-btn-ghost { --btn-fg: var(--ink); --btn-bg: transparent; --btn-hbg: var(--surface-300); }
.pt-root .pt-btn-inverse { --btn-fg: var(--surface-100); --btn-bg: var(--ink); }
.pt-root .pt-btn-link { --btn-fg: var(--link); --btn-bg: transparent; }

/* ---------- offers, certificates, panels ---------- */
/* Card grids: at most --cols columns (set from the card count by gridCols() in
   components/hub/parts.jsx, so 6 cards make two rows of 3 rather than 4 + 2), and
   fewer where 260px cards do not fit. */
.pt-root .hub-offers, .pt-root .hub-cards { --cols: 4; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(260px, 100%), calc((100% - (var(--cols) - 1) * 12px) / var(--cols))), 1fr)); gap: 12px; }
/* The offer button sits at the card's foot, so buttons line up across a row of cards. */
.pt-root .hub-offer-go { margin-top: auto; justify-content: center; }
/* Cart and saved-offer controls under each offer (components/site/AddToCart, SaveOffer). */
.pt-root .hub-offer-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.pt-root .hub-offer-tools .pt-cart-button { min-height: 36px; border-radius: var(--radius-sm); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-text); font: 600 13px/1.2 var(--font-sans); }
.pt-root .hub-offer-tools .pt-cart-button:hover:not(:disabled) { border-color: var(--accent); }
.pt-root .hub-offer-tools .pt-cart-button:disabled { opacity: .55; cursor: not-allowed; }
.pt-root .hub-offer-tools button[aria-pressed] { min-height: 36px !important; border-radius: var(--radius-sm) !important; font: 600 13px/1.2 var(--font-sans) !important; }
.pt-root .hub-offer-tools [role="status"] { font: 400 12px/16px var(--font-sans); color: var(--ink-subtle); }
.pt-root .hub-offer-tools a { color: var(--link); }
/* U-100 scale under the calculator results. */
.pt-root .hub-scale { margin: 0; }
.pt-root .hub-scale svg { display: block; width: 100%; max-width: 620px; height: auto; }
.pt-root .hub-scale-barrel { fill: var(--surface-300); stroke: var(--line-strong); stroke-width: 1.2; }
.pt-root .hub-scale-fill { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.pt-root .hub-scale-edge { fill: var(--accent); }
.pt-root .hub-scale-major { stroke: var(--ink-muted); stroke-width: 1.2; }
.pt-root .hub-scale-minor { stroke: var(--ink-subtle); stroke-width: .7; }
.pt-root .hub-scale-num { font: 500 11px var(--font-mono); fill: var(--ink-subtle); }
.pt-root .hub-scale-label { font: 600 12px var(--font-mono); fill: var(--ink); }
.pt-root .hub-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-root .hub-cert { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(0, 2fr) auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(127, 127, 127, 0.06); }
.pt-root .hub-cert-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-root .hub-cert-title { font: 600 14px/19px var(--font-sans); }
.pt-root .hub-cert-tests { display: flex; flex-wrap: wrap; gap: 4px 10px; }
@media (max-width: 720px) { .pt-root .hub-cert { grid-template-columns: 1fr auto; } .pt-root .hub-cert-tests { grid-column: 1 / -1; grid-row: 2; } }
.pt-root .hub-panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-root .hub-panels li { display: grid; grid-template-columns: minmax(min(150px, 100%), 1fr) 56px minmax(0, 2.4fr); gap: 4px 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(127, 127, 127, 0.06); }
.pt-root .hub-panels li > .data-sm:last-child { grid-column: 3; }
.pt-root .hub-panels-v { display: inline-flex; gap: 8px; align-items: center; font: 600 14px/19px var(--font-sans); }
.pt-root .hub-panels-a { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pt-root .hub-panels-a span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-muted); }
@media (max-width: 720px) { .pt-root .hub-panels li { grid-template-columns: 1fr auto; } .pt-root .hub-panels-a, .pt-root .hub-panels li > .data-sm:last-child { grid-column: 1 / -1; } }
.pt-root .hub-refs { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.pt-root .hub-refs a { color: var(--ink); }
.pt-root .hub-spark { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pt-root .hub-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pt-root .hub-ladder li { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); font: 500 13px/18px var(--font-sans); color: var(--ink-subtle); }
.pt-root .hub-ladder li.is-on { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.pt-root .hub-ladder li[aria-current] { border-color: var(--accent); }
.pt-root .hub-areas, .pt-root .hub-chipline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pt-root .hub-chipline { margin-top: 14px; }
.pt-root .hub-linkgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-root .hub-linkgrid li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pt-root .hub-linkgrid a { color: var(--ink); font: 600 14px/19px var(--font-sans); text-decoration: none; }
.pt-root .hub-linkgrid a:hover { text-decoration: underline; }
.pt-root .hub-series { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.pt-root .hub-series-card { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pt-root .hub-series-card ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; color: var(--ink-muted); }
.pt-root .hub-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pt-root .hub-findings li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-muted); }
.pt-root .hub-findings li > svg { flex: none; margin-top: 3px; color: var(--brand); }
.pt-root .hub-findings li.is-warn > svg { color: var(--amber); }
.pt-root .hub-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-root .hub-bars li { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; }
.pt-root .hub-bar { height: 8px; border-radius: 999px; background: rgba(127, 127, 127, 0.14); overflow: hidden; }
.pt-root .hub-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pt-root .hub-bars .data-sm { text-align: right; }
.pt-root .hub-facts { margin: 0; display: grid; gap: 10px; }
.pt-root .hub-facts > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pt-root .hub-facts dt { color: var(--ink-subtle); flex: none; }
.pt-root .hub-facts dd { margin: 0; text-align: right; color: var(--ink); }
.pt-root .hub-facts-wide > div { justify-content: flex-start; align-items: center; }
.pt-root .hub-facts-wide dd { text-align: left; }
.pt-root .hub-peers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-root .hub-peers li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pt-root .hub-peers a { color: var(--ink); font-weight: 600; }
.pt-root .hub-retests { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pt-root .hub-retests li { display: grid; gap: 2px; }
.pt-root .hub-retests a { color: var(--ink); font-weight: 600; }

/* ---------- home ---------- */
.pt-root .hub-home-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.pt-root .hub-home-hero { flex: 7 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pt-root .hub-home-top > .pt-panel:not(.hub-home-hero) { flex: 4 1 320px; min-width: 0; }
.pt-root .hub-home-h1 { margin: 0; }
.pt-root .hub-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.pt-root .hub-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-root .hub-lb li { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; }
.pt-root .hub-lb a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pt-root .hub-lb-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pt-root .hub-codecard-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Tile rows (home: body systems). Each tile keeps room for its longest word (about
   200px with the icon), and a short last row is centred rather than leaving the
   right side empty. */
.pt-root .hub-tiles { container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pt-root .hub-tiles > * { --cols: 1; flex: 0 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols)); min-width: 0; }
@container (min-width: 410px) { .pt-root .hub-tiles > * { --cols: 2; } }
@container (min-width: 620px) { .pt-root .hub-tiles > * { --cols: 3; } }
@container (min-width: 830px) { .pt-root .hub-tiles > * { --cols: 4; } }
@container (min-width: 1040px) { .pt-root .hub-tiles > * { --cols: 5; } }
@container (min-width: 1250px) { .pt-root .hub-tiles > * { --cols: 6; } }
.pt-root .hub-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-root .hub-movers, .pt-root .hub-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-root .hub-movers li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; }
.pt-root .hub-movers a, .pt-root .hub-codes a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pt-root .hub-codes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-root .hub-down { color: var(--price-down); }
.pt-root .hub-up { color: var(--price-up); }
.pt-root .hub-az { list-style: none; margin: 0; padding: 0; columns: 4 180px; column-gap: 24px; }
.pt-root .hub-az li { padding: 3px 0; break-inside: avoid; }
.pt-root .hub-az a { color: var(--ink-muted); text-decoration: none; font-size: 14px; }
.pt-root .hub-az a:hover { color: var(--ink); text-decoration: underline; }
.pt-root a.pt-tier { text-decoration: none; color: inherit; }

/* ---------- codes, labs, calculator ---------- */
.pt-root .hub-codegrid, .pt-root .hub-labcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.pt-root .hub-codecard, .pt-root .hub-labcard { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: 96px; }
.pt-root .hub-codecard-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pt-root .hub-codecard-head a { color: var(--ink); text-decoration: none; }
.pt-root .hub-codecard-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.pt-root .hub-top-pick { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; justify-content: space-between; }
.pt-root .hub-top-pick > p { flex: 1 1 420px; }
.pt-root .hub-calc { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pt-root .hub-calc .pt-select select { width: 100%; max-width: 100%; }
.pt-root .hub-unit { display: flex; gap: 6px; }

/* ---------- body map (/database#body-map, /database/{system}; formerly the evidence atlas) ---------- */
.pt-root .hub-atlas { display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; }
.pt-root .hub-atlas-rail { border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-root .hub-atlas-sys { display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto 4px; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; border: 1px solid transparent; font: 550 14px/19px var(--font-sans); }
.pt-root .hub-atlas-sys > svg { color: var(--brand); }
.pt-root .hub-atlas-sys:hover { background: rgba(127, 127, 127, 0.08); }
.pt-root .hub-atlas-sys.is-on { background: var(--accent-soft); border-color: var(--accent); }
.pt-root .hub-atlas-dist { grid-column: 2 / 4; display: flex; gap: 2px; height: 4px; border-radius: 999px; overflow: hidden; }
.pt-root .hub-atlas-stage { position: relative; border-radius: 24px; min-height: 620px; overflow: hidden; min-width: 0; }
.pt-root .hub-atlas-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.pt-root .hub-atlas-overlay { position: absolute; left: 0; right: 0; top: 0; padding: 18px 20px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.pt-root .hub-atlas-overlay > * { pointer-events: auto; }
.pt-root .hub-atlas-title { display: flex; flex-direction: column; gap: 4px; max-width: 70%; }
.pt-root .hub-atlas-ctl { display: flex; gap: 4px; align-items: flex-start; }
.pt-root .hub-atlas-nogl { position: absolute; left: 20px; right: 20px; top: 45%; text-align: center; color: var(--ink-muted); }
.pt-root .hub-atlas-legend { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; pointer-events: none; }
.pt-root .hub-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pt-root .hub-dot-h { background: #78f0cc; box-shadow: 0 0 10px #78f0cc; }
.pt-root .hub-dot-a { background: #b4c2ff; box-shadow: 0 0 10px #b4c2ff; }
.pt-root .hub-atlas-list { border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: 720px; }
.pt-root .hub-atlas-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow-y: auto; }
.pt-root .hub-atlas-items li { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(127, 127, 127, 0.05); border: 1px solid transparent; }
.pt-root .hub-atlas-items li.is-on { background: var(--accent-soft); border-color: var(--accent); }
.pt-root .hub-atlas-items button { all: unset; cursor: pointer; border-radius: 8px; }
.pt-root .hub-atlas-items button:focus-visible { box-shadow: var(--shadow-focus); }
.pt-root .hub-atlas-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-root .hub-ladder-mini { grid-column: 2 / 4; display: flex; gap: 3px; }
.pt-root .hub-ladder-mini span { flex: 1; height: 4px; border-radius: 999px; }
@media (max-width: 1180px) { .pt-root .hub-atlas { grid-template-columns: 220px minmax(0, 1fr); } .pt-root .hub-atlas-list { grid-column: 1 / -1; max-height: none; } }
@media (max-width: 760px) {
  .pt-root .hub-atlas { grid-template-columns: minmax(0, 1fr); }
  .pt-root .hub-atlas-rail { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .pt-root .hub-atlas-rail > p { display: none; }
  .pt-root .hub-atlas-sys { flex: none; grid-template-rows: auto; }
  .pt-root .hub-atlas-dist { display: none; }
  .pt-root .hub-atlas-stage { min-height: 460px; }
}

@media (max-width: 720px) {
  .pt-root .hub-hero { padding: 20px; border-radius: 22px; }
  .pt-root .hub-hero-side { min-width: 0; width: 100%; }
  .pt-root .hub-strip { padding: 16px; }
  .pt-root .hub-stats { gap: 14px 24px; }
  .pt-root .hub-page .display-lg { font-size: 34px; line-height: 40px; }
  .pt-root .hub-page .display-xl { font-size: 40px; line-height: 46px; }
  .pt-root .hub-tiles-2 { grid-template-columns: minmax(0, 1fr); }
  .pt-root .hub-movers li { grid-template-columns: 1fr auto auto; }
  .pt-root .hub-movers li .pt-spark { display: none; }
}
/* app/globals.css lays [data-price-row] table rows out as wrapped lines on phones
   (with !important); an offer card keeps its single column. */
@media (max-width: 720px) {
  .pt-root .pt-offer[data-price-row] { display: flex !important; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px !important; padding: var(--space-4) !important; }
  .pt-root .pt-offer[data-price-row] > * { flex: none !important; text-align: inherit !important; }
  .pt-root .pt-offer[data-price-row] > :last-child > * { width: auto; }
}

/* ---------- partner programme (/partners) ---------- */
.pt-root .hub-psteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.pt-root .hub-psteps li { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.pt-root .hub-psteps .data-lg { color: var(--accent-text); }
.pt-root .hub-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-root .hub-checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-muted); }
.pt-root .hub-checklist li .pt-icon { color: var(--accent-text); margin-top: 2px; }
.pt-root .hub-olist { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-muted); }
.pt-root .hub-code { margin: 12px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-100) 70%, transparent); font: 400 12px/18px var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-root .hub-wizard { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pt-root .hub-wizard li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); color: var(--ink-subtle); min-width: 0; }
.pt-root .hub-wizard li > span:first-child { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-300); color: var(--ink-muted); }
.pt-root .hub-wizard li.is-on { border-color: var(--accent); color: var(--ink); }
.pt-root .hub-wizard li.is-on > span:first-child { background: var(--accent); color: var(--accent-ink, #05241b); }
.pt-root .hub-wizard li.is-done > span:first-child { background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 720px) { .pt-root .hub-wizard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pt-root .hub-pform { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pt-root .hub-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px 16px; }
.pt-root .hub-pfield .pt-field-box input.hub-mono { font-family: var(--font-mono); }
.pt-root .hub-select select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 12px; font: 450 14px/20px var(--font-sans); color: var(--ink); }
.pt-root .hub-select select option { background: var(--surface-200); color: var(--ink); }
.pt-root .hub-pconsents { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 10px; }
.pt-root .hub-pconsents legend { padding: 0 6px; }
.pt-root .hub-pcheck { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-muted); cursor: pointer; }
.pt-root .hub-pcheck input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.pt-root .hub-actions-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pt-root .hub-preqs + .hub-actions-row { margin-top: 20px; }
.pt-root .hub-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.pt-root .hub-copy code { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-100) 70%, transparent); color: var(--ink); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.pt-root .hub-pmsg { margin: 0; padding: 10px 12px; border-radius: 12px; }
.pt-root .hub-pmsg.is-error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.pt-root .hub-pmsg.is-ok { background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.pt-root .hub-preqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-root .hub-preqs-cols { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px 28px; }
.pt-root .hub-preqs li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.pt-root .hub-preqs li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-root .hub-preqs li.is-ok .pt-icon { color: var(--pos); }
.pt-root .hub-preqs li.is-warn .pt-icon { color: var(--amber); }
.pt-root .hub-preqs li.is-todo .pt-icon { color: var(--ink-subtle); }
.pt-root .hub-pwait { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--ink-muted); }
.pt-root .hub-pdetails { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; display: grid; gap: 10px; }
.pt-root .hub-pdetails > summary { cursor: pointer; color: var(--ink-muted); }
.pt-root .hub-pcard { border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.pt-root .hub-pcard > .pt-field, .pt-root .hub-pcard > .hub-pcheck { align-self: stretch; }
.pt-root .hub-linkbtn { border: 0; background: none; padding: 0; color: var(--text-link, var(--accent-text)); text-decoration: underline; cursor: pointer; font: inherit; }
.pt-root .hub-mapform { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; align-items: end; }
.pt-root .hub-rowactions { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-root .hub-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-root .hub-events li { display: grid; grid-template-columns: 170px 90px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .pt-root .hub-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Body map: anatomical 3D body (still poster first, then the live canvas), labels with leader lines, female/male. */
.pt-root .hub-atlas-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; transition: opacity 0.45s ease; user-select: none; }
.pt-root .hub-atlas-stage.is-ready .hub-atlas-poster { opacity: 0; }
.pt-root .hub-atlas-stage canvas { z-index: 1; }
.pt-root .hub-atlas-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pt-root .hub-atlas-leaders { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.pt-root .hub-atlas-leaders g { transition: opacity 0.2s ease; }
.pt-root .hub-atlas-leaders path { fill: none; stroke: rgba(180, 194, 255, 0.55); stroke-width: 1; }
.pt-root .hub-atlas-leaders circle { fill: #78f0cc; filter: drop-shadow(0 0 4px rgba(120, 240, 204, 0.9)); }
.pt-root .hub-atlas-label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 14, 26, 0.74); border: 1px solid rgba(143, 163, 255, 0.3); color: var(--ink); font: 550 12px/16px var(--font-sans); white-space: nowrap; text-decoration: none; pointer-events: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.2s ease, border-color 0.15s ease, background 0.15s ease; will-change: transform; }
.pt-root .hub-atlas-label.is-part { pointer-events: none; }
.pt-root a.hub-atlas-label:hover, .pt-root a.hub-atlas-label.is-on { border-color: #78f0cc; background: rgba(18, 40, 40, 0.82); }
.pt-root .hub-atlas-label-n { color: #78f0cc; }
.pt-root .hub-atlas-label-sub { color: var(--ink-muted); font-weight: 450; }
.pt-root .hub-atlas-overlay { z-index: 3; }
.pt-root .hub-atlas-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pt-root .hub-atlas-sex { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(10, 14, 26, 0.6); border: 1px solid var(--line); }
.pt-root .hub-atlas-sex button { all: unset; cursor: pointer; padding: 4px 12px; border-radius: 999px; font: 550 13px/18px var(--font-sans); color: var(--ink-muted); }
.pt-root .hub-atlas-sex button[aria-pressed='true'] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.pt-root .hub-atlas-sex button:focus-visible { box-shadow: var(--shadow-focus); }
.pt-root .hub-atlas-load { all: unset; position: absolute; z-index: 3; left: 50%; top: 56%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; cursor: pointer; background: rgba(10, 14, 26, 0.78); border: 1px solid #78f0cc; color: var(--ink); font: 600 14px/18px var(--font-sans); box-shadow: 0 0 24px rgba(120, 240, 204, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pt-root .hub-atlas-load:focus-visible { box-shadow: var(--shadow-focus); }
.pt-root .hub-atlas-busy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 54px; margin: 0; text-align: center; color: var(--ink-muted); }
.pt-root .hub-atlas-legend { z-index: 3; }
.pt-root .hub-atlas-nogl { z-index: 3; }
.pt-root .hub-atlas-credit { margin: 10px 4px 0; }
@media (max-width: 720px) { .pt-root .hub-atlas-label { font-size: 11px; padding: 2px 7px; } .pt-root .hub-atlas-title { max-width: 60%; } }
.pt-root .hub-atlas-gl { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; }
.pt-root .hub-atlas-overlay { background: linear-gradient(180deg, rgba(9, 12, 19, 0.62), rgba(9, 12, 19, 0)); padding-bottom: 28px; }
.pt-root .hub-atlas-legend { background: linear-gradient(0deg, rgba(9, 12, 19, 0.62), rgba(9, 12, 19, 0)); padding-top: 24px; }
/* The 3D body is additive light on a transparent canvas (components/hub/atlas3d.js), so it washes out
   on a light page. Its stage keeps the night palette in both themes: the dark tokens are set on the
   stage itself, and the labels, controls, legend and overlays inside it inherit them. */
.pt-root .pt-g.hub-atlas-stage {
  color-scheme: dark;
  --surface-100: #090c13; --surface-200: #131824; --surface-300: #1a2030;
  --line: rgba(255,255,255,0.08); --line-strong: #7a849b;
  --ink: #eef1f8; --ink-muted: #a6aec0; --ink-subtle: #959eb2;
  --brand: #8fa3ff; --brand-strong: #b4c2ff; --on-brand: #0b1233; --brand-soft: #1e2752; --link: #8fa3ff;
  --accent: #78f0cc; --accent-strong: #a6f7df; --on-accent: #05241b; --accent-text: #78f0cc; --accent-soft: #123a31; --focus: #78f0cc;
  --glass-top: rgba(44,52,68,0.70); --glass-bottom: rgba(18,22,30,0.55); --glass-rim: rgba(255,255,255,0.14); --glass-highlight: rgba(255,255,255,0.12);
  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.12), 0 14px 30px -18px rgba(0,0,0,0.85);
  --shadow-focus: 0 0 0 2px #090c13, 0 0 0 4px #78f0cc;
  /* the site's own tokens (public/hub/legacy.css), which the eyebrow pills read */
  --bg-page: #090c13; --bg-subtle: #0f131c; --bg-muted: #1a2030;
  --text-primary: #eef1f8; --text-body: #d0d5e1; --text-secondary: #a6aec0; --text-muted: #959eb2; --text-link: #8fa3ff;
  --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16);
  color: var(--ink);
  background: radial-gradient(60% 46% at 50% 46%, rgba(143, 163, 255, 0.07), transparent 72%), linear-gradient(180deg, #212835, #0e1119);
}

/* ---------- peptide database: the body map section, the list's filters and columns ---------- */
#body-map, #list, #questions { scroll-margin-top: 96px; }
.pt-root .hub-bodymap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pt-root .hub-bodymap > .hub-toolbar { padding: 8px 4px 0; }
/* Below the stage on narrow screens the section's list scrolls in its own box, so the full list under it stays close. */
@media (max-width: 1180px) { .pt-root .hub-bodymap .hub-atlas-list { max-height: 460px; } }
.pt-root .hub-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.pt-root .hub-jump a { color: var(--link); font-weight: 600; text-decoration: none; }
.pt-root .hub-jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-root .hub-table-xwide { min-width: 1040px; }
.pt-root .hub-evcell { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pt-root .hub-table .hub-ladder-mini { width: 64px; }
.pt-root .hub-syslinks { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
/* Links in table cells keep the site's underline (app/globals.css), so they read as links without colour. */
.pt-root .hub-syslinks a { white-space: nowrap; }
.pt-root .hub-syslinks a[aria-current] { color: var(--ink); font-weight: 600; }
/* Four chip rows would stack about 16 lines deep on a phone: each row scrolls sideways instead. */
@media (max-width: 720px) {
  .pt-root .hub-filters-rows { flex-direction: column; align-items: stretch; gap: 8px; }
  .pt-root .hub-filters-rows .pt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
  .pt-root .hub-filters-rows .pt-chip { flex: none; }
}