/*
 * Blood Doctor Editorial Kit — article components
 * Extracted from the per-post <style> blocks of posts 6 and 42 so every
 * episode shares one definition instead of carrying its own copy.
 *
 * .bd-article  = canonical namespace, series-neutral
 * .bd-anaemia  = TRANSITIONAL ALIAS so live posts keep rendering during
 *                migration. Remove once all posts use .bd-article.
 */

.bd-article, .bd-anaemia {
  --bd-ink:      #092b45;
  --bd-accent:   #0876b9;
  --bd-deep:     #0b659d;
  --bd-muted:    #52616f;
  --bd-line:     #c3d4e0;
  --bd-wash:     #eaf4fa;
  --bd-urgent:   #c0392b;
}

.bd-article, .bd-anaemia{ --ink:#162b3d; --muted:#5b6874; --navy:#0c304b; --blue:#0b659d; --blue-pale:#eaf4fa; --teal:#087f8c; --amber:#9c6105; --amber-bg:#fff5df; --red:#a43c32; --red-bg:#fff0ed; --line:#d6e1e8; font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); line-height:1.72; max-width:900px; margin:1.75rem auto; }.bd-article *, .bd-anaemia *{ box-sizing:border-box; }.bd-article h2, .bd-anaemia h2{ margin:3rem 0 1rem; padding-top:.7rem; border-top:1px solid var(--line); color:var(--navy); font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.025em; line-height:1.16; }.bd-article h3, .bd-anaemia h3{ margin:2rem 0 .55rem; color:#0e527d; font-size:1.18rem; line-height:1.3; }.bd-article .hero, .bd-anaemia .hero{ position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(105deg,#092b45 0%,#0c304b 55%,#123f5e 100%); color:#fff; border-radius:12px; padding:clamp(1.5rem,5vw,3.4rem); box-shadow:0 14px 34px rgba(12,48,75,.18); margin:0 0 2rem; }.bd-article .hero > *:not(.hero-art), .bd-anaemia .hero > *:not(.hero-art){ position:relative; z-index:1; }.bd-article .hero-art, .bd-anaemia .hero-art{ position:absolute; z-index:0; inset:0 0 0 44%; width:56%; height:100%; object-fit:cover; opacity:.48; mix-blend-mode:screen; mask-image:linear-gradient(90deg,transparent 0%,#000 24%); }.bd-article .hero::after, .bd-anaemia .hero::after{ content:""; position:absolute; z-index:0; inset:auto 0 0 0; height:42%; background:linear-gradient(0deg,rgba(9,43,69,.92),transparent); pointer-events:none; }.bd-article .eyebrow, .bd-anaemia .eyebrow{ color:#a9d9f3; font-size:.75rem; font-weight:800; letter-spacing:.13em; margin:0 0 1rem; text-transform:uppercase; }.bd-article .hero h1, .bd-anaemia .hero h1{ border:0; color:#fff; font-size:clamp(2.15rem,4.7vw,3.65rem); letter-spacing:-.04em; line-height:1.04; margin:0 0 .8rem; padding:0; }.bd-article .hero p, .bd-anaemia .hero p{ color:#d8e9f4; max-width:58ch; margin:0; font-size:1.1rem; }.bd-article .hero-grid, .bd-anaemia .hero-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1.7rem; }.bd-article .hero-grid div, .bd-anaemia .hero-grid div{ border:1px solid rgba(187,224,244,.28); border-radius:8px; padding:.8rem .85rem; background:rgba(255,255,255,.06); }.bd-article .hero-grid strong, .bd-anaemia .hero-grid strong{ display:block; color:#fff; font-size:.9rem; }.bd-article .hero-grid span, .bd-anaemia .hero-grid span{ display:block; color:#b9d6e7; font-size:.82rem; line-height:1.4; margin-top:.2rem; }.bd-article .guide-tools, .bd-anaemia .guide-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:0 0 1.65rem; padding:.85rem 1rem; border:1px solid #c7dce8; border-radius:10px; background:#f7fbfe; }.bd-article .guide-tools .tool-label, .bd-anaemia .guide-tools .tool-label{ color:#31566d; font-size:.8rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; margin-right:.1rem; }.bd-article .guide-tools a, .bd-anaemia .guide-tools a, .bd-article .guide-tools button, .bd-anaemia .guide-tools button{ display:inline-flex; align-items:center; min-height:38px; padding:.38rem .65rem; border:1px solid #b5d4e4; border-radius:999px; background:#fff; color:#075e99; cursor:pointer; font:inherit; font-size:.88rem; font-weight:750; line-height:1.2; text-decoration:none; }.bd-article .guide-tools a:hover, .bd-anaemia .guide-tools a:hover, .bd-article .guide-tools a:focus-visible, .bd-anaemia .guide-tools a:focus-visible, .bd-article .guide-tools button:hover, .bd-anaemia .guide-tools button:hover, .bd-article .guide-tools button:focus-visible, .bd-anaemia .guide-tools button:focus-visible{ border-color:#087f8c; background:#ecf9fa; color:#064a72; }.bd-article .guide-tools button, .bd-anaemia .guide-tools button{ margin-left:auto; }.bd-article .lead, .bd-anaemia .lead{ font-size:1.2rem; color:#314b60; max-width:70ch; }.bd-article .callout, .bd-anaemia .callout{ border:1px solid #bbd7e8; border-top:4px solid var(--blue); background:var(--blue-pale); padding:1.15rem 1.25rem; border-radius:8px; margin:1.7rem 0; box-shadow:0 2px 8px rgba(22,43,61,.05); }.bd-article .warning, .bd-anaemia .warning{ border-color:#eed49e; border-top-color:var(--amber); background:var(--amber-bg); }.bd-article .urgent, .bd-anaemia .urgent{ border-color:#edc3bd; border-top-color:var(--red); background:var(--red-bg); }.bd-article .quote, .bd-anaemia .quote{ border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:2rem 0; padding:1.25rem .2rem; font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif; font-size:clamp(1.25rem,2.5vw,1.55rem); color:#15515a; font-weight:650; line-height:1.4; }.bd-article .table-wrap, .bd-anaemia .table-wrap{ width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:8px; margin:1.1rem 0 1.75rem; }.bd-article table, .bd-anaemia table{ width:100%; min-width:640px; border-collapse:collapse; margin:0; font-size:.95rem; }.bd-article th, .bd-anaemia th{ text-align:left; background:var(--navy); color:#fff; padding:.85rem; font-size:.82rem; letter-spacing:.02em; }.bd-article td, .bd-anaemia td{ vertical-align:top; padding:.85rem; border-top:1px solid var(--line); }.bd-article tr:nth-child(even), .bd-anaemia tr:nth-child(even){ background:#f7fafc; }.bd-article .flow, .bd-anaemia .flow{ display:grid; gap:.65rem; margin:1.25rem 0 1.7rem; }.bd-article .investigation-figure, .bd-anaemia .investigation-figure{ margin:1.35rem 0 1.65rem; padding:1rem 1.1rem 1.15rem; border:1px solid #c9dfec; background:#f5fbff; border-radius:10px; }.bd-article .investigation-figure figcaption, .bd-anaemia .investigation-figure figcaption{ color:#29536d; font-size:.9rem; font-weight:700; margin:0 0 .85rem; }.bd-article .investigation-orbit, .bd-anaemia .investigation-orbit{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }.bd-article .flow-node, .bd-anaemia .flow-node{ min-height:4.9rem; display:grid; place-content:center; text-align:center; border:1px solid #a8cee2; border-radius:8px; background:#fff; color:#0c506f; font-size:.78rem; font-weight:850; letter-spacing:.05em; box-shadow:0 2px 6px rgba(8,77,116,.06); animation:bd-node-float 7s ease-in-out infinite; }.bd-article .flow-node:nth-child(2), .bd-anaemia .flow-node:nth-child(2){ animation-delay:1.1s; }.bd-article .flow-node:nth-child(3), .bd-anaemia .flow-node:nth-child(3){ animation-delay:2.2s; }.bd-article .flow-node:nth-child(4), .bd-anaemia .flow-node:nth-child(4){ animation-delay:3.3s; }
  @keyframes bd-node-float {0%, 100%{ transform:translateY(0); box-shadow:0 2px 6px rgba(8,77,116,.06); }50%{ transform:translateY(-4px); box-shadow:0 8px 16px rgba(8,77,116,.14); } }.bd-article .cell-figure, .bd-anaemia .cell-figure{ display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.7fr); align-items:center; gap:1.25rem; margin:1.2rem 0 1.65rem; padding:1.1rem; border-radius:10px; background:#f8fbfd; border:1px solid var(--line); }.bd-article .cell-figure img, .bd-anaemia .cell-figure img{ display:block; width:100%; max-width:270px; justify-self:center; border-radius:8px; }.bd-article .cell-figure figcaption, .bd-anaemia .cell-figure figcaption{ color:#35566b; font-size:.93rem; line-height:1.55; }.bd-article .cell-figure strong, .bd-anaemia .cell-figure strong{ color:var(--navy); display:block; margin-bottom:.3rem; }.bd-article .step, .bd-anaemia .step{ position:relative; padding:1rem 1rem 1rem 4.25rem; border:1px solid var(--line); background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(20,59,93,.05); }.bd-article .step::before, .bd-anaemia .step::before{ content:attr(data-step); position:absolute; left:1rem; top:1rem; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font-weight:850; }.bd-article .step strong, .bd-anaemia .step strong{ display:block; color:var(--navy); margin-bottom:.05rem; }.bd-article .pill, .bd-anaemia .pill{ display:inline-block; margin:.25rem .3rem .25rem 0; padding:.22rem .6rem; border-radius:99px; border:1px solid #b9dbe2; background:#eef8f9; color:#0b606b; font-weight:750; font-size:.83rem; }.bd-article .checklist, .bd-anaemia .checklist{ padding-left:1.25rem; }.bd-article .checklist li, .bd-anaemia .checklist li{ margin:.55rem 0; padding-left:.25rem; }.bd-article .small, .bd-anaemia .small{ font-size:.88rem; color:var(--muted); }.bd-article .author-note, .bd-anaemia .author-note{ margin:1.6rem 0 .5rem; padding:1rem 1.1rem; border-top:3px solid var(--teal); background:#f2fafb; color:#294d60; font-size:.95rem; }.bd-article .author-note strong, .bd-anaemia .author-note strong{ color:var(--navy); }.bd-article .author-note a, .bd-anaemia .author-note a{ font-weight:750; }.bd-article a, .bd-anaemia a{ color:#075e99; text-decoration-thickness:.08em; text-underline-offset:.16em; }.bd-article a:hover, .bd-anaemia a:hover{ color:#063f69; }
  @media (max-width:650px) {.bd-article, .bd-anaemia{ margin:1rem auto; }.bd-article .hero, .bd-anaemia .hero{ padding:1.45rem; }.bd-article .hero-art, .bd-anaemia .hero-art{ inset:0; width:100%; opacity:.2; mask-image:none; }.bd-article .hero-grid, .bd-anaemia .hero-grid, .bd-article .cell-figure, .bd-anaemia .cell-figure{ grid-template-columns:1fr; }.bd-article .investigation-orbit, .bd-anaemia .investigation-orbit{ grid-template-columns:repeat(2,minmax(0,1fr)); }.bd-article .guide-tools, .bd-anaemia .guide-tools{ align-items:flex-start; }.bd-article .guide-tools .tool-label, .bd-anaemia .guide-tools .tool-label{ width:100%; }.bd-article .guide-tools button, .bd-anaemia .guide-tools button{ margin-left:0; }.bd-article h2, .bd-anaemia h2{ margin-top:2.25rem; } }
  @media (prefers-reduced-motion:reduce) {.bd-article *, .bd-anaemia *{ scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

@media (max-width:650px){.bd-article .hero-grid, .bd-anaemia .hero-grid{grid-template-columns:1fr;}}

/* ============================================================
   SERIES COMPONENTS — new in the Editorial Kit
   Not present in the original per-post styles.
   ============================================================ */

/* Episode navigation: "what to read next" cards */
.bd-episode-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.bd-episode-nav .bd-episode-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--bd-line);
  border-top: 4px solid var(--bd-accent);
  border-radius: 12px;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bd-episode-nav .bd-episode-card:hover,
.bd-episode-nav .bd-episode-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--bd-accent);
  box-shadow: 0 6px 20px rgba(8,118,185,.14);
}
.bd-episode-nav .bd-episode-tag {
  color: var(--bd-accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bd-episode-nav .bd-episode-card h3 {
  margin: 0;
  color: var(--bd-ink);
  font-size: 1.12rem;
  line-height: 1.25;
}
.bd-episode-nav .bd-episode-card p { margin: 0; color: var(--bd-muted); font-size: .95rem; }
.bd-episode-nav .bd-episode-card a.bd-episode-go {
  margin-top: .35rem;
  color: var(--bd-deep);
  font-weight: 700;
  text-decoration: none;
}
.bd-episode-nav .bd-episode-card a.bd-episode-go:hover { text-decoration: underline; }

/* Card for an episode that is written but not yet published */
.bd-episode-nav .bd-episode-card.is-upcoming {
  border-top-color: var(--bd-muted);
  background: #f7fafc;
}
.bd-episode-nav .bd-episode-card.is-upcoming .bd-episode-tag { color: var(--bd-muted); }

/* "Next episode" banner */
.bd-next-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--bd-line);
  border-radius: 12px;
  background: var(--bd-wash);
}
.bd-next-banner strong { color: var(--bd-ink); }
.bd-next-banner span { color: var(--bd-muted); font-size: .95rem; }

/* References */
.bd-references { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--bd-line); }
.bd-references h2 { font-size: 1.15rem; }
.bd-references ol { margin: .75rem 0 0; padding-left: 1.25rem; }
.bd-references li { margin: 0 0 .5rem; color: var(--bd-muted); font-size: .92rem; line-height: 1.55; }
.bd-references a { word-break: break-word; }

/* Clinical review / disclosure strip */
.bd-reviewed {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  background: #f4f7f9;
  color: var(--bd-muted);
  font-size: .88rem;
}
.bd-reviewed strong { color: var(--bd-ink); }

@media (prefers-reduced-motion: reduce) {
  .bd-episode-nav .bd-episode-card { transition: none; }
  .bd-episode-nav .bd-episode-card:hover { transform: none; }
}