.top-info-container {
    flex: 0 0 auto;
    height: 205px;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--bright-color);
    position: relative;
    /* ok-on-old-engines: progressive enhancement. Chromium 53 has no position:sticky and
       drops this line, keeping `relative`. Correct on the TV anyway - the page is
       overflow:hidden and the row-collapse scheme keeps scrollTop at 0, so there is
       nothing scrolling underneath for it to stick against. */
    position: sticky; /* ok-on-old-engines: enhancement, see note above */
    top: 0;
    z-index: 15;
}

/* Pages with little else on screen (the season grid) let the description breathe. The
   max-height reserves room for the page heading plus one full poster row, so the cards stay
   visible; the line-clamp is what produces the ellipsis. */
.top-info-container.expanded {
    height: auto;
    min-height: 205px;
    max-height: calc(100vh - var(--app-header-height) - 360px);
}

    .top-info-container.expanded .top-info-synopsis {
        -webkit-line-clamp: 14;
        max-width: 90ch;
    }

.top-info-title {
    margin: 0 0 0.25rem;
    font-size: 2.2rem;
    font-weight: 600;
    text-shadow: 0 2px 12px var(--dark-color);
}

.top-info-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

/* Neutral dark-gray pills so the technical details read as separate from the prose below. */
.top-info-badges {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.top-info-badge {
    background: var(--text-muted);
    color: #661818;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.top-info-synopsis {
    max-width: 60ch;
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-info-cast {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.top-info-loading {
    height: 205px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}


/* Chromium 53 has no flexbox gap (Chrome 84). .top-info-badges wraps, so the margin goes on every
   child rather than using `+ *`, which would skip the first badge on each new line. */
.top-info-badges {
    margin-right: -0.4rem;
}

.top-info-badges > * {
    margin: 0 0.4rem 0.4rem 0;
}


/* Browser-mode inline variant: rendered by a page as its heading block instead of being pinned by
   the shell. Nothing is stacked underneath fighting for the space, so the fixed 205px height and
   the sticky positioning both go - the block is just as tall as the show's description needs. */
.top-info-container.top-info-inline {
    height: auto;
    min-height: 0;
    max-height: none;
    position: static;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.top-info-inline .top-info-synopsis {
    -webkit-line-clamp: 6;
    max-width: 90ch;
}

/* No reserved 205px placeholder here: the enrich fetch resolves in a moment and a block that tall
   would shove the grid down and then snap it back. */
.top-info-inline .top-info-loading {
    height: auto;
    min-height: 3.5rem;
}