/* Mobile composition only. Loaded after the shared shell and desktop layout. */
@media (max-width: 760px) {
  body:not([data-route="live"]) .s5-shell {
    grid-template-rows: 32px minmax(0, 1fr) minmax(44px, auto) !important;
  }

  .global-bar { min-height: 0; }
  .brand-glyph { width: 22px; height: 22px; }
  .mobile-product-nav,
  body[data-route] .mobile-product-nav {
    height: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-product-nav a { min-height: 44px; font-size: 10px; }

  .s5-markets[data-power-mode="DESK"] {
    grid-template-rows: minmax(44px, auto) minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto) !important;
  }
  .s5-markets:not([data-power-mode="DESK"]) {
    grid-template-rows: minmax(44px, auto) minmax(44px, auto) minmax(0, 1fr) !important;
  }
  .s5-market-bar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .s5-market-bar button { min-width: 0; padding: 0 3px; }
  .s5-workspace-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s5-workspace-nav button {
    min-width: 0;
    min-height: 44px;
    padding: 2px;
    font-size: 9px;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .s5-mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    overflow: visible;
  }
  .s5-mobile-nav button { min-width: 0; min-height: 44px; padding: 0 1px; font-size: 9px; }

  /* Content owns its height; only its data region scrolls on short screens. */
  .s5-panel > header { height: auto; min-height: 44px; flex-basis: auto; }
  .s5-window-actions button { min-width: 44px; min-height: 44px; }
  .s5-chart > header > span { font-size: 9px; letter-spacing: 0; }
  .s5-chart > header > i { white-space: normal; line-height: 1.35; }
  .s5-panel.is-workstation-maximized { inset: 32px 0 calc(44px + env(safe-area-inset-bottom, 0px)); }
  .s5-chart-tools { flex-shrink: 0; scrollbar-width: thin; }
  .s5-chart-tools::-webkit-scrollbar { display: block; height: 3px; }
  .s5-chart-tools button { min-width: 36px; min-height: 44px; }
  .s5-chart .s5-chart-meta { height: auto; min-height: 30px; max-height: none; flex-shrink: 0; }
  .s5-readout { flex-shrink: 0; overflow-x: auto; }

  .s5-flow { display: flex; flex-direction: column; }
  .s5-power-head { height: auto; min-height: 44px; flex-shrink: 0; gap: 4px; padding-right: 0; }
  .s5-power-head > div { min-width: 0; height: auto; }
  .s5-power-head b { padding: 0 6px; }
  .s5-power-head strong { padding: 3px 5px; letter-spacing: 0; line-height: 1.35; }
  .s5-power-head nav { flex-shrink: 0; align-self: stretch; height: auto; }
  .s5-power-head button { min-height: 44px; min-width: 48px; }
  .s5-flow-mobile { height: auto; flex-shrink: 0; min-height: 44px; }
  .s5-flow-mobile button { min-width: 0; font-size: 10px; }
  .s5-flow-grid { flex: 1; height: auto; min-height: 0; }
  .s5-flow-grid > section > header {
    height: auto;
    min-height: 30px;
    flex-basis: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 3px 8px;
    padding: 5px 7px;
    line-height: 1.35;
  }
  .s5-flow-grid > section > div { flex: 1; }
  .s5-book-head,
  .s5-book-rows > div { grid-template-columns: 1fr .9fr 1fr .9fr; gap: 4px; }
  .s5-book-head { min-height: 26px; height: auto; font-size: 10px; }
  .s5-book-rows > div,
  .s5-flow-row { height: auto; min-height: 30px; font-size: 12px; font-variant-numeric: tabular-nums; }
  .s5-flow-row { gap: 4px; padding: 4px 6px; }
  .s5-flow-row small { font-size: 10px; }
  .s5-flow-grid footer {
    position: static;
    flex-shrink: 0;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 28px;
    padding: 5px 7px !important;
    gap: 4px 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .s5-capability-unavailable { height: auto; flex: 1; padding: 16px; line-height: 1.5; text-align: center; }
  [data-flow-metrics] dl,
  [data-flow-deriv] dl { font-size: 12px; line-height: 1.45; }
  [data-flow-metrics] dd,
  [data-flow-deriv] dd { overflow-wrap: anywhere; }

  /* Keep P1-P4 in their own always-visible row, independent of the presets. */
  .s5-multi { grid-template-rows: minmax(44px, auto) minmax(44px, auto) minmax(44px, auto) minmax(0, 1fr); }
  .s5-multi-mobile-tabs { flex-shrink: 0; }
  .s5-multi-mobile-tabs button { white-space: normal; overflow-wrap: anywhere; }
  .s5-multi-pane { grid-template-rows: minmax(46px, auto) minmax(46px, auto) minmax(0, 1fr); }
  .s5-multi-pane > header { scrollbar-width: thin; }
  .s5-multi-meta { height: auto; min-height: 46px; }
  .s5-multi-chart { overflow: auto; }
  .s5-multi-chart output { overflow-x: auto; }
  .s5-operator { grid-template-rows: minmax(44px, auto) minmax(44px, auto) minmax(0, 1fr); }
  .s5-operator-tabs button { min-height: 44px; }
  .intel-channel-body:has([data-newswire-empty]) { grid-template-rows: auto minmax(0,1fr); }
  .intel-channel-wire [data-newswire-empty] { min-height: 58px; height: auto; padding: 10px; font-size: 11px; line-height: 1.4; }
  .intel-channel-status article { font-size: 12px; }
  .intel-channel-status article small { font-size: 10px; line-height: 1.45; }
}

@media (max-width: 359px) {
  .s5-mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s5-workspace-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s5-book-rows > div { font-size: 11px; }
}