/* Two-column layout for the plot page (overrides loaded after plot.css):
   the controls in a resizable left sidebar, the figure in the right column. */

html, body { height: 100%; }
body { display: flex; flex-direction: column; }
/* The header and the time bar stay put; the columns share the rest of the height. */
header, #topbar { flex: none; }

/* Split the viewport left and right; each column scrolls on its own */
.wrap { flex: 1; min-height: 0; display: flex; padding: 0; }
#side { flex: none; width: clamp(340px, 42%, 700px); display: flex;
        flex-direction: column; min-height: 0; padding: 10px 12px; }
/* Drag handle for the sidebar width (it doubles as the border) */
#splitter { flex: none; width: 7px; cursor: col-resize;
            border-left: 1px solid var(--bd);
            touch-action: none; }   /* keep touch drags off page scrolling */
#splitter:hover, #splitter.dragging { border-left: 3px solid var(--accent); }
/* scrollbar-gutter always reserves the vertical scrollbar width: appearing
   later would narrow the column and leave the figure overflowing it. */
#plotarea { flex: 1; min-width: 0; overflow-y: auto; padding: 4px 10px;
            scrollbar-gutter: stable; }

/* The map picker is pinned to the top and scrolls inside its own block when it
   does not fit. Its default height is a clamp of three terms: a share of the
   viewport, a cap that always leaves room for one panel card plus the pinned
   bottom block, and a lower bound for short windows. Dragging #side-splitter
   overrides it with an inline max-height. */
#side-top { flex: none; overflow-y: auto;
            max-height: clamp(180px, 54%, calc(100% - 420px)); }
/* Border between the map block and the panel cards. Both scroll on their own and
   get cut mid-content, so the divider is a thick line, and that line is also the
   drag handle for the vertical split. */
#side-splitter { flex: none; height: 9px; margin-top: 8px; cursor: row-resize;
                 border-top: 2px solid var(--bd);
                 touch-action: none; }   /* keep touch drags off scrolling */
#side-splitter:hover, #side-splitter.dragging { border-top: 3px solid var(--accent); }
#side-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* + Add panel is pinned to the bottom so scrolling never hides it */
#side-bottom { flex: none; padding-top: 8px; border-top: 1px solid var(--bd); }
#side-bottom #add-panel { margin-top: 0; }

/* Reading order along the band: check the coverage, pick a range, download.
   Data availability leads the band and the bulk download is pushed to the end
   with margin-left:auto. */
#topbar .ctl.dl-all-ctl { margin-left: auto; }
/* Entry to the full-screen mode, so it is filled rather than outlined: an
   outline let it blend into the other buttons of the time bar. The navy is the
   one of the heading it opens. */
#topbar .ctl.cov button.avail { display: flex; align-items: center; gap: 7px;
    padding: 7px 16px; font-size: .95rem; font-weight: 600;
    color: #fff; background: var(--avail-bg); border-color: var(--avail-bg); }
#topbar .ctl.cov button.avail:hover { color: #fff;
    background: var(--avail-hover); border-color: var(--avail-hover); }
#topbar .ctl.cov button.avail svg { flex: none; }
#side .ctl { min-width: 0; }
#side .quick { flex-wrap: wrap; }

/* Drop the width rules inside panel cards so they fit the sidebar */
#side .ds-select { min-width: 0; width: 100%; }
#side .params { max-width: none; }
#side .facets select { max-width: 100%; }
#side .picker-body input[type=number] { width: 84px; }
#side .pk-sub { display: none; }   /* no width here for the sub-heading */

/* Plot side: toolbar (PNG download spelled out). Height above the figure is
   scarce, so it stays on one row. */
#plot-tools { display: flex; align-items: center; gap: 4px 12px;
              margin: 4px 2px 2px; flex-wrap: wrap; }
#plot-tools .hint { margin: 0; }
#plot-tools .ph-lab { font-size: .75rem; color: var(--muted); margin-left: 4px; }
/* Usage hints only when there is width to spare (the mode bar covers them) */
#plot-tools .tips { flex: 1 1 auto; min-width: 0; overflow: hidden;
                    white-space: nowrap; text-overflow: ellipsis; }
/* Status goes to the end of the row and takes no space when empty. Long errors
   wrap: nowrap would give #plotarea a horizontal scrollbar. */
#plot-tools #status { margin: 0 0 0 auto; min-width: 0; text-align: right;
                      overflow-wrap: anywhere; }
#plot-tools #status:empty { display: none; }
#zoom-hint { margin: 2px 4px; }

/* Narrow screens (portrait tablet, phone) fall back to a single column */
@media (max-width: 860px) {
  html, body { height: auto; }
  body { display: block; }
  .wrap { display: block; padding: 10px 12px; }
  #topbar { padding: 10px 12px; }
  #topbar .ctl.cov { margin-left: 0; flex-basis: 100%; }
  #topbar .ctl.cov button.avail { width: 100%; justify-content: center; }
  #topbar .ctl.dl-all-ctl { margin-left: 0; }
  #side { width: auto !important; display: block; padding: 0; }
  #splitter, #side-splitter { display: none; }
  /* A single column has no vertical split, so drop the inline max-height a drag
     may have left behind (it needs !important to lose) */
  #side-top { max-height: none !important; overflow: visible; }
  #side-scroll { overflow: visible; }
  #side-bottom { border-top: 0; }
  #plotarea { overflow: visible; padding: 0; }
}