/* TV pages: catalogue browsing, a show/season/episode column, tracking panel.

   The gold star display (.movie-stars) and the state inks (.state-ink-*) are
   global, in css/app.css, so a grade and a "watched" tick read the same here as
   on a movie page. Only what is particular to the TV pages lives here. */

.tv-poster {
    max-width: 15rem;
}

@media (min-width: 768px) {
    .tv-poster-rail {
        position: sticky;
        top: 4.5rem;
    }
}

.tv-title {
    font-size: calc(1.4rem + 1vw);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.tv-title-year {
    font-weight: 400;
    color: var(--mb-ink-muted);
}

.tv-episode-tag {
    font-weight: 400;
    font-size: 0.8em;
}

.tv-synopsis {
    max-width: 62ch;
    line-height: 1.65;
}

/* Separators trail their item, so a wrap never starts a line with a dot. */
.tv-meta .list-inline-item:not(:last-child)::after {
    content: "·";
    margin-left: 0.5rem;
    color: var(--mb-ink-faint);
}

.tv-season-poster {
    width: 3rem;
    aspect-ratio: 2 / 3;
    border-radius: var(--mb-radius);
    background-color: var(--mb-surface-hover);
}

.tv-episode-number {
    width: 2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The actions on an episode row are glyphs alone, so they need the room a word
   used to give them: a square big enough to hit on a phone, and a size that
   keeps the pencil legible next to the number and the title. */
.tv-episode-action {
    --bs-btn-padding-x: 0.45rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-font-size: 1rem;
    line-height: 1;
}

/* Nothing is written under them, so the colour has to do the telling: both rest
   in the grey of the line and come forward on hover — the pencil towards the
   link colour, the crossed-out eye towards the red the site already uses when
   something is about to be taken back. */
.btn-link.tv-episode-action {
    --bs-btn-color: var(--mb-ink-muted);
    --bs-btn-hover-color: var(--mb-link-hover);
    text-decoration: none;
}

.btn-link.tv-episode-action-undo {
    --bs-btn-hover-color: var(--mb-danger);
}

.tv-review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
}

/* Rating input: a half-star radio group, no script. Every half is drawn filled
   and the stylesheet swaps in the hollow star for the halves after the checked
   radio. Shared shape with the movie log; kept here so a TV page needs only its
   own stylesheet. */
.rating-fieldset legend {
    float: none;
    width: auto;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.rating-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rating-input-group {
    position: relative;
    display: inline-flex;
    font-size: 1.75rem;
    line-height: 1;
}

.rating-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.rating-star {
    position: relative;
    display: block;
    width: 0.5em;
    height: 1em;
    overflow: hidden;
    cursor: pointer;
}

.rating-star-glyph {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    line-height: 1;
}

.rating-star-right .rating-star-glyph {
    left: -0.5em;
}

.rating-star-on {
    color: var(--mb-star);
}

.rating-star-off {
    color: var(--mb-star-empty);
    visibility: hidden;
}

:where(.rating-input:checked ~ .rating-input) + .rating-star .rating-star-on,
:where(.rating-input-none:checked ~ .rating-input-group) .rating-star-on {
    visibility: hidden;
}

:where(.rating-input:checked ~ .rating-input) + .rating-star .rating-star-off,
:where(.rating-input-none:checked ~ .rating-input-group) .rating-star-off {
    visibility: visible;
}

.rating-input-group:hover .rating-star-on {
    visibility: visible;
}

.rating-input-group:hover .rating-star-off {
    visibility: hidden;
}

.rating-input-group:hover .rating-star:hover ~ .rating-star .rating-star-on {
    visibility: hidden;
}

.rating-input-group:hover .rating-star:hover ~ .rating-star .rating-star-off {
    visibility: visible;
}

.rating-input:focus-visible + .rating-star {
    outline: 2px solid var(--mb-accent);
    outline-offset: 2px;
}

.rating-clear {
    font-size: 0.875rem;
    color: var(--mb-ink-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rating-input-none:checked ~ .rating-clear {
    color: var(--mb-ink);
    text-decoration: none;
    font-weight: 600;
}

.rating-input-none:focus-visible ~ .rating-clear {
    outline: 2px solid var(--mb-accent);
    outline-offset: 2px;
}

/* The watched picker's checklist: a compact, tappable list of seasons or episodes. */
.tv-mark-list {
    max-height: 45vh;
    overflow-y: auto;
}

.tv-mark-row {
    cursor: pointer;
    border-radius: var(--mb-radius);
    padding-inline: 0.25rem;
}

.tv-mark-row:hover {
    background: var(--mb-surface-hover);
}


/* A native bar dressed as Bootstrap's: its value is its fill, so no width has to
   be written into the page, where the Content-Security-Policy refuses it. */
.tv-progress {
    display: block;
    width: 100%;
    border: 0;
    appearance: none;
}

.tv-progress::-webkit-progress-bar {
    background-color: var(--bs-progress-bg);
}

.tv-progress::-webkit-progress-value {
    background-color: var(--bs-progress-bar-bg);
}

.tv-progress::-moz-progress-bar {
    background-color: var(--bs-progress-bar-bg);
}