/* ==========================================================================
   PediaSuite — NRP guide pages
   Used by /nrp/algorithm/, /nrp/flashcards/, /nrp/study-guide/ and
   /nrp/practice-cases/. Load order: site.css, study.css, guide.css.
   Additive only: every selector is prefixed guide-, flow-, case- or scoped
   under .guide, so no other page is affected. The hero, flashcard, FAQ,
   comparison-table and CTA components come from study.css.
   ========================================================================== */

/* --- Body column (narrower than the hero for a readable line length) ----- */
.guide{ max-width:760px; margin-inline:auto; padding-inline:28px; padding-bottom:8px; }
.guide .nrp-page-nav{ margin-top:0; }

/* --- Byline under the hero CTAs ------------------------------------------ */
.guide-byline{ font-family:var(--sans); font-size:.82rem; color:var(--ink-faint); margin:16px 0 0; }
.guide-byline a{ text-decoration:none; }
.guide-byline b{ color:var(--ink); font-weight:600; }

/* --- Prose ---------------------------------------------------------------- */
.guide-prose{ font-size:1.02rem; }
.guide-prose h2{ font-size:clamp(1.45rem,2.3vw,1.8rem); margin:48px 0 12px; scroll-margin-top:84px; }
.guide-prose h3{ font-size:1.14rem; margin:28px 0 8px; scroll-margin-top:84px; }
.guide-prose p{ margin:0 0 16px; }
.guide-prose strong{ color:var(--ink); font-weight:600; }
.guide-prose ul, .guide-prose ol{ margin:0 0 18px; padding-left:22px; }
.guide-prose li{ margin-bottom:7px; }
.guide-prose a{ color:var(--teal); text-underline-offset:2px; }
.guide-prose a:hover{ text-decoration-thickness:2px; }
.guide-prose > h2:first-child{ margin-top:8px; }

/* --- Callout -------------------------------------------------------------- */
.guide-key{ background:var(--teal-wash); border-radius:8px; padding:16px 18px; margin:24px 0;
  font-family:var(--sans); font-size:.92rem; line-height:1.6; }
.guide-key .k{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); display:block; margin-bottom:6px; }
.guide-key p{ margin:0 0 8px; }
.guide-key p:last-child{ margin-bottom:0; }

/* --- Algorithm flow (numbered stops on a vertical line) ------------------- */
.flow{ list-style:none; margin:28px 0 8px; padding:0; counter-reset:flow; }
.flow-step{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:0 18px; padding-bottom:34px; }
.flow-step:last-child{ padding-bottom:0; }
.flow-step::before{ content:""; position:absolute; left:21px; top:46px; bottom:4px; width:2px; background:var(--line-strong); }
.flow-step:last-child::before{ display:none; }
.flow-num{ counter-increment:flow; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:1rem;
  background:var(--teal-wash); color:var(--teal); border:1px solid var(--teal); }
.flow-num::before{ content:counter(flow); }
.flow-body{ min-width:0; }
.flow-lesson{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin:4px 0 0; }
.flow-body h3{ margin:2px 0 8px; font-size:1.18rem; }
.flow-body p{ margin:0 0 12px; }
.flow-body ul{ margin:0 0 12px; padding-left:20px; list-style:disc; }
.flow-body li{ margin-bottom:6px; }
.flow-ask{ border-left:3px solid var(--teal); background:var(--teal-wash); border-radius:0 8px 8px 0;
  padding:9px 14px; margin:2px 0 14px; font-family:var(--sans); font-size:.9rem; color:var(--ink); }
.flow-branches{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
.flow-branches li{ display:flex; gap:10px; align-items:baseline; margin:0; }
.flow-tag{ flex:none; font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:100px; white-space:nowrap; }
.flow-tag-act{ background:var(--amber-wash); color:var(--amber); }
.flow-tag-ok{ background:var(--teal-wash); color:var(--teal); }
.flow-more{ font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); margin:0; }
@media (max-width:520px){
  .flow-branches li{ flex-direction:column; gap:4px; align-items:flex-start; }
  .nrp-hero .btn{ line-height:1.25; }
  .guide .fc-a{ padding-left:20px; }
  .flow-step{ grid-template-columns:34px 1fr; gap:0 12px; }
  .flow-num{ width:34px; height:34px; font-size:.86rem; }
  .flow-step::before{ left:16px; top:38px; }
}

/* --- Numbers table (extends .compare-table) ------------------------------- */
.guide .compare-table tbody th{ white-space:normal; min-width:150px; }
.guide .cmp-lesson td:last-child{ white-space:nowrap; font-size:.8rem; color:var(--ink-faint); }

/* --- Practice cases -------------------------------------------------------- */
.case-head{ margin-top:44px; }
.case-head h2{ margin-top:0; }
.case-tag{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); margin:0 0 4px; }
.case-scenario{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:var(--radius); padding:16px 18px; margin:12px 0 18px; font-size:.97rem; }
.case-scenario p{ margin:0 0 10px; }
.case-scenario p:last-child{ margin-bottom:0; }
.case-update{ font-family:var(--sans); font-size:.88rem; color:var(--ink-soft); font-style:italic; margin:16px 0 10px; }
.guide .fc-grid{ margin-bottom:8px; gap:12px; }
.guide .fc-a p{ margin:0 0 8px; }
.guide .fc-a p:last-child{ margin-bottom:0; }
.guide .fc-a ul{ margin:6px 0 0; padding-left:18px; }
.guide .fc-a a{ color:var(--teal); }

/* --- Bottom-of-page blocks ------------------------------------------------- */
.guide .study-cta .cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.guide .study-cta .cta-link{ font-family:var(--sans); font-size:.88rem; font-weight:600; color:#E8A75C;
  text-decoration:none; border-bottom:1px solid rgba(232,167,92,.5); }
.guide .study-cta .cta-link:hover{ color:#F0C489; border-color:#F0C489; }
.guide .btn svg{ width:16px; height:16px; flex:none; }
.guide .nrp-cta-inline{ margin:36px 0; }
.guide .nrp-cta-inline .btn{ flex:none; max-width:100%; }
@media (max-width:520px){
  .guide .nrp-cta-inline .btn, .guide .study-cta .cta-row .btn{ width:100%; line-height:1.25; }
}
.guide .nrp-tools{ margin-bottom:8px; }
.guide-related-title{ margin:52px 0 18px; scroll-margin-top:84px; }
.guide-more{ border-top:1px solid var(--line); margin-top:44px; padding-top:22px; }
.guide-more .k{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }
.guide-more a{ font-family:var(--sans); font-size:.9rem; color:var(--teal); text-decoration:none; display:block; padding:4px 0; }
.guide-more a:hover{ text-decoration:underline; }
.guide-disclaimer{ font-family:var(--sans); font-size:.8rem; color:var(--ink-faint); margin:28px 0 0; line-height:1.6; }