/* Paging and focused views for the dense Analyze screens. */
.welcome .days-help {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}
.welcome .days-help summary {
  width: fit-content;
  color: var(--text);
  cursor: pointer;
}
.welcome .days-help p {
  max-width: 560px;
  margin: 8px 0 0;
  line-height: 1.5;
}
.welcome.has-days .days-help { display: none; }
.day-records > .view-pages { margin: 0 0 8px; }
.analyze-tab-host { margin-bottom: 12px; }
.analyze-pane[hidden] { display: none !important; }
.analyze-session-picker { margin-bottom: 12px; }
.analyze-session-picker select { min-width: min(100%, 280px); }
.analyze-channel-table { min-width: 0; }
.td-side-tabs { margin-bottom: 6px; }
.td-side > .analyze-pane { min-width: 0; }
.td-side-disclosure > summary { display: none; }
.td-side-content { min-width: 0; }
@media (max-width: 900px) {
  .v-td .td-side-disclosure > summary {
    display: block;
    width: fit-content;
    margin: 0 0 8px;
    padding: 6px 9px;
    border: 1px solid var(--line2);
    border-radius: var(--radius-ctl);
    background: var(--panel2);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
  }
}
.cb-lap-picker > summary { display: none; }
.cb-lap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Time-distance: every chosen channel in one stack, one scroll. */
.td-traces { min-width: 0; }
.td-traces .stack { min-width: 0; }
/* Choose channels: quick choices over one Choice per channel */
.td-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.td-presets-l { margin-right: 4px; color: var(--hi); font: 600 11px var(--font); letter-spacing: 0.06em; }
.td-presets .btn.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--text); }
.td-chan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; }

@media (max-width: 600px) {
  .analyze-tab-host { margin-bottom: 8px; }
  .analyze-session-picker select { width: 100%; min-width: 0; }

  /* The label and lap-list control share a row; selected laps use the full
     width below it instead of keeping the removed disclosure's fixed sizing. */
  .app .comparebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
    padding: 4px 10px;
    position: relative;
  }
  .app .comparebar .cb-main {
    display: contents;
  }
  .app .comparebar .cb-lab, .app .comparebar .cb-empty { grid-column: 1; grid-row: 1; }
  .app .comparebar .cb-main > .btn, .app .comparebar .cb-hint { grid-column: 1 / -1; min-width: 0; white-space: normal; }
  .app .comparebar .cb-lap-chips {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    position: static;
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line2);
    border-radius: var(--radius-panel);
    background: var(--panel);
  }
  .app .comparebar .cb-lap-chips .chip { min-width: 0; justify-content: space-between; gap: 4px; padding: 4px; font-size: 11px; }
  .app .comparebar .cb-lap-chips .chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .app .comparebar .cb-lap-chips .chip-x { flex: none; }
  .app .comparebar .cb-lap-chips .chip .t { display: none; }
  .app .comparebar #pickerToggleBtn {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    padding: 6px 8px;
  }

  .title-row { padding: 6px 12px 4px; gap: 8px; }
  .title-row h1 { font-size: 18px; }

  .v-laps .sec { min-width: 0; }
  /* Dense evidence stays a compact table; its labelled region scrolls on
     narrow screens. Card conversion made each lap/channel a tall page. */
  .v-laps .analyze-table-wrap,
  .v-logsheet [data-panel="channels"] .analyze-table-wrap { overflow-x: auto; max-width: 100%; }
  .v-laps table.t, .v-logsheet [data-panel="channels"] table.t { width: max-content; min-width: 100%; }
  .v-laps table.t th, .v-laps table.t td,
  .v-logsheet [data-panel="channels"] th, .v-logsheet [data-panel="channels"] td { padding: 8px; white-space: nowrap; }
  .v-laps table.t tr[data-key] { height: 44px; }
  .v-laps table.t tr > :first-child,
  .v-logsheet [data-panel="channels"] tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
  .v-laps table.t tr.sess > :first-child { position: static; }
  .v-logsheet [data-panel="details"] table.t { display: block; width: 100%; overflow: visible; }
  .v-logsheet [data-panel="details"] tbody { display: grid; gap: 4px; }
  .v-logsheet [data-panel="details"] tr { display: grid; grid-template-columns: minmax(92px, 38%) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .v-logsheet [data-panel="details"] td { height: auto; min-width: 0; padding: 5px 6px; white-space: normal; overflow-wrap: anywhere; }
  .v-td [data-panel="cursor"] table.t { display: table; width: 100%; font-size: 11px; }
  .v-td [data-panel="cursor"] td, .v-td [data-panel="cursor"] th { padding: 4px 2px; }
  /* the traces are the hero on a phone: they come first and fill the width at
     140px or more each, and the map (under them) is a modest 200px */
  .v-td .map { height: 200px !important; }
  .v-td .td-side,
  .v-td.narrow .td-side { display: block; }
  .v-td .td-side-disclosure:not([open]) > .td-side-content { display: none; }
}

.analyze-pane tr[hidden] { display: none !important; }
@media (max-width: 600px) {
  .app:not(.days-view) .title-row { padding: 6px 12px; gap: 4px; }
  .app:not(.days-view) .title-row h1 { margin: 0; line-height: 22px; }
  .app:not(.days-view) .title-row .meta { font-size: 10px; line-height: 14px; }
  .app:not(.days-view) .content { padding: 4px 12px 12px; }
  .v-laps .sec { margin-bottom: 8px; }
  .analyze-pane .view-pages, .v-laps > .analyze-pane > .view-pages { padding: 6px 0; }
}

@media (max-width: 600px) {
  .v-logsheet .sec { margin-bottom: 0; }
  .v-logsheet .sec-head { padding-bottom: 4px; }
  .v-logsheet [data-panel="channels"] tbody td { padding: 3px 7px; }
  .v-td > .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .v-td > .toolbar > .fld:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
  .v-td > .toolbar > .fld:nth-child(2) { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 8px; }
  .v-td > .toolbar > .zoom-fld { grid-column: 2; grid-row: 1; }
  .v-td #td-ch-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 600px) {
  .v-logsheet .analyze-tab-host { margin-bottom: 4px; }
  .app:not(.days-view) .content:has(.v-logsheet) { padding-bottom: 8px; }
}

.welcome.is-loading .lead,
.welcome.is-loading .days-help,
.welcome.is-loading .dropzone,
.welcome.is-loading .privacy { display: none; }
#daysStatus { min-height: 96px; color: var(--muted); padding: 24px 0; }
#daysStatus .btn { margin-left: 8px; }
.welcome.has-days .dl-bar .days-discover { margin: 0 auto 0 0; }
.rate-note { max-width: 70ch; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 6px 0 10px; }
.rate-unusual { color: var(--bad); }
.v-laps .analyze-table-wrap { max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
  .welcome.has-days .dl-bar .days-discover { order: 2; width: 100%; }
}

.nb-table tr > th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; max-width: min(190px, 42vw); white-space: normal; }

/* Lists scroll; paginate only beyond about 50 items (view-controls.js
   SCROLL_LIMIT). A list that is long but not paged scrolls in its own
   region, so the controls around it stay where they are and nothing gets a
   second scrollbar. */

/* The lap list scrolls inside its column: the heading above it and the delete
   action below stay put. The session picker rides at the top of the scroll. */
.picker-body { min-height: 160px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.picker-session { position: sticky; top: 0; z-index: 2; background: var(--panel); }
/* On a phone the list is a short sheet already capped at 65% of the screen,
   so the whole sheet scrolls and the laps get all of its height. */
@media (max-width: 600px) {
  .picker-body { min-height: auto; overflow-y: visible; }
  .picker-session { position: static; }
}

/* Laps & splits and the Log sheet fill the pane on a desktop. Their tables
   scroll in a region of their own under a header row that stays in view, with
   the pager (when there are more than 50 rows) pinned below it. Phones keep
   one page scroll instead, with a horizontal scroll for wide tables. */
@media (min-width: 601px) {
  .content:has(> :is(.v-laps, .v-logsheet)) { padding-bottom: 12px; }
  .v-laps, .v-logsheet { display: flex; flex-direction: column; height: 100%; min-height: 360px; }
  .v-laps > .analyze-pane:not([hidden]),
  .v-logsheet > .analyze-pane[data-panel="channels"]:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .v-laps [data-panel="theoretical"] > [data-theory]:not([hidden]),
  .v-laps [data-theory="rolling"] > .rolling,
  .v-logsheet .analyze-channel-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; margin-bottom: 0; }
  .v-laps .analyze-pane .analyze-table-wrap,
  .v-logsheet [data-panel="channels"] .analyze-table-wrap { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .v-laps .analyze-table-wrap > .sec { overflow: visible; margin-bottom: 0; }
  /* Borders do not travel with a sticky cell in a collapsed table, so the
     rule under the header row is drawn as an inset shadow instead. */
  .v-laps table.t th, .v-logsheet table.t th { z-index: 2; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line2); }
}

/* Your days: the days scroll in one list, group headings pinned, so the
   totals above and the drop zone below stay on screen. Phones scroll the page. */
@media (min-width: 601px) {
  .welcome-saved .day-records { max-height: max(240px, calc(100dvh - 420px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
  .welcome-saved .dl-group { position: sticky; top: 0; z-index: 3; margin: 0; padding: 12px 0 2px; background: var(--panel); }
  .welcome-saved .day-records > .view-pages { position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 8px 0 2px; background: var(--panel); border-top: 1px solid var(--line); }
}