ProdDash/modules/overflow-tap/style.css

/* Overflow Tap — scoped under its tile via [data-module="overflow-tap"] and
   styled with the shell's variables only. Sizes hang off the tile (container
   units) so the keyword reads from across a booth on a big tile and still
   fits a 2×2. */

[data-module="overflow-tap"] {
  container-type: size;
}

[data-module="overflow-tap"] .ot-root {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(4px, 4cqmin, 18px);
  gap: clamp(2px, 1.8cqmin, 10px);
  overflow: hidden;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}

[data-module="overflow-tap"] .ot-offline {
  flex-shrink: 0;
  font-size: clamp(0.6rem, 4.6cqmin, 0.9rem);
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="overflow-tap"] .ot-root.is-offline .ot-main,
[data-module="overflow-tap"] .ot-root.is-offline .ot-slide,
[data-module="overflow-tap"] .ot-root.is-offline .ot-history {
  opacity: 0.45;
  filter: grayscale(0.6);
}

/* ── the live keyword ───────────────────────────────────────────── */

[data-module="overflow-tap"] .ot-main {
  --tone: var(--accent);
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  overflow: hidden;
}
[data-module="overflow-tap"] .ot-main[data-tone="ok"] { --tone: var(--accent); }
[data-module="overflow-tap"] .ot-main[data-tone="warn"] { --tone: var(--warn); }
[data-module="overflow-tap"] .ot-main[data-tone="alert"] { --tone: var(--danger); }
[data-module="overflow-tap"] .ot-main[data-tone="muted"] { --tone: var(--muted); }

[data-module="overflow-tap"] .ot-label {
  color: var(--tone);
  font-size: clamp(0.5rem, 9cqh, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-module="overflow-tap"] .ot-keyword {
  color: var(--tone);
  font-size: min(clamp(1rem, 38cqh, 7rem), 18cqw);
  font-weight: 750;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-module="overflow-tap"] .ot-keyword.is-none { color: var(--muted); }
[data-module="overflow-tap"] .ot-main[data-tone="muted"] .ot-keyword {
  animation: ot-pulse 1.2s ease-in-out infinite;
}
@keyframes ot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

[data-module="overflow-tap"] .ot-dest {
  color: var(--text);
  font-size: min(clamp(0.7rem, 16cqh, 1.9rem), 8cqw);
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-module="overflow-tap"] .ot-main[data-tone="muted"] .ot-dest { color: var(--muted); font-weight: 500; }

[data-module="overflow-tap"] .ot-groups {
  color: var(--muted);
  font-size: clamp(0.5rem, 9cqh, 0.95rem);
  line-height: 1.3;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-module="overflow-tap"] .ot-error {
  color: var(--danger);
  font-size: clamp(0.5rem, 9cqh, 0.95rem);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[data-module="overflow-tap"] .ot-error.is-warn { color: var(--warn); }

/* ── this slide ─────────────────────────────────────────────────── */

[data-module="overflow-tap"] .ot-slide {
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(0.55rem, 4.8cqmin, 0.95rem);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  align-self: center;
  max-width: 100%;
}
[data-module="overflow-tap"] .ot-slide.is-muted { color: var(--muted); }
[data-module="overflow-tap"] .ot-slide.is-hit {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  font-weight: 650;
}
[data-module="overflow-tap"] .ot-slide.is-warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}

/* ── the trail ──────────────────────────────────────────────────── */

[data-module="overflow-tap"] .ot-history {
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0;
  border-top: 1px solid var(--border);
  font-size: clamp(0.55rem, 4.6cqmin, 0.95rem);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

[data-module="overflow-tap"] .ot-h-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: baseline;
  gap: 0 0.7em;
  color: var(--text);
}
[data-module="overflow-tap"] .ot-h-row.is-failed .ot-h-kw,
[data-module="overflow-tap"] .ot-h-row.is-failed .ot-h-mark { color: var(--danger); }
[data-module="overflow-tap"] .ot-h-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
[data-module="overflow-tap"] .ot-h-kw { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-module="overflow-tap"] .ot-h-dest { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-module="overflow-tap"] .ot-h-mark { color: var(--accent); font-weight: 700; }
[data-module="overflow-tap"] .ot-h-empty { color: var(--muted); text-align: center; }

/* On a short tile the trail would crowd the keyword out: keep the
   keyword, drop the trail. Inside the keyword block the same rule: when
   it is short, the small lines go before the keyword does. */
@container (max-height: 120px) {
  [data-module="overflow-tap"] .ot-history { display: none; }
}
@container (max-height: 70px) {
  [data-module="overflow-tap"] .ot-groups,
  [data-module="overflow-tap"] .ot-error { display: none; }
}
@container (max-height: 46px) {
  [data-module="overflow-tap"] .ot-dest,
  [data-module="overflow-tap"] .ot-label { display: none; }
}

[data-module="overflow-tap"] .ot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  color: var(--muted);
  text-align: center;
  font-size: clamp(0.65rem, 5.5cqmin, 1rem);
}