/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet: sidebar drawer --- */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: block; }
  .main-content { margin-left: 0; }
}

/* --- Small tablet --- */
@media (max-width: 768px) {
  .page-header { padding: 24px 0 16px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  /* Main content tightening */
  .main-content { padding: 0 8px 40px; }
  .page-header h1 { font-size: 1.3rem; }

  /* Cards & accordions */
  .phase-card { border-radius: var(--radius); }
  .phase-hdr { padding: 12px 14px; gap: 8px; min-height: 48px; }
  .phase-hdr .label { font-size: 0.95rem; }
  .phase-body-inner { padding: 0 12px 12px; }
  .sub-hdr { padding: 10px 12px; gap: 8px; }
  .sub-body-inner { padding: 8px 10px 12px; }

  /* Section blocks */
  .section-block { padding: 10px; margin-top: 10px; }
  .section-block[data-collapsible] > .sec-title { padding: 10px; }
  .section-block[data-collapsible] > .collapsible-content { padding: 0 10px 10px; }
  .bookmark-btn { font-size: 1.2rem; padding: 8px; }

  /* Typography */
  ul, ol { padding-left: 14px; }
  ol li { padding-left: 26px; }
  ol li::before { width: 18px; height: 18px; font-size: 0.65rem; }
  th, td { padding: 6px 8px; font-size: 0.8rem; }
  .decision-tree { padding: 10px; font-size: 0.78rem; }

  /* Touch targets */
  .toggle-group button { padding: 8px 16px; min-height: 40px; }
  .role-select, .jurisdiction-select { min-height: 40px; padding: 8px 14px; }
  .sidebar a { padding: 10px 16px 10px 24px; min-height: 40px; }
  .sidebar a.sub { padding-left: 38px; }
  .sidebar-toggle { width: 48px; height: 48px; font-size: 1.2rem; }

  /* Flowchart */
  .flowchart-container { padding: 8px 4px; border-radius: var(--radius); }

  /* Table scroll with indicator shadows */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal */
  .modal { width: 95%; max-height: 85vh; padding: 16px; border-radius: var(--radius); }
}

/* --- Small phones --- */
@media (max-width: 400px) {
  .toggle-group button { padding: 6px 10px; font-size: 0.75rem; }
  .main-content { padding: 0 6px 40px; }
  .phase-hdr .icon { font-size: 1.1rem; }
  .phase-hdr { gap: 6px; padding: 10px; }
  .page-header { padding: 16px 0 10px; }
  h2 { font-size: 1.05rem; }
  h3 { font-size: 0.92rem; }
}

/* --- Landscape phones --- */
@media (max-height: 500px) and (orientation: landscape) {
  .page-header { padding: 12px 0 8px; }
  .page-header h1 { font-size: 1.1rem; }
  html { scroll-padding-top: 20px; }
}

/* Safe area support for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  .sidebar { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .sidebar-toggle { top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
  .main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* Print styles */
@media print {
  .sidebar, .sidebar-toggle, .sidebar-overlay, .flowchart-container,
  .bookmark-btn, .phase-notes { display: none !important; }
  .main-content { margin-left: 0; max-width: 100%; }
  .phase-tab { display: block !important; }
  .section-block[data-collapsible].collapsed > .collapsible-content {
    max-height: none !important;
    opacity: 1;
  }
}