/* ---------- Airing calendar ----------
   A week view: a scrollable row of day chips over a tab panel holding that day's
   airings as a horizontal content rail (compact cards, no air time — the chosen
   day tab already says when). */
.calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* A plain readout, not an action — override .section-link's new pill/border
   treatment so the month name doesn't look like a button. */
.cal-month {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
  padding: 0;
  border: none;
  background: none;
}

/* ---------- Day tabs ---------- */
.cal-days {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--container-padding);
  padding-inline: var(--container-padding);
  padding-block: var(--space-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cal-days::-webkit-scrollbar {
  display: none;
}

.cal-day {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: clamp(3.25rem, 15vw, 4rem);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.cal-day:hover,
.cal-day:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.cal-day:active {
  transform: scale(0.96);
}

.cal-day-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

/* Persian is cursive — tracking would break the letters' joining, and the
   uppercase transform is meaningless for the script. Slightly larger too, since
   Arabic-script glyphs need more height than Latin caps to stay legible.
   Every day chip renders localized weekday names now (not just "today"), so
   this keys off the active UI direction rather than a per-node `lang`
   attribute — see rtl.css for the same idea applied app-wide to letter-spacing. */
[dir='rtl'] .cal-day-name {
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}

.cal-day-num {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Dot marks days that actually have airings — lighter than a count badge. */
.cal-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.cal-day.has-airings .cal-day-dot {
  background: var(--color-accent);
}

.cal-day.is-today {
  border-color: rgba(215, 163, 92, 0.4);
}

.cal-day.is-active {
  background: linear-gradient(180deg, rgba(215, 163, 92, 0.28) 0%, rgba(215, 163, 92, 0.12) 100%);
  border-color: rgba(236, 194, 127, 0.55);
  color: var(--color-accent-strong);
  box-shadow: 0 6px 18px rgba(215, 163, 92, 0.14);
}

.cal-day.is-active .cal-day-num {
  color: var(--color-accent-strong);
}

.cal-day.is-active .cal-day-dot {
  background: var(--color-accent-strong);
}

/* ---------- Panel ---------- */
.cal-panel {
  /* No inline padding: the rail inside supplies it, matching the other content
     rails so all posters line up on the same left edge. */
  min-height: 1px;
}

.cal-panel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* ---------- States ---------- */
.cal-state {
  margin-inline: var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}

.cal-state svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

/* ---------- Compact rail cards ----------
   One step smaller than the main content rails so the calendar reads as a
   secondary, in-panel rail rather than competing with them. */
.card-compact {
  width: var(--card-width-sm);
}

.card-ep-badge {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card-flag {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-contrast);
  background: var(--color-accent-strong);
}

.card-network {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}