/* ═══════════════════════════════════════════════════════
   RESPONSIVE — All @media queries by breakpoint (descending)
   ═══════════════════════════════════════════════════════ */


/* ── Tablet (769px–1100px) ───────────────────────────── */

@media (min-width: 769px) and (max-width: 1100px) {
  .nav-links a { font-size: .55rem; padding: .2rem .35rem; }
  .nv { border-width: 1px; }
  nav { height: auto; min-height: 48px; padding: .4rem clamp(.75rem, 3vw, 1.5rem); }
}


/* ── ≤ 768px — Tablet & small laptops ───────────────── */

@media (max-width: 768px) {
  /* Nav collapses */
  .nav-links { display: none; }
  nav { height: auto; padding: .5rem clamp(.75rem, 3vw, 1.25rem); gap: .4rem; }
  .nav-brand { flex: 1; }
  .nav-title { font-size: .8rem; }
  .nav-icon { width: 24px; height: 24px; }
  .toc-btn { font-size: .65rem; padding: .35rem .65rem; }
  .toc-panel { top: 48px; max-height: calc(100vh - 48px); width: 100vw; }

  /* Grid stacking */
  .h-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .ai-card-grid { grid-template-columns: 1fr; }
  .pulse-grid { grid-template-columns: 1fr 1fr; }
  .journey-cols { grid-template-columns: 1fr; }

  /* Progress dots hidden */
  .progress-dots { display: none; }

  /* Hero refinements */
  .h-stats > div { padding: .75rem .85rem; border-radius: 10px; }
  .hero-story { padding: 1.15rem 1.25rem; border-radius: 12px; }

  /* Disable gradient text on mobile (performance) */
  h1 em {
    -webkit-text-fill-color: var(--primary);
    background: none;
  }
  h2 em {
    -webkit-text-fill-color: var(--primary);
    background: none;
  }

  /* Tool body — tighter on tablet */
  .tool-body { padding: clamp(.65rem, 2vw, 1rem); }
  .h-stat-num { font-size: clamp(1.3rem, 4.5vw, 1.8rem); }
}


/* ── ≤ 700px — Small tablets ────────────────────────── */

@media (max-width: 700px) {
  .monitor-grid { grid-template-columns: 1fr; }
  .pattern-grid { grid-template-columns: 1fr; }
  .kb-layout { grid-template-columns: 1fr; min-height: auto; }
  .kb-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
  .b-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .stakeholder-grid { grid-template-columns: 1fr 1fr; }
  .msg-grid { grid-template-columns: 1fr; }
  .journey-cols { grid-template-columns: 1fr; }
  .growth-impact-grid { grid-template-columns: 1fr 1fr; }
  .rc-name { min-width: 80px; font-size: .72rem; }
}


/* ── ≤ 650px — Large phones / phablets ──────────────── */

@media (max-width: 650px) {
  .ai-card-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .esc-grid { grid-template-columns: 1fr; }
  .counsel-grid { grid-template-columns: 1fr; }
}


/* ── ≤ 600px — Phones (landscape) ───────────────────── */

@media (max-width: 600px) {
  .b-detail-grid { grid-template-columns: 1fr; }
  .eq-grid { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: 1fr 1fr; }
  .trigger-cards { grid-template-columns: 1fr; }
  .ai-compare { grid-template-columns: 1fr; }
  .pulse-grid { grid-template-columns: 1fr 1fr; }
}


/* ═══ ≤ 500px — SMARTPHONE POLISH ═══ */

@media (max-width: 500px) {
  /* Hero breathes */
  .header { padding: clamp(2.5rem, 8vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); letter-spacing: -.02em; }
  .h-desc { font-size: .78rem; line-height: 1.65; margin-bottom: 1.5rem; }
  .h-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .h-stat-num { font-size: clamp(1.3rem, 5vw, 1.8rem); }

  /* Section connectors wrap on small screens */
  .sc-text { white-space: normal; font-size: .48rem; }
  .sec-connector { padding: 1rem; }

  /* Exploration tracker repositioned */
  .explore-tracker { bottom: .75rem; left: .75rem; width: 36px; height: 36px; }
  .et-ring { width: 36px; height: 36px; }
  .et-label { font-size: .42rem; }

  /* Quick actions stack nicely */
  .quick-actions { flex-direction: column; align-items: stretch; gap: .35rem; }
  .qa-card { justify-content: center; padding: .5rem .7rem; }

  /* Sections tighter */
  .sec { padding: clamp(1.5rem, 5vw, 2.5rem) 0; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); padding-left: .6rem; }
  .sec-desc { font-size: .76rem; margin-bottom: 1.25rem; }
  .eyebrow { font-size: .5rem; padding: .2rem .5rem; }

  /* Tool frames */
  .tool-frame { border-radius: 8px; }
  .tool-body { padding: .6rem; }
  .tool-bar { padding: .45rem .65rem; }
  .tool-bar-title { font-size: .48rem; }
  .tool-label { font-size: .45rem; }

  /* Grids stack */
  .counsel-grid { grid-template-columns: 1fr; }
  .esc-grid { grid-template-columns: 1fr; }
  .ai-card-grid { grid-template-columns: 1fr; }
  .b-grid { grid-template-columns: 1fr; }
  .eq-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .pattern-grid { grid-template-columns: 1fr; }
  .msg-grid { grid-template-columns: 1fr; }
  .trigger-cards { grid-template-columns: 1fr; }
  .monitor-grid { grid-template-columns: 1fr; }
  .monitor-summary { grid-template-columns: 1fr 1fr; }
  .journey-cols { grid-template-columns: 1fr; }
  .pulse-grid { grid-template-columns: 1fr 1fr; }
  .lookup-grid { grid-template-columns: 1fr; }

  /* Horizontal scrollables */
  .lookup-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .3rem; }
  .lookup-filter { flex-shrink: 0; }
  .ai-tabs,
  .outreach-tabs,
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ai-tab,
  .outreach-tab,
  .filter-tab { flex-shrink: 0; white-space: nowrap; }
  .tracer-flow { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lc-flow { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .flow-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ai-spectrum { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* KB layout stacks */
  .kb-layout { grid-template-columns: 1fr; }

  /* Enhancement responsive stacking */
  .pao-strip { grid-template-columns: 1fr; gap: .2rem; }
  .pao-arrow { display: none; }
  .tb-row { grid-template-columns: 1fr; }
  .tb-arrow { padding: .25rem 0; font-size: .8rem; }
  .tone-note::after { left: 0; transform: translateX(0); width: 180px; }

  /* Navigation elements */
  .progress-dots { display: none; }
  .back-to-top { width: 36px; height: 36px; font-size: .85rem; bottom: .75rem; right: .75rem; }
  .key-pill { bottom: 3.25rem; right: .75rem; padding: .3rem .5rem; font-size: .48rem; }

  /* Why section columns stack */
  .why-cols { flex-direction: column; }

  /* New components — mobile stacking */
  .growth-impact-grid { grid-template-columns: 1fr; gap: .5rem; }
  .ai-highlights { gap: .35rem; }
  .ai-hl { font-size: .65rem; padding: .35rem .5rem; }
  .scenario-status-bar { padding: .45rem .65rem; gap: .5rem; }
  .ssb-time { display: none; }
  .pulse-wrap { padding: .5rem .65rem; }
  .pulse-grid { grid-template-columns: 1fr 1fr; }
  .flow-legend { gap: .35rem; }
  .fl-item { font-size: .52rem; }
  .coverage-bar { gap: .3rem; }
  .barrier-bar { height: 6px; }
  .rc-name { min-width: 70px; font-size: .68rem; }
  .rc-bar-bg { min-width: 40px; }
  .rc-footer { font-size: .52rem; padding: .4rem .65rem; }
  .toolkit-section-label { font-size: .52rem; }

  /* Footer tighter */
  footer { padding: 1.5rem 0; }
  footer .wrap div[style*="display:flex"] { gap: .25rem; }
  .footer-cta { font-size: .75rem; padding: .5rem 1rem; }
  .footer-tech-tags { gap: .3rem; }
  .footer-tech-tags span { font-size: .5rem; padding: .15rem .35rem; }
  .cred-tag { font-size: .68rem; padding: .25rem .5rem; }

  /* Hero story + stats */
  .h-stats > div { padding: .6rem .7rem; border-radius: 8px; }
  .hero-story { padding: 1rem; margin: 1.25rem auto 0; }
  .hero-story::before { display: none; }
  nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

  /* Hide decorative elements */
  .hero-bg { display: none; }
  h2::before { display: none; }

  /* Disable hover transforms on touch */
  .tool-frame:hover { transform: none; }
  .msg-preview:hover { transform: none; }
  .b-card:hover { transform: none; }
  .ai-card:hover { transform: none; }

  /* Hero credentials */
  .hero-creds { gap: .35rem; }
  .hero-cred { font-size: .6rem; padding: .2rem .45rem; }

  /* Candidate name */
  .h-candidate { font-size: .95rem; margin-bottom: .5rem; }

  /* IV panel SVGs scale on small screens */
  .iv-hero svg { max-height: 110px; }
  .iv-stat-row { gap: .3rem; }
  .iv-stat { font-size: .48rem; padding: .2rem .4rem; }
  .iv-graphic { min-height: 100px; }
  .iv-card { padding: .65rem; }
  .iv-q-title { font-size: .7rem; margin-bottom: .4rem; }
}


/* ═══ ≤ 400px — SMALL-MEDIUM PHONES ═══ */

@media (max-width: 400px) {
  h1 { font-size: 1.4rem; }
  .h-stat-num { font-size: 1.15rem; }
  .wrap { padding: 0 .75rem; }
  .tool-body { padding: .5rem; }
  .h-stats { gap: .35rem; }
}


/* ═══════════════════════════════════════════════════════
   NEW TOOLS — mobile polish (Pass 5 audit)
   ═══════════════════════════════════════════════════════ */

/* Nav: hide labels on toggle buttons below 640px, keep icons */
@media (max-width: 640px) {
  .theme-label, .a11y-label { display: none; }
  .theme-toggle-btn, .a11y-toggle { padding: .32rem .5rem; }
  .a11y-switch { display: none; }
}

/* Today dashboard: stack header actions below 600px */
@media (max-width: 600px) {
  .today-head { flex-direction: column; align-items: stretch; gap: .75rem; }
  .today-head-actions { justify-content: flex-start; flex-wrap: wrap; }
  .today-btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
}

/* Real tool view toggles: wrap, don't overflow */
@media (max-width: 720px) {
  .rm-view-toggle { margin: 0; order: 2; width: 100%; justify-content: center; }
  .tool-bar { flex-wrap: wrap; gap: .4rem; }
  .tool-bar .tool-bar-title { order: 3; width: 100%; }
}

/* Tool bar on phones */
@media (max-width: 500px) {
  .tool-bar { padding: .5rem .6rem; }
  .rm-view-btn { padding: .3rem .5rem; font-size: .58rem; }
}

/* Welcome tour modal: tighter padding on small screens */
@media (max-width: 560px) {
  .welcome-modal { padding: 1.75rem 1.5rem 1.35rem; }
  .welcome-title { font-size: 1.25rem; }
  .welcome-content { font-size: .85rem; }
  .welcome-foot-note { font-size: .68rem; padding: .6rem .75rem; }
  .welcome-actions { flex-wrap: wrap; gap: .4rem; }
  .welcome-step-count { order: -1; }
}

/* Backup modal: avoid edge-touching on small screens */
@media (max-width: 520px) {
  .backup-body { padding: 1rem; }
  .backup-head { padding: .9rem 1rem; }
  .backup-title { font-size: 1.05rem; }
}

/* Search modal: fits above keyboard on phones */
@media (max-width: 560px) {
  .search-overlay { padding-top: 6vh; }
  .search-input { font-size: .9rem; }
  .search-footer { gap: .75rem; font-size: .55rem; }
  .search-result { padding: .55rem .65rem; }
  .search-label { font-size: .82rem; }
}

/* Escalation helper: stack sev buttons vertically */
@media (max-width: 700px) {
  .esc-sev-btn { padding: .6rem .55rem; }
  .esc-sev-text { font-size: .6rem; }
}

/* Onboarding items: hide category pill more aggressively */
@media (max-width: 560px) {
  .ob-item { grid-template-columns: 22px 1fr 22px; padding: .5rem .65rem; }
  .ob-cat { display: none; }
  .ob-text-input { font-size: .78rem; }
  .ob-group-head { padding: .6rem .75rem; }
}

/* Nav: keep key controls on small screens without wrap chaos */
@media (max-width: 560px) {
  nav { flex-wrap: wrap; }
  .nav-brand { min-width: 0; }
  .nav-title { font-size: .72rem; }
  .nav-title-sub { display: none; }
}

/* Hide the nav-title-sub on medium screens too to prevent overflow */
@media (max-width: 768px) {
  .nav-title-sub { display: none; }
}

/* Reconcile CSV inputs stack on phones with compact textareas */
@media (max-width: 560px) {
  .rc-input textarea { min-height: 110px; font-size: .68rem; }
  .rc-actions { flex-wrap: wrap; }
  .rc-actions button { flex: 1 1 auto; min-width: 0; }
}

/* Real outreach: single-column events below 480px */
@media (max-width: 480px) {
  .ro-event { grid-template-columns: 80px 1fr 22px; gap: .3rem; padding: .45rem .5rem; }
  .ro-event .ro-month-select { display: none; }
  .ro-status-pill { font-size: .54rem; padding: .2rem .3rem; }
}

/* KB toolbar wraps cleanly */
@media (max-width: 720px) {
  .kb-toolbar { gap: .4rem; padding: .65rem .75rem; }
  .kb-search { min-width: 100%; margin-bottom: .3rem; }
  .kb-select { flex: 1 1 auto; min-width: 120px; }
}

/* Ticket log: tighter summary grid below 540px */
@media (max-width: 540px) {
  .tl-summary { grid-template-columns: 20px 44px 1fr; gap: .4rem; padding: .6rem .75rem; }
  .tl-sys, .tl-status, .tl-symptom { display: none; }
  .tl-row-tags { display: none; }
}

/* Today stat strip: single row of 2 on very small */
@media (max-width: 420px) {
  .today-strip { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .today-stat { padding: .7rem .5rem; }
  .today-stat-num { font-size: 1.4rem; }
}

/* Nav badge: slightly smaller on tiny screens */
@media (max-width: 400px) {
  .nav-count-badge { min-width: 16px; height: 16px; font-size: .55rem; }
}


/* ═══ PRINT ═══ */

@media print {
  nav, .back-to-top, .progress-dots, .scroll-progress,
  .scroll-hint, .key-pill, .theater-dim, .zoom-badge,
  .theater-badge, .a11y-badge, .kb-overlay, .greeting-toast,
  .explore-tracker, .iv-trigger, .iv-overlay,
  .sec-connector { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec { page-break-inside: avoid; padding: 1.5rem 0; }
  .tool-frame { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .tool-frame:hover { transform: none; box-shadow: none; }
  a { color: inherit; text-decoration: underline; }
  .fu { opacity: 1; transform: none; }
}