/* guide-body.css - the BODY of Marko's three guides (2026-10-05). One file, used in two places:
   the guide pages (/peptides/ /reconstitute/ /administer/, inside <main class="gb">) and the same bodies opened in
   place on the home page (inside .g-panel > .gb). Everything is scoped under .gb so it cannot touch the home page's own
   rules, and the guide's spacing tokens are re-stated here so a body reads the same in both places.
   Split out of guide.css, which now holds only the guide pages' chrome (bar, head, close, doors, footer).
   Phone first. Every section takes a different ground and a different shape (one-move step 2). */
.gb{
  --acc:oklch(0.76 0.09 250);           /* the one cool light used inside the drawings */
  --warn:oklch(0.5 0.15 32);            /* the Get help heads only; never a band */
  --wrap:1080px;
  --tight:44px; --run:72px; --air:112px;
  color:var(--ink);line-height:1.6;
}
@media (min-width:761px){ .gb{ --tight:80px; --run:112px; --air:152px; } }
.gb :is(h2,h3,p,ol,ul,figure){margin:0}
.gb :is(ol,ul){padding:0;list-style:none}
.gb :is(h2,h3){text-wrap:balance}
.gb :is(p,li){text-wrap:pretty}
.gb svg{display:block;max-width:100%}

/* ---------- shared section type ---------- */
.gb .sec{padding-block:var(--run)}
.gb .sec h2{font-size:26px;line-height:1.1;font-weight:740;font-stretch:104%;letter-spacing:-.02em;max-width:18ch}
/* Heads by role, so a page never reads as one size repeated (check-rhythm R2): the kit and the warnings are
   quiet (22), the steps run (26), the diagrams and the search lead (30), the one stance line is the loudest (34). */
.gb .need h2,.gb .help h2{font-size:22px}
.gb .diag h2,.gb .rx h2{font-size:30px}
.gb .cold h2{font-size:34px}
.gb .sec-lede{margin-top:10px;font-size:16px;color:var(--ink-2);max-width:44ch}

/* ---------- what you need: small drawn things, two across ---------- */
.gb .need{background:var(--paper)}
.gb .need-list{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.gb .need-list li{display:grid;grid-template-columns:44px 1fr;align-items:start;column-gap:12px}
.gb .need-list svg{width:44px;height:44px;color:var(--ink)}
.gb .need-list b{display:block;font-size:15px;line-height:1.3;font-weight:640}
.gb .need-list span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-3)}

/* ---------- steps: numbered, one line of weight each ---------- */
.gb .steps{background:var(--bg)}
.gb .step-list{margin-top:28px;counter-reset:s;border-top:1px solid var(--rule)}
.gb .step-list > li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding-block:20px;border-bottom:1px solid var(--rule)}
.gb .step-list > li::before{content:counter(s,decimal-leading-zero);padding-top:3px;font-size:13px;font-weight:640;color:var(--navy);font-variant-numeric:tabular-nums}
.gb .step-list b{display:block;font-size:17px;line-height:1.3;font-weight:660;letter-spacing:-.008em}
.gb .step-list p{margin-top:6px;font-size:15px;color:var(--ink-2);max-width:46ch}
.gb .step-fig{grid-column:1 / -1;margin-top:18px;border-radius:18px;background:var(--paper);border:1px solid var(--rule);padding:14px}
.gb .step-fig svg{width:100%;height:auto;max-height:340px;margin-inline:auto;color:var(--ink)}
.gb .step-fig figcaption{margin-top:8px;font-size:13px;color:var(--ink-3)}

/* ---------- a diagram with labels pinned on it (peptide vs protein, where to inject) ---------- */
.gb .diag{background:var(--studio);background:linear-gradient(180deg,#C7CBD8,#D3D7E2)}
.gb .diag-fig{position:relative;margin-top:26px}
.gb .diag-fig svg{width:100%;height:auto;color:var(--ink)}
.gb .pin{position:absolute;display:inline-flex;flex-direction:column;padding:7px 11px;border-radius:12px;background:color-mix(in oklab,var(--paper) 86%,transparent);border:1px solid color-mix(in oklab,var(--ink) 14%,transparent);font-size:12px;line-height:1.3;color:var(--ink-2)}
.gb .pin b{font-size:14px;font-weight:660;color:var(--ink)}
.gb .diag-list{margin-top:26px;display:grid;gap:14px}
.gb .diag-list li{font-size:15px;color:var(--ink-2);max-width:46ch}
.gb .diag-list b{color:var(--ink);font-weight:640}
.gb .diag-list--num{counter-reset:d}
.gb .diag-list--num li{counter-increment:d;position:relative;padding-left:34px}
.gb .diag-list--num li::before{content:counter(d);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700}
.gb .diag-fig--body{max-width:230px;margin-inline:auto}
.gb .diag-fig--pp{padding-top:4px}

/* ---------- facts: three short paragraphs between hairlines ---------- */
.gb .facts{background:var(--paper)}
.gb .fact-list{margin-top:8px}
.gb .fact-list li{padding-block:26px;border-bottom:1px solid var(--rule)}
.gb .fact-list li:last-child{border-bottom:0}
.gb .fact-list h3{font-size:20px;line-height:1.2;font-weight:680;letter-spacing:-.012em}
.gb .fact-list p{margin-top:8px;font-size:16px;color:var(--ink-2);max-width:46ch}

/* ---------- keep it cold: two quiet chips on the object ---------- */
.gb .cold{background:linear-gradient(180deg,#C7CBD8,#CDD1DC)}
.gb .cold-in{display:grid;gap:26px}
.gb .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gb .chip{display:inline-flex;flex-direction:column;padding:12px 16px;border-radius:16px;background:color-mix(in oklab,var(--paper) 72%,transparent);border:1px solid color-mix(in oklab,var(--ink) 12%,transparent)}
.gb .chip b{font-size:22px;line-height:1.1;font-weight:760;font-stretch:108%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gb .chip span{font-size:13px;color:var(--ink-2)}
.gb .cold-obj{display:none}
.gb .obj .acc{fill:var(--acc);stroke:var(--acc)}
.gb .obj .fill{fill:currentColor;fill-opacity:.16;stroke:none}

/* ---------- get help: two columns divided by a rule ---------- */
.gb .help{background:var(--paper);border-top:1px solid var(--rule)}
.gb .help-cols{margin-top:24px;display:grid;gap:22px}
.gb .help-col h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--warn)}
.gb .help-col h3 svg{width:20px;height:20px}
.gb .help-col ul{margin-top:10px;display:grid;gap:6px}
.gb .help-col li{position:relative;padding-left:18px;font-size:15px;color:var(--ink-2)}
.gb .help-col li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}

/* ---------- the reconstitution search (2026-10-05): a question, a field, and the answer as a paper card ----------
   Every number on the card is written by _guides/build.py from _guides/peptides.json; guide.js only shows and hides. */
.gb .rx{background:linear-gradient(180deg,#C7CBD8,#D3D7E2)}
.gb .rx h2 label{cursor:text}
.gb .rx-search{margin-top:22px}
.gb .rx-field{position:relative}
.gb .rx-field > svg{position:absolute;left:16px;top:50%;width:20px;height:20px;translate:0 -50%;color:var(--ink-3);pointer-events:none}
/* 17px: under 16px iOS zooms the whole page into the field on focus, which is a scroll the reader never asked for. */
.gb .rx-input{display:block;width:100%;height:56px;padding:0 52px 0 46px;border-radius:16px;border:1px solid color-mix(in oklab,var(--ink) 18%,transparent);background:var(--paper);color:var(--ink);font:inherit;font-size:17px;font-weight:520;-webkit-appearance:none;appearance:none;transition:border-color 160ms ease,box-shadow 160ms ease}
.gb .rx-input::placeholder{color:var(--ink-3);font-weight:450}
.gb .rx-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in oklab,var(--navy) 22%,transparent)}
.gb .rx-clear{position:absolute;right:6px;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--ink-2);cursor:pointer}
.gb .rx-clear svg{width:16px;height:16px}
.gb .rx-clear[hidden]{display:none}
.gb .rx-opts{margin-top:8px;padding:6px;border-radius:16px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 10px 30px -18px oklch(0.2 0.02 255 / .35)}
.gb .rx-opts li{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:6px 12px;border-radius:11px;font-size:16px;font-weight:620;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gb .rx-opts li span{font-size:13px;font-weight:450;color:var(--ink-3)}
.gb .rx-opts li[aria-selected="true"]{background:color-mix(in oklab,var(--navy) 10%,var(--paper))}
.gb .rx-none{margin-top:12px;padding:14px 16px;border-radius:14px;background:color-mix(in oklab,var(--paper) 70%,transparent);font-size:15px;color:var(--ink-2)}
.gb .rx-none a{font-weight:640;color:var(--ink)}
.gb .rx-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gb .rx-picks button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in oklab,var(--ink) 16%,transparent);background:color-mix(in oklab,var(--paper) 55%,transparent);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform 160ms var(--ease),background-color 160ms ease}
.gb .rx-picks button:active{transform:scale(.97)}

/* the list: with JavaScript off it is the whole answer (every peptide opens in place); with it on, it holds the cards */
.gb .rx-all{margin-top:22px;border-top:1px solid color-mix(in oklab,var(--ink) 14%,transparent)}
.gb .rx-item > summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:52px;padding:14px 2px;border-bottom:1px solid color-mix(in oklab,var(--ink) 14%,transparent);font-size:17px;font-weight:640;cursor:pointer;list-style:none}
.gb .rx-item > summary::-webkit-details-marker{display:none}
.gb .rx-item > summary span{font-size:13px;font-weight:450;color:var(--ink-3);text-align:right}
.gb .rx-item[open] > .rx-card{margin-block:14px}
.gb .rx--js .rx-all{border-top:0;margin-top:16px}
.gb .rx--js .rx-item{display:none}
.gb .rx--js .rx-item.is-on{display:block}
.gb .rx--js .rx-item > summary{display:none}
.gb .rx--js .rx-item.is-on > .rx-card{margin-block:0}
.gb .rx--js .rx-picks.is-quiet{display:none}

/* the card: the vial's own label, answered */
.gb .rx-card{padding:20px 18px 18px;border-radius:22px;background:var(--paper);border:1px solid color-mix(in oklab,var(--ink) 10%,transparent);box-shadow:0 18px 40px -28px oklch(0.2 0.02 255 / .45)}
.gb .rx-top h3{font-size:24px;line-height:1.1;font-weight:760;font-stretch:106%;letter-spacing:-.02em}
.gb .rx-also{margin-top:4px;font-size:14px;color:var(--ink-3)}
.gb .rx-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.gb .rx-sizes span{width:100%;font-size:13px;font-weight:600;color:var(--ink-3)}
.gb .rx-sizes button{min-width:64px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--ink) 16%,transparent);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:640;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease)}
.gb .rx-sizes button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gb .rx-sizes button:active{transform:scale(.97)}
.gb .rx-v{margin-top:18px;padding-top:18px;border-top:1px dashed color-mix(in oklab,var(--ink) 18%,transparent)}
.gb .rx-v + .rx-v{margin-top:22px}
.gb .rx-vh{font-size:13px;font-weight:640;color:var(--ink-3);margin-bottom:6px}
.gb .rx--js .rx-vh{display:none}
.gb .rx--js .rx-v{display:none}
.gb .rx--js .rx-v.is-on{display:block}
.gb .rx-add{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.gb .rx-add span{font-size:16px;color:var(--ink-2)}
.gb .rx-add b{font-size:54px;line-height:1;font-weight:800;font-stretch:112%;letter-spacing:-.035em}
.gb .rx-add span:last-child{width:100%;margin-top:4px;font-size:16px;font-weight:600;color:var(--ink)}
.gb .rx-makes{margin-top:12px;font-size:15px;color:var(--ink-2)}
.gb .rx-ruler{margin-top:16px}
.gb .rx-ruler-h{font-size:12.5px;font-weight:600;color:var(--ink-3)}
/* a syringe barrel, 0 to 50 units: the five numbered marks sit on the right edge of their fifth of the bar */
.gb .rx-marks{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:8px;padding-top:30px;counter-reset:none}
.gb .rx-marks::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;border-radius:5px;border:1.5px solid var(--ink);
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),color-mix(in oklab,var(--ink) 55%,transparent) calc(10% - 1px) 10%) 0 0 / 100% 7px no-repeat,
             repeating-linear-gradient(90deg,transparent 0 calc(20% - 1.5px),var(--ink) calc(20% - 1.5px) 20%) 0 0 / 100% 11px no-repeat,
             color-mix(in oklab,var(--acc) 30%,var(--paper))}
.gb .rx-marks li{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.15}
.gb .rx-marks span{font-size:12px;font-weight:600;color:var(--ink-3)}
.gb .rx-marks span::after{content:" u"}
.gb .rx-marks b{margin-top:5px;font-size:14px;font-weight:720;white-space:nowrap}
.gb .rx-marks small{font-size:11.5px;font-weight:550;color:var(--ink-2)}
.gb .rx-per{margin-top:16px;font-size:16px;color:var(--ink)}
.gb .rx-per b{font-weight:760}
.gb .rx-parts{margin-top:8px;display:grid;gap:6px}
.gb .rx-parts li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;font-size:15px;color:var(--ink-2)}
.gb .rx-parts b{min-width:78px;font-size:17px;font-weight:760;color:var(--ink)}
.gb .rx-why{margin-top:10px;font-size:14px;color:var(--ink-2)}
.gb .rx-tool{margin-top:10px;font-size:14px;color:var(--ink-2)}
.gb .rx-notes{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);display:grid;gap:8px}
.gb .rx-notes li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink-2)}
.gb .rx-notes li::before{content:"";position:absolute;left:1px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--navy);opacity:.7}
.gb .rx-foot{margin-top:22px;font-size:14px;color:var(--ink-2);max-width:48ch}

@media (hover:hover) and (pointer:fine){
  .gb .rx-picks button:hover{background:var(--paper)}
  .gb .rx-sizes button[aria-pressed="false"]:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
  .gb .rx-opts li:hover{background:color-mix(in oklab,var(--navy) 6%,var(--paper))}
  .gb .rx-clear:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:no-preference){
  .gb .rx--js .rx-item.is-on > .rx-card{animation:rx-in 260ms var(--ease) both}
  @keyframes rx-in{from{opacity:0;transform:translateY(8px)}}
}

@media (min-width:761px){
  .gb .sec h2{font-size:38px}
  .gb .need h2,.gb .help h2{font-size:30px}
  .gb .diag h2,.gb .rx h2{font-size:44px}
  .gb .cold h2{font-size:52px}
  .gb .sec-lede{font-size:17px}
  .gb .need-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gb .need-list li{grid-template-columns:1fr;row-gap:12px}
  .gb .need-list svg{width:56px;height:56px}
  .gb .split{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
  .gb .split .step-list,.gb .split .fact-list,.gb .split .diag-fig,.gb .split .help-cols{margin-top:0}
  .gb .diag-fig--body{max-width:300px}
  .gb .step-list > li{grid-template-columns:48px 1fr;padding-block:24px}
  .gb .step-list b{font-size:19px}
  .gb .fact-list h3{font-size:24px}
  .gb .cold-in{grid-template-columns:1fr 1fr;align-items:center;gap:72px}
  .gb .cold-obj{display:block;justify-self:center;width:240px;height:240px}
  .gb .help-cols{grid-template-columns:1fr 1fr;gap:0}
  .gb .help-col + .help-col{border-left:1px solid var(--rule);padding-left:40px}
  .gb .help-col:first-child{padding-right:40px}
  /* the search: the question left, the field and its answer right, the answer card never wider than a label reads */
  .gb .rx .wrap{display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:start}
  .gb .rx .wrap > h2,.gb .rx .wrap > .sec-lede,.gb .rx .wrap > .rx-foot{grid-column:1}
  .gb .rx .wrap > .rx-main{grid-column:2;grid-row:1 / span 4;padding-top:6px}
  .gb .rx-search{margin-top:0}
  .gb .rx-card{padding:28px 28px 24px;max-width:560px}
  .gb .rx-add b{font-size:64px}
}