/* ══════════════════════════════════════════════════════════════════════
   GUIDE TYPOGRAPHY & READING LAYOUT — the single source of truth.

   Loaded LAST so it settles the conflicts that had accumulated across
   inline-01.css, guide-reading.css and the per-component sheets. Before
   this, one rendered guide used NINE font sizes (11.5 / 12 / 14 / 14.5 /
   15 / 15.5 / 16.5 / 17 / 20), FOUR weights (400/600/700/800), and the
   same 16.5px text appeared with four different line heights.

   THE SCALE — five sizes, one job each:
     12px  metadata   kickers, section numbers, column headers, captions
     14px  controls   buttons, tabs, chips, tags
     16px  body       ALL clinical reading text
     20px  section    numbered section headings
     32px  title      the topic title

   THREE WEIGHTS ONLY: 400 regular · 600 semibold · 700 bold. No 800.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --t-meta: 12px;
  --t-ctrl: 14px;
  --t-body: 16px;
  --t-sec: 20px;
  --t-title: 32px;

  --lh-body: 1.65;      /* one body line height everywhere */
  --lh-tight: 1.3;      /* headings */

  --measure: 68ch;      /* comfortable prose line length */

  --gap-in: 18px;       /* space WITHIN a section */
  --gap-between: 52px;  /* space BETWEEN sections - always larger */
}

/* ── 1. TITLE ─────────────────────────────────────────────────────────
   Every topic title, same size and spacing, whichever renderer drew it. */
.tp-title,
.sys-header h1,
.main > h1 {
  font-family: var(--serif);
  font-size: var(--t-title) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
  margin: 0 0 6px !important;
}

/* ── 2. METADATA ─────────────────────────────────────────────────────── */
.sg-kicker,
.sg-glance-h,
.tp-cat,
.sg-table th,
.at-sched-reps,
.conf-hint {
  font-size: var(--t-meta) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.sg-kicker,
.sg-glance-h {
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── 3. CONTROLS ─────────────────────────────────────────────────────── */
.topic-tools button,
.print-sheet-btn,
.tm-row .conf-btn,
.back {
  font-size: var(--t-ctrl) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* ── 4. BODY — every piece of clinical reading text ──────────────────── */
.sg-wrap,
.sg-wrap p,
.sg-wrap li,
.sg-wrap .sg-lead,
.sg-wrap .sg-card,
.sg-wrap .sg-glance,
.sg-wrap .sg-table td,
.sg-wrap .sg-ladder-row > span,
.sg-wrap .sg-facts span,
.sbox-body li,
.sbox-body p {
  font-size: var(--t-body) !important;
  line-height: var(--lh-body) !important;
}

.sg-wrap p,
.sg-wrap li,
.sg-wrap .sg-lead,
.sg-wrap .sg-table td {
  font-weight: 400 !important;
}

/* emphasis inside body text is semibold, never a size change */
.sg-wrap b,
.sg-wrap strong,
.sbox-body b,
.sbox-body strong {
  font-size: inherit !important;
  font-weight: 600 !important;
}

/* ── 5. SECTION HEADINGS ─────────────────────────────────────────────
   Same treatment for every numbered section, aligned consistently. */
.sg-wrap .sg-sec-h {
  font-family: var(--serif);
  font-size: var(--t-sec) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 var(--gap-in) !important;
}

.sg-wrap .sg-sec-n {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: var(--t-meta) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

/* sub-headings stay on the body size, distinguished by weight */
.sg-wrap .sg-subh {
  font-size: var(--t-body) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
  margin: 26px 0 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   READING LAYOUT
   ══════════════════════════════════════════════════════════════════════ */

/* ── 11. prose keeps a comfortable measure … ─────────────────────────── */
.sg-wrap p,
.sg-wrap .sg-lead,
.sg-wrap .sg-ul,
.sg-wrap ul,
.sg-wrap ol {
  max-width: var(--measure);
}

/* ── 12. … but tables and labelled rows may use the full width ───────── */
.sg-wrap .sg-table,
.sg-wrap .sg-ladder,
.sg-wrap .sg-facts,
.sg-wrap .sg-drugs {
  max-width: none;
  width: 100%;
}

/* ── 13. ordinary prose is not a card ────────────────────────────────
   A bordered box around every paragraph made the page read as a stack of
   containers. Prose-only cards lose the border, background and padding;
   cards holding a table, ladder or fact list keep their frame. */
.sg-wrap .sg-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 var(--gap-in) !important;
}

.sg-wrap .sg-card:has(table),
.sg-wrap .sg-card:has(.sg-ladder),
.sg-wrap .sg-card:has(.sg-facts),
.sg-wrap .sg-card:has(.sg-drugs) {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 14px !important;
  padding: 6px 4px !important;
}

/* ── 14. paragraphs are separated by SPACE, not rules ────────────────── */
.sg-wrap p {
  margin: 0 0 1.15em !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}

.sg-wrap p:last-child { margin-bottom: 0 !important; }

.sg-wrap li + li { margin-top: .5em; }

/* ── 15. tint is reserved for summaries, warnings and worked examples ── */
.sg-wrap .sg-glance,
.sg-wrap .s-red,
.sg-wrap .sg-red,
.sg-wrap .s-pitfall,
.sg-wrap .sg-quote,
.sg-wrap .sg-worked {
  background: var(--acl);
}

.sg-wrap .sg-red,
.sg-wrap .s-red {
  background: var(--rdl);
  border-left: 3px solid var(--rd);
}

/* ── 16 & 17. a section has a clear start and end, and holds together ── */
.sg-wrap .sg-sec {
  padding: 0 0 var(--gap-between) !important;
  margin: 0 0 var(--gap-between) !important;
  border-bottom: 1px solid var(--bdr);
}

.sg-wrap .sg-sec:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.sg-wrap .sg-lead {
  margin: 0 0 var(--gap-in) !important;
  color: var(--tx2);
}

/* ── 19. the one-glance summary: distinct, but compact ───────────────── */
.sg-wrap .sg-glance {
  border: 0 !important;
  border-left: 3px solid var(--ac) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: none !important;
  padding: 18px 22px !important;
  margin: 0 0 var(--gap-between) !important;
  max-width: none;
}

.sg-wrap .sg-glance p { max-width: var(--measure); margin-bottom: 0 !important; }
.sg-wrap .sg-glance-h { color: var(--ac); margin-bottom: 8px !important; }

/* ── 20. no decorative shadows anywhere in reading content ───────────── */
.sg-wrap,
.sg-wrap * {
  box-shadow: none !important;
}

/* tables: quiet frame, readable cells, labels as metadata */
.sg-wrap .sg-table {
  border: 1px solid var(--bdr) !important;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 var(--gap-in) !important;
}

.sg-wrap .sg-table th {
  background: var(--bg3) !important;
  color: var(--tx3) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px !important;
}

.sg-wrap .sg-table td {
  padding: 12px 16px !important;
  vertical-align: top;
}

@media (max-width: 720px) {
  :root {
    --t-title: 26px;
    --gap-between: 38px;
  }
  .sg-wrap .sg-table { font-size: 15px !important; }
  .sg-wrap .sg-table th,
  .sg-wrap .sg-table td { padding: 10px 12px !important; }
}

/* ── Reading bookmark bar ────────────────────────────────────────────── */
.rm-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 11px 14px;
  background: var(--acl);
  border-left: 3px solid var(--ac);
  border-radius: 0 11px 11px 0;
}

.rm-ico { display: inline-flex; color: var(--ac); flex: 0 0 auto; }

.rm-txt {
  flex: 1 1 auto;
  min-width: 160px;
  font-size: var(--t-ctrl);
  font-weight: 400;
  line-height: 1.45;
  color: var(--tx2);
}

.rm-txt strong { font-weight: 600; color: var(--tx); }

.rm-go {
  flex: 0 0 auto;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--ac);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-ctrl);
  font-weight: 600;
  cursor: pointer;
}

.rm-go:hover { background: var(--ach); }

.rm-x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--tx3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.rm-x:hover { color: var(--tx); }

/* ── strays the audit caught: the drugs block and the ladder key carried
      their own sizes (15.5 / 14.5) and an 800 weight ─────────────────── */
.sg-wrap .sg-drug-name,
.sg-wrap .sg-mnem {
  font-size: var(--t-body) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
}

.sg-wrap .sg-drug-body,
.sg-wrap .sg-ladder-row span:not(.sg-mnem) {
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

/* inline emphasis must never introduce its own leading */
.sg-wrap b,
.sg-wrap strong,
.sg-wrap i,
.sg-wrap em {
  line-height: inherit !important;
}

/* the ladder ROW itself carried 14.5px; the span rule alone did not reach it */
.sg-wrap .sg-ladder-row {
  font-size: var(--t-body) !important;
  line-height: var(--lh-body) !important;
}

/* sub/sup are relative by nature — tie them to the body size rather than
   leaving them on the browser default, so they scale with the scale */
.sg-wrap sub,
.sg-wrap sup {
  font-size: .72em !important;
  line-height: 0;
}

/* ── Quiz Mode: routes in (Everything / Weak / Random / a study list) ──── */
.qz-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.qz-route {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border: 1.5px solid var(--bdr);
  border-radius: 13px;
  background: var(--bg2);
  color: var(--tx2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.qz-route:hover:not(:disabled) { border-color: var(--ac); }
.qz-route.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.qz-route:disabled { opacity: .45; cursor: not-allowed; }
.qz-route-t { font-size: var(--t-ctrl); font-weight: 700; }
.qz-route-s { font-size: var(--t-meta); opacity: .8; }

@media (max-width: 640px) {
  .qz-routes { grid-template-columns: 1fr; }
}

/* ── Critical-fail marker ────────────────────────────────────────────
   Item-level, inside a `red` block: "this one thing alone fails the
   station". The guides had section-level `crit` but no way to say it
   about a single item.                                                */
.sg-wrap .sg-critfail {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rd);
  color: #fff;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: baseline;
  white-space: nowrap;
}

/* Reviewed guides: readable comparisons and semantic labelled explanations. */
.sg-wrap .sg-table-scroll {
  max-width: 100%; overflow-x: auto; margin-bottom: var(--gap-in);
  overscroll-behavior-inline: contain; border-radius: 12px;
}
.sg-wrap .sg-table-scroll:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
.sg-wrap .sg-table-scroll .sg-table { min-width: 480px; margin-bottom: 0 !important; }
.sg-wrap .sg-fact-list { margin: 0 0 var(--gap-in); }
.sg-wrap .sg-fact-row {
  display: grid; grid-template-columns: minmax(140px, 25%) minmax(0, 1fr);
  gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--bdr);
}
.sg-wrap .sg-fact-row:first-child { padding-top: 0; }
.sg-wrap .sg-fact-row dt { color: var(--ach); font-weight: 600; }
.sg-wrap .sg-fact-row dd { margin: 0; min-width: 0; }
.sg-wrap .sg-sec { padding-bottom: 26px !important; margin-bottom: 28px !important; }
.sg-wrap .sg-redbox { padding: 18px 22px; border-left: 3px solid var(--rd); }
@media (max-width: 700px) {
  .sg-wrap .sg-fact-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media print {
  .sg-wrap .sg-table-scroll { overflow: visible; }
  .sg-wrap .sg-table-scroll .sg-table { min-width: 0; }
  .sg-wrap .sg-sec-h { break-after: avoid; }
  .sg-wrap .sg-table tr, .sg-wrap .sg-fact-row { break-inside: avoid; }
}