/* css/charts-timeline.css — dayTimeline (.vz-daytl) and eventTimeline (.vz-evtl).
   Every value resolves from css/tokens.css. Scoped: nothing here applies outside
   .vz-daytl / .vz-evtl. See js/charts/timeline.js and js/charts/API.md. */

.vz-daytl,.vz-evtl{
  --vz-accent:var(--brand);
  --vz-card:var(--bg-1);
  --vz-pad:26px;
  position:relative;
  display:block; width:100%; max-width:100%;
  background:var(--vz-card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-1);
  padding:22px var(--vz-pad) 16px;
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  overflow:hidden;
}

/* ── header ─────────────────────────────────────────────────────────── */
.vz-daytl .dt-head,.vz-evtl .ev-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin:0 0 20px;
}
.vz-daytl .dt-title,.vz-evtl .ev-title{
  margin:0; font-size:15px; font-weight:600; letter-spacing:-.012em; color:var(--ink);
}
.vz-daytl .dt-sub,.vz-evtl .ev-sub{
  margin:4px 0 0; font-size:12px; color:var(--ink-3); letter-spacing:-.002em;
}

/* ── legend ─────────────────────────────────────────────────────────── */
.vz-daytl .dt-legend,.vz-evtl .ev-legend{
  list-style:none; margin:2px 0 0; padding:0;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.vz-daytl .dt-lg,.vz-evtl .ev-lg{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; color:var(--ink-3); white-space:nowrap;
}
.vz-daytl .dt-lg-sw{
  width:20px; height:11px; border-radius:4px; flex:0 0 auto;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.vz-daytl .dt-lg.is-ref .dt-lg-sw{
  background:color-mix(in srgb,var(--vz-accent) 13%,#fff);
  border-color:color-mix(in srgb,var(--vz-accent) 34%,#fff);
}
.vz-daytl .dt-lg.is-leak .dt-lg-sw{
  background:color-mix(in srgb,var(--neg) 17%,#fff);
  border-color:color-mix(in srgb,var(--neg) 34%,#fff);
  box-shadow:inset 3px 0 0 var(--neg);
}
.vz-daytl .dt-lg.is-dev .dt-lg-sw{
  border-radius:2px; border:1.5px dashed var(--ink-4);
  background:repeating-linear-gradient(-45deg,
    rgba(73,77,85,.26) 0 2px, transparent 2px 5px), #fff;
}

/* ── frame: pinned label column + horizontal scroller ───────────────── */
.vz-daytl .dt-frame{display:flex; align-items:stretch; min-width:0}
.vz-daytl .dt-labels{
  flex:0 0 178px; width:178px; padding-right:16px;
  border-right:1px solid var(--line);
}
.vz-daytl .dt-lhead{display:flex; align-items:flex-start; padding-top:2px}
.vz-daytl .dt-lhead-t{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); font-weight:600;
}
.vz-daytl .dt-lrow{position:relative; margin-bottom:16px}
.vz-daytl .dt-lbox{
  position:absolute; left:0; right:0; bottom:0; height:var(--laneh,40px);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.vz-daytl .dt-lname{
  display:block; font-size:12.5px; line-height:1.25; font-weight:600; color:var(--ink);
  letter-spacing:-.008em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vz-daytl .dt-lmeta{
  display:block; font-size:10.5px; line-height:1.25; color:var(--ink-4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vz-daytl .dt-lrow.is-ref .dt-lname{font-weight:500; color:var(--ink-3); font-size:11.5px}
.vz-daytl .dt-lrow.is-ref .dt-lbox{gap:0}

.vz-daytl .dt-scroll,.vz-evtl .ev-scroll{
  flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:visible;
  padding:0 0 6px 16px; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.vz-evtl .ev-scroll{padding-left:0}
.vz-daytl .dt-scroll::-webkit-scrollbar,.vz-evtl .ev-scroll::-webkit-scrollbar{height:8px}
.vz-daytl .dt-scroll::-webkit-scrollbar-track,.vz-evtl .ev-scroll::-webkit-scrollbar-track{background:transparent}
.vz-daytl .dt-scroll::-webkit-scrollbar-thumb,.vz-evtl .ev-scroll::-webkit-scrollbar-thumb{
  background:var(--line-2); border-radius:999px;
}
.vz-daytl .dt-scroll:focus-visible,.vz-evtl .ev-scroll:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:8px;
}
.vz-daytl .dt-plot,.vz-evtl .ev-plot{position:relative}

/* ── time axis ──────────────────────────────────────────────────────── */
.vz-daytl .dt-axis{position:relative; height:22px}
.vz-daytl .dt-tick{position:absolute; top:0; bottom:0}
.vz-daytl .dt-tick i{
  position:absolute; left:0; bottom:0; width:1px; height:5px;
  background:var(--line-2);
}
.vz-daytl .dt-tick b{
  position:absolute; left:0; top:1px; padding-left:6px;
  font-size:10.5px; font-weight:500; color:var(--ink-4); letter-spacing:.02em;
}
.vz-daytl .dt-tick:last-child b{padding-left:0; padding-right:6px; transform:translateX(-100%)}
.vz-daytl .dt-tick:last-child i{margin-left:-1px}
.vz-daytl .dt-tick.is-minor i{height:3px; background:var(--line)}

/* ── moments on the axis (shift start, break, huddle) ───────────────── */
.vz-daytl .dt-moments{position:relative; height:calc(var(--lanes,1) * 22px + 6px)}
.vz-daytl .dt-moment.is-lead{transform:none}
.vz-daytl .dt-moment.is-trail{transform:translateX(-100%)}
.vz-daytl .dt-moment{
  position:absolute; top:calc(var(--lane,0) * 22px); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; height:18px;
  padding:0 8px; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line);
  font-size:10px; white-space:nowrap;
}
.vz-daytl .dt-moment b{font-weight:600; color:var(--ink-2)}
.vz-daytl .dt-moment-t{font-style:normal; color:var(--ink-4)}
.vz-daytl .dt-moment.m-start,.vz-daytl .dt-moment.m-end{
  border-color:color-mix(in srgb,var(--vz-accent) 30%,#fff);
  background:color-mix(in srgb,var(--vz-accent) 7%,#fff);
}
.vz-daytl .dt-moment.m-start b,.vz-daytl .dt-moment.m-end b{color:var(--brand-dark)}

/* ── plot body, hour rules, moment lines ────────────────────────────── */
.vz-daytl .dt-body{position:relative; padding-top:6px}
.vz-daytl .dt-rules{position:absolute; inset:0; pointer-events:none}
.vz-daytl .dt-rule{
  position:absolute; top:0; bottom:8px; width:1px;
  background:color-mix(in srgb,var(--line) 80%,transparent);
}
.vz-daytl .dt-rule.is-minor{background:color-mix(in srgb,var(--line) 45%,transparent)}
.vz-daytl .dt-mline{
  position:absolute; top:-4px; bottom:8px; width:0;
  border-left:1px dashed color-mix(in srgb,var(--ink-4) 40%,transparent);
}

/* ── track rows ─────────────────────────────────────────────────────── */
.vz-daytl .dt-rows{position:relative}
.vz-daytl .dt-row{position:relative; display:flex; flex-direction:column; justify-content:flex-end; margin-bottom:16px}
.vz-daytl .dt-lane{
  position:relative; border-radius:10px;
  background:color-mix(in srgb,var(--bg-3) 30%,transparent);
}
.vz-daytl .dt-row.is-ref .dt-lane{
  background:color-mix(in srgb,var(--bg-3) 26%,transparent);
}

/* segment callouts */
.vz-daytl .dt-calls{position:relative}
.vz-daytl .dt-call{
  position:absolute; top:calc(var(--lane,0) * 21px); bottom:0; width:0;
}
.vz-daytl .dt-call b{
  position:absolute; left:-9px; top:0; display:block; height:18px; line-height:17px; padding:0 8px;
  border-radius:6px; background:var(--bg-1); border:1px solid var(--line-2);
  font-size:10.5px; font-weight:500; color:var(--ink-2); white-space:nowrap;
  box-shadow:0 1px 2px rgba(45,38,28,.05);
}
.vz-daytl .dt-call.is-flip b{left:auto; right:-9px}
.vz-daytl .dt-call-stem{
  position:absolute; left:0; top:18px; bottom:0; width:1px;
  background:var(--line-2);
}

/* ── segments ───────────────────────────────────────────────────────── */
.vz-daytl .dt-seg{
  --seg:var(--ink-3);
  position:absolute; top:0; bottom:0; min-width:3px;
  display:flex; align-items:center; padding:0 8px; overflow:hidden;
  border-radius:7px; border:1px solid var(--line);
  background:var(--bg-1); color:var(--ink-2);
  text-align:left; cursor:pointer;
  transition:box-shadow .16s var(--ease), transform .16s var(--ease), filter .16s var(--ease);
}
.vz-daytl .dt-seg.is-narrow{padding:0}
.vz-daytl .dt-seg.is-clipped .dt-seg-l{display:none}
.vz-daytl .dt-seg-l{
  font-size:11.5px; font-weight:500; letter-spacing:-.006em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vz-daytl .dt-seg:hover,.vz-daytl .dt-seg:focus-visible{
  transform:translateY(-1px); box-shadow:var(--shadow-1); z-index:4;
}
.vz-daytl .dt-seg:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* quiet — recorded work. Neutral so findings dominate. */
.vz-daytl .dt-seg.is-quiet{background:var(--bg-2); border-color:var(--line-2); color:var(--ink-2)}
.vz-daytl .dt-seg.k-break,.vz-daytl .dt-seg.k-lunch,
.vz-daytl .dt-seg.k-huddle,.vz-daytl .dt-seg.k-training,
.vz-daytl .dt-seg.k-coaching{background:var(--bg-2); border-color:var(--line); color:var(--ink-4)}

/* expected / reference */
.vz-daytl .dt-seg.is-ref{
  background:color-mix(in srgb,var(--vz-accent) 7%,#fff);
  border-color:color-mix(in srgb,var(--vz-accent) 24%,#fff);
  color:var(--brand-dark);
}
.vz-daytl .dt-seg.is-ref .dt-seg-l{font-weight:500; font-size:11px}

/* leakage — category hue, severity by fill weight and a solid spine */
.vz-daytl .dt-seg.k-capacity{--seg:var(--c-capacity)}
.vz-daytl .dt-seg.k-process{--seg:var(--c-process)}
.vz-daytl .dt-seg.k-system{--seg:var(--c-system)}
.vz-daytl .dt-seg.k-quality{--seg:var(--c-quality)}
.vz-daytl .dt-seg.k-ai{--seg:var(--c-ai)}
.vz-daytl .dt-seg.k-outcome{--seg:var(--c-outcome)}
.vz-daytl .dt-seg.k-leak,.vz-daytl .dt-seg.k-leakage,
.vz-daytl .dt-seg.k-rework,.vz-daytl .dt-seg.k-overrun{--seg:var(--neg)}
.vz-daytl .dt-seg.k-wait,.vz-daytl .dt-seg.k-idle,
.vz-daytl .dt-seg.k-gap,.vz-daytl .dt-seg.k-manual{--seg:var(--warn)}

.vz-daytl .dt-seg.is-leak{
  background:color-mix(in srgb,var(--seg) 16%,#fff);
  border-color:color-mix(in srgb,var(--seg) 36%,#fff);
  color:color-mix(in srgb,var(--seg) 62%,var(--ink));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--seg) 70%,#fff);
  padding-left:11px;
}
.vz-daytl .dt-seg.is-leak.t-med{
  background:color-mix(in srgb,var(--seg) 22%,#fff);
  border-color:color-mix(in srgb,var(--seg) 44%,#fff);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--seg) 85%,#fff);
}
.vz-daytl .dt-seg.is-leak.t-high{
  background:color-mix(in srgb,var(--seg) 32%,#fff);
  border-color:color-mix(in srgb,var(--seg) 58%,#fff);
  color:color-mix(in srgb,var(--seg) 78%,var(--ink));
  box-shadow:inset 3px 0 0 var(--seg);
}
.vz-daytl .dt-seg.is-leak.is-narrow{padding-left:0}
.vz-daytl .dt-seg.is-leak:hover,.vz-daytl .dt-seg.is-leak:focus-visible{
  border-color:color-mix(in srgb,var(--seg) 58%,#fff);
}

/* deviation — different SHAPE and OUTLINE, not just a different hue:
   square corners, dashed rule, hatched field, notched top edge. */
.vz-daytl .dt-seg.is-dev{
  --seg:var(--ink-2);
  border-radius:2px;
  border:1.5px dashed var(--ink-4);
  background:repeating-linear-gradient(-45deg,
    rgba(73,77,85,.28) 0 2px, transparent 2px 6px), var(--bg-1);
  color:var(--ink-2);
  box-shadow:none;
  padding-left:9px;
}
.vz-daytl .dt-seg.is-dev::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:0;
  border-top:3px solid var(--warn);
}
.vz-daytl .dt-seg.is-dev .dt-seg-l{
  font-weight:600; color:var(--ink-2);
  text-shadow:0 0 3px var(--bg-1),0 0 3px var(--bg-1),0 0 2px var(--bg-1);
}
.vz-daytl .dt-seg.is-dev:hover,.vz-daytl .dt-seg.is-dev:focus-visible{
  border-color:var(--ink-3); box-shadow:var(--shadow-1);
}

/* ── tooltip (shared shape for both charts) ─────────────────────────── */
.vz-daytl .dt-tip[hidden],.vz-evtl .ev-tip[hidden]{display:none}
.vz-daytl .dt-tip,.vz-evtl .ev-tip{
  position:absolute; z-index:30; pointer-events:none;
  min-width:132px; max-width:252px;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:9px;
  background:var(--bg-1); border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);
}
.vz-daytl .dt-tip-k{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--ink-4);
}
.vz-daytl .dt-tip-k.is-leak{color:var(--neg-ink)}
.vz-daytl .dt-tip-k.is-dev{color:var(--ink-2)}
.vz-daytl .dt-tip-k.is-ref{color:var(--brand-dark)}
.vz-daytl .dt-tip-l,.vz-evtl .ev-tip-l{
  font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:-.008em;
}
.vz-daytl .dt-tip-m,.vz-evtl .ev-tip-m{font-size:11px; color:var(--ink-3)}
.vz-daytl .dt-tip-v,.vz-evtl .ev-tip-v{
  margin-top:4px; padding-top:6px; border-top:1px solid var(--line);
  font-family:var(--serif); font-size:14px; color:var(--ink); letter-spacing:-.01em;
}

/* ── footer strip ───────────────────────────────────────────────────── */
.vz-daytl .dt-foot,.vz-evtl .ev-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:18px calc(var(--vz-pad) * -1) 0;
  padding:13px var(--vz-pad) 0;
  border-top:1px solid var(--line);
}
.vz-daytl .dt-cap,.vz-evtl .ev-cap{margin:0; font-size:11.5px; color:var(--ink-4)}
.vz-daytl .dt-act,.vz-evtl .ev-act{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--bg-1);
  font-size:12px; font-weight:500; color:var(--ink-2);
  transition:border-color .16s var(--ease), color .16s var(--ease);
}
.vz-daytl .dt-act:hover,.vz-evtl .ev-act:hover{border-color:var(--brand-soft); color:var(--brand-dark)}
.vz-daytl .dt-act-c,.vz-evtl .ev-act-c{color:var(--ink-4)}

/* ── empty state ────────────────────────────────────────────────────── */
.vz-daytl .dt-empty,.vz-evtl .ev-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:26px 0 30px;
}
.vz-daytl .dt-empty-bar,.vz-evtl .ev-empty-bar{
  width:100%; height:34px; border-radius:10px; margin-bottom:14px;
  background:var(--bg-2); border:1px solid var(--line);
}
.vz-daytl .dt-empty-l,.vz-evtl .ev-empty-l{margin:0; font-size:13px; font-weight:600; color:var(--ink-2)}
.vz-daytl .dt-empty-s,.vz-evtl .ev-empty-s{margin:0; font-size:11.5px; color:var(--ink-4)}

/* ══════════════════════ eventTimeline ══════════════════════════════ */
.vz-evtl .ev-frame{display:flex; min-width:0}
.vz-evtl .ev-plot{padding:0 12px}
.vz-evtl .ev-lanes{position:relative; height:calc(var(--lanes,1) * 76px + 16px)}
.vz-evtl .ev-slot{position:absolute; top:0; bottom:0; width:0}
.vz-evtl .ev-stem{
  position:absolute; left:0; bottom:0; width:1px;
  height:calc(var(--lane,0) * 76px + 16px);
  background:var(--line-2);
}
.vz-evtl .ev-node{
  --seg:var(--ink-3);
  position:absolute; left:0; bottom:-4px; width:8px; height:8px;
  margin-left:-4px; border-radius:2px; transform:rotate(45deg);
  background:var(--bg-1); border:1.5px solid var(--seg);
}
.vz-evtl .ev-card{
  --seg:var(--ink-3);
  position:absolute; left:0; width:max-content; max-width:270px;
  bottom:calc(var(--lane,0) * 76px + 16px);
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:8px 11px 8px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg-1);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--seg) 60%,#fff);
  text-align:left; cursor:pointer;
  transition:box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
}
.vz-evtl .ev-card.is-flip{left:auto; right:0}
.vz-evtl .ev-card:hover,.vz-evtl .ev-card:focus-visible{
  transform:translateY(-1px); border-color:var(--line-2);
  box-shadow:inset 3px 0 0 var(--seg), var(--shadow-1); z-index:5;
}
.vz-evtl .ev-card:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.vz-evtl .ev-card-l{font-size:12px; font-weight:600; color:var(--ink); letter-spacing:-.008em; white-space:nowrap}
.vz-evtl .ev-card-v{font-family:var(--serif); font-size:14px; color:var(--ink); letter-spacing:-.012em}
.vz-evtl .ev-card-t{font-size:10.5px; color:var(--ink-4)}

.vz-evtl .ev-card.k-capacity,.vz-evtl .ev-node.k-capacity{--seg:var(--c-capacity)}
.vz-evtl .ev-card.k-process{--seg:var(--c-process)}
.vz-evtl .ev-card.k-system{--seg:var(--c-system)}
.vz-evtl .ev-card.k-quality{--seg:var(--c-quality)}
.vz-evtl .ev-card.k-ai{--seg:var(--c-ai)}
.vz-evtl .ev-card.k-outcome,.vz-evtl .ev-card.k-leak{--seg:var(--c-outcome)}
.vz-evtl .ev-slot:has(.k-capacity) .ev-node{--seg:var(--c-capacity)}
.vz-evtl .ev-slot:has(.k-process) .ev-node{--seg:var(--c-process)}
.vz-evtl .ev-slot:has(.k-system) .ev-node{--seg:var(--c-system)}
.vz-evtl .ev-slot:has(.k-quality) .ev-node{--seg:var(--c-quality)}
.vz-evtl .ev-slot:has(.k-ai) .ev-node{--seg:var(--c-ai)}
.vz-evtl .ev-slot:has(.k-outcome) .ev-node,.vz-evtl .ev-slot:has(.k-leak) .ev-node{--seg:var(--c-outcome)}

.vz-evtl .ev-spine{
  position:relative; height:2px; border-radius:2px;
  background:var(--line-2); margin-top:2px;
}
.vz-evtl .ev-spine-done{
  position:absolute; left:0; top:0; height:100%; border-radius:2px;
  background:color-mix(in srgb,var(--vz-accent) 70%,#fff);
}
.vz-evtl .ev-marks{position:absolute; left:0; right:0; top:0; height:0}
.vz-evtl .ev-mslot{position:absolute; top:1px}
.vz-evtl .ev-mnode{
  position:absolute; left:0; top:0; width:13px; height:13px;
  margin:-6.5px 0 0 -6.5px; border-radius:50%;
  background:var(--bg-1); border:1.5px dashed var(--line-2);
  box-shadow:0 0 0 3px var(--bg-1);
}
.vz-evtl .ev-mnode.s-done{
  background:var(--brand-deep); border:1.5px solid var(--brand-deep);
  box-shadow:0 0 0 3px var(--bg-1);
}
.vz-evtl .ev-mnode.s-current{
  background:var(--bg-1); border:3.5px solid var(--vz-accent);
  box-shadow:0 0 0 3px var(--bg-1),0 0 0 8px var(--brand-tint);
}
.vz-evtl .ev-legend .ev-mnode{position:static; margin:0; box-shadow:none; flex:0 0 auto}
.vz-evtl .ev-legend .ev-mnode.s-current{box-shadow:none; border-width:3px}

.vz-evtl .ev-mlabel-slot{position:absolute; top:calc(16px + var(--lane,0) * 42px)}
.vz-evtl .ev-mlabel{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  width:max-content; max-width:220px; padding:4px 8px; border-radius:7px;
  border:1px solid transparent; text-align:left; cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.vz-evtl .ev-mlabel:hover{background:var(--bg-2); border-color:var(--line)}
.vz-evtl .ev-mlabel:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.vz-evtl .ev-mlabel-l{font-size:11.5px; font-weight:600; color:var(--ink); white-space:nowrap}
.vz-evtl .ev-mlabel-s{font-size:10.5px; color:var(--ink-4); white-space:nowrap}
.vz-evtl .ev-mlabel.s-current .ev-mlabel-s{color:var(--brand-dark); font-weight:600}
.vz-evtl .ev-mlabel.s-done .ev-mlabel-s{color:var(--ink-3)}

.vz-evtl .ev-miles{position:relative; height:calc(var(--lanes,1) * 42px + 20px)}
.vz-evtl .ev-axis{position:relative; height:20px; border-top:1px solid var(--line); padding-top:6px}
.vz-evtl .ev-tick{position:absolute; top:0}
.vz-evtl .ev-tick i{position:absolute; left:0; top:-1px; width:1px; height:4px; background:var(--line-2)}
.vz-evtl .ev-tick b{
  position:absolute; left:0; top:6px; padding-left:6px;
  font-size:10.5px; font-weight:500; color:var(--ink-4); white-space:nowrap;
}
.vz-evtl .ev-tick:last-child b{padding-left:0; padding-right:6px; transform:translateX(-100%)}

/* ── narrow viewports: the scroller absorbs the width, never the page ─ */
@media (max-width:1100px){
  .vz-daytl,.vz-evtl{--vz-pad:18px}
  .vz-daytl .dt-labels{flex-basis:140px; width:140px}
}
@media (max-width:720px){
  .vz-daytl .dt-head,.vz-evtl .ev-head{flex-direction:column; gap:12px}
  .vz-daytl .dt-labels{flex-basis:112px; width:112px; padding-right:10px}
  .vz-daytl .dt-scroll{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){
  .vz-daytl *,.vz-evtl *{transition:none!important}
}