/*
 * responsive.css — Hypatia Universal Responsive System
 *
 * Standardized breakpoints for all device templates:
 *   Phone:        ≤480px   (iPhone SE 375, Galaxy S21 360, Pixel 7 412, iPhone 14 Pro Max 430)
 *   Tablet:       481-768px (iPad Mini 768, phone landscape)
 *   Small Desktop: 769-1024px (iPad Pro 11", iPad Pro 12.9")
 *   Desktop:      1025-1920px (laptops, monitors)
 *   Ultra-wide:   >1920px  (ultra-wide monitors)
 *
 * Loaded automatically via nav.js on every page.
 * Works with data-device="phone|tablet|desktop" set by device-detect.js.
 */

/* ══════════════════════════════════════════════════════
   BASE: Mobile-first defaults (applies to all sizes)
   ══════════════════════════════════════════════════════ */

/* Prevent horizontal overflow everywhere */
html { overflow-x: hidden; }
body { overflow-x: hidden; min-height: 100vh; min-height: 100dvh; }
img, video, canvas, svg { max-width: 100%; height: auto; }
pre, code { overflow-x: auto; max-width: 100%; }
table { max-width: 100%; overflow-x: auto; display: block; }

/* Touch targets: minimum 44px for primary interactive elements on mobile */
@media (max-width: 768px) {
  button, [role="button"], select,
  .btn, .card-btn, .tab-btn, .quick-link,
  .pep-item, .var-item, .menu a, .hn-link, .hn-dd-item {
    min-height: 44px;
  }
  /* Inline small buttons (padding < 6px) get padded up for tap targets */
  button[style*="padding:1px"], button[style*="padding:2px"],
  button[style*="padding:3px"], button[style*="padding:4px"],
  button[style*="padding:5px"],
  a[style*="padding:1px"], a[style*="padding:2px"],
  a[style*="padding:3px"], a[style*="padding:4px"],
  a[style*="padding:5px"] {
    min-height: 36px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  /* Modal content: ensure scrollable on small screens */
  .modal { max-width: 95vw !important; max-height: 90vh; overflow-y: auto; }
}

/* Safe areas for notched devices */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ══════════════════════════════════════════════════════
   PHONE: ≤480px (portrait phones)
   iPhone SE 375, Galaxy S21 360, iPhone 14 390, Pixel 7 412, iPhone 14PM 430
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Typography: slightly larger for readability on small screens */
  body { font-size: 14px !important; }

  /* Nav: compact */
  #hypatia-nav, #hy-nav { height: 48px; min-height: 48px; padding: 0 8px; box-sizing: border-box; }
  #hypatia-nav .hn-brand { margin-right: 8px; }
  .hn-title { font-size: 9px !important; letter-spacing: .12em !important; }
  #hypatia-nav .hn-link { padding: 4px 6px; font-size: 8px; }
  .hn-profile-name { display: none; }
  .hn-role-badge { display: none; }

  /* Profile button: contained within nav bar */
  #mob-profile-btn, #desk-profile-btn {
    height: 34px !important;
    max-height: 34px !important;
    padding: 2px 8px 2px 3px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    overflow: hidden;
  }
  #mob-profile-wrap, #desk-profile-wrap {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    max-height: 42px;
  }
  /* Avatar circle: smaller on phone */
  #mob-profile-btn span:first-child,
  #desk-profile-btn span:first-child {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 10px !important;
    flex-shrink: 0;
  }

  /* Layout: single column everything */
  .shell { grid-template-columns: 1fr !important; }
  .grid, .pep-grid, .var-grid, .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .card.w4, .card.w6, .card.w8, .card.w12 { grid-column: span 1 !important; }

  /* Content areas: tighter padding */
  .content, .grid-area, .main, .page { padding: 8px !important; }
  .main-header { padding: 8px 10px !important; flex-direction: column; gap: 6px; align-items: flex-start !important; }
  .stats-row { flex-wrap: wrap; gap: 4px !important; }
  .topbar { flex-direction: column; gap: 8px; }

  /* Cards: full width, less padding */
  .pep-card, .var-card { padding: 8px 10px !important; }
  .card { padding: 14px !important; border-radius: 12px !important; }
  .card-name, .card-gene { font-size: 12px !important; }
  .card-function, .card-affects { -webkit-line-clamp: 3 !important; }
  .effect-tag, .bio-tag { font-size: 7px !important; padding: 1px 4px !important; }

  /* Drawers: full width */
  .sidebar { width: 85vw !important; min-width: 0 !important; }
  .panel { width: 92vw !important; min-width: 0 !important; }
  .drawer-left.open .drawer-tab-left { left: 85vw !important; }
  .drawer-right.open .drawer-tab-right { right: 92vw !important; }
  .panel-name, .panel-gene { font-size: 13px !important; }
  .panel-body { padding: 10px !important; }

  /* Bottom strips */
  .bottom-strip { flex-direction: column; max-height: none; padding: 8px 10px; }

  /* Chat bubble: full width minus padding */
  #gene-chat-panel { width: calc(100vw - 24px) !important; right: 12px !important; bottom: 72px !important; }
  #gene-chat-bubble { bottom: 14px !important; right: 14px !important; }
  .ask-hypatia-fab { font-size: 10px; padding: 8px 12px; right: 14px !important; bottom: 68px !important; }

  /* Upload banner */
  .upload-banner { flex-direction: column; padding: 8px 10px; }
  .upload-zone { min-width: 0 !important; }

  /* Stats bar */
  .stats-bar { flex-wrap: wrap; }
  .stat-card { min-width: 0; flex: 0 0 calc(50% - 1px); }
  .stat-card-num { font-size: 16px !important; }
  .stat-card-num.millions { font-size: 12px !important; }

  /* Store link bar */
  .bottom-strip, [style*="flex-shrink:0"][style*="padding"][style*="border-top"] {
    flex-wrap: wrap;
  }

  /* Info grids */
  .info-grid { grid-template-columns: 1fr !important; }

  /* Dose values */
  .dose-val { font-size: 14px !important; }

  /* Modal: wider */
  .modal { min-width: 0 !important; max-width: 95vw !important; padding: 16px !important; }

  /* Hide non-essential elements on tiny screens */
  .hn-sep-v { display: none; }
}

/* ══════════════════════════════════════════════════════
   TABLET: 481-768px (large phones landscape, small tablets)
   iPad Mini 768×1024
   ══════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  body { font-size: 13px; }

  /* Nav: standard but compact */
  .hn-profile-name { max-width: 60px; }

  /* Grids: 2 columns */
  .pep-grid, .var-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .grid { grid-template-columns: repeat(6, 1fr); }
  .card.w4 { grid-column: span 6; }
  .card.w6 { grid-column: span 6; }

  /* Drawers: slightly wider than phone */
  .sidebar { width: 280px !important; }
  .panel { width: 380px !important; min-width: 0 !important; }

  /* Content padding */
  .content, .grid-area { padding: 10px !important; }

  /* Chat */
  #gene-chat-panel { width: 340px; }
}

/* ══════════════════════════════════════════════════════
   SMALL DESKTOP: 769-1024px (tablets landscape, iPad Pro)
   iPad Pro 11" 834×1194, iPad Pro 12.9" 1024×1366
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Touch targets still enforced */
  button, a.btn, .pep-item, .var-item, .menu a { min-height: 44px; }

  /* Grids: 2-3 columns */
  .pep-grid, .var-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .grid { grid-template-columns: repeat(12, 1fr); }
  .card.w4 { grid-column: span 6; }

  /* Sidebar/panel at comfortable widths */
  .sidebar { width: 260px; }
  .panel { width: 420px; }

  /* Topbar: allow wrapping */
  .topbar { flex-wrap: wrap; gap: 10px; }
}

/* ══════════════════════════════════════════════════════
   DESKTOP: 1025-1920px (laptops, standard monitors)
   ══════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1920px) {
  /* Full grid layouts */
  .pep-grid, .var-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* Comfortable spacing */
  .content, .grid-area { padding: 14px; }

  /* Relax touch targets for mouse users */
  button, a, .btn { min-height: auto; min-width: auto; }
  .pep-item, .var-item { min-height: 36px; }
}

/* ══════════════════════════════════════════════════════
   ULTRA-WIDE: >1920px
   ══════════════════════════════════════════════════════ */
@media (min-width: 1921px) {
  /* Constrain content width for readability */
  .content, .main, .grid-area { max-width: 1800px; margin: 0 auto; }

  /* Larger grids */
  .pep-grid, .var-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* More spacious cards */
  .card { padding: 22px; }
}

/* ══════════════════════════════════════════════════════
   LANDSCAPE PHONES (short + wide)
   ══════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  #hypatia-nav { height: 40px; }
  body { padding-top: 40px !important; }
  .layout { height: calc(100vh - 40px); }
  .stats-bar { display: none; }
  .upload-banner { padding: 4px 10px; }
  #gene-chat-panel { max-height: 280px; bottom: 56px !important; }
  .main-header { padding: 4px 12px !important; }
}

/* ══════════════════════════════════════════════════════
   ORIENTATION HELPERS
   ══════════════════════════════════════════════════════ */
@media (orientation: portrait) {
  html[data-device="phone"] .sidebar { width: 85vw !important; }
  html[data-device="phone"] .panel { width: 92vw !important; }
}
@media (orientation: landscape) {
  html[data-device="phone"] .sidebar { width: 50vw !important; max-width: 300px; }
  html[data-device="phone"] .panel { width: 60vw !important; max-width: 420px; }
}

/* ══════════════════════════════════════════════════════
   DEVICE-SPECIFIC ATTRIBUTE SELECTORS
   Set by device-detect.js: data-device="phone|tablet|desktop"
   ══════════════════════════════════════════════════════ */

/* Phone: hide desktop-only elements */
html[data-device="phone"] .desktop-only { display: none !important; }
html[data-device="phone"] .hn-link.hn-hide-mobile { display: none !important; }

/* Desktop: hide mobile-only elements */
html[data-device="desktop"] .mobile-only { display: none !important; }

/* Tablet: balanced */
html[data-device="tablet"] .phone-only { display: none !important; }
html[data-device="tablet"] .desktop-only { display: none !important; }

/* ══════════════════════════════════════════════════════
   ANTI-CLIP: Prevent common overflow/overlap issues
   ══════════════════════════════════════════════════════ */

/* Prevent text overflow in cards */
.card-name, .card-gene, .pep-name, .var-item-gene,
.panel-name, .panel-gene, .sb-title, .main-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Prevent buttons from overflowing containers */
.card-btns, .push-btns, .modal-row, .filter-toggle {
  flex-wrap: wrap;
}

/* Ensure fixed elements don't overlap each other */
.ask-hypatia-fab { z-index: 9997; }
#gene-chat-bubble { z-index: 9998; }
#gene-chat-panel { z-index: 9997; }
.toast { z-index: 9999; }
#hypatia-nav { z-index: 9000; }
.drawer-left, .drawer-right { z-index: 8500; }
.drawer-backdrop { z-index: 8499; }
.modal-overlay { z-index: 9999; }
#page-gate-veil { z-index: 99999; }

/* Nav padding: handled dynamically by _syncNavPadding() in nav.js.
   That function reads the nav's actual rendered height and sets
   body.style.paddingTop + --nav-height. DO NOT hardcode here —
   hardcoded values caused the 2026-05-04 double-padding incident. */

/* Safe bottom padding for content behind fixed bottom bars */
.page, .layout, .main, .grid-area {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════
   BUTTON & ELEMENT OVERFLOW FIXES
   Prevents buttons/elements from extending past viewport.
   Generated by breakpoint_validator_v1 audit 2026-04-16.
   ══════════════════════════════════════════════════════ */

/* Universal: prevent any button from exceeding viewport */
button, .btn, .action-btn, a.btn, [role="button"] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action button rows: wrap on small screens */
.action-buttons, .btn-row, .btn-group, .button-group,
.actions, .toolbar, .controls, .header-actions {
  flex-wrap: wrap;
  gap: 6px;
}

/* Close/dismiss buttons: never overflow */
button[aria-label="Close"], .close-btn, .dismiss-btn,
button:has(> .close-icon), [onclick*="close"],
button:only-child {
  flex-shrink: 0;
  min-width: 32px;
  max-width: fit-content;
}

/* Modal close buttons: absolute positioning fix */
.modal button.close, .modal .close-btn,
.modal-header button, .panel-header button {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
}

/* Cards: prevent inner overflow */
.card, .panel, .pep-card, .var-card {
  overflow: hidden;
  max-width: 100%;
}

/* Tables: scrollable wrapper */
table, .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* ── Phone: aggressive overflow prevention ─────────── */
@media (max-width: 480px) {
  /* Flex containers: force wrap */
  [style*="display:flex"], [style*="display: flex"],
  .flex, .flex-row, .row, .header-row,
  .topbar, .toolbar, .controls, .actions {
    flex-wrap: wrap !important;
  }

  /* Grid panels: full width */
  .panel, .card, .section {
    min-width: 0 !important;
    max-width: 100vw !important;
  }

  /* Buttons in rows: stack vertically when needed */
  .btn-row, .button-group, .action-buttons {
    flex-direction: column;
  }
  .btn-row > *, .button-group > *, .action-buttons > * {
    width: 100%;
  }

  /* Tabs: scrollable when too many */
  .tab-bar, .tab-row, .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  /* Stat/metric grids: 2-col on phone */
  .stat-grid, .metric-grid, .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Inputs: full width */
  input, select, textarea {
    max-width: 100% !important;
  }

  /* Chip/tag rows: wrap */
  .chip-row, .tag-row, .filter-chips, .badge-row {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ── Tablet: moderate fixes ──────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  /* Button rows: allow wrapping */
  .btn-row, .button-group, .action-buttons, .toolbar {
    flex-wrap: wrap;
  }

  /* Multi-panel layouts: stack */
  .multi-panel, .three-panel, .split-view {
    flex-direction: column !important;
  }
  .multi-panel > *, .three-panel > *, .split-view > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── All breakpoints: prevent close button collisions ── */
.modal, .drawer, .panel, .card {
  position: relative;
}
.modal > button:first-child,
.panel > button:first-child,
.drawer > button:first-child {
  z-index: 2;
}