/* The private layer (PFG_PRIVATE=1 builds only: the layout links this file only then, and Eleventy copies it only then). It restyles nothing of the public site.
   It adds the chip that says a build is private, and the community block: what people report online, which is made to look unlike the verified doses
   so the two are never mixed up: a fine line in the caution tone and a warm wash (--warn) instead of the gray tiles, and "Not tested" on everything in it.
   Nothing here relies on colour alone: every mark has words beside it. The tokens come from site.css, so both themes follow. */
:root{--dash:color-mix(in srgb,var(--warn) 58%,transparent);--wash:color-mix(in srgb,var(--warn) 5%,var(--bg))}

/* ---------- the chip in the bar of every page of a private build ---------- */
/* A lock and "Private" in the caution tone, 26px tall, in the page's one bar (layout.njk puts it just before the search button): the reminder is on screen whenever the bar is, and costs the page no
   height of its own. It is a label, not a control (the full sentence is its tooltip and its name for a screen reader). Where the bar has no room for the word (a phone narrower than 430px, whose
   wordmark and two buttons leave about 50px; a window of 761 to 899px, whose five links and the wordmark would be squeezed) it keeps the lock alone in a round chip. */
.pv-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;margin-left:auto;padding:0 10px 0 8px;border-radius:980px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 60%,transparent);color:var(--warn);font-size:var(--fs-2xs);font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap;cursor:default}
.pv-chip .icon{width:14px;height:14px;stroke-width:1.9}
.pv-chip + .gnav-actions{margin-left:0}
@media (max-width:429px),(min-width:761px) and (max-width:899px){
  .pv-chip{gap:0;padding:0 6px}
  .pv-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- the community block ---------- */
/* a tinted panel with a fine solid line in the caution tone (never the dashed outline of a wireframe); on a phone it is a band the full width of the screen, so the cards in it have the width of the page */
.community{container-type:inline-size;overflow-wrap:break-word;margin-top:clamp(36px,5vw,56px);padding:clamp(22px,4vw,40px);border:1px solid var(--dash);border-radius:var(--r-lg);background:var(--wash)}
.community,.diy-route,.cm-head,.cm-title,.diy-title,.proto-name{scroll-margin-top:calc(var(--lnav-h,52px) + 16px)}
.proto-name,.cm-title,.diy-title{scroll-margin-top:calc(var(--lnav-h,52px) + 96px)} /* (their id sits under a row of chips: the whole card lands in view) */
.cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 20px}
.tt.cm-title{flex:1 1 auto;min-width:0;margin:0;font-size:clamp(1.5rem,2.6vw,2rem)}
/* a block too narrow for the two halves of its heading on one line (beside a blend's card) sets the gray half under the bold one, as a phone does */
@container (max-width:860px){.tt.cm-title > span:not(.nowrap){display:block;margin-top:6px;font-family:var(--f-text);font-size:1.1875rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-2)}}
.cm-private{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px 0 10px;border-radius:980px;box-shadow:inset 0 0 0 1.5px var(--warn);color:var(--warn);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.cm-private .icon{width:16px;height:16px;stroke-width:1.9}
.community h4{margin:0}
.cm-summary{max-width:60ch;margin-top:18px;font-size:1.1875rem;line-height:1.5;color:var(--ink)}
/* the rest of a long summary is one line away: "More about this" */
.cm-more{max-width:60ch;margin-top:4px}
.cm-more > summary{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-size:1.0625rem;font-weight:500;list-style:none}
.cm-more > summary::-webkit-details-marker{display:none}
.cm-more > summary::after{content:"\203A";margin-left:6px;transition:transform .25s var(--ease)}
.cm-more[open] > summary::after{transform:rotate(90deg)}
.cm-more > p{padding-bottom:6px;font-size:1.1875rem;line-height:1.5;color:var(--ink)}
.proto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;margin-top:28px}

/* a protocol: a card, with its prevalence and "Not tested" up top, then labelled rows, notes, and the sources folded away */
.proto{container-type:inline-size;display:flex;flex-direction:column;gap:14px;min-width:0;padding:22px 22px 6px;border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
/* in the dark theme a card is a step LIGHTER than the panel it sits on (as a tile is on the page), never the pure black of a hole in it */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .proto{background:var(--card)}:root:not([data-theme="light"]) .stack .proto{background:var(--card-2)}}
:root[data-theme="dark"] .proto{background:var(--card)}
:root[data-theme="dark"] .stack .proto{background:var(--card-2)}
/* ...and what is set on a card in the gray of a tile (the pills, the notes) is a step lighter again, so it still shows */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .proto .prev,:root:not([data-theme="light"]) .proto .src-type,:root:not([data-theme="light"]) .proto .proto-notes .is-calc{background:var(--card-2)}
  :root:not([data-theme="light"]) .proto .calc-tag{background:var(--field-hover)}
  :root:not([data-theme="light"]) .stack .proto .prev,:root:not([data-theme="light"]) .stack .proto .src-type,:root:not([data-theme="light"]) .stack .proto .proto-notes .is-calc,:root:not([data-theme="light"]) .stack .proto .form{background:var(--field-hover)}
}
:root[data-theme="dark"] .proto .prev,:root[data-theme="dark"] .proto .src-type,:root[data-theme="dark"] .proto .proto-notes .is-calc{background:var(--card-2)}
:root[data-theme="dark"] .proto .calc-tag{background:var(--field-hover)}
:root[data-theme="dark"] .stack .proto .prev,:root[data-theme="dark"] .stack .proto .src-type,:root[data-theme="dark"] .stack .proto .proto-notes .is-calc,:root[data-theme="dark"] .stack .proto .form{background:var(--field-hover)}
.proto-tags{display:flex;flex-wrap:wrap;gap:8px}
.prev,.nt{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:980px;font-size:var(--fs-sm);font-weight:600}
.prev{background:var(--card);color:var(--ink)}
.nt{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)} /* a tinted chip, no border: the words "Not tested" are what says it */
.proto-name{font-family:var(--f-display);font-size:1.375rem;font-weight:700;line-height:1.2;letter-spacing:var(--tr-m)}
.proto-rows{display:grid;gap:12px;margin:0}
.proto-rows > div{display:grid;gap:2px}
.proto-rows > div + div{padding-top:12px;border-top:1px solid var(--hair)}
.proto-rows dt{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.proto-rows dd{margin:0;font-size:1.0625rem;line-height:1.4;text-wrap:pretty}
/* a card wide enough puts each label beside its value; a narrow one (a phone, a column of three) stacks them */
@container (min-width:430px){.proto-rows > div{grid-template-columns:104px minmax(0,1fr);gap:0 16px}}
.proto-notes{display:grid;gap:8px;margin:0;padding-left:20px;font-size:1.0625rem;line-height:1.45;color:var(--ink-2)}
.proto-notes li::marker{color:var(--ink-3)}
/* a note that starts "Calculated:" is arithmetic done for the reader, not something a source said: a small tile of its own, labelled */
.proto-notes .is-calc{list-style:none;margin-left:-20px;padding:11px 14px;border-radius:var(--r-sm);background:var(--card);font-size:var(--fs-sm);line-height:1.45;font-variant-numeric:tabular-nums}
.calc-tag{display:inline-block;margin-right:4px;padding:0 9px;border-radius:980px;background:var(--card-2);color:var(--ink);font-weight:600}
.proto-sources,.proto-more,.cm-research{border-top:1px solid var(--hair)}
.proto-sources,.proto-more{margin-top:auto}
.proto-sources > summary,.proto-more > summary,.cm-research > summary,.cm-diy > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:1.0625rem;font-weight:600;color:var(--link);list-style:none}
.proto-sources > summary::-webkit-details-marker,.proto-more > summary::-webkit-details-marker,.cm-research > summary::-webkit-details-marker,.cm-diy > summary::-webkit-details-marker{display:none}
.proto-sources > summary .icon,.proto-more > summary .icon,.cm-research > summary .icon,.cm-diy > summary .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.proto-sources[open] > summary .icon,.proto-more[open] > summary .icon,.cm-research[open] > summary .icon,.cm-diy[open] > summary .icon{transform:rotate(180deg)}
/* a card is closed on its dose and how often: what is inside it (the other rows, the notes, the sources) is one tap away */
.proto-more .when-open{display:none}
.proto-more[open] > summary > span:first-child{display:none}
.proto-more[open] .when-open{display:inline}
.proto-more-body{display:grid;gap:14px;padding:4px 0 10px}
.proto-more-body > .proto-sources{margin-top:0}
.proto-sources ul{display:grid;gap:8px;margin:0;padding:0 0 12px;list-style:none}
.src-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.src-type{flex:none;padding:0 10px;border-radius:980px;background:var(--card);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.src-line a{flex:1 1 220px;min-width:0;min-height:44px;padding-block:10px;overflow-wrap:anywhere}
.src-quote{margin:4px 0 0;padding-left:12px;border-left:2px solid var(--line);font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}

/* where the numbers come from, the cautions, the research notes, the stacks it is taken with */
.cm-block{margin-top:28px}
.community .cm-sub{margin-bottom:8px;font-family:var(--f-text);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;color:var(--ink-2)}
.cm-block > p{max-width:68ch;font-size:1.0625rem;line-height:1.5}
.cm-cautions{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.cm-cautions li{display:grid;justify-items:start;gap:8px;max-width:68ch}
.cm-cautions li + li{padding-top:16px;border-top:1px solid var(--hair)}
.cm-cautions p{font-size:1.0625rem;line-height:1.5}
.cm-cautions .cm-from{display:flex;align-items:baseline;gap:6px;font-size:var(--fs-sm);color:var(--ink-2)}
.cm-from-label{flex:none}
.cm-from a{flex:1 1 auto;min-width:0;min-height:44px;padding-block:10px}
.kind{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:980px;background:var(--card-2);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.cm-research{margin-top:24px}
.cm-research > p{max-width:68ch;padding-bottom:8px;font-size:1.0625rem;line-height:1.5;color:var(--ink-2)}
.cm-taken ul{display:grid;margin:0;padding:0;list-style:none}
.cm-taken a{display:inline-flex;align-items:center;min-height:44px;font-size:1.0625rem}

@media (max-width:760px){
  /* the pill leads, as a label over the heading */
  .cm-head{flex-direction:column;gap:12px}
  .cm-private{order:-1}
  /* a band the full width of the screen (no frame, a fine line above and below), its cards 18px in: the text has about 320px of a 390px phone, not 255px */
  .community{margin-inline:calc(-1 * var(--gut));padding:24px var(--gut);border-width:1px 0;border-radius:0}
  .proto{padding:18px 18px 4px}
  .diy-card{padding:18px}
  .cm-summary,.cm-more > p{font-size:1.0625rem;line-height:1.5}
  /* the tags of a card are one row on a phone ("Serum", "Most common", "Not tested" in about 300px): snug chips */
  .proto-tags,.diy-card-tags{gap:6px}
  .prev,.nt,.form{padding:0 10px}
}

/* the blends page of a private build: each blend is a row. The verified card stays in view on the left while the long community block beside it scrolls;
   on a narrow screen the block follows the card. */
.blend-grid.is-private{grid-template-columns:minmax(0,1fr);gap:48px}
.blend-entry{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.blend-entry > .community{margin-top:0}
@media (min-width:1000px){
  .blend-entry{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}
  .blend-entry > .blend{position:sticky;top:calc(var(--gnav-h) + 16px)}
}

/* ---------- /protocols/ ---------- */
/* the page opens like the catalog does: left-aligned, a bold statement and a gray line, then one gray line of what is on it, and one paragraph that says it is untested and how a row reads (no card, no dashed frame, no second "Private" pill) */
.pr-page .page-hero{justify-items:start;gap:10px;padding-block:clamp(12px,3vw,40px) clamp(20px,3vw,32px);text-align:left}
.pr-page .page-hero > .tt-page{max-width:none}
.pr-page .page-meta{justify-content:flex-start;gap:0}
.pr-page .page-meta > span{white-space:nowrap}
.pr-page .page-meta > span + span::before{content:"\00B7";margin-inline:8px}
.meta-jump{margin-left:20px}
.pr-notice{max-width:60ch;margin:2px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.pr-updated{white-space:nowrap}
@media (max-width:760px){
  /* a phone has the way down to the stacks as the last chip of the filter row, and says when it was checked on the line under it (with no year): the lines above the search are few */
  .meta-year,.pr-page .page-meta > .meta-jump{display:none}
  /* the gray half of the title ("Everything reported online, in one place.") is left to wider screens: the paragraph under the numbers says it is all reported online */
  .pr-page .page-hero > .tt-page > span:not(.nowrap){display:none}
  .pr-page .page-hero{gap:8px;padding-bottom:16px}
}
@media (min-width:761px){.pill-jump{display:none}}
/* The filter bar sticks under the nav only while the index is on screen: a sticky bar is held inside the box that holds it, and is pushed out when that box ends. A jump to the stacks (their own
   section, which starts where the index ends) would catch it half out, its chips cut by the nav; the room left under the index (the bar's own height) lets it finish leaving first. */
.pr-index{margin-top:clamp(20px,3vw,40px);padding-bottom:var(--bar-h)}
@media (max-width:760px){.pr-index{margin-top:8px}}
@media (min-width:761px){.pr-index{margin-top:clamp(12px,2vw,24px)}}
.pr-key{margin:4px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.pr-group{padding-top:clamp(36px,5vw,56px)}
.pr-group:first-of-type{padding-top:clamp(16px,3vw,28px)}
.pr-group[hidden],.mini-list li[hidden],.stack[hidden]{display:none}
/* one column: each row's lines about its most common protocol can be long, and a column of names is easier to scan than two */
.pr-group .mini-list{display:block;margin-top:20px}
.pr-group .mini-sub{max-width:76ch}
/* the row: the name, then the protocol in labelled lines (the label in the page's gray, the words in its ink), so what a reader came for is the easiest thing to read */
.mini-line{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:0 10px;color:var(--ink)}
.mini-line b{font-weight:600;color:var(--ink-2)}
.mini-kind{font-weight:600;color:var(--ink-2)}
/* on a phone the count goes up under the name, the chevron sits on the name's line (as it does on a desktop), and the labelled lines have the whole width of the row, under both */
@media (max-width:760px){
  .pr-group .mini-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start}
  .pr-group .mini-text{display:contents}
  .pr-group .mini-name{grid-column:1;grid-row:1}
  .pr-group .mini-count{grid-column:1;grid-row:2;margin-top:0}
  .pr-group .mini-text > .mini-sub{grid-column:1 / -1}
  .pr-group .mini-list a::after{grid-column:2;grid-row:1;align-self:center;margin-top:0}
  .mini-line{grid-template-columns:5.25rem minmax(0,1fr)} /* ("How often" is 82px in the semibold: a narrower label column wrapped it onto two lines) */
}
/* the last chip of the filter row is the way down to the stacks: a link, so it has an arrow and the link's colour */
.pill-jump{color:var(--link)}
.pill-jump svg{width:14px;height:14px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pill-jump:hover{text-decoration:none}
.pr-stacks{padding-top:max(0px,calc(clamp(40px,6vw,72px) - var(--bar-h)))}
.pr-stacks .pr-key{margin-top:12px}
/* the stacks are one column too: each row is its name, and in gray under it what the name does not say (two columns left each row as tall as the taller of its pair, with gaps of empty rule between) */
.pr-stack-list{display:block;margin-top:24px}
.pr-stack-list a{align-items:center;min-height:64px}
.pr-stack-list a::after{margin-top:0}
.pr-end{margin-top:clamp(40px,6vw,64px)}
.pr-end .more{display:inline-flex;align-items:center;min-height:44px;white-space:normal}
.stack{margin-top:clamp(44px,6vw,72px)}
.stack-name{max-width:40ch;font-size:clamp(1.5rem,3vw,2.125rem);font-weight:700;line-height:1.15;letter-spacing:var(--tr-l)}
.stack-name > span:not(.nowrap){font-weight:600;color:var(--ink-3)}
/* "Made of" and its chips: the label is a column of its own, so a chip that wraps stays under the first chip, not under the label */
.stack-parts{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 12px;margin-top:16px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.stack-parts > span:first-child{padding-top:10px}
.stack-chips{display:flex;flex-wrap:wrap;gap:8px}
.stack-chips .pill{min-height:44px;background:var(--field);text-decoration:none}
.stack-chips .pill::before{display:none}
@media (hover:hover){.stack-chips .pill:hover{background:var(--field-hover)}}
/* a stack's panel is the page's plain gray card (the section says once that all of it is reported online and untested; each protocol in it says "Not tested" itself) */
.stack .community{margin-top:20px;border:0;background:var(--card)}
@media (max-width:760px){.stack .community{margin-inline:calc(-1 * var(--gut));padding:20px var(--gut);border-radius:0}}

/* ---------- home-made sprays and serums, on a peptide's or blend's page ---------- */
/* a route (the home-made nasal spray, the serums) is a section of the block, set off by a fine rule in the caution tone, with a heading of its own in the two-tone voice */
.community h5{margin:0}
.diy-route{margin-top:clamp(36px,5vw,52px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--dash)}
.tt.diy-title{max-width:none;margin:0;font-size:clamp(1.375rem,2.2vw,1.75rem)}
@container (max-width:980px){.tt.diy-title > span:not(.nowrap){display:block;margin-top:6px;font-family:var(--f-text);font-size:1.1875rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-2)}}
/* a route is its heading and one open recipe card. The strengths people report are chips (radios in a fieldset, so the arrow keys move between them) over the card; they show only when the page's
   script is there to switch the card (.pv-js, set by community.js), and until then the list under the card says every strength. */
.diy-strengths{display:none;min-width:0;margin:20px 0 0;padding:0;border:0}
.pv-js .diy-strengths{display:flex;flex-wrap:wrap;gap:8px}
.diy-strengths legend{width:100%;margin:0 0 8px;padding:0;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.diy-chip{position:relative;display:inline-flex}
.diy-chip input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.diy-chip > span{display:inline-block;box-sizing:border-box;min-height:44px;padding:10px 18px;border-radius:980px;background:var(--card-2);color:var(--ink);font-size:1.0625rem;font-weight:500;line-height:24px;font-variant-numeric:tabular-nums}
.diy-chip input:checked + span{background:var(--ink);color:var(--bg)}
.diy-chip input:focus-visible + span{outline:2px solid var(--ring);outline-offset:2px}
@media (hover:hover){.diy-chip input:not(:checked):hover + span{background:var(--field-hover)}}
/* a high-contrast mode takes the fills away: the chosen chip is then the one with the heavy line round it and the bold type, so the choice is not in colour alone */
@media (forced-colors:active){.diy-chip > span{border:1px solid ButtonText}.diy-chip input:checked + span{outline:3px solid Highlight;outline-offset:-3px;font-weight:700}}
.diy-strength-list-label{margin:18px 0 8px}
.diy-strength-list{display:grid;gap:8px;margin:0;padding-left:1.2em;font-size:1.0625rem;line-height:1.45;color:var(--ink-2)}
.diy-strength-list b{font-weight:600;color:var(--ink)}
.pv-js .diy-strength-list,.pv-js .diy-strength-list-label{display:none}
/* the card: what the chosen strength makes and takes (its numbers are the ones that change), then the route's method beside it on a card wide enough, and how it keeps and is used across the foot */
.diy-card{container-type:inline-size;margin-top:18px;padding:24px;border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .diy-card{background:var(--card)}}
:root[data-theme="dark"] .diy-card{background:var(--card)}
.diy-card-tags{display:flex;flex-wrap:wrap;gap:8px}
.community .diy-card-name{margin:14px 0 6px;font-family:var(--f-display);font-size:clamp(1.5rem,2.4vw,1.75rem);font-weight:700;line-height:1.15;letter-spacing:var(--tr-m)}
.diy-makes{margin:0;font-size:1.1875rem;line-height:1.4}
.diy-makes .recipe-label{display:inline;margin:0 8px 0 0}
/* a route whose sources give no amounts says so in the place of what the batch makes */
.diy-noamounts{margin:14px 0 0;max-width:60ch;font-size:1.1875rem;line-height:1.4}
.diy-card-body{display:grid;gap:22px;margin-top:22px}
@container (min-width:640px){.diy-card-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px 36px}}
.diy-need,.diy-tips{margin:0;padding-left:1.2em;font-size:1.0625rem;line-height:1.45}
.diy-need li + li,.diy-tips li + li{margin-top:8px}
.diy-need li::marker,.diy-tips li::marker{color:var(--ink-3)}
.diy-tips-wrap{margin-top:22px}
.diy-card-rows{display:grid;gap:12px;margin:22px 0 0;padding:0}
.diy-card-rows > div{display:grid;gap:2px;min-width:0}
.diy-card-rows > div[hidden]{display:none}
.diy-card-rows > div:not([hidden]) ~ div:not([hidden]){padding-top:12px;border-top:1px solid var(--hair)}
.diy-card-rows dt{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.diy-card-rows dd{margin:0;font-size:1.0625rem;line-height:1.45;text-wrap:pretty}
@container (min-width:520px){.diy-card-rows > div{grid-template-columns:128px minmax(0,1fr);gap:0 16px}}
.diy-guide-note{margin:18px 0 0;max-width:68ch;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.diy-guide-note a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
/* the numbers of the sources a step rests on (the method on /diy/ lists them under its steps) */
.diy-refs{display:inline-flex;gap:4px;margin-left:2px;font-size:var(--fs-sm);line-height:1;vertical-align:baseline;white-space:nowrap}
.diy-refs a{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:980px;background:var(--card-2);color:var(--link);font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover){.diy-refs a:hover{box-shadow:inset 0 0 0 1.5px var(--link);text-decoration:none}}
/* what people report about the route, then the recipes as they were written, folded away */
.diy-sources{margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--hair)}
.diy-sources > summary{display:flex;align-items:center;gap:12px;min-height:56px;font-size:1.0625rem;font-weight:600;color:var(--link);list-style:none}
.diy-sources > summary::-webkit-details-marker{display:none}
.diy-sources > summary > span:first-child{flex:1 1 auto;min-width:0}
.diy-sources > summary .icon{flex:none;width:18px;height:18px;transition:transform .25s var(--ease)}
.diy-sources[open] > summary .icon{transform:rotate(180deg)}
.diy-sources > summary .when-open{display:none}
.diy-sources[open] > summary .when-open{display:inline}
.diy-evidence{max-width:60ch;margin-top:12px;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
/* the strengths above: each chip's name, how common it is, its workings (a tile, as a calculated note is) and its sources, folded */
.diy-sn{margin-top:26px}
.diy-strength-notes{display:grid;gap:20px;margin:10px 0 0;padding:0;list-style:none}
.diy-sn-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:1.0625rem;line-height:1.3}
.diy-sn-head b{font-weight:600}
.diy-sn-calc{margin:10px 0 0;padding:11px 14px;border-radius:var(--r-sm);background:var(--card);font-size:var(--fs-sm);line-height:1.45;font-variant-numeric:tabular-nums}
.diy-strength-notes .proto-sources{margin-top:8px}
.diy-evidence b{font-weight:600}
.diy-route .proto-grid{margin-top:24px}
.diy-more{margin-top:16px}
.diy-more > summary{display:flex;align-items:center;gap:8px;min-height:48px;font-size:1.0625rem;font-weight:600;color:var(--link);list-style:none}
.diy-more > summary::-webkit-details-marker{display:none}
.diy-more > summary .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.diy-more[open] > summary .icon{transform:rotate(180deg)}
.diy-more > .proto-grid{margin-top:16px}
/* the fold says what a tap will do: "Show all 6 protocols" when closed, "Show fewer protocols" when open (and again at the foot of the list); a route's cautions say "See all 5" and "Show fewer" */
.diy-more .when-open{display:none}
.diy-more[open] > summary > span:first-child{display:none}
.diy-more[open] > summary .when-open{display:inline}
.diy-close{margin-top:20px}
.diy-link{margin-top:20px}
.diy-link .more{display:inline-flex;align-items:center;min-height:44px;white-space:normal}

/* a recipe: the protocol's card, with what kind of product it makes, its batch, an ingredients table and numbered steps. A recipe has a lot to say, so a route's recipes
   are one to a row: on a wide card the ingredients and the method sit side by side and the labelled rows run across the card under them; on a narrower one they follow each other. */
.diy-route .proto-grid{grid-template-columns:minmax(0,1fr)}
.form{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:980px;background:var(--card-2);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.recipe .proto-name{font-size:1.25rem}
.recipe-batch{margin-top:-6px;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
.recipe-batch b{font-weight:600;color:var(--ink)}
.recipe-main{display:grid;gap:18px;min-width:0}
.recipe-label{margin-bottom:8px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.recipe .proto-rows > div:first-child{border-top:1px solid var(--hair);padding-top:12px}
.ing-wrap{container-type:inline-size;min-width:0}
.ing{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4}
.ing th,.ing td{padding:10px 12px 10px 0;border-top:1px solid var(--hair);text-align:left;vertical-align:top;overflow-wrap:break-word}
.ing thead th{padding-top:0;padding-bottom:8px;border-top:0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.ing tbody tr:first-child > *{border-top:0}
.ing tbody th{font-weight:600}
.ing td{font-variant-numeric:tabular-nums}
.ing td:empty::after{content:"–";content:"–" / "";color:var(--ink-3)}
/* a column too narrow for a table (a phone, or one side of a card) shows each ingredient as two lines: its name in bold over what it is for (16px, gray), and its amount at the right, in
   figures that line up, with the percent after it in brackets ("50 mcg (2%)"). No labels are printed in the rows (the column heads are still there for a screen reader). No sideways scroll. */
@container (max-width:440px){
  .ing,.ing tbody,.ing tr,.ing th,.ing td{display:block}
  .ing thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ing tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name amount pct" "role amount pct";align-items:baseline;gap:2px 6px;padding:12px 0;border-top:1px solid var(--hair)}
  .ing tbody tr:first-child{border-top:0;padding-top:0}
  .ing th,.ing td{padding:0;border:0}
  .ing tbody th{grid-area:name}
  .ing td[data-label="Amount"]{grid-area:amount;text-align:right;font-weight:600}
  .ing td[data-label="Percent"]{grid-area:pct;text-align:right;color:var(--ink-2)}
  .ing td[data-label="Percent"]:not(:empty)::before{content:"("}
  .ing td[data-label="Percent"]:not(:empty)::after{content:")"}
  .ing td:empty + td[data-label="Percent"]::before,.ing td:empty + td[data-label="Percent"]::after,.ing th + td[data-label="Percent"]::before,.ing th + td[data-label="Percent"]::after{content:""}
  .ing td[data-label="Role"]{grid-area:role;font-size:var(--fs-sm);color:var(--ink-2)}
  .ing td:empty{display:none}
}
/* a column wide enough for the table has its column heads, so the caption over it is said to a screen reader and not shown a second time */
@container (min-width:441px){.ing-wrap > .recipe-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* a wide card: the ingredients and the method side by side (the table has the wider column), then what the recipe is for and how it keeps across the whole card, as a protocol card sets its rows. The two
   columns end near each other, so there is no empty block under a short table or a short method; a recipe with no method has the table across the card. On a card narrower than 830px (where the table
   would have a column too narrow for a table) the table, the method and the rows follow each other. */
@container (min-width:830px){
  .recipe-main{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px 32px;align-items:start}
  .recipe-main > .proto-rows{grid-column:1 / -1}
  .ing-wrap:not(:has(~ .recipe-method)){grid-column:1 / -1}
}
.recipe-steps,.diy-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}
.recipe-steps li,.diy-steps li{position:relative;padding-left:40px;counter-increment:step;font-size:1.0625rem;line-height:1.45}
.recipe-one{margin:0;font-size:1.0625rem;line-height:1.45}
/* what the recipe's source did not say, once and quietly (a recipe card does not print a row for each that says "Not stated") */
.recipe-unsaid{margin:0;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
.recipe-steps li::before,.diy-steps li::before{content:counter(step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card-2);color:var(--ink);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}

/* the cautions of a route sit in the route's own list, labelled with the route as well as with what they rest on; its research notes sit under their label in the block's */
.kinds{display:flex;flex-wrap:wrap;gap:6px}
.kind.route{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.cm-route{margin:16px 0 4px;font-family:var(--f-text);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}

/* ---------- /diy/ ---------- */
/* the page opens as the other two tool pages do (the mixing guide, the vial planner): its title and gray line centred, one quiet line that says it is untested, and the ways on in one row of chips.
   The row never wraps: centred while it fits, and on a phone it scrolls sideways, edge to edge, its end fading out (the first and last chip take the room that is left, so a row too long to centre starts at the left edge). */
.diy-page .page-hero{justify-items:center;padding-bottom:0;text-align:center}
.diy-page .page-sub{text-wrap:balance}
.diy-page .page-meta{justify-content:center}
.diy-page .pr-notice{margin-inline:auto;text-align:center}
.diy-jump{display:flex;gap:8px;max-width:100%;margin-top:6px;overflow-x:auto;scrollbar-width:none}
.diy-jump::-webkit-scrollbar{display:none}
.diy-jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:980px;background:var(--field);color:var(--ink);font-size:1rem;font-weight:500;white-space:nowrap}
.diy-jump a:first-child{margin-left:auto}
.diy-jump a:last-child{margin-right:auto}
.diy-jump a:hover{background:var(--field-hover);text-decoration:none}
@media (max-width:760px){
  .diy-jump{justify-self:stretch;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 32px),transparent)}
}
.diy-section{padding-top:clamp(56px,8vw,96px)}
.diy-page + .diy-section{padding-top:clamp(32px,4vw,48px)}
.diy-block{margin-top:clamp(32px,4.5vw,52px)}
.diy-h{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;line-height:1.15;letter-spacing:var(--tr-l)}
.diy-h > span:not(.nowrap){color:var(--ink-3)}
@media (max-width:760px){.diy-h > span:not(.nowrap){display:block;margin-top:6px;font-family:var(--f-text);font-size:1.1875rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-2)}}
/* the method: the steps every recipe of the route shares, each with the numbers of the sources it rests on, and the sources numbered under it (a peptide's card is this method with one strength's amounts) */
.diy-method{container-type:inline-size;max-width:76ch}
.diy-method .diy-guide-note{margin-top:14px}
.diy-method .recipe-label{margin:26px 0 10px}
.diy-msrc{margin-top:28px}
.diy-msources{display:grid;gap:18px;margin:0;padding:8px 0 12px;list-style:none;counter-reset:step}
.diy-msources li{position:relative;min-width:0;padding-left:40px;counter-increment:step;scroll-margin-top:calc(var(--gnav-h) + 24px)}
.diy-msources li::before{content:counter(step);position:absolute;left:0;top:9px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card-2);color:var(--ink);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.diy-msources li:target::before{box-shadow:0 0 0 2px var(--ring)}
.diy-msources .src-quote{margin-top:2px}
/* what the facts say: a tile for each, its sources folded away */
.diy-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:20px 0 0;padding:0;list-style:none}
@media (min-width:900px){.diy-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.diy-fact{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px 26px 6px;border-radius:var(--r);background:var(--card);scroll-margin-top:calc(var(--gnav-h) + 24px)}
.diy-fact:target{box-shadow:0 0 0 2px var(--ring)}
.diy-fact-topic{margin:0;font-family:var(--f-display);font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:var(--tr-m)}
.diy-fact > p{font-size:1.0625rem;line-height:1.5;overflow-wrap:break-word}
.diy-fact .proto-sources{margin-top:auto}
.diy-fact .src-type{background:var(--card-2)}
/* the calculators are the syringe calculator's form and dark answer (site.css); these are what they add */
.diy-calc{margin-top:22px}
.calc-field > label .diy-unit,.calc-field > legend .diy-unit{font-weight:400;color:var(--ink-2)}
.diy-two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the spray sizes and the other choices: every option is one weight, centred in a 48px box, so "Custom" sits level with "0.13" */
.diy-calc .calc-opt > span{display:grid;place-items:center;min-height:48px;font-weight:600}
.diy-custom{margin-top:6px}
.diy-rows{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 22px;margin:14px 0 0;font-size:1.0625rem;line-height:1.4}
.diy-rows dt{font-weight:500;color:var(--ink-2)}
.diy-rows dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:560px){.diy-rows{grid-template-columns:minmax(0,1fr);gap:0}.diy-rows dd{margin-bottom:10px}}
.diy-scale{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.diy-scale[hidden]{display:none}
.diy-scale a,.calc-warn a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.calc-warn.is-note{background:color-mix(in srgb,var(--link) 14%,var(--tile-answer))}
.calc-warn.is-note .icon{color:var(--link)}
/* the index: every peptide and blend with an entry for the route, those with recipes first (the catalog's own list, one column); where none was found, the reason, folded away */
.diy-index{display:block;margin-top:20px}
.diy-index .mini-sub{max-width:76ch}
@media (max-width:760px){
  .diy-index a{flex-wrap:wrap;gap:0 12px}
  .diy-index .mini-count{order:1;flex:1 0 100%;margin-top:4px}
}
.diy-none{margin-top:24px;border-top:1px solid var(--hair)}
.diy-none > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:1.0625rem;font-weight:600;color:var(--ink-2);list-style:none}
.diy-none > summary::-webkit-details-marker{display:none}
.diy-none > summary .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.diy-none[open] > summary .icon{transform:rotate(180deg)}
.diy-none ul{display:grid;gap:14px;margin:0;padding:4px 0 12px;list-style:none}
.diy-none li{display:grid;gap:2px;max-width:76ch;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.diy-none b{font-size:1.0625rem;font-weight:600;color:var(--ink)}
.diy-end{padding-block:clamp(48px,7vw,80px) clamp(72px,10vw,120px)}
.calc-field[hidden]{display:none}
/* on a wide screen the answer sits beside the form, as tall as its own content and never less than 320px (an empty one is not a stub that jumps). The mixing guide's answer is pinned beside its form
   (site.css, .calc > .calc-out); this one is not: pinned, it was as tall as a laptop's screen once both of its notes were in it, and its foot was out of sight (tools/qa-sticky.mjs finds that).
   While a calculator is on screen the bar's pill carries its answer. (Three classes, so the order of the two stylesheets does not matter.) */
@media (min-width:900px){.calc.diy-calc > .calc-out{position:static;align-self:start;min-height:320px}}
.diy-end .more{display:inline-flex;align-items:center;min-height:44px;white-space:normal}

/* a long address in a quote, a note or a step breaks rather than widening its column (a grid track takes the width of its widest unbreakable word unless its items may shrink) */
.diy-strength-notes li,.proto-sources li,.proto-notes li,.cm-cautions li,.recipe-steps li,.diy-steps li,.diy-need li,.diy-tips li,.proto-rows > div{min-width:0}
.src-quote,.proto-notes li,.cm-cautions p,.recipe-steps li,.diy-steps li,.diy-need li,.diy-tips li,.diy-card-rows dd,.diy-guide-note,.diy-sn-calc,.proto-rows dd,.cm-summary,.cm-block > p,.diy-evidence,.diy-fact > p,.diy-none li{overflow-wrap:anywhere}