/* The overview's two drill-downs, layered over overview.css.
 *
 * overview.css already carries the filter bar, tiles, chart primitives and
 * table styling; this adds only what is new here. Loading both is deliberate:
 * the pages are meant to look like one report, and duplicating those rules to
 * keep the files independent is how two pages drift apart.
 */

.viz-root {
  /* Three places on a journey, and two vehicle series. Distinguishable by
     lightness as well as hue, so the lines stay separable in greyscale and
     for the most common colour deficiencies. Each also differs by something
     other than colour where it matters -- the split bars carry their
     percentage as text. */
  --band-0: #cf5f12;
  --band-1: #3c6e8f;
  --band-2: #7a5ea8;
  --seg-early: #3c6e8f;
  --seg-on-time: #0ca30c;
  --seg-late: #b42318;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    --band-0: #ff8f45;
    --band-1: #7fb6d9;
    --band-2: #b79ae0;
    --seg-early: #7fb6d9;
    --seg-on-time: #3ecb3e;
    --seg-late: #f97066;
  }
}

:root[data-theme="dark"] .viz-root {
  --band-0: #ff8f45;
  --band-1: #7fb6d9;
  --band-2: #b79ae0;
  --seg-early: #7fb6d9;
  --seg-on-time: #3ecb3e;
  --seg-late: #f97066;
}

.swatch-band-0 { background: var(--band-0); }
.swatch-band-1 { background: var(--band-1); }
.swatch-band-2 { background: var(--band-2); }

.band-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.band-line-0 { stroke: var(--band-0); }
.band-line-1 { stroke: var(--band-1); }
.band-line-2 { stroke: var(--band-2); }

/* ---------- Early / on-time / late bars ---------- */

.split-bars {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}

.split-row {
  min-width: 0;
}

.split-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.split-bar {
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--grid);
}

.split-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  /* The label is only drawn when the segment is wide enough to hold it, but
     a segment that is nearly wide enough should clip rather than spill. */
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.seg-early { background: var(--seg-early); }
.seg-on-time { background: var(--seg-on-time); }
.seg-late { background: var(--seg-late); }

.split-key {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.coverage-note {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-1);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.inline-filter {
  margin-bottom: 16px;
}

/* ---------- Vehicle diagrams ---------- */

.diagram {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: 14px 16px;
  /* A long day of bars scrolls inside the box, never sideways off the page. */
  overflow-x: auto;
}

.diagram-scale {
  position: relative;
  height: 18px;
  /* Lines up with .diagram-track, which starts after the name column. */
  margin-left: 108px;
  margin-right: 42px;
  min-width: 320px;
}

.diagram-hour {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.diagram-row {
  display: flex;
  align-items: center;
  gap: 0;
  height: 17px;
  min-width: 454px;
}

.diagram-name {
  width: 108px;
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
  box-sizing: border-box;
}

.diagram-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 11px;
  background: var(--page);
  border-radius: 3px;
}

.diagram-bar {
  position: absolute;
  top: 0;
  height: 11px;
  border-radius: 2px;
  background: var(--band-1);
}

.diagram-bar.dir-in {
  background: var(--band-0);
}

.diagram-count {
  width: 42px;
  flex: none;
  text-align: right;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}