/* ============================================================
   GEM patient-education guides — article page + callout families.
   Loaded ONLY by the generated guide-*.html article pages.

   Every colour comes from a token in tokens.css. The red "help" family and
   the light gold used for text ON purple were defined locally while these
   pages were being built; they moved to tokens.css on 2026-09-22, values
   unchanged. Nothing here defines a token of its own.

   Every text/background pair in this file is measured; the lowest is the
   postoperative gold label at 5.01:1 (AA needs 4.5). Gold on purple
   (slogan + key-message label) measures 7.65:1.

   No print styles: the PDF is the print version.
   ============================================================ */

/* ---- Article shell ------------------------------------------------------- */
.guide-layout {
  /* --guide-text is the READING MEASURE: the 708px the body text already had,
     kept exactly, so characters per line do not move (measured: 78 at every
     width from 1024 up). It is also the width of the whole article column -
     there is no wider band for pictures (removed 2026-09-23): figures,
     galleries and infographics share the paragraphs' left and right edges. */
  --guide-text: 708px;
  --guide-pad: clamp(1rem, 4vw, 2rem);
  --guide-rail-w: 260px;
  --guide-rail-gap: 2.5rem;
}
.guide {
  max-width: calc(var(--guide-text) + 2 * var(--guide-pad));
  margin: 0 auto;
  padding: 0 var(--guide-pad) clamp(2.5rem, 6vw, 4rem);
  color: var(--text);
}
.guide__body {
  font-size: 1.0625rem;           /* 17px floor on mobile (house minimum) */
  line-height: var(--line);
}
@media (min-width: 48rem) {
  .guide__body { font-size: 1.125rem; }
}
.guide__body p,
.guide__body li { overflow-wrap: break-word; }

/* Breadcrumb */
.guide-crumb {
  max-width: calc(var(--guide-text) + 2 * var(--guide-pad));
  margin: 0 auto;
  /* The trailing 1.25rem is the gap down to the title, which was 0: the
     crumb sat directly on the H1. 20px desktop, 16px on a phone. */
  padding: clamp(1.25rem, 4vw, 2rem) var(--guide-pad) 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 47.99rem) {
  .guide-crumb { padding-bottom: 1rem; }
}
/* 44px hit area, pulled back off the flow so the crumb line stays compact. */
.guide-crumb a {
  display: inline-block;
  padding: 0.85rem 0;
  margin: -0.85rem 0;
  color: var(--purple);
}
.guide-crumb__sep { margin: 0 0.45rem; color: var(--text-muted); }
.guide-crumb__here { color: var(--text-muted); }

/* Title block */
.guide__head {
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--gold);
}
.guide__eyebrow {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);        /* 5.45:1 on white */
}
.guide__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--purple);
}
.guide__subtitle {
  margin: 0 0 0.75rem;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.55;
  color: var(--text-warm);
}
.guide__metaline {                /* the version line — deliberately quiet */
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Download PDF */
.guide__actions { margin: 0; }
.guide__actions--end { margin-top: 2rem; }
.guide__download { min-height: 44px; }

/* Body typography */
.guide__body h1.guide__section {
  margin-block: 2.75rem 0.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--gold);
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--purple);
}
.guide__body h2 {
  margin-block: 2rem 0.6rem;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--purple);
}
.guide__body h3 {
  margin-block: 1.5rem 0.5rem;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  font-weight: 700;
  color: var(--purple);
}
.guide__body p { margin-block: 0 1rem; }
.guide__body ul,
.guide__body ol { margin-block: 0 1rem; padding-left: 1.4rem; }
.guide__body li { margin-block: 0 0.4rem; }
.guide__body a { color: var(--purple); overflow-wrap: anywhere; }
.guide__body strong { font-weight: 700; }
.guide__evidence-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.guide__body blockquote {
  margin-block: 0 1.25rem;
  padding: 0.85rem 1.1rem;
  background: var(--lavender-light);
  border-left: 4px solid var(--purple);
  border-radius: 0 8px 8px 0;
  color: var(--text);
}
.guide__body blockquote p:last-child { margin-bottom: 0; }

/* Wide content must scroll inside its own box, never the page */
.guide__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: 0 1.25rem;
  font-size: 0.9375rem;
}
.guide__body th,
.guide__body td {
  border: 1px solid rgba(58, 42, 102, 0.18);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
}
.guide__body th { background: var(--lavender); color: var(--purple); }

/* Ruled fill-in blank (the source's underscore runs) */
.guide-blank {
  display: inline-block;
  max-width: 100%;
  border-bottom: 1px solid var(--purple);
  height: 1em;
  vertical-align: baseline;
  margin: 0 0.15rem;
}

/* ---- Figures and galleries ---------------------------------------------- */
/* ONE TREATMENT FOR EVERY SINGLE IMAGE - photograph or infographic alike.
   It sits in the wide band, at the band's full width, above the paragraph it
   belongs with, never beside it. It never grows past its own file: a file
   narrower than the band is shown at its natural size, centred in the band.
   Space is tight below (the paragraph under an image describes that image)
   and generous above (so a description never reads as the next image's). */
/* margin-inline: 0 is load-bearing: a <figure> carries a 40px left and right
   margin from the browser's own stylesheet, and below 1024px nothing else
   removes it, so every picture sat 40px inside the text edge on both sides.
   From 1024px the column's centring rule outranks this and centres the band. */
.guide-fig { margin-block: 1.75rem 0.75rem; margin-inline: 0; }
.guide-fig img,
.guide-gallery__cell img {
  display: block;
  max-width: 100%;
  height: auto;                   /* width/height attrs are on the tag: no shift */
  border-radius: 6px;
}
.guide-fig--wide img {
  /* no `width: 100%` any more: an infographic follows the same rule as a
     photograph - the band's width, or its own if that is smaller - so it can
     never be stretched past its file. */
  border: 1px solid rgba(58, 42, 102, 0.22);
  border-radius: 3px;
}
/* An infographic is unreadable at a phone's width, so the figure offers the file
   itself in a new tab. Plain text link, no lightbox, no JavaScript. --purple on
   white measures 12.33:1; the 44px min-height is the house tap target. */
.guide-fig__full {
  margin: 0.5rem 0 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.guide-fig__full a {
  color: var(--purple);
  font-size: 0.9375rem;
  text-decoration: underline;
  padding: 0.5rem 0;
}
.guide-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 1.75rem;
}
@media (min-width: 34rem) {
  .guide-gallery { grid-template-columns: 1fr 1fr; }
}
.guide-gallery__cell { margin: 0; }
.guide-gallery__caption {
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--purple);           /* 12.33:1 on white */
}

/* ---- Pictures at the text width -------------------------------------------
   The column is the reading measure at every width, so a figure, a gallery or
   an infographic simply fills it - the same left and right edges as the
   paragraphs. A picture whose file is narrower than the measure is centred at
   its natural size, never stretched. */
.guide-fig img { margin-inline: auto; }


/* ---- 2/3. The sticky contents rail, from 1200px --------------------------
   Two columns: a 260px rail and the article. Nothing occupies the right - the
   pair is centred and the remaining space is left empty, which keeps the
   article centred on the page rather than pushed off to one side. Below
   1200px the rail is not rendered at all and the page is single-column. */
.guide-rail { display: none; }

@media (min-width: 75rem) {
  .guide-layout--rail .guide-layout__inner {
    display: grid;
    grid-template-columns: var(--guide-rail-w) minmax(0, calc(var(--guide-text) + 2 * var(--guide-pad)));
    column-gap: var(--guide-rail-gap);
    align-items: start;
    /* + 3rem for this element's own padding-inline, or the article column
       loses 48px and the text drops below its measure. */
    max-width: calc(var(--guide-rail-w) + var(--guide-rail-gap) + var(--guide-text) + 2 * var(--guide-pad) + 3rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  /* A quiet spine, not a boxed widget: no panel, no border, no radius. A 2px
     lavender rule runs the full height of the list and each entry sits on it
     as a dot. The rail is navigation only - the PDF button lives in the
     article header and again in the closing block.
     GEOMETRY: rows are sized to FIT, never scrolled. See --rail-row below and
     RAIL_DENSE_FROM in build_guides.py. */
  .guide-rail {
    --rail-size: 0.9375rem;          /* 15px */
    --rail-pad: 0.4rem;              /* the row's height comes from THIS, not a
                                        fixed min-height, so a label that wraps
                                        to two lines stays legible. 6.4px above
                                        and below: 12.8px between two labels */
    --rail-indent: 1rem;             /* list padding, left of which sits the rule */
    --rail-rule: 2px;
    --rail-dot: 8px;
    --rail-sub: 12px;                /* how far a numbered heading is indented */
    display: block;                  /* the base rule hides it below 1200px */
    position: sticky;
    /* --header-h is published by ui.js; the fallback covers the first paint. */
    top: calc(var(--header-h, 96px) + 1.5rem);
  }
  /* Every rail is sticky and every rail fits: past RAIL_FULL_UPTO entries
     (build_guides.py) the rail lists the section headings only, so there is
     no dense variant and no non-sticky fallback any more. */
  .guide-rail__head {
    margin: 0 0 0.6rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);        /* 6.98:1 on white; it is a label, not a link */
  }
  .guide-rail__list {
    margin: 0;
    padding: 0 0 0 var(--rail-indent);
    list-style: none;
    /* The spine. Decorative - the current entry is identified by its dot and
       its weight, never by this rule - so it is free to stay quiet. */
    border-left: var(--rail-rule) solid rgba(58, 42, 102, 0.18);
  }
  .guide-rail__list a {
    position: relative;
    display: block;                  /* block, not flex: a wrapped label has to
                                        run to two lines, not be centred in a
                                        fixed box */
    padding: var(--rail-pad) 0 var(--rail-pad) 0.25rem;
    font-size: var(--rail-size);
    line-height: 1.35;
    font-weight: 400;
    color: var(--text-muted);        /* 6.98:1 on white */
    text-decoration: none;
  }
  /* Two levels. A top-level section heading carries more weight and the
     ordinary text colour; the numbered headings under it are indented and
     muted. */
  .guide-rail__list .toc-l1 > a {
    font-weight: 600;
    color: var(--text);              /* 12.12:1 on white */
  }
  /* A section heading opens a group: extra room above it (not above the first,
     which sits under the rail's own heading) so its numbered headings read as
     belonging to it. The margin is on the <li>, so the spine - the list's
     border - runs on unbroken through the gap. */
  .guide-rail__list .toc-l1:not(:first-child) { margin-top: 0.75rem; }
  .guide-rail__list .toc-l2 > a {
    padding-left: calc(0.25rem + var(--rail-sub));
    color: var(--text-muted);        /* 6.98:1 on white */
  }
  /* The dot, centred on the rule: back out the list's padding, half the rule
     and half the dot. */
  /* The dot sits on the spine whatever the label's indent: `left` is measured
     from the link's padding box, which an indent does not move. `top` is a
     fixed distance so it lines up with the FIRST line of a wrapped label. */
  .guide-rail__list a::before {
    content: "";
    position: absolute;
    top: calc(var(--rail-pad) + 0.675em);
    left: calc(-1 * (var(--rail-indent) + var(--rail-rule) / 2 + var(--rail-dot) / 2));
    width: var(--rail-dot);
    height: var(--rail-dot);
    margin-top: calc(var(--rail-dot) / -2);
    border-radius: 50%;
    background: var(--white);
    /* Hollow while inactive. 0.55 composites to rgb(147,138,171) = 3.26:1 on
       white: quiet next to the filled purple dot, but not a ghost. */
    border: 2px solid rgba(58, 42, 102, 0.55);
  }
  .guide-rail__list a:hover,
  .guide-rail__list a:focus-visible { color: var(--purple); text-decoration: underline; }
  .guide-rail__list a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
  /* The current section: purple label at 600 AND a filled dot. Two signals, so
     it does not rest on colour alone. */
  /* Active: purple, a step of weight above its own level, and the filled dot.
     Weight still carries the state, so it never rests on colour alone. */
  .guide-rail__list a.is-current {
    color: var(--purple);            /* 12.33:1 on white */
    font-weight: 600;
  }
  .guide-rail__list .toc-l1 > a.is-current { font-weight: 700; }
  .guide-rail__list a.is-current::before {
    background: var(--purple);
    border-color: var(--purple);
  }
  /* The in-article copy of the same list is hidden here so it is not duplicated. */
  .guide-toc { display: none; }
  /* The closing block reuses the grid so it lines up under the article. */
}

/* An in-page jump animates only for readers who have not asked otherwise.
   guides.css is loaded by the article pages alone, so this reaches nothing
   else on the site. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- 4. "More in this topic" ---------------------------------------------
   A full-width band under the article. The card rules below mirror
   .pec-guide in education-center.css, which the article pages do not load;
   keep the two in step if either changes. */
/* Now the send-off: it sits directly above the footer, after the article's
   own disclaimer, PDF button and next-guide link. */
.guide-related {
  margin-top: 0;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: var(--lavender-light);
  border-top: 1px solid rgba(58, 42, 102, 0.12);
}
.guide-related__inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 1.5rem);
}
.guide-related__title {
  margin: 0 0 1.5rem;                /* 24px heading to content */
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  color: var(--purple);              /* 11.33:1 on --lavender-light */
}
.guide-related__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .guide-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .guide-related__grid { grid-template-columns: repeat(3, 1fr); } }
.guide-related .pec-guide {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.14);
  border-radius: 10px;
}
.guide-related .pec-guide__title {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--purple);              /* 12.33:1 on white */
}
.guide-related .pec-guide__title a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.guide-related .pec-guide__title a:hover,
.guide-related .pec-guide__title a:focus-visible { text-decoration: underline; }
.guide-related .pec-guide__title a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.guide-related .pec-guide__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: auto 0 0;
  font-size: 1rem;
}
.guide-related .pec-guide__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--purple);
  text-decoration: underline;
}
.guide-related .pec-guide__links a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.guide-related .pec-guide__read { font-weight: 700; }
.guide-related .pec-guide__pdf { font-weight: 400; }
.guide-related .pec-guides { list-style: none; margin: 0; padding: 0; }

/* ---- Callouts -------------------------------------------------------
   Built from the article's own H2s, and only when there are at least four of
   them. Multi-column on desktop so a long article's list stays compact. */
.guide-toc {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--lavender-light);
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
}
/* The summary carries the same look the heading had. The UA marker is removed
   in both engines and replaced by a chevron that only shows where the control
   is actually a control - below 768px. */
.guide-toc__box { margin: 0; }
.guide-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);              /* 11.33:1 on --lavender-light */
  list-style: none;                  /* Firefox */
}
.guide-toc__summary::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.guide-toc__summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.guide-toc__box[open] .guide-toc__summary { margin-bottom: 0.5rem; }

@media (max-width: 47.99rem) {
  /* A real disclosure: 44px target, and a chevron that turns when it opens. */
  .guide-toc__summary { min-height: 44px; cursor: pointer; }
  .guide-toc__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.15em, -0.15em);
  }
  .guide-toc__box[open] .guide-toc__summary::after {
    transform: rotate(-135deg) translate(-0.2em, -0.2em);
  }
}
@media (min-width: 48rem) {
  /* From here the page script forces it open and drops it from the tab order;
     these two make it read as the heading it looks like rather than a control
     that can be collapsed. */
  .guide-toc__summary { cursor: default; pointer-events: none; }
}
.guide-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
@media (min-width: 48rem) {
  .guide-toc__list { columns: 2; column-gap: 2rem; }
}
@media (min-width: 75rem) {
  .guide-toc__list { columns: 3; }
}
.guide-toc__list li { break-inside: avoid; }
.guide-toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;                  /* tap target */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--purple);              /* 11.79:1 on --lavender-light */
  text-decoration: none;
}
.guide-toc__list a:hover,
.guide-toc__list a:focus-visible { text-decoration: underline; }
.guide-toc__list a:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
/* No transition on the marker: the disclosure must not animate for a reader
   who has asked it not to, and there is nothing here worth animating anyway. */
.guide-toc__summary::after { transition: none; }
/* The position marker moves instantly for everyone, not only under
   prefers-reduced-motion: there is nothing to tween and a lagging dot reads as
   a bug. */
.guide-rail__list a,
.guide-rail__list a::before { transition: none; }
/* NO scroll-margin-top here. styles.css already sets html { scroll-padding-top:
   124px } for exactly this - clearing the fixed masthead on an anchor jump -
   and the two ADD: a 104px scroll-margin added in an earlier pass was landing
   every jump 104px too low, which also put the heading below the line the rail
   uses to decide the current section, so the section you jumped to was the one
   that never highlighted. The scroll-padding alone is correct. */

/* ---- Callout families ---------------------------------------------------
   One family per PDF treatment. The printed label is whatever the markdown
   says; only the styling is decided here. */

/* P0 COLOUR COLLISION, fixed here on 2026-09-22.
   These article callouts share the class name .callout with the site's dark
   support panel in styles.css (L3553-3561), which sets
       .callout        { color: var(--white) }
       .callout p      { color: var(--lavender) }
       .callout h2, h3 { color: var(--white) }
   Correct for a purple panel; ruinous on the LIGHT families below, where it
   painted the body copy lavender on near-lavender - 1.00:1 on --labelled and
   --position, 1.01-1.14:1 on the rest - so 59 paragraphs of medical text were
   present in the markup and invisible on the page. guides.css must not edit
   styles.css, so it re-asserts the colour for the light families here.
   .callout p is (0,1,1); the selectors below match that and come later in the
   cascade, which is why every element type is named rather than relying on
   inheritance alone. <strong> follows its parent once the parent is right. */
.callout--labelled,
.callout--position,
.callout--caution,
.callout--postoperative,
.callout--founder,
.callout--help { color: var(--text); }

:is(.callout--labelled,
    .callout--position,
    .callout--caution,
    .callout--postoperative,
    .callout--founder,
    .callout--help) :is(p, li, dd, dt, figcaption) { color: var(--text); }

:is(.callout--labelled,
    .callout--position,
    .callout--caution,
    .callout--postoperative,
    .callout--founder,
    .callout--help) :is(h2, h3, h4) { color: var(--purple); }

:is(.callout--labelled,
    .callout--position,
    .callout--caution,
    .callout--postoperative,
    .callout--founder,
    .callout--help) a { color: var(--purple); }

/* The mirror image, on the DARK families: guides.css sets
   .guide__body h3 { color: var(--purple) } at the same (0,1,1) specificity as
   styles.css's .callout h3 { color: var(--white) } and later in the cascade,
   so a heading inside the purple panel would come out purple on purple. No
   article currently puts one there; this keeps it safe if one ever does. */
:is(.callout--key-message, .callout--slogan) :is(h2, h3, h4) { color: var(--white); }

/* EXCEPTION, and the reason this is not a blanket rule: in the --labelled
   family the label is a PURPLE BAR, not part of the light surface. One of
   these (Understanding Treatment, "The central message:") carries a full
   paragraph of body text inline on that bar. Dark text there would be the same
   bug in reverse, so the bar keeps its light copy - measured 10.78:1. */
.callout--labelled .callout__label { color: var(--lavender); }

.callout {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: 8px;
}
.callout p { margin: 0 0 0.75rem; }
.callout p:last-child { margin-bottom: 0; }
.callout__label { margin: 0 0 0.5rem; }
.callout__label strong {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.callout__label--inline { margin-bottom: 0; }
.callout ul,
.callout ol { margin: 0 0 0.75rem; padding-left: 1.3rem; }

/* key message — solid purple, gold rule, gold label */
.callout--key-message {
  background: var(--purple);
  color: var(--white);            /* 12.33:1 */
  border-top: 3px solid var(--gold);
  border-radius: 0 0 8px 8px;
  padding: 1.15rem 1.25rem;
}
.callout--key-message .callout__label strong { color: var(--guide-gold-light); } /* 7.65:1 */
.callout--key-message a { color: var(--white); }

/* postoperative — purple outline, gold label */
.callout--postoperative {
  background: var(--lavender-light);
  border: 2px solid var(--purple);
}
.callout--postoperative .callout__label strong { color: var(--gold-deep); }      /* 5.01:1 */

/* position / principle — pale purple, purple rule */
.callout--position {
  background: var(--lavender);
  border-left: 5px solid var(--purple);
  border-radius: 0 8px 8px 0;
}
.callout--position .callout__label strong { color: var(--purple); }              /* 10.78:1 */

/* scientific caution — gold on cream */
.callout--caution {
  background: var(--cream);
  border: 1px solid var(--gold);
  border-left: 5px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.callout--caution .callout__label strong { color: var(--gold-deep); }            /* 5.18:1 */

/* founder's clinical perspective — dashed purple, italic body */
.callout--founder {
  background: var(--white);
  border: 1px dashed var(--purple);
}
.callout--founder p { font-style: italic; }
.callout--founder .callout__label strong { font-style: normal; color: var(--purple); }

/* when to get help — red family, with the three tiers */
.callout--help {
  background: var(--guide-help-bg);
  border-left: 5px solid var(--guide-help);
  border-radius: 0 8px 8px 0;
}
.callout--help .callout__label strong { color: var(--guide-help); }              /* 7.36:1 */
.callout--tier-emergency {
  background: var(--guide-help-emergency-bg);
  border-left-color: var(--guide-help);
  border-left-width: 8px;
}
.callout--tier-emergency .callout__label strong { color: var(--guide-help); }    /* 7.06:1 */
.callout--tier-urgent {
  background: var(--guide-help-urgent-bg);
  border-left-color: var(--gold);
}
.callout--tier-urgent .callout__label strong { color: var(--gold-deep); }        /* 5.03:1 */
.callout--tier-same-day {
  background: var(--lavender);
  border-left-color: var(--purple);
}
.callout--tier-same-day .callout__label strong { color: var(--purple); }         /* 10.78:1 */

/* labelled box — purple label bar over a lavender body */
.callout--labelled {
  background: var(--lavender);
  border: 1px solid var(--purple);
  padding: 0;
  overflow: hidden;
}
.callout--labelled .callout__label {
  margin: 0;
  padding: 0.55rem 1.15rem;
  background: var(--purple);
}
.callout--labelled .callout__label strong { color: var(--white); }               /* 12.33:1 */
.callout--labelled p { padding: 0 1.15rem; }
.callout--labelled .callout__label + p { padding-top: 0.9rem; }
.callout--labelled p:last-child { padding-bottom: 1rem; }
.callout--labelled ul,
.callout--labelled ol { padding-left: 2.4rem; padding-right: 1.15rem; }

/* slogan bar — solid purple, centred, gold text, no label */
.callout--slogan {
  background: var(--purple);
  color: var(--guide-gold-light);  /* 7.65:1 */
  border-top: 3px solid var(--gold);
  border-radius: 0 0 8px 8px;
  text-align: center;
  padding: 1rem 1.25rem;
}
.callout--slogan p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.callout--slogan strong { color: var(--guide-gold-light); font-weight: 700; }
.callout--slogan .callout__label strong { color: var(--white); }

/* ---- Print-first card --------------------------------------------------- */
.guide-printcard {
  margin: 2rem 0 0;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: var(--lavender);
  border: 1px solid var(--purple);
  border-top: 4px solid var(--gold);
  border-radius: 10px;
  text-align: center;
}
.guide-printcard__head {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--purple);            /* 10.78:1 */
}
.guide-printcard__action { margin: 0; }
.guide-printcard__action .btn { min-height: 44px; }

/* ---- Legal + next article ----------------------------------------------- */
.guide__legal {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold);
}
.guide__disclaimer {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-warm);         /* 9.10:1 */
}
.guide__copyright {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);        /* 6.98:1 */
}
.guide__next {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(58, 42, 102, 0.18);
}
.guide__next-link {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--purple);            /* 12.33:1 */
}

/* Reduced motion: nothing here animates, but keep the contract explicit. */
@media (prefers-reduced-motion: reduce) {
  .guide *,
  .guide-crumb *, .guide-rail, .guide-rail__list a, .guide-rail__list a::before,
  .guide-related .pec-guide { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto !important; }
}