/* The series broadcast schedule, v2 (next_episode_schedule.dj.html):
   the calendar and the follow promo in a 20% column at the start, the
   selected day's episodes in the 80% beside it. */

/* The glow behind the boxes is blurred past their edges; nothing of it may
   widen the page into a sideways scroll. */
#siteBody:has(.sv2-layout) { overflow-x: clip; }
.sv2-head { margin-bottom: 1.5rem; }
.sv2-head h1 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 900; }
.sv2-sub { margin: 0; color: var(--text-muted); font-size: 14px; }

/* 1fr and 4fr: 20% and 80% of what the gap leaves. */
.sv2-layout { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: 1.25rem; align-items: start; }
/* Soft light behind the boxes, for their glass to blur. */
.sv2-layout::before { content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 92% 8%, rgba(150, 242, 7, .16), transparent 32%), radial-gradient(circle at 12% 30%, rgba(255, 199, 0, .10), transparent 35%), radial-gradient(circle at 60% 95%, rgba(80, 140, 255, .10), transparent 40%); filter: blur(10px); }
.sv2-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--sitehead-h, 72px) + 1rem); }
/* Glass: the card colour let through, the light behind blurred, a bright top edge. */
.sv2-box { border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .22); }

/* ---- calendar ---- */
.sv2-cal { padding: .9rem .75rem 1rem; }
/* The bar that opens and closes it, and the week under it: a phone's only. */
.sv2-cal-toggle, .sv2-week { display: none; }
.sv2-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.sv2-cal-title { margin: 0; font-size: 16px; font-weight: 900; text-align: center; }
.sv2-cal-step { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-color); border-radius: 50%; background: transparent; color: var(--text-body); cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.sv2-cal-step:hover:not(:disabled) { border-color: rgba(150, 242, 7, .45); color: var(--primary-color); }
.sv2-cal-step:disabled { opacity: .35; cursor: not-allowed; }
.sv2-cal-week, .sv2-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.sv2-cal-week span { padding: .2rem 0; color: var(--text-muted); font-size: 12px; font-weight: 700; text-align: center; }
/* The grid keeps six weeks' height, so stepping month to month never jumps. */
.sv2-cal-grid { min-height: calc(6 * 2.1rem + 5 * 3px); align-content: start; }
.sv2-cal-day { position: relative; display: flex; align-items: center; justify-content: center; height: 2.1rem; border: 2px solid transparent; border-radius: 10px; color: var(--text-body); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.sv2-cal-day:hover { background: rgba(150, 242, 7, .1); color: var(--text-body); }
.sv2-cal-day.is-blank { cursor: default; pointer-events: none; }
.sv2-cal-day.is-friday { color: #ef5350; }
/* Today: always the border, whichever day is selected. */
.sv2-cal-day.is-today { border-color: var(--primary-color); }
/* The selected day: the green background. */
.sv2-cal-day.is-selected { background: var(--primary-color); color: #111; }
/* Today selected: the green background, and the border still shows as a ring inside it. */
.sv2-cal-day.is-today.is-selected { box-shadow: inset 0 0 0 2px #111; }
.sv2-cal-day:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.sv2-cal-legend { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .8rem 0 0; padding: .7rem .2rem 0; border-top: 1px solid var(--border-color); list-style: none; color: var(--text-muted); font-size: 12px; }
.sv2-cal-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.sv2-key { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.sv2-key.is-today { border: 2px solid var(--primary-color); }
.sv2-key.is-selected { background: var(--primary-color); }

/* «برو به امروز»: under the month, and under a phone's week strip. */
.sv2-cal-foot { margin-top: .75rem; }
.sv2-cal-today { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 36px; padding: 0 .9rem; border: 1px solid rgba(150, 242, 7, .45); border-radius: 10px; background: rgba(150, 242, 7, .08); color: var(--primary-color); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background-color .2s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.sv2-cal-today:hover { background: rgba(150, 242, 7, .16); }
/* Today already selected and in view: still there, but at rest. */
.sv2-cal-today.is-here { opacity: .5; cursor: default; }
.sv2-week-foot { display: none; }

/* ---- follow promo ---- */
.sv2-promo { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.25rem 1rem; text-align: center; background: radial-gradient(circle at 50% 0, rgba(150, 242, 7, .14), rgba(150, 242, 7, 0) 70%), color-mix(in srgb, var(--bg-card) 55%, transparent); }
.sv2-promo-icon { color: var(--primary-color); }
.sv2-promo-title { margin: 0; font-size: 16px; font-weight: 900; }
.sv2-promo-text { margin: 0 0 .35rem; color: var(--text-muted); font-size: 13px; line-height: 1.8; }
.sv2-promo-btn { width: 100%; justify-content: center; }
.sv2-promo-btn[hidden] { display: none; }

/* ---- the day's episodes ---- */
.sv2-main { padding: 1rem 1.25rem 1.25rem; min-height: 320px; }
.sv2-main-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 1px solid var(--border-color); }
.sv2-day-title { margin: 0; font-size: 20px; font-weight: 900; }
.sv2-day-count { color: var(--text-muted); font-size: 13px; }
.sv2-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.sv2-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .6rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .03); transition: border-color .2s, background-color .2s; }
.sv2-item:hover { border-color: rgba(255, 199, 0, .35); background: rgba(255, 255, 255, .05); }
.sv2-item[hidden] { display: none; }
.sv2-item-cover { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 180 / 280; background: var(--bg-body); }
.sv2-item-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv2-item-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sv2-item-title { margin: 0; overflow: hidden; text-align: right; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sv2-item-title a { color: var(--text-body); text-decoration: none; }
.sv2-item-title a:hover { color: var(--primary-color); }
.sv2-item-episode { margin: 0; color: var(--primary-color); font-size: 13px; font-weight: 800; }
.sv2-item-name { margin: 0; overflow: hidden; text-align: right; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sv2-item-date { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--text-muted); font-size: 12px; }
/* Follow: the site's follow yellow, as on the work page and a person's page. */
.sv2-follow { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .85rem; border: 1px solid var(--warning-color); border-radius: 10px; background: transparent; color: var(--warning-color); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sv2-follow:hover { background: var(--warning-lighten-color); color: var(--warning-color); }
.sv2-follow.filled, .sv2-follow[aria-pressed="true"] { background: var(--warning-color); color: #111; }
.sv2-empty { margin: 1rem 0 0; padding: 3rem 1.5rem; border: 1px dashed var(--border-color); border-radius: 14px; color: var(--text-muted); text-align: center; }

/* Light mode: the glass edges and the item panes in dark ink instead of light. */
body.light-mode .sv2-box { border-color: rgba(0, 0, 0, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px rgba(0, 0, 0, .08); }
body.light-mode .sv2-item { border-color: rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .45); }
body.light-mode .sv2-item:hover { background: rgba(255, 255, 255, .7); }
body.light-mode .sv2-follow { color: #b38900; border-color: #e0ad00; }
body.light-mode .sv2-follow:hover { background: rgba(255, 199, 0, .14); color: #8a6a00; }

/* A tablet: the side column is too narrow at 20%; it widens. */
@media (max-width: 1199.98px) {
  .sv2-layout { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
}
/* A phone: the calendar on top, the episodes under it, the promo last. */
@media (max-width: 767.98px) {
  .sv2-layout { grid-template-columns: minmax(0, 1fr); }
  .sv2-side { display: contents; }
  .sv2-cal { order: 1; padding: 0; }
  /* Folded: one bar with the selected day; open, the month under it. */
  .sv2-cal-toggle { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 52px; padding: .6rem .9rem; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text-body); font: inherit; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* No ring or border when tapped or focused: the arrow already says it opened. */
  .sv2-cal-toggle:hover, .sv2-cal-toggle:focus, .sv2-cal-toggle:focus-visible, .sv2-cal-toggle:active { border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text-body); }
  .sv2-cal-toggle > svg:first-child { flex: none; color: var(--primary-color); }
  .sv2-cal-toggle-day { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  /* The arrow in a round chip of its own, in the site green, so it reads as the way to open. */
  .sv2-cal-toggle-arrow { flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 5px; border-radius: 50%; background: rgba(150, 242, 7, .16); color: var(--primary-color); stroke-width: 2.8; transition: transform .25s ease; }
  .sv2-cal.is-open .sv2-cal-toggle-arrow { transform: rotate(180deg); }
  /* The week: seven days in a row, marked as the calendar marks them. */
  .sv2-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 .6rem .7rem; }
  .sv2-cal.is-open .sv2-week { display: none; }
  .sv2-week-foot { display: block; padding: 0 .6rem .75rem; }
  .sv2-cal.is-open .sv2-week-foot { display: none; }
  .sv2-week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 52px; border: 2px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--text-body); text-decoration: none; }
  .sv2-week-day small { color: var(--text-muted); font-size: 11px; }
  .sv2-week-day b { font-size: 15px; font-weight: 800; }
  .sv2-week-day.is-friday b { color: #ef5350; }
  .sv2-week-day.is-today { border-color: var(--primary-color); }
  .sv2-week-day.is-selected { background: var(--primary-color); color: #111; }
  .sv2-week-day.is-selected small, .sv2-week-day.is-selected b { color: #111; }
  .sv2-week-day.is-today.is-selected { box-shadow: inset 0 0 0 2px #111; }
  .sv2-cal-body { display: none; padding: .2rem .75rem 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
  .sv2-cal.is-open .sv2-cal-body { display: block; }
  .sv2-main { order: 2; padding: .85rem .75rem 1rem; }
  .sv2-promo { order: 3; }
  .sv2-items { grid-template-columns: minmax(0, 1fr); }
  .sv2-item { grid-template-columns: 60px minmax(0, 1fr); gap: .7rem; }
  .sv2-follow { grid-column: 1 / -1; justify-content: center; }
  .sv2-day-title { font-size: 17px; }
}