/* جدول پخش — components. Build every page from these; add new ones here, not inline. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--jp-paper); color: var(--jp-ink);
  font-family: var(--jp-font); font-size: var(--jp-fs-md); line-height: var(--jp-lh);
  direction: rtl; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--jp-red); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.4; text-wrap: balance; }
p { margin: 0; }
.jp-ltr { direction: ltr; unicode-bidi: isolate; }
.jp-num { font-variant-numeric: tabular-nums; }
.jp-wrap {
  max-width: var(--jp-maxw); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.jp-header { border-bottom: 1px solid var(--jp-line); background: var(--jp-paper); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.jp-header .jp-wrap { display: flex; align-items: center; gap: var(--jp-s5); min-height: 64px; }
.jp-logo { display: flex; align-items: center; gap: 8px; flex: none; }
.jp-logo img { width: 34px; height: 34px; }
.jp-wordmark { font-weight: 900; font-size: 22px; line-height: 1; white-space: nowrap; color: var(--jp-ink); }
.jp-wordmark b { color: var(--jp-red); font-weight: 900; }
.jp-nav { display: flex; gap: var(--jp-s4); font-size: var(--jp-fs-sm); color: var(--jp-ink-2); flex-wrap: wrap; }
.jp-nav a[aria-current="page"] { color: var(--jp-ink); font-weight: 700; }
.jp-header .jp-search-btn { margin-inline-start: auto; }
@media (max-width: 720px) { .jp-nav { display: none; } }

/* Buttons */
.jp-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: var(--jp-r-md); border: 1px solid transparent;
  font: 700 var(--jp-fs-sm)/1 var(--jp-font); cursor: pointer; white-space: nowrap;
}
.jp-btn--primary { background: var(--jp-red-fill); color: var(--jp-on-red); }
.jp-btn--primary:hover { background: var(--jp-red-fill-press); }
.jp-btn--ghost { background: transparent; color: var(--jp-ink); border-color: var(--jp-line); }
.jp-btn--ghost:hover { border-color: var(--jp-muted); }
.jp-btn svg { width: 18px; height: 18px; }

/* Search */
.jp-search { display: flex; align-items: center; gap: 10px; background: var(--jp-paper); border: 1.5px solid var(--jp-ink); border-radius: var(--jp-r-lg); padding: 0 16px; min-height: 56px; max-width: 640px; }
.jp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 var(--jp-fs-lg) var(--jp-font); color: var(--jp-ink); }
.jp-search input::placeholder { color: var(--jp-muted); }
.jp-search input:focus { outline: none; }
.jp-search:focus-within { border-color: var(--jp-red); }

/* Badges — the logo bubble as a UI motif */
.jp-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--jp-r-bubble); font-size: var(--jp-fs-xs); font-weight: 700; line-height: 1.9; white-space: nowrap; }
.jp-bubble--new { background: var(--jp-butter); color: var(--jp-on-butter); }
.jp-bubble--tonight { background: var(--jp-red-fill); color: var(--jp-on-red); }
.jp-bubble--predicted { background: var(--jp-canvas); color: var(--jp-ink-2); }

/* Platform chip: text only, neutral colors (we stay neutral between platforms) */
.jp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; min-height: 26px; border: 1px solid var(--jp-line); border-radius: var(--jp-r-pill); font-size: var(--jp-fs-xs); color: var(--jp-ink-2); white-space: nowrap; background: var(--jp-paper); }
.jp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
button.jp-chip { cursor: pointer; font-family: inherit; }
.jp-chip[aria-pressed="true"] { background: var(--jp-ink); border-color: var(--jp-ink); color: var(--jp-paper); }

/* Section heading */
.jp-section { display: grid; gap: var(--jp-s4); padding-block: var(--jp-s7) 0; }
.jp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jp-s4); }
.jp-section-head h2 { font-size: var(--jp-fs-xl); font-weight: 800; }
.jp-section-head a { font-size: var(--jp-fs-sm); color: var(--jp-red-text); font-weight: 700; }

/* Poster placeholder (real posters only with the platform's permission) */
.jp-poster { aspect-ratio: 2 / 3; border-radius: var(--jp-r-md); background: var(--jp-canvas); display: flex; align-items: flex-end; padding: 10px; color: var(--jp-ink-2); font-weight: 800; font-size: var(--jp-fs-sm); line-height: 1.5; overflow: hidden; }
.jp-poster[data-tone="red"] { background: var(--jp-red-soft); color: var(--jp-red-text); }
.jp-poster[data-tone="butter"] { background: var(--jp-butter-soft); color: var(--jp-ink); }

/* Title card */
.jp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--jp-s5) var(--jp-s4); }
.jp-card { display: grid; gap: 8px; align-content: start; min-width: 0; }
.jp-card h3 { font-size: var(--jp-fs-md); font-weight: 700; line-height: 1.6; }
.jp-card .jp-meta { font-size: var(--jp-fs-xs); color: var(--jp-muted); }
.jp-card:hover h3 { color: var(--jp-red-text); }

/* Episode row (schedule) */
.jp-rows { display: grid; }
.jp-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--jp-s3); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--jp-line); }
.jp-row:last-child { border-bottom: 0; }
.jp-row time { font-weight: 800; font-size: var(--jp-fs-lg); font-variant-numeric: tabular-nums; }
.jp-row .jp-row-title { font-weight: 700; display: block; }
.jp-row .jp-meta { font-size: var(--jp-fs-xs); color: var(--jp-muted); }
.jp-row-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .jp-row { grid-template-columns: 52px minmax(0, 1fr); } .jp-row-side { grid-column: 2; justify-content: flex-start; } }

/* Day block */
.jp-day { display: grid; gap: 4px; padding-block: var(--jp-s4); }
.jp-day-head { display: flex; align-items: baseline; gap: 10px; }
.jp-day-head h2, .jp-day-head h3 { font-size: var(--jp-fs-lg); font-weight: 800; }
.jp-day-head span { font-size: var(--jp-fs-sm); color: var(--jp-muted); }

/* Next-episode callout (series page) */
.jp-next { display: grid; gap: 6px; padding: var(--jp-s5); border-radius: var(--jp-r-lg); background: var(--jp-red-soft); }
.jp-next .jp-next-label { font-size: var(--jp-fs-sm); font-weight: 700; color: var(--jp-red-text); }
.jp-next .jp-next-when { font-size: var(--jp-fs-2xl); font-weight: 800; line-height: 1.4; }
.jp-next .jp-meta { font-size: var(--jp-fs-sm); color: var(--jp-ink-2); }

/* Where-to-watch list */
.jp-where { display: grid; gap: 8px; }
.jp-where a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--jp-line); border-radius: var(--jp-r-md); font-weight: 700; }
.jp-where a:hover { border-color: var(--jp-ink); }
.jp-where small { font-weight: 400; color: var(--jp-muted); font-size: var(--jp-fs-xs); }

/* Follow strip */
.jp-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jp-s4); padding: var(--jp-s5); border-radius: var(--jp-r-lg); background: var(--jp-ink); color: var(--jp-paper); }
.jp-follow h2 { font-size: var(--jp-fs-xl); font-weight: 800; }
.jp-follow p { color: var(--jp-line); font-size: var(--jp-fs-sm); }
:root[data-theme="dark"] .jp-follow, .jp-follow.is-dark { background: var(--jp-canvas); color: var(--jp-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jp-follow { background: var(--jp-canvas); color: var(--jp-ink); } :root:not([data-theme="light"]) .jp-follow p { color: var(--jp-muted); } }

/* Footer */
.jp-footer { margin-top: var(--jp-s8); border-top: 1px solid var(--jp-line); padding-block: var(--jp-s6); font-size: var(--jp-fs-sm); color: var(--jp-muted); }
.jp-footer .jp-wrap { display: flex; flex-wrap: wrap; gap: var(--jp-s4) var(--jp-s6); justify-content: space-between; }

/* Page hero */
.jp-hero { padding-block: var(--jp-s7) var(--jp-s2); display: grid; gap: var(--jp-s4); }
.jp-hero h1 { font-size: clamp(30px, 6vw, var(--jp-fs-4xl)); font-weight: 900; }
.jp-hero p { color: var(--jp-ink-2); font-size: var(--jp-fs-lg); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }