/* ── MOBILE ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide desktop top-nav — bottom nav takes over */
  #top-nav { display: none; }

  /* ── Kill the top-nav offset — nav is hidden, reclaim every pixel ── */
  #app {
    padding-top: 0;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* Page containers: minimal top padding, generous bottom for bottom nav */
  .home-page, .conditions-page {
    padding: 10px 12px calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .page, .page-wide {
    padding: 10px 12px calc(74px + env(safe-area-inset-bottom, 0px));
  }

  /* Collapse page-level header chrome */
  .conditions-page-header { margin-bottom: 8px; }
  .page-title { font-size: 17px; margin: 0 0 1px; }
  .page-subtitle { font-size: 12px; margin-bottom: 6px; }

  .pres-page-header { margin-bottom: 6px; }

  /* Back link — min 44px touch target (Apple HIG), zero wasted visual space */
  .back-link {
    margin-bottom: 2px;
    min-height: 44px;
    font-size: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
  }

  /* Breadcrumb hidden on mobile — back-link gives the same navigation */
  .breadcrumb { display: none; }

  /* Page header — tight */
  .page-header { margin-bottom: 8px; padding-bottom: 8px; }
  .page-header h2 { font-size: 16px; margin-bottom: 2px; }
  .page-header-meta { margin-bottom: 4px; gap: 6px; }

  /* Source citation hidden on mobile — saves ~18px per page */
  .source-cite { display: none; }

  .zone-heading, .section-heading { font-size: 13px; margin-bottom: 8px; padding-bottom: 6px; }

  /* First child in any page — kill any orphaned top margin */
  .home-page > *:first-child,
  .conditions-page > *:first-child,
  .page > *:first-child,
  .page-wide > *:first-child { margin-top: 0; }

  /* Bottom nav */
  #bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(54px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--border);
    z-index: 900;
    justify-content: space-around;
    align-items: stretch;
  }
  .bottom-nav-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; gap: 2px;
    min-width: 0; /* v3.1a — allow flex items to shrink so 6 tabs fit at 375px */
    text-decoration: none; color: var(--text-muted);
    font-size: 9px; font-weight: 500;
    padding: 5px 1px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    border-top: 2px solid transparent;
  }
  .bottom-nav-item {
    min-height: 44px; /* Apple HIG touch target */
  }
  .bottom-nav-item.active { color: var(--primary); border-top-color: var(--primary); }
  .bottom-nav-icon { width: 22px; height: 22px; display: block; }
  .bnav-icon { width: 22px; height: 22px; display: block; }
  .bottom-nav-label { line-height: 1; letter-spacing: 0.01em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Detail panel — bottom sheet */
  #detail-panel {
    top: auto; bottom: -65vh; right: 0;
    width: 100%; height: 65vh;
    border-left: none; border-top: 1px solid var(--border);
    transition: bottom 0.25s ease;
    border-radius: 14px 14px 0 0;
  }
  #detail-panel.open { bottom: 0; }
  #app.panel-open { margin-right: 0; }

  /* Homepage tiles — single column on very small screens */
  .home-action-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-action-tile { padding: 14px 12px 12px; min-height: 90px; }
  .home-action-tile--primary { grid-column: span 2; min-height: 76px; }
  .home-action-tile-icon { font-size: 22px; }
  .home-action-tile-title { font-size: 13px; }
  .home-action-tile--primary .home-action-tile-title { font-size: 15px; }

  /* Region chips — wrap naturally, no scroll */
  .home-region-chips { gap: 6px; }
  .home-region-chip { font-size: 12px; padding: 6px 11px; }

  /* Grids go single-column */
  .card-grid, .cond-group-grid { grid-template-columns: 1fr; }

  /* Meds layout stacks */
  .med-layout { flex-direction: column; height: auto; }
  .med-sidebar {
    width: 100%; min-width: 0; max-height: 220px;
    border-right: none; border-bottom: 1px solid var(--border);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
  .med-detail { padding: 12px 12px 18px; }
  .med-section { margin: 7px 0; padding: 10px 12px; }

  /* Presentations — full-screen drill-down on mobile */
  .pres-page-header { margin-bottom: 6px; }
  .pres-search-wrap--top { margin-bottom: 8px; position: sticky; top: 0; z-index: 20; background: var(--bg); padding-bottom: 4px; }
  .pres-search-input--top { font-size: 14px; padding: 9px 12px; }
  .pres-layout {
    flex-direction: column; height: auto;
    border: none; border-radius: 0; box-shadow: none;
    background: transparent; overflow: visible;
  }
  .pres-sidebar {
    width: 100%; min-width: 0; border-right: none;
    overflow-y: visible; background: transparent;
    max-height: none;
  }
  .pres-item-list { overflow-y: visible; }
  .pres-item { padding: 11px 14px; border-left-width: 4px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 2px; background: var(--surface); box-shadow: var(--shadow-sm); }

  /* Presentations — bottom sheet retired (v2.44: taps open the full-page detail) */
  .pres-detail {
    display: none;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 80vh;
    overflow: hidden;               /* body child handles scrolling */
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    transform: translateY(110%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 800;
    pointer-events: none;
  }
  .pres-layout.pres-sheet-open .pres-detail {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Sticky sheet header — handle + close button never scroll away */
  .pres-sheet-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
  }

  /* Scrollable body — all presentation content lives here */
  .pres-sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Sheet drag handle — inside sticky header — compact on mobile */
  .pres-sheet-handle {
    width: 32px; height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 5px auto 0;
  }
  /* Sheet top bar with close button */
  .pres-sheet-topbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 2px;
  }
  .pres-sheet-close {
    background: none; border: none;
    font-size: 18px; cursor: pointer;
    color: var(--text-muted);
    /* Keep 44px touch target; reduce to min needed */
    min-width: 44px; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
  }
  /* Overlay behind the sheet */
  .pres-sheet-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 799;
  }
  .pres-sheet-overlay--visible { display: block; }
  /* Back button — hidden on mobile: X button in sticky header is the sheet-close affordance.
     Hiding saves ~50px before the first clinical content block.
     Desktop keeps display:none default (shown only via pres-view-detail JS class). */
  .pres-detail-back { display: none; }
  .pres-empty-state { min-height: 180px; }

  /* Screen-first strip: flush top, no negative pull into header border */
  .kq-tier1-strip { margin: 0 0 10px; padding: 8px 12px; }

  /* Badges wrap on small screens */
  .kq-badge { max-width: 100px; }
  .kq-summary { flex-wrap: wrap; }
  .kq-chevron { margin-left: auto; }

  /* Sticky search bar on conditions page */
  .condition-search-wrap {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg); padding: 8px 0 6px;
  }
  .condition-search-input { max-width: 100%; }

  /* Collapsible region groups */
  .cond-group-header {
    cursor: pointer; user-select: none; -webkit-user-select: none;
  }
  .cond-group-header::after {
    content: '▾'; font-size: 11px; opacity: 0.5;
    margin-left: auto; transition: transform 0.2s ease; display: inline-block;
  }
  .cond-group--collapsed .cond-group-header::after { transform: rotate(-90deg); }
  .cond-group--collapsed .cond-group-grid,
  .cond-group--collapsed .cond-ledger,
  .cond-group--collapsed .cond-subgroup { display: none; }

  /* Back to top — above bottom nav */
  #back-to-top {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    right: 12px; width: 36px; height: 36px; font-size: 15px;
  }

  /* Walk mode — full width, slightly smaller typography */
  #walk-view { max-width: 100%; }
  .walk-label { font-size: 17px; }
  .walk-detail { font-size: 13.5px; }
  .walk-choice { padding: 13px 16px; font-size: 14.5px; }
  .view-mode-btn { font-size: 12.5px; padding: 9px 6px; }
  .walk-resource-link { font-size: 12px; padding: 4px 10px; }

  /* Tree linked strip */
  .tree-linked-chip { font-size: 11.5px; padding: 3px 9px; }
}

@media (max-width: 380px) {
  .home-action-grid { grid-template-columns: 1fr; }
  .home-action-tile--primary { grid-column: span 1; }
  .home-action-tile--scripts { grid-column: span 1; }
}

/* Scripts grid responsive — rows stay single-column at all sizes */
@media (max-width: 900px) {
  .scripts-hero { padding: 10px 12px; }
  .scripts-card { padding: 8px 12px; }
  .scripts-card-name { font-size: 13px; }
}

/* ── iOS / iPHONE SPECIFIC ───────────────────────────────────────────────────
   Targets only WebKit on touch devices (Safari on iPhone/iPad).
   -webkit-touch-callout is non-standard and only exists in iOS WebKit.          */
@supports (-webkit-touch-callout: none) {

  /* ── Input auto-zoom prevention ──────────────────────────────────────────
     iOS Safari zooms the viewport when an input with font-size < 16px is
     focused. 16px is the exact threshold — no zoom, no layout changes.    */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ── Overscroll / rubber-band control ────────────────────────────────────
     Prevent the whole page bouncing when scrollable children reach their end */
  body { overscroll-behavior-y: none; }
  /* Re-enable momentum scroll on explicit scroll containers */
  .pres-item-list,
  .med-list,
  .scripts-jump-bar,
  #detail-content,
  .cond-group-grid {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Checklist items — 44px tap row height ───────────────────────────── */
  .checklist-item { min-height: 44px; }

  /* ── Bottom nav safe-area already handled via env() in main mobile block  */
}

/* ── MOBILE VIEWPORT ≤ 767px ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Performance: reduce compositing cost of bottom nav blur ── */
  #bottom-nav {
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
  }

  /* ── HOME: region section → 2-col card grid with descriptions ─────────── */
  .home-region-section { margin-bottom: 20px; }
  .home-region-label { font-size: 10px; margin-bottom: 8px; }

  .home-region-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .home-region-chip {
    /* Override desktop pill → mobile card */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 76px;
    padding: 11px 13px 10px;
    border-radius: var(--radius-sm); /* less pill-y */
    border-width: 1.5px;
  }
  .home-region-chip-icon {
    font-size: 18px;
    margin-bottom: 5px;
    display: block;
  }
  .home-region-chip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
  }
  .home-region-chip-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
  }
  /* Two-line description clamp */
  .home-region-chip-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 500;
    opacity: 0.68;
    line-height: 1.35;
    margin-top: 1px;
  }

  /* ── TOUCH TARGETS — 48px minimum on all interactive elements ─────────── */

  /* Condition region group headers (collapsible tap targets) */
  .cond-group-header {
    min-height: 52px;
    padding: 10px 12px;
    align-items: center;
  }

  /* Sub-group details summaries (Referral / Masqueraders) */
  .cond-subgroup-header {
    min-height: 48px;
    padding: 10px 12px;
    align-items: center;
    display: flex;
  }

  /* Condition cards */
  .card-compact {
    padding: 12px 14px;
    min-height: 52px;
  }

  /* Back-to-top button */
  #back-to-top {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  /* Walk choice buttons */
  .walk-choice {
    min-height: 52px;
    padding: 14px 18px;
  }

  /* ── CONDITIONS PAGE: collapsed group compaction ───────────────────────── */

  /* Tighter group spacing */
  .cond-group { padding: 10px 0 8px; }
  .cond-group + .cond-group { padding-top: 10px; }

  /* Description: visible when collapsed (scannability) but clipped to 1 line */
  .cond-group-desc {
    font-size: 12px;
    line-height: 1.4;
    margin: 3px 0 10px;
    padding-left: 10px;
  }
  .cond-group--collapsed .cond-group-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
    opacity: 0.75;
  }

  /* Priority strip: hide when collapsed — reduces collapsed row height */
  .cond-group--collapsed .cond-group-priority { display: none; }
}

/* ── EXTRA NARROW (≤ 400px, e.g. iPhone SE 1st gen) ─────────────────────── */
@media (max-width: 400px) {
  .home-region-chip {
    min-height: 68px;
    padding: 10px 10px 8px;
  }
  .home-region-chip-name { font-size: 11.5px; }
  /* Descriptions still shown via line-clamp — readable at 170px col width */
  .home-region-chip-desc { font-size: 9px; -webkit-line-clamp: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX STRUCTURAL IMPROVEMENTS
   Homepage, Illness Scripts, Decision Trees, Blueprint access
   ════════════════════════════════════════════════════════════════════════ */

/* ── PRESENTATIONS sidebar — pres-item-wrap removes per-item border ─────── */
.pres-item {
  /* Remove the per-item border-bottom since pres-item-wrap now handles it */
  border-bottom: none !important;
}

/* ── CONDITION page quick-links mobile ──────────────────────────────────── */
@media (max-width: 767px) {
  .is-script-entry-btn,
  .condition-blueprint-btn { padding: 11px 14px; font-size: 12.5px; }
}

/* ── DECISION TREE: 2-mode bar (walk + notes only) ──────────────────────── */
/* The diagram button is removed; adjust bar to feel balanced with 2 buttons */
.view-mode-bar {
  /* Already full-width; no change needed — 2 buttons fill naturally */
}

/* ── WARNING CALLOUT — red flags always visible ──────────────────────────── */
.warning-callout {
  background: #fff8e7;
  border-left: 5px solid #e8a000;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 16px 0;
}
.warning-callout__label {
  font-size: 15px;
  font-weight: 700;
  color: #594300;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.warning-callout__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #3d2d00;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.warning-callout__list li {
  padding-left: 16px;
  position: relative;
}
.warning-callout__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #b08000;
}

/* ── FILTER CHIPS — presentations & conditions index ─────────────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 4px;
}
.chip {
  height: 30px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.chip.active,
.chip:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── FILTER CHIPS — mobile scroll-snap ──────────────────────────────────── */
@media (max-width: 768px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── Mobile 375px safety net ─────────────────────────────────────────────── */
@media (max-width: 400px) {
  .home-group-grid--2,
  .home-group-grid--3 { grid-template-columns: 1fr; }
  .tree-hero-title { font-size: 18px; }
  .pw-step { padding: 13px 14px 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v2.22 — Condition + Illness Script UI polish
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile overrides ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tree-hero { margin-bottom: 4px; }
  .pathway-switcher { padding: 5px 8px; margin-bottom: 6px; }
  .switcher-link { font-size: 11px; max-width: 38%; }
  .cond-page-hd { margin-bottom: 12px; padding-bottom: 12px; }
  /* v2.41 — tighten header chrome on mobile so clinical content surfaces sooner */
  .cond-back-link { margin-bottom: 4px; min-height: 30px; }
  .cond-hd-badges { margin-bottom: 6px; }
  .cond-hd-title  { margin: 0 0 10px; }
  .cond-cta-group { margin-bottom: 10px; }
  .cond-pathway-row { margin-bottom: 0; }
}

/* v2.41 — Tier-1 emergency conditions: stronger, instant escalation signal */
.cond-page--tier1 .cond-page-hd { border-top: 3px solid var(--tier1-color); padding-top: 10px; }
.cond-page--tier1 .badge-home-tier1 {
  background: var(--tier1-color); color: #fff; border-color: var(--tier1-color); font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.25b — Presentation detail: compact red-flags strip
   Replaces the large warning-callout at top-of-page with a compact chip strip
   so "Ask first / Key questions" can be the first main content block.
   Full red-flag callout remains lower in the page flow.
   ══════════════════════════════════════════════════════════════════════════ */

.pres-rf-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-left: 4px solid #b71c1c;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  scroll-margin-top: var(--section-sticky-offset);
}
.pres-rf-strip-icon {
  font-size: 14px;
  color: #b71c1c;
  flex-shrink: 0;
  margin-top: 2px;
}
.pres-rf-strip-body {
  flex: 1;
  min-width: 0;
}
.pres-rf-strip-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b71c1c;
  display: block;
  margin-bottom: 6px;
}
.pres-rf-strip-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pres-rf-flag {
  font-size: 12px;
  font-weight: 500;
  color: #7f1d1d;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.5;
}
/* v2.35f — single contextual link to the Universal Red-Flag Screen, homed on the
   red flags strip; secondary weight so it never competes with the red-flag content. */
.pres-rf-strip-link {
  display: inline-block; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: #b71c1c; text-decoration: none;
}
.pres-rf-strip-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   v2.25c — Illness Scripts category pills: filter behaviour
   ══════════════════════════════════════════════════════════════════════════ */

/* Reset <button> UA defaults — chip already carries all visual styling */
button.scripts-jump-chip {
  cursor: pointer;
  font-family: inherit;
}

/* Active (selected) state — uses same colour tokens as :hover, but persistent */
.scripts-jump-chip.active { font-weight: 700; }
.scripts-jump-chip--all.active {
  background: var(--bg);
  border-color: var(--text-muted);
  color: var(--text);
}
.scripts-jump-chip--lumbar.active     { background: var(--col-lumbar-bg);     color: var(--col-lumbar);     border-color: var(--col-lumbar); }
.scripts-jump-chip--cervical.active   { background: var(--col-cervical-bg);   color: var(--col-cervical);   border-color: var(--col-cervical); }
.scripts-jump-chip--shoulder.active   { background: var(--col-shoulder-bg);   color: var(--col-shoulder);   border-color: var(--col-shoulder); }
.scripts-jump-chip--hip.active        { background: var(--col-hip-bg);        color: var(--col-hip);        border-color: var(--col-hip); }
.scripts-jump-chip--knee.active       { background: var(--col-knee-bg);       color: var(--col-knee);       border-color: var(--col-knee); }
.scripts-jump-chip--lower-limb.active { background: var(--col-lower-limb-bg); color: var(--col-lower-limb); border-color: var(--col-lower-limb); }
.scripts-jump-chip--upper-limb.active { background: var(--col-upper-limb-bg); color: var(--col-upper-limb); border-color: var(--col-upper-limb); }
.scripts-jump-chip--multi.active      { background: var(--col-multi-bg);      color: var(--col-multi);      border-color: var(--col-multi); }

/* ══════════════════════════════════════════════════════════════════════════
   v2.24 — Mobile UX regression sweep (CSS-only fixes)
   ══════════════════════════════════════════════════════════════════════════ */

/* Fix 1: anchor-nav top offset on mobile
   Mobile has no top nav (#top-nav display:none). Sticking at top:48px creates
   48px of dead viewport space. Override to top:0 on mobile. */
@media (max-width: 767px) {
  .anchor-nav-wrap { top: 0; }
}

/* Fix 2: recalibrate section scroll offset after anchor-nav top:0 fix
   Desktop: 48px (top-nav) + 52px (anchor-nav) + 8px gap = 108px (unchanged)
   Mobile ≤767px: 0 (no top-nav) + 52px (anchor-nav) + 12px gap = 64px
   Mobile ≤480px: 0 (no top-nav) + 68px (anchor-nav may wrap to 2 rows) + 20px gap = 88px
   Previous values (120px / 136px) were overcorrected — removed 48px top-nav wrongly included. */
@media (max-width: 767px) {
  :root { --section-sticky-offset: 64px; }
}
@media (max-width: 480px) {
  :root { --section-sticky-offset: 88px; }
}

/* Fix 3: pw-step horizontal padding for 401–767px mobile
   Global block sets padding:16px 18px 14px. ≤400px already overrides to 14px sides.
   401–767px range was missing — 18px horizontal wastes 36px of content width on phones. */
@media (max-width: 767px) {
  .pw-step { padding: 14px 14px 12px; }
}

/* ══ REASONING DECK (v2.40) — native in-app slides ══════════════════════════ */
.deck-page { max-width: 900px; padding: 10px 12px 40px; }
.deck-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.deck-exit { font-size: 13px; color: var(--primary); text-decoration: none; font-weight: 600; }
.deck-ctrls { display: flex; align-items: center; gap: 10px; }
.deck-counter { font-size: 13px; color: var(--text-muted); font-weight: 600; min-width: 50px; text-align: center; }
.deck-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--primary); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.deck-btn:hover { background: var(--primary-bg); }
.deck-stage { position: relative; }
.deck-slide { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 20px; min-height: 60vh; }
.deck-slide.is-active { display: block; animation: deckin 0.2s ease; }
@keyframes deckin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.deck-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 8px; }
.deck-kicker--red { color: var(--tier1-color); }
.deck-cover { padding-top: 5vh; }
.deck-h1 { font-size: 30px; font-weight: 800; color: var(--text); margin: 0 0 10px; line-height: 1.1; }
.deck-cover-sub { font-size: 16px; color: var(--text-secondary); margin: 14px 0 0; line-height: 1.5; }
.deck-hint { font-size: 12px; color: var(--text-muted); margin-top: 18px; }
.deck-slide-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 14px; }
.deck-title--red { color: var(--tier1-color); }
.deck-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.deck-step { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.deck-step--rf { background: var(--tier1-bg); border-color: rgba(183, 28, 28, 0.25); }
.deck-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.deck-step--rf .deck-step-num { background: var(--tier1-color); }
.deck-step-body { display: flex; flex-direction: column; }
.deck-step-t { font-weight: 700; color: var(--text); font-size: 15px; }
.deck-step-s { font-size: 13px; color: var(--text-muted); }
.deck-rf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.deck-rf-list li { background: var(--tier1-bg); border: 1px solid rgba(183, 28, 28, 0.2); border-left: 4px solid var(--tier1-color); border-radius: 8px; padding: 9px 12px; font-size: 15px; color: #7f1d1d; line-height: 1.45; }
.deck-pathway-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--tier1-color); text-decoration: none; }
.deck-pathway-link:hover { text-decoration: underline; }
.deck-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.deck-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.deck-check li { position: relative; padding-left: 30px; font-size: 16px; color: var(--text); line-height: 1.45; }
.deck-check li::before { content: '\2713'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; background: var(--primary); color: #fff; border-radius: 50%; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.deck-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.deck-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border); cursor: pointer; padding: 0; }
.deck-dot.is-active { background: var(--primary); }
.deck-entry-btn { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 14px; min-height: 40px; font-size: 13.5px; font-weight: 600; color: var(--primary); background: var(--primary-bg); border: 1px solid rgba(15, 94, 168, 0.25); border-radius: 8px; padding: 8px 14px; text-decoration: none; }
.deck-entry-btn:hover { background: var(--primary); color: #fff; }
/* v2.46b — bottom mobile instance hidden on desktop (top instance shown there) */
.deck-entry-btn--mobile { display: none; }
@media (max-width: 767px) {
  .deck-slide { min-height: 58vh; padding: 18px 14px; }
  .deck-h1 { font-size: 24px; }
  .deck-slide-title { font-size: 19px; }
}

/* ══ HOME: browse-by-region chips (v2.42) ══════════════════════════════════ */
.home-region { margin-bottom: 22px; }
.home-region-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.home-region-chip {
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 99px;
  text-decoration: none; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-secondary); min-height: 34px; display: inline-flex; align-items: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.home-region-chip:active { transform: scale(0.97); }
.home-region-chip--lumbar       { color: var(--col-lumbar);       border-color: var(--col-lumbar);       background: var(--col-lumbar-bg); }
.home-region-chip--cervical     { color: var(--col-cervical);     border-color: var(--col-cervical);     background: var(--col-cervical-bg); }
.home-region-chip--shoulder     { color: var(--col-shoulder);     border-color: var(--col-shoulder);     background: var(--col-shoulder-bg); }
.home-region-chip--hip          { color: var(--col-hip);          border-color: var(--col-hip);          background: var(--col-hip-bg); }
.home-region-chip--knee         { color: var(--col-knee);         border-color: var(--col-knee);         background: var(--col-knee-bg); }
.home-region-chip--lower-limb   { color: var(--col-lower-limb);   border-color: var(--col-lower-limb);   background: var(--col-lower-limb-bg); }
.home-region-chip--upper-limb   { color: var(--col-upper-limb);   border-color: var(--col-upper-limb);   background: var(--col-upper-limb-bg); }
.home-region-chip--multi-region { color: var(--col-multi);        border-color: var(--col-multi);        background: var(--col-multi-bg); }

/* ══ HOME: per-card colour accent + icon tile (v2.42) — scannable, not identical ══ */
.home-tool-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
}
.home-tool-card--conditions, .home-tool-card--trees, .home-tool-card--blueprints,
.home-tool-card--scripts, .home-tool-card--meds { border-left-width: 4px; }
.home-tool-card--conditions { border-left-color: var(--col-lumbar); }
.home-tool-card--trees      { border-left-color: #4f46e5; }
.home-tool-card--blueprints { border-left-color: #166534; }
.home-tool-card--scripts    { border-left-color: #b45309; }
.home-tool-card--meds       { border-left-color: #0e7490; }
.home-tool-card--conditions .home-tool-icon { background: var(--col-lumbar-bg); }
.home-tool-card--trees .home-tool-icon      { background: #eef2ff; }
.home-tool-card--blueprints .home-tool-icon { background: #dcfce7; }
.home-tool-card--scripts .home-tool-icon    { background: #fef3c7; }
.home-tool-card--meds .home-tool-icon       { background: #e0f7fa; }

/* ══ v2.40 — SOCRATES history reference (collapsed, on-demand) ══════════════ */
.socrates-ref { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.socrates-summary {
  cursor: pointer; list-style: none; padding: 9px 12px; min-height: 40px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--primary); display: flex; align-items: center; gap: 7px;
}
.socrates-summary::-webkit-details-marker { display: none; }
.socrates-summary::before { content: '\25B6'; font-size: 9px; opacity: 0.6; }
.socrates-ref[open] > .socrates-summary::before { content: '\25BC'; }
.socrates-list { list-style: none; margin: 0; padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.socrates-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.socrates-key {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--primary);
  color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.socrates-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.socrates-q { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.socrates-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.socrates-redflag { font-size: 12px; font-weight: 600; color: var(--tier1-color); line-height: 1.4; }

/* ══ v2.40 — 5 categories of origin: differentiation matrix (collapsed) ═════ */
.origin-matrix-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; min-height: 40px; }
.origin-matrix-summary::-webkit-details-marker { display: none; }
.origin-matrix-summary::before { content: '\25B6'; font-size: 9px; opacity: 0.6; color: var(--text-muted); }
.origin-matrix[open] > .origin-matrix-summary::before { content: '\25BC'; }
.origin-matrix-hint { font-size: 13px; color: var(--text-muted); margin: 6px 0 12px; line-height: 1.4; }
.origin-cat-list { display: flex; flex-direction: column; gap: 10px; }
.origin-cat { border-left: 4px solid var(--border); background: var(--bg); border-radius: 0 8px 8px 0; padding: 10px 12px; }
.origin-cat-name { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.origin-cat-row { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; margin-top: 3px; }
.origin-cat-tag { flex-shrink: 0; width: 42px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding-top: 2px; }
.origin-cat--somatic-local    { border-left-color: #0E7490; }
.origin-cat--somatic-referral { border-left-color: #166534; }
.origin-cat--neural           { border-left-color: #5b21b6; }
.origin-cat--vascular         { border-left-color: var(--tier1-color); }
.origin-cat--visceral         { border-left-color: #b45309; }
.origin-override-note {
  margin: 14px 0 0; padding: 10px 12px; background: var(--bg);
  border: 1px dashed var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}

/* ══ v2.43 — Presentations: single-column list for tablets/phone-landscape (768–1023px).
   Below 1024 the JS routes taps to the clean full-page detail, so the cramped inline
   split panel is collapsed to a full-width list here. ══════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .pres-layout {
    flex-direction: column; height: auto; min-height: 0;
    border: none; border-radius: 0; box-shadow: none; background: transparent; overflow: visible;
  }
  .pres-sidebar {
    width: 100%; min-width: 0; max-height: none;
    border-right: none; overflow-y: visible; background: transparent;
  }
  .pres-detail { display: none; }
}

/* v2.42 — Ask first rows: on mobile, stack the "rules out X" cue below the question
   (full width each) instead of a cramped two-column split that wraps aggressively. */
@media (max-width: 767px) {
  .key-question-list li { flex-direction: column; gap: 4px; }
  .kq-rules-out { font-size: 12.5px; }
}

/* ══ v2.44 — Mobile density pass (≤480px) on presentation pages.
   Tightens loose vertical spacing only; desktop & 481–767px unaffected.
   Tap targets stay ≥44px, body text unchanged, rules-out-below-question (v2.42)
   and dot alignment preserved. ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* v2.48 — standalone back-link removed on mobile (redundant with the switcher
     counter link, top nav, and bottom nav). Recovers a full ~46px control row. */
  .pres-detail-page > .back-link { display: none; }

  /* Header: compact the eyebrow → tag → title → divider stack (v2.47b tighter) */
  .page-kind { margin-bottom: 3px; }
  .page-header { margin-bottom: 4px; padding-bottom: 4px; }
  .page-header-meta { margin-bottom: 2px; }

  /* Prev/Next switcher row — v2.47b: minimal margin (links keep 44px tap target) */
  .pathway-switcher { padding: 2px 8px; margin-bottom: 2px; }

  /* "View as reasoning deck" — v2.46b: moved to the bottom of the page on mobile.
     Top instance hidden; bottom instance shown as a full-width secondary action. */
  .deck-entry-btn--top { display: none; }
  .deck-entry-btn--mobile {
    display: flex; width: 100%; justify-content: center;
    margin: 16px 0 4px; min-height: 44px;
  }

  /* Tab / anchor nav: tighter row (links keep their 44px tap target via min-height) */
  /* v2.54 — set inline-end AFTER the shorthand so the last tab clears the trailing fade
     (the shorthand would otherwise reset padding-inline-end to 0 — same latent bug as desktop) */
  .anchor-nav { padding: 4px 0; padding-inline-end: 34px; }
  .anchor-nav-wrap { margin-bottom: 2px; }   /* v2.49 — minimise tab→content gap */

  /* Section headers (ASK FIRST, DIFFERENTIALS, …) + inter-section gap.
     v2.47b/v2.49: reduce section card chrome (top/bottom padding) to the minimum. */
  .cond-section-title { margin-bottom: 8px; }
  .pres-detail-page .cond-section { margin: 4px 0; padding-top: 6px; padding-bottom: 8px; }

  /* v2.46b/v2.47b/v2.49: fuse ASK FIRST title + SOCRATES into one tight unit */
  #key-questions .cond-section-title { margin-bottom: 4px; }
  .socrates-ref { margin-bottom: 6px; }

  /* SOCRATES expandable row — 44px tap target, tighter padding */
  .socrates-summary { min-height: 44px; padding: 7px 12px; }
  .socrates-list { padding-bottom: 10px; }

  /* Question rows — tighten inter-row padding (text stays ≥15px, rules-out below) */
  .key-question-list li { padding: 9px 0; gap: 3px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   v3.2 : mobile density pass: minimum page padding + compact card structure
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Page containers: minimum gutters */
  .page, .page-wide, .home-page, .conditions-page {
    padding: 8px 8px calc(74px + env(safe-area-inset-bottom, 0px));
  }

  /* Consultation stages */
  .pres-stage { margin-top: 18px; }
  .stage-head { gap: 8px; margin-bottom: 8px; padding-bottom: 5px; }
  .stage-num { width: 22px; height: 22px; font-size: 11px; }
  .stage-title { font-size: 15px; }
  .stage-sub { font-size: 11.5px; }

  /* Red-flag strip */
  .pres-rf-strip { padding: 8px 9px; gap: 7px; }
  .pres-rf-flag { font-size: 11.5px; padding: 3px 8px; }

  /* Key-question cards */
  .kq-zone { margin-bottom: 10px; }
  .kq-zone-header { padding: 5px 2px; gap: 6px; }
  .kq-cards { gap: 6px; }
  .kq-summary { padding: 8px 9px; gap: 6px; }
  .kq-text { font-size: 13px; line-height: 1.45; }
  .kq-followup { padding: 7px 9px; font-size: 12px; }

  /* Weigh groups + differential rows */
  .wdx-group { margin-bottom: 10px; }
  .wdx-group-head { padding: 6px 9px; gap: 6px; }
  .wdx-group-help { display: none; } /* one-line group headers on mobile */
  .wdx-group .pres-diff-list { padding: 5px 6px; }
  .pres-diff-row { padding: 7px 8px; }
  .pres-diff-top { gap: 4px 6px; }
  /* Badges flow inline after the title instead of right-aligned: fewer wrapped lines */
  .pres-diff-name { flex: 0 1 auto; }
  .pres-diff-badges { margin-left: 0; }
  .pres-diff-rationale { font-size: 12px; line-height: 1.5; margin-top: 2px; }
  .pres-badge, .pres-urg-badge { font-size: 9.5px; padding: 1px 6px; }

  /* Secondary collapses */
  .pres-system-summary, .pres-rf-full-summary { padding: 8px 10px; }
  .pres-system-collapse .pres-differentials { padding: 8px; }
  .pres-rf-full .warning-callout { margin: 8px; }

  /* Detail section shells + quick actions */
  .pres-detail-page .cond-section { padding-left: 10px; padding-right: 10px; }
  .pres-quick-actions { gap: 8px; margin-top: 4px; }

  /* Anchor nav: minimum bar height */
  .anchor-nav { gap: 3px; padding-top: 3px; padding-bottom: 3px; }
  .anchor-nav a, .anchor-nav__link { min-height: 28px; padding: 2px 8px; font-size: 12px; }
}