/* Shared phone/tablet layout. Keep dense desktop controls unchanged. */
.table-wrap:focus-visible, .terminal-table-wrap:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width: 780px) {
  html { scrollbar-gutter: auto; scroll-padding-top: 12px; }
  main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .top .top-actions { width: 100%; gap: 8px; }
  .top .page-nav { order: -1; width: 100%; }
  .page-nav { gap: 4px; flex-wrap:wrap; min-width:0; }
  .page-nav a, .page-nav button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 12px; }
  .top .page-nav > * { flex: 1; }
  .top-actions .account-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .header-icon, .logout-form .header-icon { width: 44px; height: 44px; min-height: 44px; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions .search { flex: 1; min-width: 0; }
  .toolbar-actions .search input { width: 100%; min-width: 0; }
  .search input, #favorite-search { min-height: 44px; font-size: 16px; }
  .add-symbol { min-height: 44px; }
  .picker-heading { align-items: start; }
  .picker-heading label { line-height: 1.5; }
  .sync-line { overflow-wrap: anywhere; }
  .table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  .table-wrap > table > thead th:first-child,
  .table-wrap #rows > tr > td:first-child { position: sticky; left: 0; background: var(--surface); border-right: 1px solid var(--line); }
  .table-wrap > table > thead th:first-child { z-index: 2; background: var(--control); }
  .table-wrap #rows > .favorite-row > td:first-child { background: var(--tint); }
  .table-wrap #rows > tr > td:first-child { padding-inline: 8px; }
  .table-wrap .symbol-line { gap: 2px; }
  .favorite-symbol, .copy-symbol, .zoom-symbol { width: 44px; min-width: 44px; height: 44px; }
  .table-wrap th button { min-height: 44px; }
  .table-scroll-hint { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

  .settings-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .settings-dialog .settings-heading { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 12px 16px; }
  .settings-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .settings-dialog .settings-section { padding: 16px; }
  .settings-dialog input:not([type=checkbox]):not([type=radio]), .settings-dialog select { min-height: 44px; font-size: 16px; }
  .settings-dialog button, .settings-dialog .telegram-toggle, .settings-dialog #telegram-timeframes label, .exchange-proxy-toggle, .alert-check { min-height: 44px; }
  .settings-dialog .value-filters { grid-template-columns: minmax(0, 1fr); }
  .settings-heading > div { min-width: 0; overflow-wrap: anywhere; }

  .chart-dialog .chart-watchlist { position: absolute; inset: 0 0 0 auto; max-width: calc(100% - 16px); z-index: 8; border: 1px solid var(--line); }
  .chart-dialog .watchlist-resize { display: none; }
  .chart-dialog .chart-watchlist td button { min-height: 44px; }
  .chart-dialog .chart-information button { min-width: 44px; min-height: 44px; }
  .trade-dialog input:not([type=checkbox]), .trade-dialog select { min-height: 44px; font-size: 16px; }
  .trade-dialog button { min-height: 44px; }
  .symbol-picker-list li { display: flex; align-items: center; min-height: 44px; }

  .auth-main { margin: 24px auto; padding: 20px; overflow-wrap: anywhere; }
  .auth-form input { min-height: 44px; font-size: 16px; }
  .auth-submit { min-height: 44px; }
  .system-header { flex-wrap: wrap; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .system-header nav { width: 100%; flex-wrap: wrap; gap: 4px 16px; }
  .system-header nav > * { display: inline-flex; align-items: center; min-height: 44px; }
  .system-header .top-actions { width: 100%; gap: 8px; }
  main.system-main { width: calc(100% - 24px); margin: 16px auto; padding: 16px; }
  .system-main .bot-row { grid-template-columns: minmax(0, 1fr); }
  .system-main .bot-row > .settings-hint { grid-column: auto; }
  .system-main input[type=password] { min-height: 44px; font-size: 16px; }
  .system-main button, .system-main .bot-clear { min-height: 44px; }
}

.table-scroll-hint { display: none; }
@media (max-width: 780px) { .table-scroll-hint { display: block; } }

@media (max-width: 540px) {
  /* Keep the pinned symbol narrow enough to leave room for the data columns. */
  .table-wrap #rows .symbol-line { display:grid; grid-template-columns:repeat(3,44px); gap:0; justify-content:start; padding-block:8px; }
  .table-wrap #rows .symbol-line .symbol { grid-column:1/-1; grid-row:1; padding:4px 0; }
  .table-wrap #rows .symbol-line button { grid-row:2; }
}

.chart-menu-toggle, .chart-mobile-menu, .chart-tool-label { display:none; }
.chart-dialog.chart-mobile .chart-panel { position:relative; padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right)); padding-top:max(6px,env(safe-area-inset-top)); }
.chart-dialog.chart-mobile .chart-toolbar { display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:6px; }
.chart-mobile .chart-toolbar .chart-symbol-picker { flex:1; width:0; min-width:0; max-width:none; }
.chart-mobile .chart-toolbar .symbol-picker-input { min-height:44px; font-size:16px; padding-inline:8px; }
.chart-dialog.chart-mobile .chart-controls { grid-column:auto; width:auto; margin:0; gap:6px; }
.chart-mobile .chart-toolbar :is(.chart-trade-button,.chart-manual-close-button), .chart-mobile .chart-controls button { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; }
.chart-mobile .chart-menu-toggle { display:grid; place-items:center; }
.chart-dialog.chart-mobile .chart-options { display:block; margin-bottom:6px; overflow:visible; }
.chart-mobile .chart-timeframes { display:flex; flex-wrap:nowrap; overflow:auto; overscroll-behavior-x:contain; gap:4px; }
.chart-mobile .chart-timeframes button { flex:1 0 44px; min-width:44px; min-height:44px; padding-inline:5px; }
.chart-mobile .chart-mobile-menu:not([hidden]) { position:absolute; display:grid; gap:14px; top:calc(max(6px,env(safe-area-inset-top)) + 50px); right:max(6px,env(safe-area-inset-right)); left:max(6px,env(safe-area-inset-left)); z-index:9; padding:12px; max-height:calc(100% - 68px); overflow:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px oklch(10% .01 255 / .3); }
.chart-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chart-menu-heading strong { font-size:14px; }
.chart-mobile-menu button { background:var(--control); color:var(--ink); border:1px solid var(--line); border-radius:4px; font:inherit; cursor:pointer; }
.chart-mobile-menu button:hover { background:var(--hover); }
.chart-menu-heading button { width:44px; height:44px; min-height:44px; font-size:24px; }
.chart-menu-caption { margin:0; font-size:12px; color:var(--muted); }
.chart-menu-tools { display:grid; gap:6px; }
.chart-dialog .chart-menu-tools button { display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:44px; height:auto; padding:8px 12px; color:var(--ink); background:var(--control); border:1px solid var(--line); border-radius:4px; font:inherit; }
.chart-mobile .chart-tool-label { display:inline; font-size:13px; }
.chart-mobile .chart-indicator-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; overflow:visible; }
.chart-dialog .chart-mobile-menu .chart-indicator-controls button { min-height:44px; padding:8px; font-size:13px; }
.chart-mobile-menu button[aria-pressed=true] { background:var(--tint); color:var(--ink); border-color:var(--blue); }
.chart-dialog.chart-mobile .chart-watchlist { position:absolute; inset:0 0 0 auto; z-index:8; width:70% !important; max-width:100%; border:1px solid var(--line); }
.chart-mobile .watchlist-resize { display:none; }
.chart-dialog.chart-mobile .chart-watchlist td button { min-height:44px; }
.chart-mobile .chart-timeframes { min-width:0; }
.chart-dialog.chart-mobile .chart-information button { min-width:44px; min-height:44px; }
.chart-mobile .trade-dialog input:not([type=checkbox]), .chart-mobile .trade-dialog select { min-height:44px; font-size:16px; }
.chart-mobile .trade-dialog button { min-height:44px; }
.chart-mobile .watchlist-heading { padding:8px; }
.chart-dialog.chart-mobile .watchlist-heading button, .chart-dialog.chart-mobile .watchlist-source { min-height:44px; }
.chart-dialog.chart-mobile .watchlist-source { font-size:16px; }
.chart-dialog.chart-mobile .chart-trade-status { max-height:48px; overflow:auto; padding:0 4px 4px; }
@media(max-height:500px) and (orientation:landscape) {
  .chart-dialog.chart-mobile .chart-toolbar { padding-right:0; }
  .chart-dialog.chart-mobile .chart-options { position:absolute; top:max(6px,env(safe-area-inset-top)); left:166px; right:256px; margin:0; }
  .chart-mobile .chart-toolbar .chart-symbol-picker { flex:0 1 150px; }
  .chart-mobile .chart-controls { margin-left:auto !important; }
  .chart-mobile .chart-toolbar :is(.chart-trade-button,.chart-manual-close-button) { position:absolute; top:max(6px,env(safe-area-inset-top)); right:calc(max(6px,env(safe-area-inset-right)) + 200px); margin:0; }
  .chart-mobile .chart-toolbar .chart-manual-close-button { right:calc(max(6px,env(safe-area-inset-right)) + 150px); }
  .chart-mobile .chart-timeframes button { flex:0 0 44px; }
}
.chart-dialog.chart-mobile .chart-toolbar:has(.chart-account-selector) { flex-wrap:wrap; }
.chart-dialog.chart-mobile .chart-toolbar .chart-account-selector { order:10; flex:1 0 100%; max-width:100%; min-height:36px; }