/* ============================================================================
   PREVIOUSLY — tracking UI. Token-driven; no invented values.
   :root fallback keeps the card correct on pages that don't load tokens.css
   (values identical to css/tokens.css — no conflict when it is loaded).
   ============================================================================ */
:root {
  --pv-noir: #0a0a0b; --pv-noir-2: #111113; --pv-noir-3: #17171a;
  --pv-ivory: #f4efe6; --pv-ivory-dim: rgba(244,239,230,.62);
  --pv-rule: rgba(244,239,230,.14);
  --pv-red: #ec4634; --pv-red-deep: #b32b1d; --pv-on-red: #0a0a0b;
  --pv-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pv-body: 17px; --pv-body-sm: 14px; --pv-caption: 13px; --pv-label: 11px;
  --pv-track-xl: .34em; --pv-track-lg: .24em; --pv-track-md: .18em;
  --pv-leading-ui: 1.4;
  --pv-s1: 4px; --pv-s2: 8px; --pv-s3: 12px; --pv-s4: 16px; --pv-s6: 24px; --pv-s8: 32px;
  --pv-r-pill: 999px; --pv-r-sm: 8px; --pv-r-card: 16px;
  --pv-shadow-card: 0 18px 44px rgba(0,0,0,.5);
  --pv-shadow-btn: 0 10px 34px rgba(236,70,52,.35);
  --pv-target-min: 44px; --pv-z-toast: 110;
  --pv-ease: cubic-bezier(.22,.8,.28,1); --pv-t-fast: .18s; --pv-t-med: .25s;
  --pv-focus-outline: 2px solid var(--pv-red);
}
.pv-track-card {
  background: var(--pv-noir-2);
  border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-card);
  padding: var(--pv-s6);
  margin: var(--pv-s6) 0;
  box-shadow: var(--pv-shadow-card);
}
.pv-track-card__kicker {
  font-size: var(--pv-label);
  text-transform: uppercase;
  letter-spacing: var(--pv-track-xl);
  color: var(--pv-red);
  font-weight: 700;
}
.pv-track-card__body { margin-top: var(--pv-s3); }
.pv-track-card__progress {
  font-size: var(--pv-body);
  color: var(--pv-ivory);
  margin: 0 0 var(--pv-s2);
  font-weight: 600;
}
.pv-track-card__bar { margin-bottom: var(--pv-s4); }
.pv-track-card__signedout,
.pv-track-card__loading {
  color: var(--pv-ivory-dim);
  font-size: var(--pv-body-sm);
  margin: 0 0 var(--pv-s4);
  line-height: var(--pv-leading-ui);
}
.pv-track-card__formtitle {
  font-size: var(--pv-label);
  text-transform: uppercase;
  letter-spacing: var(--pv-track-md);
  color: var(--pv-ivory-dim);
  margin: var(--pv-s6) 0 var(--pv-s2);
}
.pv-track-card__form {
  display: flex;
  align-items: center;
  gap: var(--pv-s2);
  flex-wrap: wrap;
}
.pv-track-card__slabel {
  color: var(--pv-ivory-dim);
  font-size: var(--pv-body-sm);
  font-weight: 700;
}

/* Progress bar */
.pv-track-progress {
  height: 8px;
  border-radius: var(--pv-r-pill);
  background: rgba(244, 239, 230, .12);
  overflow: hidden;
}
.pv-track-progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--pv-r-pill);
  background: linear-gradient(90deg, var(--pv-red-deep), var(--pv-red));
  transition: width var(--pv-t-med) var(--pv-ease);
}

/* Buttons — token geometry, 44px targets */
.pv-track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pv-target-min);
  min-width: var(--pv-target-min);
  padding: 0 var(--pv-s6);
  border-radius: var(--pv-r-pill);
  border: 1px solid var(--pv-rule);
  background: var(--pv-noir-3);
  color: var(--pv-ivory);
  font-family: var(--pv-sans);
  font-size: var(--pv-body-sm);
  font-weight: 700;
  letter-spacing: var(--pv-track-lg);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--pv-t-fast) var(--pv-ease), box-shadow var(--pv-t-fast) var(--pv-ease);
}
.pv-track-btn:hover { transform: translateY(-1px); }
.pv-track-btn:focus-visible { outline: var(--pv-focus-outline); outline-offset: 2px; }
.pv-track-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.pv-track-btn--primary {
  background: var(--pv-red);
  border-color: var(--pv-red);
  color: var(--pv-on-red);
  box-shadow: var(--pv-shadow-btn);
  margin-bottom: var(--pv-s2);
}
.pv-track-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--pv-ivory-dim);
  min-height: var(--pv-target-min);
  padding: 0 var(--pv-s2);
  margin-top: var(--pv-s2);
}
.pv-track-btn--ghost:hover { color: var(--pv-ivory); }
.pv-track-btn--busy { cursor: wait; }

/* Number inputs */
.pv-track-input {
  width: 64px;
  min-height: var(--pv-target-min);
  border-radius: var(--pv-r-sm);
  border: 1px solid var(--pv-rule);
  background: var(--pv-noir);
  color: var(--pv-ivory);
  font-family: var(--pv-sans);
  font-size: var(--pv-body);
  text-align: center;
  padding: 0 var(--pv-s2);
  color-scheme: dark;
}
.pv-track-input:focus-visible { outline: var(--pv-focus-outline); outline-offset: 2px; }

/* Continue Watching card additions (account page) */
.pv-favcard__trackrow {
  display: flex;
  flex-direction: column;
  gap: var(--pv-s1);
  width: 100%;
  padding: var(--pv-s2) var(--pv-s3) var(--pv-s3);
}
.pv-favcard__trackmeta {
  font-size: var(--pv-caption);
  color: var(--pv-ivory-dim);
}
.pv-favcard__trackbtns {
  display: flex;
  gap: var(--pv-s2);
  flex-wrap: wrap;
}
.pv-track-mini {
  min-height: var(--pv-target-min);
  padding: 0 var(--pv-s4);
  border-radius: var(--pv-r-pill);
  border: 1px solid var(--pv-rule);
  background: var(--pv-noir-3);
  color: var(--pv-ivory);
  font-family: var(--pv-sans);
  font-size: var(--pv-caption);
  font-weight: 700;
  letter-spacing: var(--pv-track-md);
  text-transform: uppercase;
  cursor: pointer;
}
.pv-track-mini:focus-visible { outline: var(--pv-focus-outline); outline-offset: 2px; }
.pv-track-mini:disabled { opacity: .55; cursor: wait; }
.pv-track-mini--primary {
  background: var(--pv-red);
  border-color: var(--pv-red);
  color: var(--pv-on-red);
}

/* History row remove button */
.pv-histrow__remove {
  margin-left: auto;
  flex: none;
  min-width: var(--pv-target-min);
  min-height: var(--pv-target-min);
  border-radius: var(--pv-r-pill);
  border: 1px solid var(--pv-rule);
  background: transparent;
  color: var(--pv-ivory-dim);
  font-family: var(--pv-sans);
  font-size: var(--pv-caption);
  cursor: pointer;
  padding: 0 var(--pv-s3);
}
.pv-histrow__remove:hover { color: var(--pv-ivory); border-color: var(--pv-red); }
.pv-histrow__remove:focus-visible { outline: var(--pv-focus-outline); outline-offset: 2px; }
.pv-histrow__remove:disabled { opacity: .55; cursor: wait; }

/* Fallback toast (when auth.js is absent) */
.pv-track-toast {
  position: fixed;
  left: 50%;
  bottom: var(--pv-s8);
  transform: translate(-50%, 16px);
  background: var(--pv-noir-2);
  color: var(--pv-ivory);
  border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-pill);
  padding: var(--pv-s3) var(--pv-s6);
  font-size: var(--pv-body-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pv-t-med) var(--pv-ease), transform var(--pv-t-med) var(--pv-ease);
  z-index: var(--pv-z-toast);
  max-width: min(92vw, 480px);
  text-align: center;
}
.pv-track-toast--show { opacity: 1; transform: translate(-50%, 0); }
.pv-track-toast--error { border-color: var(--pv-red); }

@media (max-width: 1023px) {
  .pv-track-card { padding: var(--pv-s4); }
}

/* ============ LIGHT THEME (prefers-color-scheme) — color-only overrides ============ */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --pv-noir: #faf8f2;
    --pv-noir-2: #ffffff;
    --pv-noir-3: #f0ece1;
    --pv-ivory: #1e1a14;
    --pv-ivory-dim: rgba(30,26,20,.68);
    --pv-rule: rgba(30,26,20,.14);
    --pv-red-deep: #b02a1a;
    /* --pv-red stays #ec4634 (fills); --pv-on-red stays (text on red fills) */
  }
  .pv-track-progress { background: rgba(30,26,20,.12); }
}