ProdDash/modules/vista-cues/style.css

/* Vista Cues. Sizes hang off the tile (container units) times the tile's
   own text scale (--vc-scale, the title bar's − / +), so one tile reads the
   same at 3×2 on a laptop as at 8×5 on a wall. Colours are the shell's. */

[data-module="vista-cues"] .vc-root {
  --tone: var(--text);
  --vc-scale: 1;
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}
[data-module="vista-cues"] .vc-root[data-tone="ok"] { --tone: var(--accent); }
[data-module="vista-cues"] .vc-root[data-tone="warn"] { --tone: var(--warn); }
[data-module="vista-cues"] .vc-root[data-tone="muted"] { --tone: var(--muted); }
[data-module="vista-cues"] [hidden] { display: none !important; }

[data-module="vista-cues"] .vc-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(clamp(3px, 2.5cqh, 14px) * var(--vc-scale));
  padding: clamp(6px, 3.5cqmin, 22px);
  min-width: 0;
}

[data-module="vista-cues"] .vc-offline {
  position: absolute;
  top: clamp(4px, 3cqmin, 14px);
  right: clamp(6px, 3.5cqmin, 22px);
  z-index: 2;
  font-size: calc(clamp(9px, 4.5cqmin, 14px) * var(--vc-scale));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--danger);
}
[data-module="vista-cues"] .vc-root.is-offline .vc-now { opacity: 0.45; filter: grayscale(0.6); }

/* ── now ── */

[data-module="vista-cues"] .vc-now {
  flex: 0 0 auto;
  min-width: 0;
  padding-left: clamp(6px, 2cqmin, 14px);
  border-left: clamp(3px, 1.1cqmin, 7px) solid var(--tone);
}
[data-module="vista-cues"] .vc-kicker {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: calc(clamp(10px, 5cqmin, 18px) * var(--vc-scale));
  color: var(--muted);
}
[data-module="vista-cues"] .vc-pill {
  padding: 0.05em 0.55em;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tone);
  color: var(--accent-text);
}
[data-module="vista-cues"] .vc-root[data-tone="warn"] .vc-pill { color: var(--bg); }
[data-module="vista-cues"] .vc-ago { font-weight: 600; }
[data-module="vista-cues"] .vc-name-wrap { min-width: 0; }
[data-module="vista-cues"] .vc-name {
  font-size: calc(clamp(16px, 14cqmin, 96px) * var(--vc-scale));
  line-height: 1.12;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
[data-module="vista-cues"] .vc-root[data-tone="muted"] .vc-name { color: var(--muted); font-weight: 600; }
[data-module="vista-cues"] .vc-meta {
  font-size: calc(clamp(10px, 4.6cqmin, 18px) * var(--vc-scale));
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="vista-cues"] .vc-meta:empty { display: none; }

/* ── other live lists ── */

[data-module="vista-cues"] .vc-active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  flex: 0 0 auto;
  font-size: calc(clamp(10px, 4.4cqmin, 17px) * var(--vc-scale));
}
[data-module="vista-cues"] .vc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  max-width: 100%;
  padding: 0.2em 0.65em;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-module="vista-cues"] .vc-chip.is-paused {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}
[data-module="vista-cues"] .vc-chip-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="vista-cues"] .vc-chip-ago,
[data-module="vista-cues"] .vc-chip-group { color: var(--muted); }
[data-module="vista-cues"] .vc-chip-group { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── recent ── */

[data-module="vista-cues"] .vc-recent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font-size: calc(clamp(10px, 3.8cqmin, 15px) * var(--vc-scale));
  border-top: 1px solid var(--border);
  padding-top: 0.35em;
}
[data-module="vista-cues"] .vc-row {
  display: grid;
  grid-template-columns: auto 6.2em minmax(0, 1fr) auto;
  gap: 0.8em;
  align-items: baseline;
  padding: 0.12em 0;
  white-space: nowrap;
}
[data-module="vista-cues"] .vc-row > span { overflow: hidden; text-overflow: ellipsis; }
[data-module="vista-cues"] .vc-row-time,
[data-module="vista-cues"] .vc-row-source { color: var(--muted); }
[data-module="vista-cues"] .vc-row-action { font-weight: 700; color: var(--accent); }
[data-module="vista-cues"] .vc-row[data-action="release"] .vc-row-action,
[data-module="vista-cues"] .vc-row[data-action="releaseAll"] .vc-row-action,
[data-module="vista-cues"] .vc-row[data-action="cleared"] .vc-row-action { color: var(--muted); }
[data-module="vista-cues"] .vc-row[data-action="pause"] .vc-row-action { color: var(--warn); }
[data-module="vista-cues"] .vc-row[data-action="flash"] .vc-row-action { color: var(--text); }
[data-module="vista-cues"] .vc-row.is-unmapped { opacity: 0.6; }
[data-module="vista-cues"] .vc-row.is-unmapped .vc-row-action { color: var(--muted); font-weight: 500; }

@container (max-width: 300px) {
  [data-module="vista-cues"] .vc-row { grid-template-columns: 5.2em minmax(0, 1fr); }
  [data-module="vista-cues"] .vc-row-time,
  [data-module="vista-cues"] .vc-row-source { display: none; }
}
@container (max-height: 140px) {
  [data-module="vista-cues"] .vc-recent,
  [data-module="vista-cues"] .vc-active { display: none; }
}

/* ── senders ── */

[data-module="vista-cues"] .vc-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
  margin-top: auto;
  font-size: calc(clamp(9px, 3.4cqmin, 13px) * var(--vc-scale));
  color: var(--muted);
}
[data-module="vista-cues"] .vc-src { display: inline-flex; align-items: center; gap: 0.4em; }
[data-module="vista-cues"] .vc-dot {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--danger);
}
[data-module="vista-cues"] .vc-src.is-on { color: var(--text); }
[data-module="vista-cues"] .vc-src.is-on .vc-dot { background: var(--accent); }
[data-module="vista-cues"] .vc-src.is-off-network { color: var(--danger); }
[data-module="vista-cues"] .vc-src.is-off-network .vc-dot { background: var(--danger); }
@container (max-height: 140px) {
  [data-module="vista-cues"] .vc-sources { display: none; }
}