/* ── PAGE HEADER (tree / checklist) ─────────────────────────────────────────── */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.page-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.page-header h2 { margin-bottom: 4px; }
.page-header .source-cite { margin-top: 2px; }

/* ── PAGE-KIND eyebrow (v2.35) — differentiates page purpose at a glance ──────
   Presentation = accented "reasoning hub"; Condition = quiet "reference". */
.page-kind {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 6px;
}
.page-kind--presentation { color: var(--primary); }
.page-kind--condition    { color: var(--text-muted); font-weight: 600; letter-spacing: 0.07em; }
/* Presentation title reads as the primary reasoning hub anchor.
   Two-class specificity (0,2,1) intentionally beats the mobile .page-header h2 override. */
.page-header.pres-hub-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
/* v2.49 — region badge sits inline beside the title (one row instead of two) */
.pres-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pres-title-row h2 { margin-bottom: 0; }
.pres-title-row .page-header-meta { margin-bottom: 0; }
@media (max-width: 767px) { .page-header.pres-hub-header h2 { font-size: 20px; } }

.source-cite { font-size: 12px; color: var(--text-muted); font-style: italic; line-height: 1.6; margin-top: 6px; } /* italic kept: citation convention */

/* ── PATHWAY SWITCHER ───────────────────────────────────────────────────────── */
.pathway-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.switcher-link {
  color: var(--primary);
  text-decoration: none;
  max-width: 42%;
  min-height: 44px;          /* v2.45 — comfortable tap target */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}
.switcher-prev { align-items: flex-start; text-align: left; }
.switcher-next { align-items: flex-end; text-align: right; }
/* v2.39a — explicit direction label so prev/next pathway nav is obvious */
.switcher-dir {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.switcher-title {
  font-size: 12px; font-weight: 600; color: var(--primary);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher-link:hover .switcher-title { text-decoration: underline; }
.switcher-disabled { max-width: 42%; }
.switcher-pos { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
/* v2.48 — counter doubles as the "back to all presentations" affordance */
.switcher-pos--link {
  text-decoration: none; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 10px; border-radius: 6px;
}
.switcher-pos--link:hover { color: var(--primary); text-decoration: underline; }

/* ── LEGEND ─────────────────────────────────────────────────────────────────── */
.legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 0;
  font-size: 12px; color: var(--text-secondary);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch {
  width: 13px; height: 13px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.18); flex-shrink: 0;
}

/* ── VIEW TOGGLE ────────────────────────────────────────────────────────────── */
.view-toggle {
  display: inline-block;
  margin: 12px 0 8px;
  padding: 7px 18px;
  background: var(--glass-bg);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.view-toggle:hover { background: var(--primary-bg); box-shadow: var(--shadow-md), var(--glow-primary); transform: translateY(-1px); }

/* ── DIAGRAM CONTAINER ──────────────────────────────────────────────────────── */
.diagram-container {
  overflow-x: auto;
  margin: 12px 0;
  background: var(--surface);          /* v2.54 — flat surface, glass removed */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.diagram-container svg { max-width: 100%; display: block; margin: 0 auto; }

.diagram-loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.diagram-fallback { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.diagram-fallback summary {
  cursor: pointer;
  color: var(--primary);
  padding: 4px 0;
}
.diagram-fallback ol { margin: 8px 0 0 20px; line-height: 1.8; }

/* ── CLICK HINT ─────────────────────────────────────────────────────────────── */
.click-hint { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* ── NOTES VIEW ─────────────────────────────────────────────────────────────── */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 32px;
}
.note-card {
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.note-card-decision { border-left-color: #1565c0; }
.note-card-action   { border-left-color: #4a148c; background: #fdfaff; }
.note-card-caution  { border-left-color: #f57f17; background: #fffdf8; }
.note-card-red_flag { border-left-color: var(--tier1-color); background: #fff9f9; }
.note-card-escalate { border-left-color: #880e4f; background: #fff9fb; }
.note-card-start,
.note-card-end      { border-left-color: #2e7d32; background: #f9fdf9; }

.note-label  { font-weight: 700; font-size: 14px; margin: 8px 0 8px; line-height: 1.4; color: var(--text); }
.note-detail { font-size: 13.5px; line-height: 1.75; color: var(--text-secondary); margin: 0; }
.note-redflag-warn { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--tier1-color); }

.note-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.note-step-label { font-weight: 500; color: var(--text-secondary); }

/* ── DETAIL PANEL ───────────────────────────────────────────────────────────── */
#detail-panel {
  position: fixed;
  top: var(--nav-height, 48px);
  right: -340px;
  width: 320px;
  height: calc(100vh - var(--nav-height, 48px));
  height: calc(100dvh - var(--nav-height, 48px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-left: 1px solid rgba(220, 228, 240, 0.8);
  padding: 52px 20px 20px;
  overflow-y: auto;
  transition: right var(--transition);
  z-index: 500;
  box-shadow: -6px 0 28px rgba(15, 30, 60, 0.11);
}
#detail-panel.open { right: 0; }

#detail-close {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: 1px solid var(--border);
  font-size: 16px; cursor: pointer; color: var(--text-muted);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: background 0.12s;
}
#detail-close:hover { background: var(--bg); }

#detail-panel h3 { font-size: 15px; font-weight: 700; margin: 10px 0 10px; line-height: 1.4; color: var(--text); }
.detail-text { font-size: 14px; line-height: 1.75; color: var(--text-secondary); }

/* ── NODE TYPE PILL ─────────────────────────────────────────────────────────── */
.node-type-pill {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 8px;
}
.pill-start,
.pill-end      { background: #6b7280; color: #fff; border: none; }
.pill-decision { background: #d97706; color: #fff; border: none; }
.pill-action   { background: #2563eb; color: #fff; border: none; }
.pill-caution  { background: #ea580c; color: #fff; border: none; }
.pill-red_flag { background: var(--tier1-color); color: #fff; border: none; }
.pill-escalate { background: #dc2626; color: #fff; border: none; }

/* ── TIER BADGES ────────────────────────────────────────────────────────────── */
.tier-badge {
  display: inline-block; padding: 6px 14px; border-radius: 6px;
  font-weight: 700; font-size: 13px; margin-top: 12px;
  line-height: 1.4;
}
.tier-1 { background: #b71c1c; color: #fff; }
.tier-2 { background: #e65100; color: #fff; }
.tier-3 { background: var(--primary); color: #fff; }

/* ── CHECKLIST ──────────────────────────────────────────────────────────────── */
.checklist-instruction {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 10px;
}
.checklist-form { margin: 0 0 8px; }
.checklist-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 16px;
  background: var(--surface);           /* v2.54 — flat surface, glass removed */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.checklist-item:hover  { border-color: #b3c8e8; box-shadow: var(--shadow-md); }
.checklist-item.checked {
  background: var(--draft-bg);          /* v2.54 — solid caution tint, glass removed */
  border-color: var(--draft-border);
}
.checklist-item input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 3px;
  flex-shrink: 0; cursor: pointer; accent-color: var(--primary);
}
.checklist-item label { cursor: pointer; line-height: 1.65; font-size: 14px; color: var(--text); }
.checklist-item.checked label { font-weight: 600; color: #4a3000; }

/* ── ESCALATION BLOCK ───────────────────────────────────────────────────────── */
#escalation-block {
  display: none;
  background: var(--tier1-bg);
  border: 1.5px solid var(--tier1-color);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 20px;
}
#escalation-block.visible { display: block; }
#escalation-block .escalation-title {
  font-weight: 700; font-size: 15px; margin: 10px 0 6px; color: var(--tier1-color);
}
#escalation-block .escalation-instruction { font-size: 14px; line-height: 1.6; color: var(--text); }

/* ── DECISION TREE — CONNECTED PRESENTATIONS STRIP ───────────────────────── */
.tree-linked-pres {
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.tree-linked-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--primary); margin-bottom: 10px;
}
/* v2.33a — applies-to block is now a collapsible <details>, collapsed by default,
   so the first pathway step is visible sooner on mobile. */
summary.tree-linked-heading {
  cursor: pointer; list-style: none; margin-bottom: 0;
  display: flex; align-items: center; gap: 6px;
}
summary.tree-linked-heading::-webkit-details-marker { display: none; }
summary.tree-linked-heading::before { content: '▶'; font-size: 9px; opacity: 0.6; }
details.tree-linked-pres[open] > summary.tree-linked-heading { margin-bottom: 10px; }
details.tree-linked-pres[open] > summary.tree-linked-heading::before { content: '▼'; }
.tree-linked-chips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.tree-linked-group { display: inline-flex; align-items: center; gap: 4px; }
.tree-linked-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.tree-linked-chip--pres {
  background: var(--bg); border: 1.5px solid var(--border); color: var(--text-secondary);
}
.tree-linked-chip--pres:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.tree-linked-chip--blueprint {
  background: var(--primary-bg); border: 1.5px solid var(--primary); color: var(--primary);
  padding: 4px 9px; font-size: 13px;
}
.tree-linked-chip--blueprint:hover { background: var(--primary); color: #fff; }
.tree-linked-overflow { margin-top: 8px; }
.tree-linked-overflow > summary {
  font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 0;
}
.tree-linked-overflow-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── DECISION TREE — PATHWAY VIEW ────────────────────────────────────────── */
/* Static protocol reference — replaces Walk Mode. Vertically stacked step    */
/* cards, each semantically coloured by node type and showing branch logic.   */

.pw-pathway {
  display: flex; flex-direction: column; gap: 2px;
  max-width: 680px; margin: 0 auto;
}

/* Step card */
.pw-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 12px;
  transition: box-shadow 0.12s ease;
}
.pw-step:hover { box-shadow: var(--shadow-sm); }

/* Left accent per type — v2.20 semantic colour system */
.pw-step--start, .pw-step--end   { border-left-color: #6b7280; background: var(--surface); }
.pw-step--decision                { border-left-color: #d97706; background: #fffbeb; }
.pw-step--action                  { border-left-color: #2563eb; background: #eff6ff; }
.pw-step--caution                 { border-left-color: #ea580c; background: #fff7ed; border-left-width: 5px; }
.pw-step--red_flag                { border-left-color: #b71c1c; background: #fff1f2; border-left-width: 5px; }
.pw-step--escalate                { border-left-color: #dc2626; background: #fff1f2; border-left-width: 5px; }

/* Step header: type pill + step number */
.pw-step-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
}
.pw-step-num {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: 1px 7px; flex-shrink: 0;
}

/* Step label */
.pw-step-label {
  font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.45; margin-bottom: 6px;
}
.pw-step--caution .pw-step-label,
.pw-step--red_flag .pw-step-label,
.pw-step--escalate .pw-step-label { font-size: 15.5px; }

/* Urgency banners */
.pw-urgent {
  margin-top: 8px; padding: 9px 13px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
  line-height: 1.4;
}
.pw-urgent--rf {
  background: #fff0f0; color: #b71c1c; border-left: 4px solid #b71c1c;
}
.pw-tier { margin-top: 8px; }

/* Detail collapsible */
.pw-detail-wrap { margin-top: 8px; }
.pw-detail-toggle {
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  cursor: pointer; list-style: none; letter-spacing: 0.02em;
}
.pw-detail-toggle::-webkit-details-marker { display: none; }
.pw-detail-toggle::before { content: '+ '; }
details[open] .pw-detail-toggle::before { content: '− '; }
.pw-detail {
  font-size: 13px; color: var(--text-secondary); line-height: 1.7;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
}

/* Condition link button */
.pw-cond-link { margin-top: 10px; }
.pw-cond-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px;
  background: #f5f3ff; border: 1.5px solid #c4b5fd; color: #4c1d95;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.pw-cond-btn:hover { background: #ede9fe; border-color: #7c3aed; }

/* Branch logic */
.pw-branch-single {
  margin-top: 10px; font-size: 12px; color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.03em;
}
.pw-branches { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.pw-branch {
  display: block;
  padding: 5px 10px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.4;
}
.pw-branch--yes  { background: #f0fdf4; }
.pw-branch--no   { background: #fff7ed; }
.pw-branch--other{ background: var(--bg); }
/* Label row: Yes/No pill + arrow on one line */
.pw-branch-header { display: flex; align-items: center; gap: 7px; }
.pw-branch-lbl   { font-weight: 800; }
.pw-branch--yes  .pw-branch-lbl { color: #16a34a; }
.pw-branch--no   .pw-branch-lbl { color: #ea580c; }
.pw-branch--other .pw-branch-lbl { color: var(--text-secondary); }
.pw-branch-arrow { color: var(--text-muted); }
/* Destination text — block element: inherits full parent width, never constrained */
.pw-branch-dest  {
  display: block;
  color: var(--text-secondary); font-style: italic;
  white-space: normal; overflow-wrap: break-word;
  margin-top: 2px; padding-left: 4px;
}

/* ── STEP URGENCY FLAG (escalate / caution header badge) ─────────────────── */
.step-urgency-flag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: auto;
  flex-shrink: 0;
}
.step-urgency-flag--escalate { background: #fee2e2; color: #991b1b; }
.step-urgency-flag--caution  { background: #fef3c7; color: #92400e; }

/* ── REASONING PATHWAY STRIP (Illness Script page) ────────────────────────── */

.rp-section { margin: 16px 0 20px; }

.rp-block {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 8px;
}
.rp-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; list-style: none;
  background: var(--primary-bg);
  font-size: 13px; font-weight: 700; color: var(--primary);
}
.rp-summary::-webkit-details-marker { display: none; }
.rp-summary-title { flex: 1; }
.rp-summary-arrow { font-size: 16px; color: var(--primary); opacity: 0.6; transition: transform 0.16s; }
details[open] .rp-summary-arrow { transform: rotate(90deg); }

.rp-steps {
  padding: 14px 16px 6px;
  display: flex; flex-direction: column; gap: 0;
}

/* Edge connector between steps */
.rp-edge {
  padding: 2px 0 2px 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}
.rp-edge--yes       { color: #16a34a; }
.rp-edge--no        { color: #ea580c; }
.rp-edge--continue  { color: var(--text-muted); }
.rp-edge--other     { color: var(--text-secondary); }

/* Each reasoning step */
.rp-step {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.rp-step--decision  { border-left-color: #1565c0; background: #f8fbff; }
.rp-step--action    { border-left-color: #4a148c; background: #fdfaff; }
.rp-step--caution   { border-left-color: #f57f17; background: #fffdf8; }
.rp-step--start     { border-left-color: #2e7d32; background: #f9fdf9; }

/* Highlighted target step — the diagnosis node */
.rp-step--target {
  border-left-color: #7c3aed !important;
  background: #f5f3ff !important;
  box-shadow: 0 0 0 1.5px #c4b5fd;
}

.rp-pill { font-size: 9.5px !important; padding: 2px 6px !important; flex-shrink: 0; }
.rp-label {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
}

.rp-full-link {
  display: block; padding: 10px 16px;
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-decoration: none; border-top: 1px solid var(--border);
  background: var(--primary-bg);
}
.rp-full-link:hover { text-decoration: underline; }

/* ── DETAIL PANEL — CROSS-LINKS ───────────────────────────────────────────── */
/* v2.54 — contextual actions: a clearly-grouped action zone, not stray chips */
.panel-cross-links {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.panel-cross-links-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-secondary); margin-bottom: var(--sp-3);
}
.panel-cross-links-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.panel-cross-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px; min-height: 38px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none; transition: var(--transition);
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
}
.panel-cross-link:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.panel-cross-link--script { border-color: #c4b5fd; color: #4c1d95; background: #f5f3ff; }
.panel-cross-link--script:hover { border-color: #7c3aed; background: #ede9fe; }
.panel-cross-link--blueprint { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.panel-cross-link--blueprint:hover { background: var(--primary); color: #fff; }

/* ── TREE STEP PROGRESS ───────────────────────────────────────────────────── */
.tree-progress {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.step-counter {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  float: right;
}

/* ── DECISION TREE: compressed header ───────────────────────────────────── */
.tree-hero { margin-bottom: 14px; }
.tree-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.tree-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.tree-step-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
}

/* Collapsed meta blocks: source + condition links */
.tree-meta-block {
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.tree-meta-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 12px;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}
.tree-meta-summary::-webkit-details-marker { display: none; }
.tree-meta-summary::before { content: '▶ '; font-size: 9px; opacity: 0.5; }
details[open] .tree-meta-summary::before { content: '▼ '; }
.tree-meta-links { padding: 8px 12px 12px; }
.tree-meta-cite { padding: 8px 12px 12px; margin: 0; }

/* Linked presentations strip — tighter */
.tree-linked-pres { margin-bottom: 10px; }
.tree-linked-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ── DECISION TREE: step cards ───────────────────────────────────────────── */
.pw-pathway { display: flex; flex-direction: column; gap: 10px; }
.pw-step {
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  border-left-width: 4px;
}

/* ── DECISION TREE: branch chips ─────────────────────────────────────────── */
.pw-branches { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.pw-branch {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.pw-branch--yes  { background: #f0fdf4; border: 1px solid #bbf7d0; }
.pw-branch--no   { background: #fff7ed; border: 1px solid #fed7aa; }
.pw-branch--other{ background: var(--bg); border: 1px solid var(--border); }
.pw-branch-lbl {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 4px;
}
.pw-branch--yes  .pw-branch-lbl { color: #15803d; background: #dcfce7; }
.pw-branch--no   .pw-branch-lbl { color: #c2410c; background: #ffedd5; }
.pw-branch--other .pw-branch-lbl { color: var(--text-secondary); background: var(--border); }
.pw-branch-dest {
  font-size: 13px;
  color: var(--text);
  font-style: normal;
  white-space: normal;
  overflow-wrap: break-word;
  flex: 1;
}

/* ── DECISION TREE: mobile branch stacking ───────────────────────────────── */
@media (max-width: 767px) {
  .pw-branch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .pw-branch-lbl {
    width: fit-content;
    max-width: 100%;
    flex-shrink: 0;
  }
  .pw-branch-dest {
    display: block;
    width: 100%;
    flex: none;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
  }
}

/* ── Tree: title-first header ──────────────────────────────────────────── */

/* Title + badge block: tighter bottom margin — step list visible sooner */
.tree-hero { margin-bottom: 6px; }

/* Pathway switcher: compact + visually secondary (appears after title now) */
.pathway-switcher {
  padding: 5px 10px;
  margin-bottom: 8px;
}
.switcher-link {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  min-height: 44px;
}
.switcher-link:hover { color: var(--primary); }
.switcher-pos { font-size: 10.5px; }

/* Linked presentations heading: smaller label */
.tree-linked-heading {
  font-size: 10px;
  margin-bottom: 5px;
}

/* Reduce gap between collapsed meta blocks and the step list */
.tree-meta-block { margin-bottom: 6px; }
.tree-linked-pres { margin-bottom: 6px; }

/* Remove top gap on step list — page padding already provides breathing room */
.pw-pathway { margin-top: 2px; }