/* pages/protocols.css — protocol library, doc pages, /get-ready/ (Owner: C; DESIGN §4.27, §5.8–§5.11).
   Page-level layout only: the doc shell (.doc-layout/.toc/.when-card/.call-strip/.doc-list/.table-wrap)
   is a shared component in main.css (A). Tokens only — no hex values, no new breakpoints beyond
   sm ≤640 · md ≤900 · lg ≤1080. */

/* ---- doc page: related block + closing callout spacing ---- */
.doc-related{margin-top:var(--s-8)}
.doc-related h2{font-size:var(--fs-lg);color:var(--teal-deep);margin:0 0 var(--s-3)}
.doc-related .doc-list{margin-bottom:0}
.doc-section .callout{margin-top:var(--s-8)}

/* ---- libraries: grouped h2 + doc-list ---- */
.doc-group-section{margin:0 0 var(--s-8)}
.doc-group-section h2{font-size:var(--fs-lg);color:var(--teal-deep);margin:0 0 var(--s-3);scroll-margin-top:calc(var(--nav-h) + 16px)}
.library-note{max-width:var(--measure)}
.library-intro{max-width:var(--measure);font-size:var(--fs-prose);line-height:var(--lh-prose);color:var(--ink);margin:0 0 var(--s-6)}

/* ---- /protocols/ hub: four groups of link-cards ---- */
.hub-group{margin:0 0 var(--s-9)}
.hub-group:last-child{margin-bottom:0}
.hub-group__title{font-size:var(--fs-h2);color:var(--teal-deep);margin:0 0 var(--s-5)}
.hub-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);list-style:none;margin:0;padding:0}
.hub-cards .link-card h3{font-size:var(--fs-lg)}
.hub-cards .link-card__kicker{font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text)}
.hub-cards .link-card__go::after{content:" ›"}
.hub-cards .link-card p{font-size:var(--fs-base);color:var(--gray-text);line-height:var(--lh-body)}

/* ---- guides hub: five procedure cards — 3 (joint replacements) + 2 (classes), never an orphan (DESIGN §4.10 no-orphan rule) ---- */
.guide-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4);list-style:none;margin:0 0 var(--s-8);padding:0}
.guide-cards>li{grid-column:span 2;display:grid}
.guide-cards>li:nth-child(n+4){grid-column:span 3}
.guide-cards .link-card p{font-size:var(--fs-base);line-height:var(--lh-body)}
.guide-cards .link-card__kicker{font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text)}
.guides-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);background:var(--mint-wash);border:1px solid var(--mint-line);border-radius:var(--r-lg);padding:var(--s-5);margin:0 0 var(--s-8)}
.guides-cta p{margin:0;font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep)}

/* ---- /get-ready/ timeline (DESIGN §5.11) ---- */
.timeline{list-style:none;margin:0 0 var(--s-8);padding:0;counter-reset:step;max-width:920px}
.timeline__step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s-4) var(--s-5);padding:var(--s-6) 0;border-top:1px solid var(--line)}
.timeline__step:last-child{border-bottom:1px solid var(--line)}
.timeline__num{counter-increment:step;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mint-mid);color:var(--teal-deep);font-family:var(--display);font-weight:800;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.timeline__num::before{content:counter(step)}
.timeline__body{min-width:0}
.timeline__kicker{display:block;font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);margin:0 0 4px}
.timeline__title{font-size:var(--fs-lg);color:var(--teal-deep);margin:0 0 var(--s-2)}
.timeline__body>p{margin:0 0 var(--s-3);color:var(--ink)}
.timeline__body>p:last-child,.timeline__body>ul:last-child{margin-bottom:0}
.timeline__body .doc-list{margin:var(--s-3) 0 0;border-top:0}
.timeline__body .doc-row:first-child{border-top:1px solid var(--line)}
.timeline__acts{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin-top:var(--s-3)}
.prep-list{margin:0 0 var(--s-3);padding-left:1.3em}
.prep-list li{margin-bottom:.5em;line-height:1.5}
.prep-list li::marker{color:var(--teal)}
.timeline__other{font-size:var(--fs-base);color:var(--gray-text)}
.timeline__other a{font-weight:700;color:var(--teal-deep);display:inline-block;padding-block:12px;margin-block:-12px}

/* guide picker: procedure <details> rows with hospital rows; remembered clinic gets .is-mine (site.js role "guide") */
.guide-pick{border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 var(--s-2);background:var(--white)}
.guide-pick>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-2) var(--s-4);font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep);cursor:pointer}
.guide-pick>summary::-webkit-details-marker{display:none}
.guide-pick>summary::after{content:"▾";color:var(--teal);font-size:1em;flex:none}
.guide-pick[open]>summary::after{content:"▴"}
.guide-pick__list{list-style:none;margin:0;padding:0 var(--s-4) var(--s-3);display:grid;gap:var(--s-2)}
.guide-pick__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2) var(--s-3);min-height:52px;padding:8px var(--s-4);border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);background:var(--white)}
.guide-pick__row:hover{border-color:var(--teal-deep)}
.guide-pick__town{font-family:var(--display);font-weight:700;color:var(--teal-deep)}
.guide-pick__row small{display:block;font-size:var(--fs-sm);color:var(--gray-text);font-weight:500}
.guide-pick__mine{display:none}
.guide-pick__row.is-mine{border:2px solid var(--teal-deep);background:var(--mint-wash)}
.guide-pick__row.is-mine .guide-pick__mine{display:inline-flex}
.guide-pick__go{font-family:var(--display);font-weight:700;color:var(--teal-deep);white-space:nowrap}

@media (max-width:900px){
  .hub-cards,.guide-cards{grid-template-columns:1fr}
  .guide-cards>li,.guide-cards>li:nth-child(n+4){grid-column:auto}
}
@media (max-width:640px){
  .timeline__step{grid-template-columns:44px minmax(0,1fr);gap:var(--s-3);padding:var(--s-5) 0}
  .timeline__num{width:44px;height:44px;font-size:var(--fs-md)}
  .timeline__title{font-size:var(--fs-md)}
  .guide-pick__row{grid-template-columns:1fr}
  .guide-pick__go{display:none}
  .guides-cta{padding:var(--s-4)}
  .guides-cta .btn{flex:1 1 auto}
}

.timeline__body .strip-911{margin:0 0 var(--s-3)}

/* ---------- /get-ready/ three-door funnel (his ruling 2026-09-05) ---------- */
.funnel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);align-items:start;margin-top:var(--s-6)}
.funnel__card--joint{grid-column:1/-1}
.funnel__card{display:flex;flex-direction:column;gap:var(--s-3)}
.funnel__intro{display:contents}
.funnel__card .eyebrow{margin-bottom:0}
.funnel__title{font-size:var(--fs-lg);line-height:1.2;color:var(--teal-deep);margin:0}
.funnel__body{margin:0;color:var(--gray-text);font-size:var(--fs-base)}
.funnel__acts{margin-top:var(--s-2)}
.funnel__acts .btn{width:100%;justify-content:center}
.funnel__print{margin:var(--s-2) 0 0;font-size:var(--fs-sm);color:var(--gray-text);line-height:1.5}
.funnel__print a{color:var(--blue-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding-block:12px;margin-block:-12px}
.funnel__card .guide-pick{margin:0}
.funnel__after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-6)}
.funnel__mini{display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start}
.funnel__mini p{margin:0;color:var(--gray-text)}
@media (max-width:640px){.funnel,.funnel__after{grid-template-columns:1fr}}
@media (min-width:901px){.funnel__card--joint{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:var(--s-8);align-items:start}.funnel__card--joint .funnel__intro{display:flex;flex-direction:column;gap:var(--s-3)}}

.funnel__strip{margin-top:var(--s-6)}

/* ---------- /get-ready/ v3: one callout + three plain doors (his ruling 2026-09-05 evening) ---------- */
.must{padding:var(--s-6);border:2px solid var(--mint-line)}
.must__kicker{font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);margin:0 0 var(--s-2)}
.must__title{font-size:var(--fs-xl);line-height:1.15;color:var(--teal-deep);margin:0 0 var(--s-3);max-width:22em}
.must__body{margin:0;font-size:var(--fs-md);color:var(--ink);max-width:40em}
.doors{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-4)}
.door{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-5);align-items:start;padding:var(--s-6)}
.door__num{width:48px;height:48px;border-radius:50%;background:var(--teal-deep);color:var(--on-dark);font-family:var(--display);font-weight:800;font-size:var(--fs-lg);display:grid;place-items:center}
.door__title{font-size:var(--fs-xl);line-height:1.15;color:var(--teal-deep);margin:0}
.door__sub{margin:var(--s-1) 0 var(--s-4);color:var(--gray-text);font-size:var(--fs-md)}
.door__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.picker-page{max-width:760px}

/* ---------- /get-strong/ : the free Unlock Strong offer ---------- */
.must__acts{margin:var(--s-5) 0 0}
.code-word{font-family:var(--display);font-weight:800;letter-spacing:.04em;background:var(--white);border:1px solid var(--mint-line);border-radius:var(--r-sm);padding:0 .3em}
.gs-strip{margin-top:var(--s-7)}
.gs-card{max-width:var(--measure);margin-bottom:var(--s-7)}
@media (max-width:640px){.door{grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);padding:var(--s-4)}.door__num{width:40px;height:40px;font-size:var(--fs-md)}.door__acts .btn{width:100%;justify-content:center}.must{padding:var(--s-4)}}