/* Video results (Round 2, WS2): the composer's Results step, the Videos tab card line
   and status colors, and the Home "Videos this week" card. Linked from compose/index.html
   and index.html. Logic lives in js/video-results.js. */

/* ---------- composer: Results step ---------- */
.vr-results {
  /* tints mixed with the text color, so they hold contrast in the light and dark themes */
  --vr-accent: color-mix(in oklab, #0ea5e9 75%, currentColor);
  --vr-watched: color-mix(in oklab, #16a34a 70%, currentColor);
  --vr-sent: color-mix(in oklab, #7c3aed 70%, currentColor);
  --vr-muted: color-mix(in oklab, currentColor 62%, transparent);
  --vr-rule: color-mix(in oklab, currentColor 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.25rem 0 0.5rem;
}
.vr-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.vr-updated { font-size: 0.72rem; color: var(--vr-muted); }
.vr-note { margin: 0; font-size: 0.8rem; color: var(--vr-muted); }

.vr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.vr-stats > div {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0.65rem; border-radius: 0.5rem;
  background: color-mix(in oklab, currentColor 7%, transparent);
}
.vr-stats strong { font-size: 1.25rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-stats strong small { font-size: 0.8rem; font-weight: 600; color: var(--vr-muted); }
.vr-stats span { font-size: 0.72rem; color: var(--vr-muted); }

.vr-curve { margin: 0; }
.vr-curve figcaption { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem; }
.vr-curve figcaption span { font-weight: 400; color: var(--vr-muted); }
.vr-plot {
  position: relative; height: 6.5rem;
  border-bottom: 1px solid var(--vr-rule);
  background: repeating-linear-gradient(to bottom, var(--vr-rule) 0 1px, transparent 1px 25%);
  margin-top: 1.1rem;
}
.vr-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vr-area { fill: color-mix(in oklab, var(--vr-accent) 22%, transparent); }
.vr-line { fill: none; stroke: var(--vr-accent); stroke-width: 2; stroke-linejoin: round; }
.vr-marker {
  position: absolute; top: -1.1rem; bottom: 0; transform: translateX(-50%);
  font-size: 0.65rem; font-weight: 700; line-height: 1; color: var(--vr-muted);
  display: flex; flex-direction: column; align-items: center; pointer-events: auto;
}
.vr-marker::after {
  content: ''; flex: 1; width: 0; margin-top: 0.2rem;
  border-left: 1px dashed color-mix(in oklab, currentColor 70%, transparent);
}
.vr-axis { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--vr-muted); margin-top: 0.25rem; font-variant-numeric: tabular-nums; }

.vr-callnext {
  display: flex; gap: 0.5rem; align-items: flex-start; margin: 0;
  padding: 0.55rem 0.65rem; border-radius: 0.5rem; font-size: 0.8rem; line-height: 1.4;
  background: color-mix(in oklab, var(--vr-watched) 16%, transparent);
}
.vr-callnext .material-symbols-outlined { font-size: 1.05rem; color: var(--vr-watched); }

.vr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vr-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name badge" "bar bar" "pct copy" "seen copy";
  column-gap: 0.5rem; row-gap: 0.25rem; align-items: center;
  padding: 0.6rem 0; border-bottom: 1px solid var(--vr-rule);
}
.vr-name { grid-area: name; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-badge {
  grid-area: badge; justify-self: end; font-size: 0.68rem; font-weight: 700; line-height: 1;
  padding: 0.25rem 0.45rem; border-radius: 0.3rem;
  background: color-mix(in oklab, currentColor 10%, transparent); color: var(--vr-muted);
}
.vr-badge[data-status="Watched"] { background: color-mix(in oklab, var(--vr-watched) 22%, transparent); color: var(--vr-watched); }
.vr-badge[data-status="Opened"] { background: color-mix(in oklab, var(--vr-accent) 20%, transparent); color: var(--vr-accent); }
.vr-badge[data-status="Sent"] { background: color-mix(in oklab, var(--vr-sent) 18%, transparent); color: var(--vr-sent); }
.vr-bar { grid-area: bar; height: 0.3rem; border-radius: 1rem; background: var(--vr-rule); overflow: hidden; }
.vr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--vr-accent); }
.vr-pct { grid-area: pct; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.vr-seen { grid-area: seen; font-size: 0.7rem; color: var(--vr-muted); }
.vr-copy { grid-area: copy; align-self: center; }


/* ---------- dashboard: Videos tab cards ---------- */
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-report] [data-cover] .status[data-video-status="Watched"] { background: #14532d; color: #bbf7d0 !important; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-report] [data-cover] .status[data-video-status="Sent"] { background: #2e1065; color: #ddd6fe !important; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-report] [data-cover] .status[data-video-status="Shared"] { background: #0c4a6e; color: #bae6fd !important; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-report] [data-cover] .status[data-video-status="Published"] { background: #1e3a5f; color: #dbeafe !important; }
#dashboard [data-video-tab] .vr-card-stats {
  display: flex; align-items: center; gap: 0.2rem; margin-top: 0.2rem;
  font-size: 0.78rem; font-weight: 600; color: #ffffffb3; font-variant-numeric: tabular-nums;
}
#dashboard [data-video-tab] .vr-card-stats .material-symbols-outlined { font-size: 1rem; color: #7dd3fc; }
#dashboard [data-video-tab] .vr-card-review {
  display: inline-block; margin-top: 0.25rem; font-size: 0.7rem; font-weight: 700;
  padding: 0.15rem 0.4rem; border-radius: 0.3rem; background: #422006; color: #fde68a;
}

/* ---------- dashboard: Home "Videos this week" ---------- */
[data-home-videos-week] .vr-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
[data-home-videos-week] .vr-week > div { min-width: 0; }
[data-home-videos-week] .vr-week-num { font-family: 'PPFragment GlareExtraBold'; font-size: 2rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
[data-home-videos-week] .vr-week-label { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: #ffffff80; }
[data-home-videos-week] .vr-week-top { display: block; margin-top: 0.4rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-underline-offset: 0.2rem; }
@media (max-width: 640px) {
  [data-home-videos-week] .vr-week { grid-template-columns: 1fr 1fr; }
  [data-home-videos-week] .vr-week > div:last-child { grid-column: 1 / -1; }
}