/* Matrix + calendar heatmaps. Everything is scoped under .vz-matrix / .vz-cal
   (plus the single body-level tooltip .vz-matrix-tip). Tokens only.
   Cell fill and ink arrive per cell as --f / --i, computed in matrix.js so the
   number always clears WCAG AA against its own pill. No gridlines: colour and
   the gap between pills do all the structural work. */

.vz-matrix,
.vz-cal{
  --vz-accent:var(--brand);
  --vz-surface:var(--bg-1);
  --vz-nd:#EFECE6;                 /* no-data pill: a faint neutral grey    */
  --vz-nd-dot:rgba(28,25,20,.30);
  --vz-flag:#D2691E;               /* corner flag: amber-orange, muted      */
  --vz-gap:6px;
  --vz-rw:216px;                   /* row-label column                      */
  --vz-cw:66px;                    /* minimum cell width before scrolling   */
  --vz-ch:34px;                    /* cell height                           */
  --vz-pad:22px;
  display:block; width:100%; max-width:100%;
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

.vz-matrix .vz-card,
.vz-cal .vz-card{
  background:var(--vz-surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-1);
  padding:var(--vz-pad) var(--vz-pad) 0;
  overflow:hidden;
}

/* ── optional title ─────────────────────────────────────────────────── */
.vz-matrix .vz-head,
.vz-cal .vz-head{ padding:0 2px 14px }
.vz-matrix .vz-title,
.vz-cal .vz-title{
  margin:0; font-size:14.5px; font-weight:650; letter-spacing:-.005em; color:var(--ink);
}

.vz-matrix .vz-sr,
.vz-cal .vz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── scroller: the matrix scrolls inside itself, never the document ──── */
.vz-matrix .vz-m-scroll,
.vz-cal .vz-c-scroll{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
  overscroll-behavior-x:contain;
  padding-bottom:2px;
}
.vz-matrix .vz-m-scroll:focus-visible,
.vz-cal .vz-c-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.vz-matrix .vz-m-scroll::-webkit-scrollbar,
.vz-cal .vz-c-scroll::-webkit-scrollbar{height:8px}
.vz-matrix .vz-m-scroll::-webkit-scrollbar-thumb,
.vz-cal .vz-c-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.vz-matrix .vz-m-scroll::-webkit-scrollbar-track,
.vz-cal .vz-c-scroll::-webkit-scrollbar-track{background:transparent}

/* ── grid ───────────────────────────────────────────────────────────── */
.vz-matrix .vz-m-grid{
  display:grid;
  grid-template-columns:var(--vz-rw) repeat(var(--vz-cols,1), minmax(var(--vz-cw), 1fr));
  column-gap:var(--vz-gap);
  row-gap:var(--vz-gap);
  width:100%;
  /* deterministic overflow width: headers ellipsis instead of forcing max-content */
  min-width:calc(var(--vz-rw) + (var(--vz-cw) + var(--vz-gap)) * var(--vz-cols));
  align-items:stretch;
}
.vz-matrix .vz-m-row{display:contents}

/* ── headers ────────────────────────────────────────────────────────── */
.vz-matrix .vz-m-ch{
  font-size:9.5px; font-weight:650; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-4);
  text-align:center;
  padding:0 1px 10px;
  align-self:end;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vz-matrix .vz-m-corner{padding-bottom:9px}

.vz-matrix .vz-m-rh{
  display:flex; align-items:center; justify-content:flex-start;
  padding-right:22px;
  font-size:13px; line-height:1.25; color:var(--ink-2);
  min-width:0;
}
.vz-matrix .vz-m-rh > span{
  display:block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* row labels and the corner stay pinned while the columns scroll */
.vz-matrix .vz-m-rh,
.vz-matrix .vz-m-corner{
  position:sticky; left:0; z-index:2;
  background:var(--vz-surface);
}
.vz-matrix .vz-m-rh::after,
.vz-matrix .vz-m-corner::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:14px;
  transform:translateX(100%);
  background:linear-gradient(90deg, rgba(45,38,28,.055), rgba(45,38,28,0));
  opacity:0; transition:opacity .18s var(--ease); pointer-events:none;
}
.vz-matrix .vz-m-scroll.is-scrolled .vz-m-rh::after,
.vz-matrix .vz-m-scroll.is-scrolled .vz-m-corner::after{opacity:1}

/* ── cells: rounded pills, no gridlines ─────────────────────────────── */
.vz-matrix .vz-m-cell{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:var(--vz-ch);
  padding:0 8px;
  border:0; margin:0;
  border-radius:10px;
  background:var(--f, var(--vz-nd));
  color:var(--i, var(--ink-3));
  font:inherit; font-size:12.5px; font-weight:550; letter-spacing:-.005em;
  cursor:pointer;
  overflow:hidden;
  transition:opacity .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.vz-matrix .vz-m-cell .vz-m-v{
  display:block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  font-variant-numeric:tabular-nums;
}

/* honest no-data: a faint pill with a small centred dot, never blank, never 0 */
.vz-matrix .vz-m-cell.is-nd{
  background:var(--vz-nd);
  cursor:default;
}
.vz-matrix .vz-m-dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--vz-nd-dot);
}

/* corner flag: needs attention */
.vz-matrix .vz-m-cell.is-flag::after{
  content:""; position:absolute; top:0; right:0;
  width:10px; height:10px;
  background:linear-gradient(225deg, var(--vz-flag) 0 54%, transparent 54%);
  pointer-events:none;
}

/* hover: the field recedes a little so one pill reads as the subject */
.vz-matrix .vz-m-grid.is-hot .vz-m-cell{opacity:.78}
.vz-matrix .vz-m-cell:hover,
.vz-matrix .vz-m-grid.is-hot .vz-m-cell:hover,
.vz-matrix .vz-m-grid.is-hot .vz-m-cell:focus-visible{opacity:1}
.vz-matrix .vz-m-cell:hover{
  box-shadow:0 0 0 1px var(--vz-surface), 0 0 0 2.5px rgba(28,25,20,.24);
  z-index:3;
}
.vz-matrix .vz-m-cell:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  z-index:4;
  opacity:1;
}
.vz-matrix .vz-m-cell.is-nd:hover{box-shadow:0 0 0 1px var(--vz-surface), 0 0 0 2px var(--line-2)}

/* ── footer strip ───────────────────────────────────────────────────── */
.vz-matrix .vz-foot,
.vz-cal .vz-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:18px calc(var(--vz-pad) * -1) 0;
  padding:14px var(--vz-pad);
  border-top:1px solid var(--line);
}
.vz-matrix .vz-foot-cap,
.vz-cal .vz-foot-cap{
  margin:0; font-size:12px; color:var(--ink-3); line-height:1.4;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vz-matrix .vz-foot-act,
.vz-cal .vz-foot-act{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:7px 13px 7px 15px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--bg-1);
  color:var(--ink); font-size:12.5px; font-weight:550;
  cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.vz-matrix .vz-foot-act:hover,
.vz-cal .vz-foot-act:hover{
  border-color:var(--vz-accent);
  color:var(--vz-accent);
  background:var(--brand-tint);
}
.vz-matrix .vz-foot-act:focus-visible,
.vz-cal .vz-foot-act:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vz-matrix .vz-chev,
.vz-cal .vz-chev{opacity:.62; flex:none}

/* ── empty state ────────────────────────────────────────────────────── */
.vz-matrix .vz-empty,
.vz-cal .vz-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:120px; padding:26px 0 30px;
}
.vz-matrix .vz-empty-mark,
.vz-cal .vz-empty-mark{
  width:34px; height:12px; border-radius:9px; background:var(--vz-nd);
  position:relative;
}
.vz-matrix .vz-empty-mark::after,
.vz-cal .vz-empty-mark::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:3px; height:3px; border-radius:50%; background:var(--vz-nd-dot);
}
.vz-matrix .vz-empty p,
.vz-cal .vz-empty p{margin:0; font-size:12.5px; color:var(--ink-3)}

/* ══ calendar ═══════════════════════════════════════════════════════ */
.vz-cal{ --vz-cs:15px; --vz-cg:4px }

.vz-cal .vz-c-body{display:flex; gap:12px; min-width:max-content; width:max-content; margin-inline:auto}
.vz-cal .vz-c-wd{
  display:grid; grid-template-rows:repeat(7, var(--vz-cs)); gap:var(--vz-cg);
  align-content:end;
  padding-top:calc(14px + var(--vz-cg));
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); font-weight:650;
}
.vz-cal .vz-c-wd span{display:flex; align-items:center; line-height:1}
.vz-cal .vz-c-cols{display:flex; flex-direction:column; gap:var(--vz-cg)}
.vz-cal .vz-c-months{
  display:grid;
  grid-template-columns:repeat(var(--vz-weeks,1), var(--vz-cs));
  column-gap:var(--vz-cg);
  height:14px;
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-4); font-weight:650;
}
.vz-cal .vz-c-m{white-space:nowrap}
.vz-cal .vz-c-grid{
  display:grid;
  grid-template-rows:repeat(7, var(--vz-cs));
  grid-auto-flow:column;
  grid-auto-columns:var(--vz-cs);
  gap:var(--vz-cg);
}
.vz-cal .vz-c-day{
  width:var(--vz-cs); height:var(--vz-cs);
  display:flex; align-items:center; justify-content:center;
  border:0; padding:0; margin:0;
  border-radius:4px;
  background:var(--f, var(--vz-nd));
  color:var(--i, var(--ink-3));
  cursor:pointer;
  transition:box-shadow .16s var(--ease), opacity .16s var(--ease);
}
.vz-cal .vz-c-day.is-nd{background:var(--vz-nd); cursor:default}
.vz-cal .vz-c-dot{width:2.5px;height:2.5px;border-radius:50%;background:var(--vz-nd-dot)}
.vz-cal .vz-c-pad{width:var(--vz-cs); height:var(--vz-cs)}
.vz-cal .vz-c-day:hover{box-shadow:0 0 0 1px var(--bg-1), 0 0 0 2px rgba(28,25,20,.26)}
.vz-cal .vz-c-day:focus-visible{outline:2px solid var(--focus); outline-offset:2px; z-index:2}

.vz-cal .vz-c-legend{
  display:flex; align-items:center; justify-content:flex-end; gap:5px;
  padding-top:12px;
}
.vz-cal .vz-c-key{width:11px;height:11px;border-radius:3px;background:var(--f)}
.vz-cal .vz-c-lk{font-size:10px;color:var(--ink-4);letter-spacing:.02em}
.vz-cal .vz-c-lk:first-child{margin-right:2px}
.vz-cal .vz-c-lk:last-child{margin-left:2px}

/* ══ tooltip (single node on <body>, so a scroller can never clip it) ═ */
.vz-matrix-tip{
  position:fixed; z-index:9999; pointer-events:none;
  min-width:150px; max-width:260px;
  padding:10px 12px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow-2);
  font-family:var(--sans); font-size:12px; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.vz-matrix-tip[hidden]{display:none!important}
.vz-matrix-tip .vz-tip-h{
  font-size:12.5px; font-weight:650; color:var(--ink);
  margin-bottom:7px; padding-bottom:7px;
  border-bottom:1px solid var(--line);
  line-height:1.3;
}
.vz-matrix-tip .vz-tip-r{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:2px 0;
}
.vz-matrix-tip .vz-tip-k{color:var(--ink-4); font-size:11px}
.vz-matrix-tip .vz-tip-v{color:var(--ink); font-weight:600}

/* ══ responsive ═════════════════════════════════════════════════════ */
@media (max-width:1420px){
  .vz-matrix{--vz-rw:198px}
}
@media (max-width:1180px){
  .vz-matrix{--vz-rw:176px; --vz-cw:60px; --vz-pad:18px; --vz-ch:31px}
  .vz-matrix .vz-m-cell{font-size:12px}
  .vz-matrix .vz-m-rh{font-size:12.5px; padding-right:16px}
}
@media (min-width:1900px){
  .vz-matrix{--vz-ch:36px; --vz-gap:7px}
}

@media (prefers-reduced-motion:reduce){
  .vz-matrix .vz-m-cell,
  .vz-cal .vz-c-day{transition:none}
}