/* Drin Blog — Magazine template
   Used by long-form patient guides (>2000 cuvinte, 5+ capitole logice).
   Pair this stylesheet with: Public Sans + Fraunces fonts (google), JSON-LD
   blocks (MedicalWebPage / FAQPage / HowTo / BreadcrumbList), and the
   `blog-footer.js` runtime footer. See `/blog/_template-magazine.html`. */

/* Brand palette (was shared.css) */
:root {
  --paper: #fdfaf3;
  --ink: #1a2536;
  --ink-soft: #475569;
  --muted: #94a3b8;

  --teal-50: #f0fdfa;
  --teal-100: #d4f5f0;
  --teal-700: #0f766e;
  --teal-900: #134e4a;

  --beige-100: #faf5ec;
  --beige-200: #f0e6cd;
  --beige-300: #d9c89e;

  --warn-red-bg: #fef2f2;
  --warn-red-bd: #dc2626;
  --warn-red-tx: #991b1b;

  --warn-orange-bg: #fff7ed;
  --warn-orange-bd: #ea580c;
  --warn-orange-tx: #9a3412;

  --ok-green-bg: #f0fdf4;
  --ok-green-bd: #16a34a;
  --ok-green-tx: #166534;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  background: var(--beige-100);
  font-family: "Public Sans", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.5;
}

/* Page (was print A4) — adapted for web as a stacked white card layout */
.page {
  background: var(--paper);
  width: 210mm;
  max-width: calc(100% - 24px);
  margin: 18px auto;
  box-shadow: 0 4px 24px rgba(15, 60, 70, 0.06);
  border-radius: 4px;
  padding: 13mm 14mm 11mm;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.doc2 .page {
  padding: 13mm 14mm 11mm;
  display: flex;
  flex-direction: column;
}

/* Running header */
.running {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5pt;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-bottom: 3mm;
  border-bottom: 1px solid var(--teal-100);
  margin-bottom: 6mm;
}
.running .brand-tag {
  color: var(--teal-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 8pt;
}
.running .brand-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--teal-700);
  border-radius: 50%;
  margin-right: 5px;
  transform: translateY(-1px);
}
.running .chapter {
  font-family: "Fraunces", serif;
  font-style: italic;
  color: var(--teal-900);
  font-size: 10pt;
}
.running .pg {
  font-family: "Public Sans", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Chapter intro on each chapter page */
.chap-intro {
  display: grid;
  grid-template-columns: 18mm 1fr;
  gap: 5mm;
  margin-bottom: 6mm;
  align-items: start;
}
.chap-num {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 44pt;
  line-height: 0.9;
  color: var(--teal-100);
  letter-spacing: -0.04em;
}
.chap-titles { padding-top: 1.5mm; }
.chap-eyebrow {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--teal-700);
  font-weight: 600;
}
h2.chap-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 22pt;
  line-height: 1.05;
  color: var(--teal-900);
  margin-top: 1mm;
  letter-spacing: -0.015em;
}
h2.chap-title em { font-style: italic; color: var(--teal-700); }
.chap-lede {
  font-family: "Fraunces", serif;
  font-size: 11.5pt;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 3mm;
  max-width: 130mm;
}

/* Body type */
.body-text { font-size: 10pt; line-height: 1.45; color: var(--ink); }
.body-text p { margin-bottom: 2.5mm; }
.body-text p:last-child { margin-bottom: 0; }
.body-text b { color: var(--teal-900); font-weight: 600; }

h3.sub {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 12.5pt;
  color: var(--teal-900);
  margin: 3.5mm 0 1.8mm;
  line-height: 1.15;
}
h3.sub:first-child { margin-top: 0; }
h4.sub-sm {
  font-size: 10pt;
  font-weight: 600;
  color: var(--teal-900);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 3mm 0 1.5mm;
}

/* Tinted card */
.card {
  background: var(--teal-50);
  border-left: 3px solid var(--teal-700);
  padding: 4mm 5mm;
  border-radius: 1mm;
  margin: 3mm 0;
  font-size: 9.8pt;
  line-height: 1.45;
}
.card h4 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  color: var(--teal-900);
  font-size: 12pt;
  margin-bottom: 2mm;
}

.beige {
  background: var(--beige-100);
  border-left-color: var(--beige-300);
}
.beige h4 { color: #5b4a25; }

/* Tables */
table.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5mm 0 3.5mm;
  font-size: 9.5pt;
}
table.tbl th, table.tbl td {
  padding: 1.8mm 3mm;
  text-align: left;
  border-bottom: 1px solid var(--teal-100);
  vertical-align: top;
}
table.tbl thead th {
  background: var(--teal-700);
  color: #fff;
  font-weight: 600;
  font-size: 9pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: none;
}
table.tbl tbody tr:nth-child(even) { background: var(--teal-50); }
table.tbl td.col-w { color: var(--teal-700); font-weight: 600; white-space: nowrap; width: 28mm; }
table.tbl td.fill {
  background: repeating-linear-gradient(90deg, transparent 0 2mm, var(--beige-200) 2mm 4mm);
  background-clip: padding-box;
  min-width: 35mm;
}

/* Step grid for injection */
ol.numbered {
  list-style: none;
  counter-reset: nx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm 5mm;
  font-size: 9.8pt;
  line-height: 1.35;
  padding: 0;
  margin: 0 0 3mm 0;
}
ol.numbered li {
  counter-increment: nx;
  padding: 1.5mm 0 1.5mm 8mm;
  position: relative;
  border-bottom: 1px solid var(--teal-100);
}
ol.numbered li::before {
  content: counter(nx, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1.5mm;
  font-family: "Fraunces", serif;
  font-weight: 600;
  color: var(--teal-700);
  font-size: 10.5pt;
}
ol.numbered li b { color: var(--teal-900); font-weight: 600; }

/* Two-col layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5mm; }

/* Body locations diagram */
.body-diagram {
  background: var(--beige-100);
  border-radius: 2mm;
  padding: 4mm 5mm;
  display: flex;
  gap: 5mm;
  align-items: center;
  margin: 2mm 0 3mm;
}
.body-diagram svg { width: 38mm; height: auto; flex-shrink: 0; }
.body-diagram .locs { font-size: 9pt; line-height: 1.4; }
.body-diagram .loc { display: flex; gap: 3mm; padding: 1mm 0; }
.body-diagram .loc-tag {
  background: var(--teal-700);
  color: #fff;
  font-family: "Fraunces", serif;
  font-weight: 600;
  width: 6mm; height: 6mm;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 9pt;
}
.body-diagram .loc b { color: var(--teal-900); font-weight: 600; }

/* Alert boxes */
.alert-box {
  border-radius: 2mm;
  padding: 3.5mm 5mm;
  margin: 2.5mm 0;
}
.alert-box.red { background: var(--warn-red-bg); border: 2px solid var(--warn-red-bd); }
.alert-box.orange { background: var(--warn-orange-bg); border: 2px solid var(--warn-orange-bd); }
.alert-box.green { background: var(--ok-green-bg); border: 2px solid var(--ok-green-bd); }
.alert-box h4 {
  font-family: "Fraunces", serif;
  font-size: 12pt;
  font-weight: 600;
  margin: 0 0 1mm 0;
  display: flex;
  align-items: center;
  gap: 3mm;
  flex-wrap: wrap;
}
.alert-box.red h4 { color: var(--warn-red-tx); }
.alert-box.orange h4 { color: var(--warn-orange-tx); }
.alert-box.green h4 { color: var(--ok-green-tx); }
.alert-box .tag {
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1mm 2.5mm;
  border-radius: 999px;
}
.alert-box.red .tag { background: var(--warn-red-bd); color: #fff; }
.alert-box.orange .tag { background: var(--warn-orange-bd); color: #fff; }
.alert-box.green .tag { background: var(--ok-green-bd); color: #fff; }
.alert-box .symp { font-size: 9.5pt; line-height: 1.4; margin-top: 1.5mm; }
.alert-box .symp b { font-weight: 600; }
.alert-box .symp .act { display: block; margin-top: 1.5mm; font-size: 9.5pt; }
.alert-box .symp .act::before { content: "→ "; color: inherit; font-weight: 600; }

/* FAQ list */
.faq-item {
  border-top: 1px solid var(--teal-100);
  padding: 4mm 0;
}
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-q {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 12pt;
  color: var(--teal-900);
  line-height: 1.25;
  margin-bottom: 2mm;
  display: flex;
  gap: 3mm;
}
.faq-q .num {
  color: var(--teal-700);
  font-size: 10pt;
  font-family: "Public Sans", monospace;
  flex-shrink: 0;
  padding-top: 1.5mm;
  letter-spacing: 0.04em;
}
.faq-a { font-size: 9.8pt; line-height: 1.5; color: var(--ink); padding-left: 10mm; }
.faq-a b { color: var(--teal-900); font-weight: 600; }

/* Cover */
.cover { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 50%, var(--beige-100) 50%, var(--beige-100) 100%); }
.cover-inner { display: flex; flex-direction: column; height: 100%; }
.cover-top { padding-top: 4mm; }
.cover-bottom { margin-top: auto; padding-bottom: 4mm; }
.cover-eyebrow {
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 9pt;
  font-weight: 600;
  margin-bottom: 8mm;
}
.cover-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8mm; height: 1.5px;
  background: var(--teal-700);
  vertical-align: middle;
  margin-right: 4mm;
}
.cover-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 44pt;
  line-height: 1.0;
  color: var(--teal-900);
  letter-spacing: -0.02em;
  margin: 0;
}
.cover-title em { font-style: italic; color: var(--teal-700); }
.cover-sub {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16pt;
  color: var(--teal-700);
  margin-top: 6mm;
  line-height: 1.3;
  max-width: 140mm;
}
.letter {
  background: #fff;
  border: 1.5px solid var(--teal-100);
  padding: 7mm 8mm;
  border-radius: 2mm;
  max-width: 140mm;
  margin-bottom: 6mm;
}
.letter .from {
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--teal-700);
  font-weight: 600;
  margin-bottom: 3mm;
}
.letter p {
  font-family: "Fraunces", serif;
  font-size: 11.5pt;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 2.5mm;
}
.letter .sign {
  margin-top: 4mm;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 11.5pt;
  color: var(--teal-900);
}
.toc {
  background: var(--teal-50);
  border: 1.5px solid var(--teal-100);
  padding: 6mm 8mm;
  border-radius: 2mm;
}
.toc-head {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 11pt;
  color: var(--teal-900);
  margin-bottom: 3mm;
  text-transform: none;
  letter-spacing: 0;
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 8mm;
  font-size: 9.5pt;
  line-height: 1.55;
  padding: 0;
  margin: 0;
}
.toc ol li {
  counter-increment: toc;
  display: flex;
  gap: 2mm;
  color: var(--ink);
  break-inside: avoid;
}
.toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "Public Sans", monospace;
  color: var(--teal-700);
  font-size: 8.5pt;
  padding-top: 0.5mm;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.cover-meta {
  margin-top: 4mm;
  font-size: 8.5pt;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}

/* Final page contact tiers */
.tier-card {
  display: grid;
  grid-template-columns: 18mm 1fr;
  gap: 5mm;
  padding: 5mm 6mm;
  border: 1.5px solid var(--teal-100);
  border-radius: 2mm;
  margin-bottom: 4mm;
  align-items: center;
}
.tier-card .level {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 28pt;
  line-height: 0.9;
  color: var(--teal-700);
  text-align: center;
}
.tier-card .level small {
  display: block;
  font-family: "Public Sans", system-ui;
  font-size: 7.5pt;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.15em;
  margin-top: 2mm;
  font-weight: 500;
}
.tier-card.urgent { border-color: var(--warn-red-bd); background: var(--warn-red-bg); }
.tier-card.urgent .level { color: var(--warn-red-bd); }
.tier-card.med { border-color: var(--warn-orange-bd); background: var(--warn-orange-bg); }
.tier-card.med .level { color: var(--warn-orange-bd); }
.tier-card h4 {
  font-family: "Fraunces", serif;
  font-size: 14pt;
  font-weight: 600;
  color: var(--teal-900);
  margin: 0 0 1.5mm 0;
}
.tier-card.urgent h4 { color: var(--warn-red-tx); }
.tier-card.med h4 { color: var(--warn-orange-tx); }
.tier-card .desc { font-size: 9.5pt; line-height: 1.45; }
.tier-card .channels {
  display: flex;
  gap: 4mm;
  margin-top: 2mm;
  font-size: 9pt;
  flex-wrap: wrap;
}
.tier-card .channels span { color: var(--ink-soft); }
.tier-card .channels b { color: var(--teal-900); font-weight: 600; }

.disclaimer {
  font-size: 8pt;
  line-height: 1.5;
  color: var(--muted);
  margin-top: auto;
  padding-top: 5mm;
  border-top: 1px solid var(--teal-100);
}
.disclaimer b { color: var(--teal-700); font-weight: 600; }
.disclaimer p { margin: 0 0 2mm 0; }

/* Side-effects table styling */
table.fx td.freq { font-size: 8.5pt; color: var(--ink-soft); }
table.fx td.freq b { font-weight: 600; }
.freq-pill {
  display: inline-block;
  padding: 0.5mm 2mm;
  border-radius: 999px;
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.freq-pill.high { background: var(--warn-orange-bg); color: var(--warn-orange-tx); }
.freq-pill.mid { background: var(--teal-50); color: var(--teal-900); }
.freq-pill.low { background: var(--beige-100); color: #5b4a25; }

/* Storage grid — compact 3-col for Cap 2 */
.storage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
  margin: 2mm 0 3mm;
}
.storage-item {
  background: var(--beige-100);
  border-left: 2px solid var(--teal-700);
  padding: 2.5mm 3.5mm;
  border-radius: 0 1mm 1mm 0;
}
.storage-lbl {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-700);
  font-weight: 600;
  margin-bottom: 1mm;
}
.storage-val { font-size: 9pt; line-height: 1.4; }
.storage-val b { color: var(--teal-900); font-weight: 600; }

/* Lists baseline */
.body-text ul { margin: 0 0 3mm 0; padding-left: 4mm; }
.body-text ul li { margin-bottom: 1mm; }

/* Reviewed-by box (bottom of article, after last chapter) */
.reviewed-by {
  background: var(--paper);
  width: 210mm;
  max-width: calc(100% - 24px);
  margin: 18px auto;
  padding: 8mm 14mm;
  box-shadow: 0 4px 24px rgba(15, 60, 70, 0.06);
  border-radius: 4px;
  border-top: 3px solid var(--teal-700);
}
.reviewed-by .rev-eyebrow {
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--teal-700);
  font-weight: 600;
  margin-bottom: 3mm;
}
.reviewed-by .rev-grid {
  display: grid;
  grid-template-columns: 20mm 1fr;
  gap: 6mm;
  align-items: center;
}
.reviewed-by .rev-avatar {
  width: 20mm;
  height: 20mm;
  border-radius: 50%;
  background: var(--teal-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 18pt;
}
.reviewed-by .rev-name {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 16pt;
  color: var(--teal-900);
  margin: 0 0 1mm 0;
  line-height: 1.15;
}
.reviewed-by .rev-role {
  font-size: 10pt;
  color: var(--ink-soft);
  margin: 0 0 2mm 0;
}
.reviewed-by .rev-meta {
  font-size: 9pt;
  color: var(--muted);
}
.reviewed-by .rev-meta b { color: var(--teal-900); font-weight: 600; }

/* Surse & referințe */
.references {
  background: var(--paper);
  width: 210mm;
  max-width: calc(100% - 24px);
  margin: 18px auto;
  padding: 9mm 14mm 10mm;
  box-shadow: 0 4px 24px rgba(15, 60, 70, 0.06);
  border-radius: 4px;
  border-left: 3px solid var(--teal-700);
}
.references .ref-eyebrow {
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--teal-700);
  font-weight: 600;
  margin-bottom: 2mm;
}
.references .ref-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 16pt;
  color: var(--teal-900);
  margin: 0 0 3mm 0;
  line-height: 1.15;
}
.references .ref-lede {
  font-family: "Fraunces", serif;
  font-size: 11pt;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 5mm 0;
  max-width: 160mm;
}
.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7mm;
  margin-bottom: 5mm;
}
.ref-col-title {
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-700);
  font-weight: 600;
  margin-bottom: 2.5mm;
  border-bottom: 1px solid var(--teal-100);
  padding-bottom: 1.5mm;
}
.ref-list {
  font-size: 9.5pt;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 5mm;
  margin: 0;
}
.ref-list li { margin-bottom: 2mm; }
.ref-list a { color: var(--teal-700); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.ref-list a:hover { border-bottom-color: var(--teal-700); }
.references .ref-note {
  font-size: 8.5pt;
  line-height: 1.5;
  color: var(--muted);
  margin: 4mm 0 0 0;
  padding-top: 3mm;
  border-top: 1px solid var(--teal-100);
}

/* Related articles */
.related {
  background: var(--paper);
  width: 210mm;
  max-width: calc(100% - 24px);
  margin: 18px auto;
  padding: 9mm 14mm 10mm;
  box-shadow: 0 4px 24px rgba(15, 60, 70, 0.06);
  border-radius: 4px;
}
.related h3 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 16pt;
  color: var(--teal-900);
  margin: 0 0 5mm 0;
  line-height: 1.15;
}
.related-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}
.related-card {
  display: block;
  background: var(--beige-100);
  border-left: 3px solid var(--teal-700);
  padding: 4mm 5mm;
  border-radius: 0 2mm 2mm 0;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s, transform 0.15s;
}
.related-card:hover {
  background: var(--teal-50);
  transform: translateX(2px);
}
.related-card .rc-tag {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--teal-700);
  font-weight: 600;
  margin-bottom: 1.5mm;
}
.related-card .rc-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 11.5pt;
  color: var(--teal-900);
  line-height: 1.25;
}

/* Mobile responsive */
@media (max-width: 768px) {
  body { background: var(--beige-100); }
  .page,
  .reviewed-by,
  .related,
  .references {
    width: auto;
    max-width: none;
    margin: 10px 4px;
    border-radius: 6px;
  }
  .page { padding: 5mm 3mm 5mm; }
  .reviewed-by { padding: 6mm 3mm; }
  .related { padding: 6mm 3mm 7mm; }
  .references { padding: 6mm 3mm 7mm; }
  .references .ref-title { font-size: 15pt; }
  .references .ref-lede { font-size: 12pt; }
  .ref-list { font-size: 11pt; line-height: 1.6; }

  .running { font-size: 9px; padding-bottom: 2mm; margin-bottom: 4mm; flex-wrap: wrap; gap: 2mm; }
  .running .brand-tag { font-size: 9px; letter-spacing: 0.12em; }
  .running .chapter { font-size: 11px; }
  .running .pg { font-size: 10px; }

  .chap-intro { grid-template-columns: 14mm 1fr; gap: 3mm; margin-bottom: 4mm; }
  .chap-num { font-size: 36pt; }
  h2.chap-title { font-size: clamp(20pt, 6.5vw, 24pt); }
  .chap-lede { font-size: clamp(11pt, 3.6vw, 12pt); }

  .cover-title { font-size: clamp(32pt, 10vw, 44pt); }
  .cover-sub { font-size: clamp(13pt, 4.2vw, 16pt); }
  .cover-eyebrow { margin-bottom: 6mm; }
  .letter { padding: 5mm 5mm; }
  .letter p { font-size: 12pt; }
  .toc { padding: 5mm 5mm; }
  .cover-meta { flex-direction: column; gap: 1mm; }

  .body-text { font-size: 11pt; line-height: 1.55; }
  h3.sub { font-size: 14pt; }
  h4.sub-sm { font-size: 11pt; }

  /* Collapse all multi-column grids to single column */
  .two-col,
  .three-col,
  .storage-grid,
  ol.numbered,
  .toc ol,
  .related-list,
  .ref-grid {
    grid-template-columns: 1fr !important;
    columns: 1 !important;
  }

  /* Body diagram stacks */
  .body-diagram { flex-direction: column; align-items: flex-start; gap: 3mm; }
  .body-diagram svg { width: 100px; align-self: center; }

  /* Tables: allow horizontal scroll for the wide side-effects/schedule tables */
  table.tbl { font-size: 11pt; display: block; overflow-x: auto; white-space: nowrap; }
  table.tbl thead th { font-size: 10pt; }
  table.tbl th, table.tbl td { padding: 2.5mm 3mm; }

  /* FAQ */
  .faq-q { font-size: 13pt; gap: 2mm; }
  .faq-q .num { font-size: 11pt; padding-top: 1mm; }
  .faq-a { padding-left: 0; font-size: 11pt; line-height: 1.55; }

  /* Alerts */
  .alert-box { padding: 4mm; }
  .alert-box h4 { font-size: 13pt; }
  .alert-box .symp { font-size: 11pt; line-height: 1.5; }
  .alert-box .symp .act { font-size: 11pt; }

  /* Tier cards */
  .tier-card { grid-template-columns: 14mm 1fr; gap: 4mm; padding: 4mm 4mm; }
  .tier-card .level { font-size: 24pt; }
  .tier-card h4 { font-size: 13pt; }
  .tier-card .desc { font-size: 11pt; }
  .tier-card .channels { font-size: 10.5pt; }

  /* Reviewed-by + related */
  .reviewed-by .rev-grid { grid-template-columns: 16mm 1fr; gap: 4mm; }
  .reviewed-by .rev-avatar { width: 16mm; height: 16mm; font-size: 15pt; }
  .reviewed-by .rev-name { font-size: 14pt; }
  .reviewed-by .rev-role { font-size: 11pt; }
  .reviewed-by .rev-meta { font-size: 10pt; }
  .related h3 { font-size: 15pt; }
  .related-card .rc-title { font-size: 13pt; }

  /* Card / body lists scale */
  .card { font-size: 11pt; line-height: 1.55; padding: 4mm 4mm; }
  .card h4 { font-size: 13pt; }
  .body-text ul { padding-left: 5mm; }
  .storage-val { font-size: 11pt; }
  .storage-lbl { font-size: 9pt; }
}

@media (max-width: 420px) {
  .page,
  .reviewed-by,
  .related,
  .references { margin: 8px 3px; }
  .page { padding: 5mm 3mm 4mm; }
  .reviewed-by { padding: 5mm 3mm; }
  .related { padding: 5mm 3mm 6mm; }
  .references { padding: 5mm 3mm 6mm; }
  .chap-intro { grid-template-columns: 12mm 1fr; }
  .chap-num { font-size: 30pt; }
  .tier-card { grid-template-columns: 12mm 1fr; }
  .tier-card .level { font-size: 20pt; }
}