/* main/puls.css — standalone TV-display dark-mode page */

html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--font-body);
  overflow: hidden;
}

.puls {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-1-5);
  background: var(--c-ink);
}

.puls-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--c-cream);
}

.puls-brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: var(--letter-tight);
}

.puls-clock {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--c-sage-200);
  opacity: 0.75;
}

.puls-chart {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-height: 0;
}

.puls-chart-main {
  flex: 0 0 70%;
  min-width: 0;
  max-height: 100%;
}

/* Right column: pie on top, matrix below */
.puls-chart-right {
  flex: 0 0 calc(30% - 16px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.puls-pie-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.puls-pie-svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}


.puls-bar-today { fill: var(--c-arch-done); }
.puls-bar-ghost { fill: var(--c-arch-at-skv); opacity: 0.55; }
.puls-axis      { stroke: var(--c-ink-mute); stroke-width: 1; opacity: 0.4; }
.puls-axis-label {
  fill: var(--c-ink-mute);
  font-size: 20px;
  font-family: var(--font-body);
}

.puls-foot {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.puls-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  color: var(--c-arch-done);
  letter-spacing: var(--letter-tight);
}

.puls-sub {
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: var(--c-ink-soft);
  opacity: 0.7;
}

.puls-meta {
  font-size: clamp(0.8rem, 1.8vw, 1.4rem);
  color: var(--c-ink-mute);
  opacity: 0.55;
  margin-left: auto;
}

.puls-legend {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-left: var(--space-3);
}

.puls-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-ink-mute);
  opacity: 0.6;
}

.puls-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
}
.puls-swatch--today { background: var(--c-arch-done); }
.puls-swatch--avg   { background: var(--c-arch-at-skv); opacity: 0.55; }

/* ── Client matrix ───────────────────────────────────────────────── */
.puls-matrix-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  flex-shrink: 0;
}
.puls-matrix-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  flex-shrink: 0;
}
.puls-cm {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}
.cm-cell {
  width: 20px; height: 20px;
  border-radius: 3px;
  background: rgba(75, 184, 127, 0.07);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  cursor: default;
}
.cm-cell.cm-active {
  background: rgba(75, 184, 127, 0.75);
  box-shadow: 0 0 10px rgba(75, 184, 127, 0.6);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cm-cell.cm-flicker {
  background: rgba(75, 184, 127, 0.35);
  box-shadow: 0 0 5px rgba(75, 184, 127, 0.3);
  transition: background 0.1s ease;
}

/* ── Ticker ──────────────────────────────────────────────────────── */
.puls-ticker {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 5px 0 0;
}
.puls-ticker-track {
  display: inline-flex;
  animation: puls-scroll 169s linear infinite;
}
.puls-ticker-track:hover { animation-play-state: paused; }
.puls-tick-item {
  display: inline-block;
  font-size: 12px;
  color: var(--c-ink-mute);
  opacity: 0.6;
  padding: 0 56px 0 0;
  letter-spacing: 0.02em;
}
.puls-tick-item b { color: var(--c-cream); opacity: 0.8; font-weight: 600; }

@keyframes puls-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}