/* /tv/goals-v2 — cycling Weekly Goals screen.
 * One mode at a time (CLIENTS | THROXY), rotating every 20s.
 * Layout: big mode header on top, 3 columns (global/phone/email) below,
 * progress bar for rotation, ribbon at the bottom. Mirrors tv-live/tv-leaders.
 */

.tv-app {
  height: 100dvh;
  width: 100vw;
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto
    var(--ribbon-height);
  padding: 0;
  gap: 0;
}

.tv-goals2 {
  display: contents;
}

/* ============================================================
 * HEAD — very-big mode title on the left, panel counter on the right.
 * Title tints ahead/behind to mirror the row-band accent in v1.
 * ============================================================ */
.tv-goals2-head {
  display: grid;
  justify-items: center;
  align-items: center;
  padding: clamp(18px, 2vw, 40px) clamp(20px, 2.2vw, 44px);
  border-bottom: 2px solid var(--bw-700);
}

.tv-goals2-title {
  text-align: center;
  font-size: clamp(80px, 10vw, 220px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--bw-900);
  margin: 0;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * BODY — three columns, vertical hairline dividers, edge-to-edge.
 * Container queries (cqh/cqw) keep text/ring scaling honest across TVs.
 * ============================================================ */
.tv-goals2-body {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 0;
}

.tv-goals2-col {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: clamp(10px, 1.4cqh, 28px);
  padding: clamp(24px, 3cqh, 56px) clamp(20px, 2vw, 40px);
  min-width: 0;
  min-height: 0;
}
.tv-goals2-col + .tv-goals2-col {
  border-left: 2px solid var(--bw-700);
}

/* Column label — "Global" / "Phone" / "Email" on top.
 * padding-bottom adds breathing room below the meeting type so it doesn't
 * crowd the big metric number. */
.tv-goals2-col-label {
  font-size: clamp(28px, 4cqw, 72px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bw-500);
  line-height: 1;
  padding-bottom: clamp(16px, 3cqh, 56px);
}

/* Big metric: done / target */
.tv-goals2-col-metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 14px);
  line-height: 0.85;
}

.tv-goals2-num {
  font-size: clamp(120px, 26cqh, 360px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  color: var(--bw-900);
}

.tv-goals2-target {
  font-size: clamp(56px, 12cqh, 180px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--bw-500);
  font-variant-numeric: tabular-nums;
}
.tv-goals2-target .slash {
  margin: 0 0.08em 0 0.12em;
}

/* Subtitle — "N to go" / "+N over" / "no target".
 * Inherits the pace color (set below via --pace-color) so the actionable
 * line reads in the same tint as the ring. */
.tv-goals2-col-subtitle {
  font-size: clamp(56px, 7cqw, 144px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bw-900);
}

/* Ring — bottom of each column; reuses .ring-fill / .ring-track / .ring-pct
 * from dashboard.css so the base styling matches /dashboard. The ring
 * scales down here (smaller than v1) so the pace color reads as an
 * accent, not the dominant element of the tile. */
.tv-goals2-col-ring {
  width: clamp(180px, 28cqh, 340px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.tv-goals2-col-ring svg {
  width: 100%;
  height: 100%;
}
.tv-goals2-col-ring .ring-pct {
  font-size: clamp(18px, 3.8cqh, 40px);
  font-weight: 700;
}

/* ============================================================
 * PACE COLOR SCALE — applied by renderColumn via `data-bucket`.
 * red <50 · orange 50-80 · yellow 80-100 · green 100-125 · blue >125
 * (% of expected pace, not raw completion).
 * Tints the ring stroke + the percentage text; subtitle + mode title
 * stay black by design.
 * ============================================================ */
.tv-goals2-col {
  --pace-color: var(--bw-900);
}
.tv-goals2-col[data-bucket="red"]    { --pace-color: #dc2626; }
.tv-goals2-col[data-bucket="orange"] { --pace-color: #ea580c; }
.tv-goals2-col[data-bucket="yellow"] { --pace-color: #ca8a04; }
.tv-goals2-col[data-bucket="green"]  { --pace-color: #18a957; }
.tv-goals2-col[data-bucket="blue"]   { --pace-color: #2563eb; }

.tv-goals2-col .ring-fill        { stroke: var(--pace-color); }
.tv-goals2-col .ring-pct         { fill:   var(--pace-color); }
.tv-goals2-col .tv-goals2-col-subtitle { color: var(--pace-color); }

/* ============================================================
 * PROGRESS BAR — rotation indicator (same as tv-live).
 * ============================================================ */
.tv-progress {
  height: 2px;
  background: var(--bw-150);
  position: relative;
  overflow: hidden;
}
.tv-progress-bar {
  position: absolute;
  inset: 0;
  background: var(--bw-900);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ============================================================
 * ENTER / EXIT — body only.
 * ============================================================ */
.tv-goals2-body[data-animate="enter"] {
  animation: tv-goals2-body-in 520ms var(--ease-out-crisp) both;
}
.tv-goals2-body[data-animate="exit"] {
  animation: tv-goals2-body-out 220ms var(--ease-in-crisp) both;
}

@keyframes tv-goals2-body-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tv-goals2-body-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-24px); }
}

@media (prefers-reduced-motion: reduce) {
  .tv-goals2-body[data-animate="enter"],
  .tv-goals2-body[data-animate="exit"] {
    animation: none;
  }
  .tv-progress-bar { transition: none !important; }
  .tv-goals2-title { transition: none; }
}

/* ============================================================
 * Small screens (unlikely on a TV) — stack columns.
 * ============================================================ */
@media (max-width: 900px) {
  .tv-goals2-body {
    grid-template-columns: 1fr;
  }
  .tv-goals2-col + .tv-goals2-col {
    border-left: 0;
    border-top: var(--hairline);
  }
}