/**
 * Mobile-first UX: larger tap targets (min 44px), sticky results on small screens.
 */

@media (max-width: 768px) {
  /* Tap targets: at least 44px for touch (WCAG / Apple HIG) */
  .btn,
  .main-content .nav-item,
  .quick-action-card,
  .sidebar-mode-item,
  .sidebar .btn,
  .sidebar-action,
  #calculator .calc-content button:not(.sidebar-calc-btn),
  #calculator .calc-content .btn,
  .bolt-circle-unit-btn,
  .unit-toggle-btn,
  input[type="submit"],
  button[type="submit"] {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }

  .sidebar-mode-item {
    padding: 0.6rem 0.75rem;
  }

  .quick-action-card {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }

  /* Sticky results panel so results stay visible when scrolling on small screens */
  #calculator .calc-content .results-section,
  #calculator .calc-content .result-section,
  #calculator .calc-content [class*="results-section"],
  #calculator .calc-content div[id$="Results"] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-secondary, var(--background));
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* Feeds & Speeds and other modes that put results in a dedicated div */
  #feedsSpeedsResults,
  #findPinsResults,
  #boltCircleResults,
  #tapModeResults {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-secondary, var(--background));
    padding: 0.5rem 0 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}