/*
  HelixPoint Biomedical Lab — Responsive Styles & Accessibility
  Breakpoints: Desktop (>1100px), Tablet (768–1100px), Mobile (<768px), Small (<480px)
*/

/* Mobile polish: safe areas & input zoom prevention */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea, button {
  font-size: 14px;
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar {
    position: static;
    padding: 16px;
  }

  .stage-list {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .stage {
    scroll-snap-align: start;
  }

  .score-card {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .lab-visual {
    min-height: 190px;
  }

  .patient-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .app-shell {
    padding: 12px 14px;
  }

  .topbar {
    top: 8px;
    border-radius: 18px;
    min-height: 62px;
    padding: 8px 12px;
    gap: 10px;
  }

  .brand-copy span {
    display: none;
  }

  .topnav .nav-btn span.label-text {
    display: none;
  }

  .topnav .nav-btn {
    padding: 0 10px;
    min-height: 38px;
  }

  .workspace {
    margin-top: 12px;
    gap: 12px;
  }

  .sidebar {
    padding: 12px 14px;
  }

  .sidebar > .eyebrow,
  .sidebar > h2,
  .sidebar > p {
    display: none;
  }

  .stage-list {
    gap: 6px;
  }

  .stage {
    min-width: 140px;
    padding: 8px 10px;
  }

  .stage-num {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .stage-title {
    font-size: 12.5px;
  }

  .hero {
    padding: 22px 20px;
    border-radius: var(--radius-lg);
  }

  .hero h1 {
    font-size: clamp(26px, 7vw, 36px);
    margin: 12px 0 10px;
  }

  .hero p {
    font-size: 14px;
  }

  .lab-visual {
    display: none;
  }

  .patient-grid {
    grid-template-columns: 1fr;
  }

  .task-layout {
    grid-template-columns: 1fr;
  }

  .progress-track {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .progress-step {
    flex: 0 0 auto;
    min-width: 125px;
    scroll-snap-align: start;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  dialog {
    width: 95vw;
    padding: 18px;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn,
  .hero-actions .primary,
  .hero-actions .secondary {
    width: 100%;
  }

  .query-box {
    flex-direction: column;
  }

  .query-box .mini-btn {
    width: 100%;
    min-height: 42px;
  }

  .article-header {
    flex-direction: column;
    gap: 6px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .orbital::before,
  .orbital::after {
    animation: none !important;
  }

  .status-dot {
    animation: none !important;
  }
}