/* Touch-device overrides. Width drives the layout; coarse pointer + no hover
   keeps the desktop site unchanged even when a computer window is narrow. */
@media (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  body { -webkit-text-size-adjust: 100%; }
  .main-container {
    padding: 12px max(12px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  /* A single scrollable row leaves the screen available for charts. */
  .navbar {
    gap: 20px;
    padding: 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .navbar > * { flex-shrink: 0; white-space: nowrap; }
  .nav-brand { font-size: 13px; margin-right: 0; }
  .nav-link, .nav-auth-link, .nav-auth-logout {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-auth { padding-right: 12px; }

  /* Tall filter panels must scroll away instead of covering the charts. */
  .controls-panel, .filter-controls-bar, .alerts-controls-bar, .strat-col-right {
    position: static;
  }
  .controls-panel { gap: 12px; padding: 12px; }
  .controls-panel > .control-group {
    flex: 1 1 145px;
    min-width: 0;
    margin-left: 0 !important;
  }
  .control-group > select, .control-group > input:not([type="checkbox"]):not([type="range"]) {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
  /* 16px prevents Safari's focus zoom; 44px makes controls easy to tap. */
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea {
    font-size: 16px !important;
    min-height: 44px;
    max-width: 100%;
  }
  .btn-primary, .btn-secondary, .btn-danger, .msel-btn,
  .btn-overlay-toggle, .num-stepper__btn, .combo-opt {
    min-height: 44px;
  }
  .btn-secondary { display: inline-flex; align-items: center; justify-content: center; }
  .num-stepper, .num-stepper--sm { height: 44px; }
  .num-stepper__btn, .num-stepper--sm .num-stepper__btn { width: 36px; }
  .control-group > div { min-height: 44px; height: auto !important; flex-wrap: wrap; }
  .control-group:has(#spx-auto) { flex-basis: 100%; }
  #spx-auto-hint { white-space: normal !important; }
  #spx-dot-cap { flex: 1; min-width: 80px; min-height: 44px; }
  .status-bar { height: auto; min-height: 28px; white-space: normal; overflow-wrap: anywhere; }
  .filter-controls-row, .alerts-controls-bar { gap: 10px; }
  .filter-controls-row .control-group, .alerts-controls-bar .control-group {
    flex: 1 1 140px;
    align-items: stretch;
    min-width: 0;
  }
  .filter-status-bar, .filter-macro-banner { flex-wrap: wrap; }
  .filter-log { overflow-x: auto; }
  .msel, .msel-btn { width: 100%; max-width: 100%; }
  .msel-drop label { min-height: 44px; }

  /* SPX Live follows the phone reading order. Six tracks make the requested
     1/2/3-panel rows exact while preserving equal panel and plot heights. */
  .spx-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
  }
  .spx-grid > * {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }
  .spx-panel--scatter     { order: 1; }
  .spx-panel--aggregate   { order: 2; }
  .spx-panel--primary-gex,
  .spx-panel--primary-volume,
  .spx-panel--primary-oi {
    order: 3;
    grid-column: span 2 !important;
  }
  #spx-premium-ts-panel { order: 4; }
  .spx-panel--alerts    { order: 5; }
  #spx-position-signals { order: 6; }
  #spx-strike-row       { order: 7; }
  #spx-flow-row         { order: 8; }

  /* Keep the three primary strike panels pixel-aligned. All headings reserve
     the same two-line height and all charts already share --spx-row1-h. */
  .spx-panel--primary-gex > h3,
  .spx-panel--primary-volume > h3,
  .spx-panel--primary-oi > h3 {
    height: 34px;
    line-height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spx-strike-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
  }
  #spx-flow-panel,
  #spx-strike-row > .spx-strike-panel:nth-child(2) {
    grid-column: span 3 !important;
  }
  #spx-strike-row > .spx-strike-panel:nth-child(3),
  #spx-strike-row > .spx-strike-panel:nth-child(4),
  #spx-strike-row > .spx-strike-panel:nth-child(5) {
    grid-column: span 2 !important;
  }
  /* These are duplicates of the primary Volume/OI row immediately above. */
  #spx-strike-row > .spx-strike-panel:nth-child(6),
  #spx-strike-row > .spx-strike-panel:nth-child(7) {
    display: none;
  }

  .spx-row3-split, .spx-l2-grid, .live-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 12px;
  }
  .spx-row3-split > *, .live-grid > * {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }
  .spx-panel { padding: 10px 8px; }
  .spx-grid {
    --spx-row1-h: clamp(380px, 48vw, 520px);
    --spx-row3-h: clamp(520px, 60vw, 660px);
  }
  .spx-strike-row { --spx-strike-row-h: clamp(520px, 60vw, 660px); }
  .spx-strike-panel > h3 {
    height: 64px;
    line-height: 20px;
    white-space: normal;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .spx-h3-select { vertical-align: middle; margin-left: 6px; min-width: 80px; }
  #spx-premium-ts-panel { height: clamp(380px, 46vw, 520px); }
  .spx-premium-raw-title, #spx-chart-premium-ts-raw { display: none; }
  .spx-alert-list { height: 180px; }
  .spx-alert-item { flex-wrap: wrap; font-size: 12px; line-height: 1.5; }
  .spx-pos-meta { font-size: 10px; }
  .spx-position-signals { grid-column: 1 / -1; font-size: 10px; }
  .spx-position-signal-label { flex-basis: 100%; }
  #spx-l2-section { margin-top: 12px; }
  .spx-l2-headline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 10px 8px;
    background: #1a1d27;
    border: 1px solid #2a2d3e;
    border-radius: 8px;
  }
  .spx-l2-headline + .spx-l2-headline { margin-top: 8px; }
  .spx-l2-fact {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .spx-l2-fact-v { max-width: 100%; overflow-wrap: anywhere; }
  .spx-l2-headline .spx-l2-fact:last-child { grid-column: 1 / -1; }
  .chart-wrap, .chart-container, .row-group__charts, .row-group__panels { min-width: 0; }
  .chart-title, .chart-section-label, .overlay-toggle-group, .glossary-toggle {
    flex-wrap: wrap;
  }
  .chart-section-label { line-height: 1.5; }
  .overlay-toggle-group { margin-left: 0; }
  .chart-full-btn { min-width: 44px; min-height: 44px; }
  .chart-container--fullscreen { inset: 8px !important; }
  #chart-exit-btn { min-height: 44px; top: 8px; right: 8px; }
  .gex-panel, .glossary-body { padding-left: 10px; padding-right: 10px; }
  .gex-summary-row { gap: 6px 16px; }
  .ki-header-row, .ki-row { grid-template-columns: 70px minmax(0, 1fr); }
  .ki-cell { overflow-wrap: anywhere; }

  /* Keep wide data inside its own scroller, never widen the whole page. */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    min-width: 0 !important;
    overscroll-behavior-x: contain;
  }
  .pipe-table-wrap, .acct-table-wrap { min-width: 0; max-width: 100%; }
  .settings-tabs, .datasrc-tabs, .pipe-tabs, .acct-tabs, .joke-tabs {
    overflow-x: auto;
    max-width: 100%;
  }
  .settings-tabs > *, .datasrc-tabs > *, .pipe-tabs > *, .acct-tabs > *, .joke-tabs > * {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
  }
  .detail-grid, .hr-scenario-row, .hr-gs-grid, .pipe-daily-grid, .strat-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
  .pipe-daily-grid > *, .strat-two-col > * { min-width: 0; }
  .settings-card { padding: 14px 12px; overflow-wrap: anywhere; }
  .settings-tab-panel [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .settings-card #ticker-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sched-controls, .pipe-section-header, .profile-fact { flex-wrap: wrap; gap: 6px; }
  .macro-signal-card { min-width: 0; flex-basis: 100%; }
  .profile-wrap { padding: 0 12px; margin-top: 20px; }
  .profile-card { padding: 20px 16px; }
  .login-wrap { margin: 24px auto; max-width: calc(100% - 24px); }
  .version-footer { position: static; width: fit-content; margin: 12px 12px 8px auto; }
}

/* Compact phones: preserve plot area by tightening only the gutters. */
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
  .main-container {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .spx-grid, .spx-strike-row { gap: 8px; }
  .spx-panel { padding-left: 6px; padding-right: 6px; }
  .controls-panel { gap: 8px; padding: 10px; }
  .controls-panel > .control-group { flex-basis: 135px; }
}

/* iPad and phone landscape: use the extra width for larger plots and put the
   two narrative panels side by side. The main SPX ordering stays unchanged. */
@media (min-width: 700px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .main-container {
    padding: 16px max(20px, env(safe-area-inset-right))
      max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .navbar { gap: 24px; padding-left: 20px; padding-right: 20px; }
  .controls-panel { gap: 14px; padding: 14px 16px; }
  .controls-panel > .control-group { flex-basis: 170px; }

  .spx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .spx-panel--primary-gex,
  .spx-panel--primary-volume,
  .spx-panel--primary-oi { grid-column: span 4 !important; }
  #spx-premium-ts-panel { grid-column: span 8 !important; }
  .spx-panel--alerts {
    grid-column: span 4 !important;
    height: clamp(380px, 46vw, 520px);
    display: flex;
    flex-direction: column;
  }
  .spx-panel--alerts .spx-alert-list { flex: 1; height: auto; }
  .spx-panel h3 { font-size: 12px; }
  .spx-l2-headline { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Daily and Aggregate get tablet-scale charts and retain multi-column
     knowledge rows where the text has enough room. */
  .chart-container { height: 390px; }
  .chart-container--stacked { height: 440px; }
  .chart-container--tall { height: 500px; }
  .chart-container--short { height: 300px; }
  .chart-container--compact { height: 190px; }
  .ki-header-row, .ki-row { grid-template-columns: 90px 0.7fr 1.5fr 1.5fr; }
}