/* Data coverage browser (full-screen mode of /hapi/plot).
 *
 * Written with the theme variables of plot.css alone (--fg --muted --bd --accent
 * --bg --card --input-bg --bg-soft --th-bg). The band colours are variables too,
 * because the canvas reads them with getComputedStyle.
 *
 * Everything stays inside #cov and overrides nothing on the plot page, so the
 * overlay can be split out into a page of its own.
 */
:root {
  --cov-bar:#1f6feb; --cov-bar-ext:#8a6d3b; --cov-row-alt:#f4f6f8;
  --cov-grid:#d6dde5; --cov-sel:#1f6feb; --cov-cur:#0a7d28;
  /* Shading for picked rows, and the colour of IDs already on a panel */
  --cov-pick:#e6f0fd; --cov-open:#0a7d28;
}
:root[data-theme="dark"] {
  --cov-bar:#4d8ee6; --cov-bar-ext:#b08d4a; --cov-row-alt:#1a1d20;
  --cov-grid:#3a4048; --cov-sel:#7fb2ff; --cov-cur:#62d283;
  --cov-pick:#1b2a3d; --cov-open:#62d283;
}

#cov {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column;
  font-family: system-ui, sans-serif;
}
#cov[hidden] { display: none; }
/* On iOS Safari a fixed inset:0 reaches under the browser toolbar and hides the
   footer, so follow dvh (the small viewport) where it is available. */
@supports (height: 100dvh) { #cov { height: 100dvh; } }

/* --- Heading --- */
.cov-head { flex: none; display: flex; align-items: baseline; gap: 12px;
            background: #0b3d6b; color: #fff; padding: 6px 16px; }
.cov-head h2 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.cov-head .cov-sub { font-size: .78rem; opacity: .85; min-width: 0; }
.cov-head .cov-x { margin-left: auto; align-self: center; font: inherit;
                   font-size: .78rem; padding: 3px 11px; cursor: pointer;
                   color: #fff; background: rgba(255,255,255,.12);
                   border: 1px solid rgba(255,255,255,.45); border-radius: 6px; }
.cov-head .cov-x:hover { background: rgba(255,255,255,.24);
                         border-color: rgba(255,255,255,.8); }

/* --- Caveat: "the files exist" is not "the values exist" --- */
.cov-note { flex: none; font-size: .75rem; color: var(--muted);
            padding: 4px 16px; border-bottom: 1px solid var(--bd);
            background: var(--bg-soft); }
.cov-note b { color: var(--fg); }

/* --- Filter row --- */
.cov-filters { flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px;
               align-items: flex-end; padding: 6px 16px;
               border-bottom: 1px solid var(--bd); }
.cov-filters .cov-ctl { display: flex; flex-direction: column; gap: 1px;
                        min-width: 0; }
.cov-filters label { font-size: .75rem; color: var(--muted); line-height: 1.25; }
.cov-filters input[type=search], .cov-filters select {
  font: inherit; font-size: .85rem; padding: 3px 7px;
  color: var(--fg); background: var(--input-bg);
  border: 1px solid var(--bd); border-radius: 4px; max-width: 100%; }
.cov-filters input[type=search] { min-width: 190px; }
.cov-filters label.cov-chk { display: flex; align-items: center; gap: 4px;
                             font-size: .8rem; color: var(--fg); padding: 3px 0; }
.cov-filters .cov-count { margin-left: auto; font-size: .78rem;
                          color: var(--muted); align-self: center; }
.cov-btn { font: inherit; font-size: .85rem; padding: 3px 10px; cursor: pointer;
           color: var(--fg); background: var(--card);
           border: 1px solid var(--bd); border-radius: 4px; }
.cov-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cov-btn:disabled { opacity: .5; cursor: default; }
.cov-btn.primary { color: #fff; background: var(--primary-bg);
                   border-color: var(--primary-bg); }
.cov-btn.primary:hover:not(:disabled) { background: var(--primary-hover);
                                        border-color: var(--primary-hover);
                                        color: #fff; }

/* --- Time axis (does not scroll) --- */
.cov-axis { flex: none; display: block; width: 100%; height: 30px;
            cursor: ew-resize; border-bottom: 1px solid var(--bd);
            touch-action: none; }        /* dragging pans; handled in JS */

/* --- Body: scrolls vertically. The canvas is stuck to the visible area and the
       spacer carries the full height (rows are virtualised; one canvas for the
       whole height would exceed the maximum canvas area). --- */
/* Chart frame; also the positioning context for the zoom buttons */
.cov-chart { flex: 1; min-height: 0; position: relative; display: flex; }
.cov-scroll { flex: 1; min-width: 0; min-height: 0;
              overflow-y: auto; overflow-x: hidden; position: relative; }
/* Zoom (+/-) sits in the corner of the chart. Keep the z-index above .cov-stick
   (the canvas, z-index 1): underneath it disappears into the bands. */
.cov-fab { position: absolute; right: 12px; bottom: 12px; z-index: 2;
           display: flex; gap: 4px; }
.cov-fab .cov-zb { background: var(--bg); border-color: var(--bd);
                   box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
/* Zero-height sticky anchor; the canvas is positioned out of it */
.cov-stick { position: sticky; top: 0; height: 0; z-index: 1; }
/* touch-action: vertical scrolling is left to the browser, and only horizontal
   drags (range selection) and two-finger pinch (zoom) are handled in JS. Without
   it the page scroll swallows the horizontal drag. */
.cov-stick canvas { position: absolute; top: 0; left: 0; display: block;
                    cursor: crosshair; touch-action: pan-y; }
.cov-spacer { width: 100%; }
.cov-empty { padding: 24px 16px; color: var(--muted); font-size: .9rem; }

/* --- Datasets to add as panels (a row of its own) --- */
.cov-picks { flex: none; display: flex; flex-wrap: wrap; gap: 6px 10px;
             align-items: center; padding: 5px 16px;
             border-top: 1px solid var(--bd); background: var(--card); }
.cov-picks[hidden] { display: none; }
.cov-picks .cov-pickmsg { font-size: .78rem; color: var(--muted); min-width: 0; }
.cov-picks .cov-pickmsg.warn { color: var(--err); }
.cov-picks label.cov-chk { display: flex; align-items: center; gap: 4px;
                           font-size: .8rem; color: var(--fg);
                           white-space: nowrap; }
.cov-picks .cov-apply { margin-left: auto; display: flex; gap: 8px; }
.cov-picks .cov-apply .cov-btn { padding: 5px 16px; }

/* --- Footer: chosen range and apply --- */
.cov-foot { flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px;
            align-items: flex-end; padding: 6px 16px;
            padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--bd); background: var(--bg-soft); }
.cov-foot .cov-ctl label { font-size: .75rem; color: var(--muted); }
.cov-foot input[type=datetime-local] {
  font: inherit; font-size: .85rem; padding: 3px 7px;
  color: var(--fg); background: var(--input-bg);
  border: 1px solid var(--bd); border-radius: 4px; }
.cov-foot .cov-len { font-size: .78rem; color: var(--muted); align-self: center; }
.cov-foot .cov-apply { margin-left: auto; display: flex; gap: 8px; }
.cov-foot .cov-apply .cov-btn { padding: 5px 16px; }

/* Narrow frames (phone, portrait): give the bands as much room as possible.
   Labels collapse and the control row scrolls sideways instead of wrapping. */
@media (max-width: 700px) {
  .cov-head { padding: 4px 10px; gap: 8px; }
  .cov-head h2 { font-size: .95rem; white-space: nowrap; }
  .cov-head .cov-sub { display: none; }    /* the bands show the fetch state */
  /* The caveat is not collapsed: it is set tighter and shown in full, since
     title text is unreadable on touch. */
  .cov-note { padding: 3px 10px; font-size: .68rem; line-height: 1.3; }
  /* Control row: wrapping would make four rows, so keep one row that scrolls
     sideways. The field labels move to placeholder and title. */
  .cov-filters { flex-wrap: nowrap; overflow-x: auto; align-items: center;
                 gap: 6px; padding: 5px 10px; }
  .cov-filters .cov-ctl { flex: none; }
  .cov-filters .cov-ctl > label { display: none; }
  .cov-filters input[type=search] { min-width: 120px; }
  .cov-filters select { max-width: 120px; }
  .cov-filters label.cov-chk { white-space: nowrap; }
  .cov-filters .cov-count { display: none; }
  .cov-axis { height: 26px; }
  /* Panel row: wrapping eats band height, so keep it on one tight row */
  .cov-picks { flex-wrap: nowrap; gap: 4px 6px; padding: 4px 10px; }
  .cov-picks .cov-pickmsg { font-size: .68rem; white-space: nowrap;
                            overflow: hidden; text-overflow: ellipsis; }
  /* What does not fit scrolls sideways, but the primary button is pinned to the
     edge so it cannot end up behind the scroll. */
  .cov-picks { overflow-x: auto; }
  .cov-picks .cov-btn { font-size: .78rem; padding: 3px 7px; white-space: nowrap; }
  /* The count is in the button name (Add 3 panels); show it only with a caveat */
  .cov-picks .cov-pickmsg { display: none; }
  /* The caveat is never collapsed (title text is unreadable on touch). If the
     width runs out the row scrolls, and the sticky button stays at the edge. */
  .cov-picks .cov-pickmsg.warn { display: block; font-size: .68rem;
                                 flex: none; white-space: nowrap; }
  /* Shorten the check label to "Replace" to fit one row without losing sense */
  .cov-picks label.cov-chk { font-size: .72rem; white-space: nowrap; }
  .cov-picks .cov-repl-more, .cov-picks .cov-all-more { display: none; }
  .cov-picks .cov-apply { position: sticky; right: 0; padding-left: 8px;
                          background: var(--card);
                          box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .45); }
  .cov-picks .cov-apply .cov-btn { padding: 3px 9px; }
  /* Footer: start and stop on the first row, length and apply on the second */
  .cov-foot { padding: 5px 10px; gap: 5px 8px;
              padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
  .cov-foot .cov-ctl { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .cov-foot .cov-ctl > label { display: none; }
  .cov-foot input[type=datetime-local] { width: 100%; min-width: 0;
                                         font-size: .8rem; padding: 3px 4px; }
  .cov-foot .cov-len { flex: 0 1 auto; }
  .cov-foot .cov-apply { margin-left: auto; }
}

.cov-filters .cov-zoom { display: flex; gap: 6px; }
.cov-btn.cov-zb { min-width: 34px; height: 32px; font-size: 1.05rem; line-height: 1; }