/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT — portrait phones only
   Loaded via <link id="mobile-css" media="(max-width:640px) and (orientation:portrait)">
   in index.html, so every rule below applies only when that query
   matches. Desktop and landscape are never affected.
   This file only restyles existing elements. It adds no IDs of its own
   (except #m-title, the hidden-on-desktop title) and never touches the
   render DOM (#chartsvg).
   Layout, top to bottom:  Preview  /  Controls (scrolls)  /  Export
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
html,body{
  height:100vh;height:100dvh;        /* dvh follows the browser's dynamic toolbar */
  overscroll-behavior:none;          /* no pull-to-refresh / bounce on the page */
}

/* ── Row 3: export bar. #topbar is the last child of <body> visually ── */
#topbar{
  order:2;
  height:auto;min-height:0;
  padding:8px 16px;
  border-bottom:none;
  border-top:1px solid var(--border);
}
#topbar .logo{display:none}          /* title lives in #m-title inside #lp */
#topbar .actions{width:100%}
#topbar .btn{width:100%;min-height:44px}

/* ── Rows 1 and 2: #main becomes a column ── */
#main{flex-direction:column;min-height:0}

/* Row 1: preview window, fixed height, always visible */
#rp{
  order:1;
  flex:0 0 auto;
  height:40vh;height:40dvh;
  position:relative;
}
#cvwrap{touch-action:none}           /* chart pinch zoom and two-finger pan in Mobile.js */
#footer-row{display:none}

/* Zoom bar: only the Fit button survives, overlaid on the preview corner */
#zb{
  position:absolute;top:8px;right:8px;
  height:auto;min-height:0;
  padding:0;gap:0;
  background:transparent;border-top:none;
}
#zb label,
#zb input,
#zb #zv,
#zb button:last-of-type{display:none}   /* keeps the first button (Fit) */
#zb .zt{
  min-width:44px;min-height:44px;
  font-size:12px;
  background:rgba(24,25,29,.85);
}

/* Row 2: controls, the only scrolling region */
#lp{
  order:2;
  width:100%;min-width:0;
  flex:1 1 auto;min-height:0;
  border-right:none;
  border-top:1px solid var(--border);
  overscroll-behavior-y:contain;     /* scroll never chains to the page */
}

/* Title, first item in the scrolling content */
#m-title{
  display:block;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
}

/* ── Touch targets ── */
.sh{min-height:44px}
.f input:not([type=range]),
.f select{min-height:44px}
.cr input[type=checkbox]{width:20px;height:20px}
.mfr input[type=checkbox]{width:20px;height:20px;margin-top:12px}
.sw{width:32px;height:32px}
.swr{gap:8px}