/* 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(--bs-secondary-color);
}

.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(--bs-tertiary-color);
}

.tv-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.35rem;
}

/* Two lines of a synopsis is enough to tell one search result from another. */
.tv-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-search-result-poster {
    width: 3.5rem;
    aspect-ratio: 2 / 3;
}

.tv-season-poster {
    width: 3rem;
    aspect-ratio: 2 / 3;
}

.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(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    text-decoration: none;
}

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

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

/* The four shelf states wrap to two rows on a narrow card rather than shrinking
   past readability; each stays a full-width tap target on its row. */
.tv-shelf-states {
    flex-wrap: wrap;
}

.tv-shelf-states .btn {
    flex: 1 1 auto;
}

/* 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(--movie-star-colour);
}

.rating-star-off {
    color: var(--movie-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(--bs-primary);
    outline-offset: 2px;
}

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

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

.rating-input-none:focus-visible ~ .rating-clear {
    outline: 2px solid var(--bs-primary);
    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(--bs-border-radius);
    padding-inline: 0.25rem;
}

.tv-mark-row:hover {
    background: var(--bs-secondary-bg);
}

/* The whole of what the reader did to this subject, behind the short answer the
   card above gives. The film page's history, carried up the tree. */
.tv-log-history-toggle {
    cursor: pointer;
    color: var(--bs-secondary-color);
}

.tv-log-history-toggle:hover,
.tv-log-history[open] > .tv-log-history-toggle {
    color: var(--bs-body-color);
}

.tv-log-history-row + .tv-log-history-row {
    border-top: 1px solid var(--bs-border-color);
}