/* Trade layout follows the viewport; keep readable text and exact numeric values. */
html.mex-fonts-spa .h5-trade .terminal-grid {
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
}
html.mex-fonts-spa .h5-trade :is(.order-book, .order-form) { min-width: 0; }
html.mex-fonts-spa .h5-trade .terminal-grid > .order-book {
  border-right: 1px solid #2a2c28; border-bottom: 0;
}
html.mex-fonts-spa .h5-trade :is(.book-head, .book-list button, .book-empty) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 8px;
}
html.mex-fonts-spa .h5-trade :is(.book-list button, .book-empty) { height: auto; min-height: 32px; padding: 4px 2px; }
html.mex-fonts-spa .h5-trade :is(.book-list button, .book-empty) > :is(em, span) {
  white-space: normal; overflow-wrap: anywhere; min-width: 0;
}
html.mex-fonts-spa .h5-trade .book-list button span { padding-left: 4px; }
html.mex-fonts-spa .h5-trade .price-band-card button { flex-wrap: wrap; gap: 2px 6px; }
html.mex-fonts-spa .h5-trade .price-band-card strong { margin-left: auto; max-width: 100%; overflow-wrap: anywhere; }
html.mex-fonts-spa .h5-trade .mex-order-kind-tabs > button { min-width: 0; }
html.mex-fonts-spa .h5-trade .order-form { display: flex; flex-direction: column; }
html.mex-fonts-spa .h5-trade .mex-daily-usage-card { order: 1; margin-top: 16px; }
html.mex-fonts-spa .h5-trade .market-price-card { display: flex; flex-wrap: wrap; gap: 4px 10px; }
html.mex-fonts-spa .h5-trade .market-reference-price { font-size: 16px; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  html.mex-fonts-spa .h5-trade .terminal-grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  html.mex-fonts-spa .h5-trade .terminal-grid > :is(.order-book, .order-form) { padding: 12px 7px 16px; }
  html.mex-fonts-spa .h5-trade .market-panel-tabs { height: auto; min-height: 44px; align-items: stretch; }
  html.mex-fonts-spa .h5-trade .market-panel-tabs button { white-space: normal; line-height: 1.4; padding: 4px 1px; }
  html.mex-fonts-spa .h5-trade .order-book .book-head { height: auto; min-height: 42px; gap: 2px; grid-template-columns: minmax(0, 1fr); }
  html.mex-fonts-spa .h5-trade .book-head span:last-child { text-align: right; }
  html.mex-fonts-spa .h5-trade :is(.book-list button, .book-empty) { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 44px; }
  html.mex-fonts-spa .h5-trade :is(.book-list button, .book-empty) > span { border-left: 0; padding-left: 0; }
  html.mex-fonts-spa .h5-trade .pair-summary { gap: 8px; padding: 12px; }
  html.mex-fonts-spa .h5-trade .market-view-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
  html.mex-fonts-spa .h5-trade .market-view-switch button { height: 36px; display: flex; flex-direction: row; gap: 6px; justify-content: center; align-items: center; }
  html.mex-fonts-spa .h5-trade .mex-order-kind-tabs { gap: 4px !important; margin: 8px 0 12px !important; }
  html.mex-fonts-spa .h5-trade .mex-order-kind-tabs > button { padding: 10px 1px !important; font-size: 14px; }
  html.mex-fonts-spa .h5-trade .number-input button { width: 22px; }
  html.mex-fonts-spa .h5-trade .number-input :is(input, span) { padding-left: 2px; padding-right: 2px; }
  html.mex-fonts-spa .h5-trade .price-band-card { padding: 7px 5px; }
  html.mex-fonts-spa .h5-trade .balance-row { gap: 3px; }
  html.mex-fonts-spa .h5-trade .balance-row strong { margin-left: auto; }
  html.mex-fonts-spa .h5-trade .total-row { gap: 4px; }
  html.mex-fonts-spa .h5-trade .total-row strong { margin-left: auto; }
  html.mex-fonts-spa .h5-trade .mex-daily-usage-card { padding: 8px; }
  html.mex-fonts-spa .h5-trade .mex-daily-usage-head { flex-wrap: wrap; gap: 2px; }
  html.mex-fonts-spa .h5-trade .mex-daily-usage-head strong { margin-left: auto; }
  html.mex-fonts-spa .h5-trade .latest-trades-head,
  html.mex-fonts-spa .h5-trade .latest-trades-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; height: auto; padding: 6px 0; text-align: right; }
  html.mex-fonts-spa .h5-trade .latest-trades-list > div > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  html.mex-fonts-spa .h5-trade .latest-trades-list time { text-align: left; }
}

/* Short mode labels keep comfortable touch targets on narrow phones. */
html.mex-fonts-spa .h5-trade .mex-order-kind-tabs > button { white-space: nowrap; min-height: 44px; line-height: 1.4; }
@media (max-width: 600px) {
 html.mex-fonts-spa .h5-trade .mex-order-kind-tabs { gap: 6px !important; }
 html.mex-fonts-spa .h5-trade .mex-order-kind-tabs > button { font-size: 16px; }
}

/* The book divider shares the midpoint of the two full-width view buttons. */
html.mex-fonts-spa .h5-trade .terminal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 361px) and (max-width: 600px) {
 html.mex-fonts-spa .h5-trade .order-book :is(.book-head,.book-list button,.book-empty) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 4px; }
 html.mex-fonts-spa .h5-trade .order-book .book-head { min-height: 32px; }
 html.mex-fonts-spa .h5-trade .order-book .book-head > span { white-space: nowrap; }
 html.mex-fonts-spa .h5-trade .order-book :is(.book-list button,.book-empty) { min-height: 32px; padding: 4px 0; }
 html.mex-fonts-spa .h5-trade .order-book :is(.book-list button,.book-empty) > span { padding-left: 0; }
}
@media (max-width: 600px) {
 html.mex-fonts-spa .h5-trade .market-panel-tabs { grid-template-columns: minmax(30px, 2fr) minmax(44px, 3fr) minmax(0, 4fr); }
}
@media (max-width: 360px) {
 html.mex-fonts-spa .h5-trade .number-input { position: relative; }
 html.mex-fonts-spa .h5-trade .number-input > span { position: absolute; right: 0; top: -25px; }
}