/**
 * Shared mobile layer for tool pages.
 *
 * Load LAST in <head> (after the page's inline <style>) so it wins ties:
 *   <link rel="stylesheet" href="/css/mobile.css">
 *   <script src="/js/mobile.js" defer></script>   (optional companion)
 *
 * Desktop pages follow a "fit on one screen, no page scroll" contract: html/body
 * are height:100% + overflow:hidden and every panel is a flex column whose
 * lists scroll inside their own frame. On a phone that contract starves the
 * lists (a 1000-row table gets 7px of height once the header and controls
 * have eaten the viewport), so below the breakpoint we invert it: the PAGE
 * scrolls, every panel is content-height, and only very long lists keep an
 * internal scroll (capped by mobile.js).
 *
 * Everything in here is inside one media query and touches only shared
 * structure (page/height chain, header, ratio overlay, form controls, tables).
 * Per-page layout (multi-column control panels, fixed grid columns) is tuned
 * in each page's own <style> under the same @media block.
 */

@media (max-width: 768px) {
  /* --- Height chain: page scrolls, panels are content-height ------------- */
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    padding: 8px !important;
    display: block !important;
  }

  .container,
  .shell-content {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* --- Header ------------------------------------------------------------ */
  header {
    margin-bottom: 10px;
  }

  .header-top {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
  }

  /* The desktop rule reserves 460px on the right for the pinned overlay. */
  .header-row {
    padding-right: 0 !important;
    gap: 10px !important;
    margin-bottom: 2px;
  }

  .header-icon {
    width: 36px !important;
    height: 36px !important;
  }

  h1 {
    font-size: 22px !important;
    line-height: 1.15;
  }

  .subtitle {
    font-size: 12px !important;
    line-height: 1.35;
  }

  .back-link {
    font-size: 13px;
    padding: 6px 0;
    margin-bottom: 4px !important;
  }

  /* Ratio overlay: unpin from the corner and flow under the title. */
  #ratio-overlay {
    position: static !important;
    align-self: flex-start;
    margin: 4px 0 2px;
    max-width: 100%;
  }

  .header-right {
    flex-wrap: wrap;
    padding: 5px 8px !important;
    gap: 4px 8px !important;
    max-width: 100%;
  }

  .header-right .ratio-divider {
    display: none;
  }

  /* "League" is implied by the select; dropping the word keeps the whole
     overlay (league + div + mirror + sync) on one line at 390px. */
  .header-right .league-selector label {
    display: none;
  }

  .header-right .ratio-input .ratio-unit {
    font-size: 12px;
  }

  /* --- Form controls: 16px kills iOS focus-zoom, min-height gives a thumb
         target. Checkboxes/radios/ranges keep their native size. ----------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 36px;
  }

  button,
  .btn,
  [role="button"] {
    min-height: 36px;
    font-size: 14px;
  }

  /* Ratio overlay inputs are width:4ch content-box; keep them compact. */
  .ratio-input input {
    min-height: 30px;
    font-size: 16px !important;
    padding: 2px 4px !important;
  }

  .ratio-input label {
    font-size: 12px !important;
  }

  .ratio-refresh,
  .ratio-settings {
    min-height: 30px;
  }

  /* --- Tabs / button rows wrap instead of overflowing --------------------- */
  .tabs,
  .tab-bar,
  .tab-nav,
  .controls,
  .control-row,
  .toolbar,
  .button-row,
  .filter-row,
  .info-buttons {
    flex-wrap: wrap;
  }

  /* --- Modals: full-width sheets, scroll inside. (.modal-overlay is the
         fixed backdrop, .modal the box, .modal-content the body.) --------- */
  .modal-overlay .modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto;
  }

  /* --- Tables: keep them scrollable sideways inside their frame ------------ */
  .table-container,
  .table-wrap,
  .table-wrapper,
  .table-scroll,
  .scroll-container,
  .breakdown-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 6px 6px;
  }

  /* --- Misc --------------------------------------------------------------- */
  .stats-grid,
  .stat-cards,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .stat-value {
    font-size: 18px !important;
  }

  /* Elements pinned to the corner of the viewport on desktop (legends, floating
     status) collide with content on a phone. */
  .floating-status,
  .corner-badge {
    position: static !important;
  }
}
