/**
 * Festival Live Diary (see inc/festival-diary.php, the "Live Diary" tab
 * on page-festival.php). One lane per correspondent; a reviewed card is
 * the real .rev Letterboxd review card (css/components/letterboxd.css)
 * at the dark-surface colors css/pages/author.css's .author-lb .rev
 * override already uses — same component, same colors, reused here
 * rather than redefined. The lane's scroll arrows reuse the real
 * .rev-track / .rev-nav classes the same way, for the same reason.
 *
 * Lives on the already-dark .festival-page, so there's no light variant
 * to carry — same reasoning as festival.css itself.
 */

.fd-diary { margin-bottom: var(--space-8); }

.fd-diary__empty {
  padding: var(--space-8) 0; color: rgba(255, 255, 255, 0.5); font-size: 13.5px;
}

.fd-lanes { display: flex; flex-direction: column; gap: var(--space-8); }

.fd-lane__head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.fd-lane__avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.fd-lane__name { font-size: 13.5px; font-weight: 700; color: var(--color-white); }
.fd-lane__progress { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-left: 2px; }
.fd-lane__progress b { color: rgba(255, 255, 255, 0.7); font-weight: 700; }

/* Wraps the real .rev-track / .rev-nav (letterboxd.css) — own class so
   js/interactions.js's generic .rev-carousel init (used elsewhere for
   the plain Letterboxd reviews row) doesn't also double-init this one;
   see initLiveDiaryLanes() in interactions.js. */
.fd-lane__scroller { position: relative; padding: 0 34px; }
.fd-lane .rev-nav { background: #2b2822; border-color: #4a4438; color: #ece3d2; }

/* ---- cards: upcoming / now / reviewed all share one footprint so the
   row's bottom edge never jumps ---- */
.fd-card { flex: none; width: 236px; height: 254px; }

.fd-card--upcoming, .fd-card--now {
  border-radius: var(--radius-md); padding: 13px 14px; height: 100%;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; gap: 6px; justify-content: flex-start;
}
.fd-card__time {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.fd-card__title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.78); line-height: 1.4; }

.fd-card--now { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.fd-card--now .fd-card__time { color: var(--color-accent); }
.fd-card--now .fd-card__title { color: var(--color-white); font-weight: 700; }

.fd-card__now-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-accent);
}
.fd-card__now-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .fd-card__now-tag .dot { animation: fd-dotpulse 1.8s ease-in-out infinite; }
}
@keyframes fd-dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* A reviewed slot is a .rev card (already fully styled) that also
   carries .fd-card for the shared footprint — no avatar (the lane
   header already says whose diary this is), and the star meter on its
   own line under title/date instead of squeezed into a header row. */
.fd-lane .rev {
  display: flex; flex-direction: column; height: 100%;
  background: #2b2822; border-color: #3a352c; color: #ece3d2;
}
.fd-lane .rev__who { color: var(--color-white); }
.fd-lane .rev__when { color: #a89d8b; }
.fd-lane .rev__text { color: #c6bca9; flex: 1 1 auto; }
.fd-lane .rev__stars { display: block; margin-top: 9px; margin-left: 0; }

@media (max-width: 560px) {
  .fd-card { width: 196px; }
}