/* ==========================================================================
   Responsive — the watchlist turns into an overlay, then the toolbar compacts
   and the drawing rail steps aside on phones so the chart keeps the width.
   ========================================================================== */

@media (max-width: 1280px) {
  #profileStatus { display: none; }
}

/* The watchlist overlays the chart instead of taking width from it. */
@media (max-width: 1100px) {
  .right-panel {
    position: fixed;
    top: calc(var(--topbar-h) + var(--gap));
    right: var(--gap);
    bottom: 0;
    z-index: var(--z-menu);
    width: min(320px, calc(100vw - 16px));
    box-shadow: var(--sh-xl);
  }
}

@media (max-width: 900px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); }
  .auth-showcase { display: none; }
  .auth-panel { padding: var(--sp-8) var(--sp-5); }
  .tb-label { display: none; }
  .clock { display: none; }
  .clock + .bb-sep { display: none; }
}

/* Phones: one interval picker, no drawing rail, compact bottom bar. */
@media (max-width: 720px) {
  #intervals { display: none; }
  .interval-select { display: block; }
  /* Two charts side by side are too narrow on a phone: stack them instead. */
  .charts[data-layout="2v"] { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
  #wlAddTop, #fullscreenBtn { display: none; }
  .draw-rail { display: none; }
  .drawing-bar { max-width: calc(100% - 8px); overflow-x: auto; }
  .drawing-bar .db-title { display: none; }
  .legend { max-width: calc(100% - 70px); }
  .lg-title { font-size: var(--fs-lg); }

  .dlg { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
  .search-dlg { height: calc(100vh - 24px); }
  .dlg-head { padding: var(--sp-7) var(--sp-4) var(--sp-5) var(--sp-7); }
  .dlg-foot { padding: var(--sp-5) var(--sp-7); }
  .search-dlg .search-box, .ind-dlg .search-box { margin: 0 var(--sp-7) var(--sp-4); }
  .search-dlg .tabs, .ind-dlg .tabs { padding: 0 var(--sp-7); }
  .results li { padding: var(--sp-3) var(--sp-7); }
  .results .r-name { display: none; }
  .fields { padding: var(--sp-2) var(--sp-7) var(--sp-7); gap: var(--sp-4) var(--sp-5); }
  .fields input, .fields select { max-width: none; }
  .pine-dlg #pineSource { margin: 0 var(--sp-6) var(--sp-4); }
  .pine-error { padding: 0 var(--sp-6) var(--sp-4); }
  .about-content { padding: 0 var(--sp-7) var(--sp-7); }
  .toast { bottom: var(--sp-6); }
}

@media (max-width: 520px) {
  #templatesBtn, #settingsBtn { display: none; }
  .admin-table th:nth-child(2), .admin-table td:nth-child(2),
  .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; }
  .showcase-features { grid-template-columns: 1fr; }
}

/* Short screens: tighten the drawing rail so every tool stays in view. */
@media (max-height: 760px) {
  .rail-btn { height: 30px; }
  .rail-btn svg { width: 20px; height: 20px; }
  .rail-sep { margin: var(--sp-2) 0; }
}

/* Candle Data Pane responsive */
@media (max-width: 1400px) {
  .candle-data-pane { width: 320px; }
}

@media (max-width: 1100px) {
  .candle-data-pane {
    position: fixed;
    top: calc(var(--topbar-h) + var(--gap));
    right: var(--gap);
    bottom: 0;
    z-index: var(--z-menu);
    width: min(340px, calc(100vw - 16px));
    box-shadow: var(--sh-xl);
  }
  body.cdp-hidden .candle-data-pane { display: none !important; }
  body.has-candle-data .candle-data-pane { display: flex; }
}

@media (max-width: 720px) {
  .candle-data-pane {
    width: calc(100vw - 16px);
    right: 8px;
  }
  .cdp-table th,
  .cdp-table td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
  .cdp-select { width: 100%; }
}