/* =========================================================================
   Recall theme — 4 of 4: pages
   Layout and pieces that belong to one page or one group of pages. Anything
   used by more than one kind of page lives in components.css.
   ========================================================================= */

/* ---- Section headings (every page) ---------------------------------------- */

.tvdb-section-title {
    margin-bottom: var(--tvdb-space-3);
}

/* The number after a heading: "Watching 7", "Notifications 4 new". */
.tvdb-count {
    margin-left: var(--tvdb-space-1);
    font-family: var(--tvdb-font-mono);
    font-size: 0.7em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tvdb-text-muted);
}

/* A count with a word in it ("5 new"): the reading face, so the space is a normal space. */
.tvdb-count--words {
    font-family: var(--tvdb-font-ui);
}

/* ---- Compact stats (Dashboard, Admin) ---------------------------------------
   Small figures in one row at every width. On the Dashboard each one is a link. */

.tvdb-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tvdb-space-2);
}

.tvdb-stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-1);
    height: 100%;
    padding: var(--tvdb-space-2) var(--tvdb-space-3);
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-md);
    color: var(--tvdb-text);
    text-decoration: none;
    transition: border-color var(--tvdb-ease);
}

a.tvdb-stat-item:hover,
a.tvdb-stat-item:focus-visible {
    border-color: var(--tvdb-ink-line-strong);
    color: var(--tvdb-text);
}

.tvdb-stat-item__value {
    font-family: var(--tvdb-font-display);
    font-size: var(--tvdb-text-xl);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tvdb-stat-item__label {
    font-size: var(--tvdb-text-xs);
    line-height: var(--tvdb-leading-snug);
    color: var(--tvdb-text-muted);
}

a.tvdb-stat-item:hover .tvdb-stat-item__label,
a.tvdb-stat-item:focus-visible .tvdb-stat-item__label {
    color: var(--tvdb-signal-text);
    text-decoration: underline;
}

@media (min-width: 576px) {
    .tvdb-stat-row {
        display: flex;
        flex-wrap: wrap;
    }

    .tvdb-stat-item {
        flex-direction: row;
        align-items: baseline;
        gap: var(--tvdb-space-2);
    }

    .tvdb-stat-item__label {
        font-size: var(--tvdb-text-sm);
    }
}

/* ---- Dashboard ---------------------------------------------------------------- */

/* Under Continue watching: the series left out because they haven't been watched in a while. */
.tvdb-dormant-link {
    margin: var(--tvdb-space-3) 0 0;
    font-size: var(--tvdb-text-sm);
}

.tvdb-dormant-link > a {
    color: var(--tvdb-text-muted);
}

.tvdb-dormant-link > a:hover,
.tvdb-dormant-link > a:focus-visible {
    color: var(--tvdb-signal-text);
}

.tvdb-schedule-day {
    margin: var(--tvdb-space-5) 0 var(--tvdb-space-2);
    padding-bottom: var(--tvdb-space-1);
    border-bottom: 1px solid var(--tvdb-ink-line);
    font-family: var(--tvdb-font-ui);
    font-size: var(--tvdb-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tvdb-text-muted);
}

.tvdb-schedule-day:first-of-type {
    margin-top: 0;
}

/* ---- Landing -------------------------------------------------------------------- */

/* Text on the left, a picture of the product on the right; stacked on phones. */
.tvdb-landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--tvdb-space-6);
    padding-block: var(--tvdb-space-4) var(--tvdb-space-6);
}

@media (min-width: 992px) {
    .tvdb-landing-hero {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--tvdb-space-7);
        padding-block: var(--tvdb-space-6) var(--tvdb-space-7);
    }
}

/* The one headline on the site set larger than a page's h1. */
.tvdb-landing-hero__title {
    margin-bottom: var(--tvdb-space-3);
    font-size: clamp(var(--tvdb-text-3xl), 7vw, var(--tvdb-text-4xl));
    line-height: 1;
}

.tvdb-landing-hero__lead {
    max-width: 30rem;
    margin-bottom: var(--tvdb-space-5);
    font-size: var(--tvdb-text-lg);
    line-height: var(--tvdb-leading-body);
    color: var(--tvdb-text-muted);
}

/* The preview: real components, static, with abstract art. Nothing in it responds to the pointer. */
.tvdb-landing-preview {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-2);
    padding: var(--tvdb-space-4);
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-lg);
    box-shadow: var(--tvdb-shadow-sm);
    pointer-events: none;
    user-select: none;
}

.tvdb-landing-preview__label {
    font-family: var(--tvdb-font-display);
    font-size: var(--tvdb-text-lg);
    font-weight: 800;
    line-height: var(--tvdb-leading-tight);
}

.tvdb-landing-preview__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: var(--tvdb-space-4);
    margin-top: var(--tvdb-space-2);
}

.tvdb-landing-preview__split > div {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-2);
    min-width: 0;
}

/* Phones: the rows need the width, and a lone poster under them leaves a
   hole beside it, so the preview is the catch-up card and the rows there. */
@media (max-width: 575.98px) {
    .tvdb-landing-preview__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .tvdb-landing-preview__split > .tvdb-landing-preview__poster {
        display: none;
    }
}

.tvdb-landing-preview__rows {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-2);
}

.tvdb-landing-preview .tvdb-upcoming-card {
    background: var(--tvdb-paper);
}

.tvdb-landing-preview__progress {
    width: 40%;
}

/* Abstract art: a gradient with one soft disc. */
.tvdb-art {
    background-image:
        radial-gradient(circle at 72% 30%, var(--tvdb-art-shape) 0 22%, transparent 23%),
        radial-gradient(circle at 18% 88%, var(--tvdb-art-shape) 0 30%, transparent 31%),
        var(--tvdb-art-teal);
}

.tvdb-art--amber {
    background-image:
        radial-gradient(circle at 30% 30%, var(--tvdb-art-shape) 0 30%, transparent 31%),
        var(--tvdb-art-amber);
}

.tvdb-art--green {
    background-image:
        radial-gradient(circle at 50% 36%, var(--tvdb-art-shape) 0 26%, transparent 27%),
        radial-gradient(circle at 50% 110%, var(--tvdb-art-shape) 0 40%, transparent 41%),
        var(--tvdb-art-green);
}

.tvdb-art--rose {
    background-image:
        radial-gradient(circle at 68% 70%, var(--tvdb-art-shape) 0 34%, transparent 35%),
        var(--tvdb-art-rose);
}

/* Three features: an icon, a short heading, a sentence. */
.tvdb-landing-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tvdb-space-5);
    padding-block: var(--tvdb-space-6);
    border-top: 1px solid var(--tvdb-ink-line);
}

@media (min-width: 768px) {
    .tvdb-landing-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--tvdb-space-6);
    }
}

.tvdb-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--tvdb-space-3);
    border-radius: var(--tvdb-radius-round);
    background: var(--tvdb-signal-tint-strong);
    border: 1px solid var(--tvdb-signal-edge);
    color: var(--tvdb-signal-ink);
    font-size: var(--tvdb-text-xl);
}

.tvdb-feature__icon .ph,
.tvdb-feature__icon .ph-fill {
    font-size: 1em;
    vertical-align: 0;
}

.tvdb-feature__title {
    margin-bottom: var(--tvdb-space-2);
    font-size: var(--tvdb-text-lg);
}

.tvdb-feature__text {
    margin: 0;
    line-height: var(--tvdb-leading-body);
    color: var(--tvdb-text-muted);
}

.tvdb-landing-steps {
    padding-top: var(--tvdb-space-6);
    border-top: 1px solid var(--tvdb-ink-line);
}

/* Three short numbered steps. */
.tvdb-steps {
    max-width: 38rem;
    margin: 0;
    padding-left: var(--tvdb-space-5);
    line-height: var(--tvdb-leading-body);
}

.tvdb-steps > li + li {
    margin-top: var(--tvdb-space-2);
}

.tvdb-steps > li::marker {
    font-family: var(--tvdb-font-mono);
    color: var(--tvdb-text-muted);
}

/* ---- Search ----------------------------------------------------------------------- */

.tvdb-result {
    display: flex;
    align-items: flex-start;
    gap: var(--tvdb-space-4);
}

.tvdb-result__body {
    flex: 1 1 auto;
    min-width: 0;
}

.tvdb-result__title {
    margin: 0;
}

/* The row is the link, so the title carries no underline of its own. */
.tvdb-result__title a {
    color: inherit;
    text-decoration: none;
}

.tvdb-result:hover .tvdb-result__title a,
.tvdb-result__title a:focus-visible {
    color: var(--tvdb-signal-text);
    text-decoration: underline;
}

/* The stretched link covers the row; keep its focus ring on the row. */
.tvdb-result__title a:focus-visible {
    outline: none;
}

.tvdb-result:focus-within {
    outline: 2px solid var(--tvdb-focus);
    outline-offset: -2px;
}

/* "Series · 2008", and the "In library" or "Watched" badge. */
.tvdb-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tvdb-space-2);
    margin: var(--tvdb-space-1) 0;
}

.tvdb-result__overview {
    display: -webkit-box;
    max-width: 70ch;
    margin: 0;
    overflow: hidden;
    font-size: var(--tvdb-text-sm);
    line-height: var(--tvdb-leading-body);
    color: var(--tvdb-text-muted);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tvdb-show-more {
    display: flex;
    justify-content: center;
    margin-top: var(--tvdb-space-4);
}

/* The field is wide, the button as wide as its label. */
.tvdb-search-form__row {
    display: flex;
    gap: var(--tvdb-space-2);
}

.tvdb-search-form__row > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.tvdb-search-form__row > .btn {
    flex: none;
    white-space: nowrap;
}

/* ---- Details pages (series, episode, movie) ------------------------------------------ */

/* The top of Series and Movie Details. _TitleHeader renders the poster, head
   and actions; the page adds the details. Desktop: the poster is a column on
   the left and everything else stacks beside it. Phone: the poster is a
   thumbnail beside the title, and the rest runs full width below. */
.tvdb-title {
    display: grid;
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
    grid-template-areas:
        "poster head"
        "poster actions"
        "poster details";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--tvdb-space-6);
    row-gap: var(--tvdb-space-4);
    align-items: start;
}

.tvdb-title__poster { grid-area: poster; min-height: 0; }
.tvdb-title__head { grid-area: head; min-width: 0; }
.tvdb-title__actions { grid-area: actions; display: flex; flex-direction: column; gap: var(--tvdb-space-4); }
.tvdb-title__details { grid-area: details; min-width: 0; }

.tvdb-title__summary {
    margin-bottom: var(--tvdb-space-3);
    font-size: var(--tvdb-text-md);
    color: var(--tvdb-text-muted);
}

@media (max-width: 767.98px) {
    .tvdb-title {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        grid-template-areas:
            "poster head"
            "actions actions"
            "details details";
        grid-template-rows: auto;
        column-gap: var(--tvdb-space-4);
    }

    .tvdb-title__head h1 {
        font-size: var(--tvdb-text-xl);
    }

    .tvdb-title__summary {
        font-size: var(--tvdb-text-sm);
    }
}

/* Buttons that act on the title, in one wrapping row. */
.tvdb-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tvdb-space-2);
}

/* Phones, two buttons: the primary takes its own row, the second fills the
   next one with the heart beside it. */
@media (max-width: 575.98px) {
    .tvdb-action-row--stack > form:first-child,
    .tvdb-action-row--stack > .tvdb-title-state:first-child {
        flex: 0 0 100%;
    }

    .tvdb-action-row--stack > form:not(.tvdb-like-form),
    .tvdb-action-row--stack > .tvdb-title-state {
        flex-grow: 1;
    }

    .tvdb-action-row--stack > form:not(.tvdb-like-form) > .btn {
        width: 100%;
    }
}

/* "Up to date", "On your watchlist": a state, not a button. */
.tvdb-title-state {
    display: inline-flex;
    align-items: center;
    gap: var(--tvdb-space-2);
    padding: var(--tvdb-space-2) var(--tvdb-space-3);
    border: 1px solid var(--tvdb-ok-edge);
    border-radius: var(--tvdb-radius-md);
    background: var(--tvdb-ok-wash);
    font-size: var(--tvdb-text-sm);
    font-weight: 500;
    color: var(--tvdb-ok-ink);
}

/* A state that is not good news ("You stopped watching on Fri, Sep 4"): plain, not green. */
.tvdb-title-state--neutral {
    border-color: var(--tvdb-ink-line-strong);
    background: var(--tvdb-paper-dim);
    color: var(--tvdb-text-muted);
}

/* Shown to a visitor in place of the action row. */
.tvdb-signin-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tvdb-space-3);
    padding: var(--tvdb-space-3) var(--tvdb-space-4);
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-md);
    font-size: var(--tvdb-text-sm);
}

.tvdb-facts {
    margin-bottom: var(--tvdb-space-5);
}

.tvdb-title__details .tvdb-facts-quiet {
    margin-top: var(--tvdb-space-5);
}

.tvdb-title__details > .tvdb-quiet-action,
.tvdb-title__details > .tvdb-quiet-actions {
    margin-top: var(--tvdb-space-5);
}

/* Series name above an episode title. */
.tvdb-episode-series-link {
    display: inline-block;
    margin-bottom: var(--tvdb-space-1);
    font-size: var(--tvdb-text-md);
    font-weight: 600;
    color: var(--tvdb-text);
    text-decoration: none;
}

.tvdb-episode-series-link:hover,
.tvdb-episode-series-link:focus-visible {
    color: var(--tvdb-signal-text);
    text-decoration: underline;
}

/* OMDb awards line. */
.tvdb-awards {
    display: flex;
    align-items: flex-start;
    gap: var(--tvdb-space-3);
    margin-top: var(--tvdb-space-4);
    padding: var(--tvdb-space-3) var(--tvdb-space-4);
    background: var(--tvdb-signal-tint);
    border: 1px solid var(--tvdb-signal-edge);
    border-radius: var(--tvdb-radius-md);
    color: var(--tvdb-signal-ink);
}

.tvdb-awards > i {
    flex: none;
    font-size: var(--tvdb-text-xl);
}

.tvdb-awards p {
    line-height: 1.5;
}

.tvdb-awards-src {
    display: inline-block;
    margin-top: var(--tvdb-space-1);
    font-size: var(--tvdb-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A section of a detail page below the header. */
.tvdb-section {
    margin-top: var(--tvdb-space-6);
    padding-top: var(--tvdb-space-5);
    border-top: 1px solid var(--tvdb-ink-line);
    scroll-margin-top: var(--tvdb-space-4);
}

/* Season picker with its "⋯" menu. */
.tvdb-season-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tvdb-space-3);
    margin-bottom: var(--tvdb-space-4);
}

.tvdb-season-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tvdb-space-2);
}

/* Three states that must not be confused: plain (outline), fully watched (a
   green check, still an outline) and selected (solid ink). */
.tvdb-season-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tvdb-space-1);
    min-height: 36px;
    padding: 0 var(--tvdb-space-3);
    border: 1px solid var(--tvdb-ink-line-strong);
    border-radius: var(--tvdb-radius-pill);
    font-size: var(--tvdb-text-sm);
    font-weight: 500;
    color: var(--tvdb-text);
    text-decoration: none;
    transition: background var(--tvdb-ease), border-color var(--tvdb-ease), color var(--tvdb-ease);
}

.tvdb-season-chip:hover,
.tvdb-season-chip:focus-visible {
    border-color: var(--tvdb-text);
    color: var(--tvdb-text);
}

.tvdb-season-chip.is-complete .ph {
    color: var(--tvdb-ok-ink);
}

.tvdb-season-chip.is-selected {
    background: var(--tvdb-ink);
    border-color: var(--tvdb-ink);
    color: var(--tvdb-on-ink);
}

.tvdb-season-chip.is-selected.is-complete .ph {
    color: var(--tvdb-ok);
}

/* One episode in a season's list. Desktop: title and overview on the left,
   date and runtime in a column, then the dot. Phone: the facts go under the
   title, so a date is never squeezed into a narrow column. */
.tvdb-episode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title facts"
        "overview facts";
    column-gap: var(--tvdb-space-4);
    row-gap: var(--tvdb-space-1);
    align-items: start;
}

.tvdb-episode.has-control {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "title facts control"
        "overview facts control";
}

.tvdb-episode__title {
    grid-area: title;
    display: flex;
    align-items: baseline;
    gap: var(--tvdb-space-2);
}

.tvdb-episode__title .tvdb-mono {
    flex: none;
    font-weight: 400;
    color: var(--tvdb-text-muted);
}

.tvdb-episode__facts {
    grid-area: facts;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--tvdb-text-sm);
    line-height: var(--tvdb-leading-snug);
    color: var(--tvdb-text-muted);
    white-space: nowrap;
}

.tvdb-episode__watched {
    color: var(--tvdb-ok-ink);
}

.tvdb-episode__overview {
    grid-area: overview;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--tvdb-text-sm);
    line-height: 1.5;
    color: var(--tvdb-text-muted);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tvdb-episode__control {
    grid-area: control;
    align-self: center;
}

@media (max-width: 575.98px) {
    .tvdb-episode,
    .tvdb-episode.has-control {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "facts"
            "overview";
    }

    .tvdb-episode.has-control {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title control"
            "facts control"
            "overview control";
    }

    .tvdb-episode__facts {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        white-space: normal;
    }

    .tvdb-episode__facts > * {
        white-space: nowrap;
    }

    .tvdb-episode__facts > * + *::before {
        content: "·";
        margin: 0 var(--tvdb-space-2);
    }

    /* "Watched …" takes its own line rather than wrapping behind a separator. */
    .tvdb-episode__facts > .tvdb-episode__watched {
        flex-basis: 100%;
    }

    .tvdb-episode__facts > .tvdb-episode__watched::before {
        content: none;
    }

    .tvdb-episode__control {
        align-self: start;
    }
}

/* Episode Details. Desktop: the still with the episode's facts under it on the
   left, everything else on the right. Phone: still, main, then the facts. */
.tvdb-episode-page {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
        "still main"
        "facts main";
    grid-template-rows: auto 1fr;
    column-gap: var(--tvdb-space-6);
    row-gap: var(--tvdb-space-4);
    align-items: start;
}

.tvdb-episode-page__still { grid-area: still; }
.tvdb-episode-page__main { grid-area: main; min-width: 0; }
.tvdb-episode-page__facts { grid-area: facts; }

@media (max-width: 767.98px) {
    .tvdb-episode-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "still"
            "main"
            "facts";
        grid-template-rows: auto;
    }

    .tvdb-episode-page__facts {
        padding-top: var(--tvdb-space-4);
        border-top: 1px solid var(--tvdb-ink-line);
    }
}

/* Previous / next episode. */
.tvdb-epnav-bar {
    display: flex;
    justify-content: space-between;
    gap: var(--tvdb-space-4);
    border-top: 1px solid var(--tvdb-ink-line);
}

.tvdb-epnav {
    display: inline-flex;
    align-items: center;
    gap: var(--tvdb-space-2);
    padding: var(--tvdb-space-2) var(--tvdb-space-3);
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-md);
    color: var(--tvdb-text);
    text-decoration: none;
    transition: border-color var(--tvdb-ease), color var(--tvdb-ease);
}

.tvdb-epnav--next {
    text-align: right;
}

.tvdb-epnav:hover,
.tvdb-epnav:focus-visible {
    border-color: var(--tvdb-signal);
    color: var(--tvdb-signal-ink);
}

.tvdb-epnav.is-disabled {
    color: var(--tvdb-text-muted);
    border-style: dashed;
    background: transparent;
    pointer-events: none;
}

.tvdb-epnav-text {
    display: flex;
    flex-direction: column;
    line-height: var(--tvdb-leading-snug);
}

.tvdb-epnav-label {
    font-size: var(--tvdb-text-sm);
    font-weight: 600;
}

.tvdb-epnav-slate {
    font-size: var(--tvdb-text-xs);
    color: var(--tvdb-text-muted);
}

.tvdb-epnav-arrow {
    flex: none;
    font-size: var(--tvdb-text-lg);
}

/* ---- Notifications --------------------------------------------------------------------- */

.tvdb-notification-list {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* A row: the part that opens the episode, and beside it "Mark read". Read and
   unread rows look the same except for the one unread signal: a dot and a
   bold title. */
.tvdb-notification {
    display: flex;
    align-items: center;
    gap: var(--tvdb-space-2);
    border-bottom: 1px solid var(--tvdb-ink-line);
}

.tvdb-notification:first-child {
    border-top: 1px solid var(--tvdb-ink-line);
}

.tvdb-notification__open-form {
    flex: 1 1 auto;
    min-width: 0;
}

/* The row is a submit button: opening a notification marks it read. */
.tvdb-notification__open {
    display: flex;
    align-items: center;
    gap: var(--tvdb-space-3);
    width: 100%;
    padding: var(--tvdb-space-3) var(--tvdb-space-2);
    background: none;
    border: 0;
    border-radius: var(--tvdb-radius-md);
    color: var(--tvdb-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--tvdb-ease);
}

.tvdb-notification__open:hover,
.tvdb-notification__open:focus-visible {
    background: var(--tvdb-wash);
}

.tvdb-notification__thumb {
    width: 40px;
    height: 60px;
}

.tvdb-notification__thumb.is-empty {
    font-size: var(--tvdb-text-lg);
    color: var(--tvdb-on-ink-muted);
}

.tvdb-notification__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}


/* Unread is the list-title weight; a read row steps back to regular. */
.tvdb-notification:not(.is-unread) .tvdb-notification__title {
    font-weight: 400;
}

.tvdb-notification__dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: var(--tvdb-space-1);
    border-radius: var(--tvdb-radius-round);
    background: var(--tvdb-signal-text);
    vertical-align: 0.1em;
}

.tvdb-notification__text {
    font-size: var(--tvdb-text-sm);
    color: var(--tvdb-text-muted);
}

.tvdb-notification__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--tvdb-space-1) var(--tvdb-space-3);
    font-size: var(--tvdb-text-xs);
    color: var(--tvdb-text-muted);
}

/* Says what pressing the row does. */
.tvdb-notification__cta {
    font-weight: 600;
    color: var(--tvdb-signal-text);
}

.tvdb-notification__open:hover .tvdb-notification__cta,
.tvdb-notification__open:focus-visible .tvdb-notification__cta {
    text-decoration: underline;
}

.tvdb-notification__mark {
    flex: none;
}

.tvdb-notification__mark > .btn {
    min-height: 36px;
    white-space: nowrap;
}

/* Phones: the button keeps its tick and drops the words (its aria-label has them). */
@media (max-width: 575.98px) {
    .tvdb-notification__mark-label {
        display: none;
    }

    .tvdb-notification__mark > .btn {
        min-width: 36px;
    }
}

/* ---- Profile ------------------------------------------------------------------------------ */

/* Avatar, who, and the watch time as a stat pushed to the right. */
.tvdb-profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tvdb-space-3) var(--tvdb-space-4);
    margin-bottom: var(--tvdb-space-6);
}

.tvdb-profile-head__who {
    flex: 1 1 12rem;
    min-width: 0;
}

.tvdb-profile-stat {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-1);
    padding: var(--tvdb-space-3) var(--tvdb-space-4);
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-md);
}

.tvdb-profile-stat__value {
    font-family: var(--tvdb-font-display);
    font-size: var(--tvdb-text-xl);
    font-weight: 800;
    line-height: 1;
}

.tvdb-profile-stat__label {
    font-size: var(--tvdb-text-sm);
    color: var(--tvdb-text-muted);
}

/* The figure is a link to Stats. */
a.tvdb-profile-stat {
    color: var(--tvdb-text);
    text-decoration: none;
}

a.tvdb-profile-stat:hover,
a.tvdb-profile-stat:focus-visible {
    border-color: var(--tvdb-ink-line-strong);
    color: var(--tvdb-text);
}

.tvdb-profile-stat__more {
    font-size: var(--tvdb-text-sm);
    font-weight: 500;
    color: var(--tvdb-signal-text);
}

a.tvdb-profile-stat:hover .tvdb-profile-stat__more,
a.tvdb-profile-stat:focus-visible .tvdb-profile-stat__more {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .tvdb-profile-stat {
        flex-basis: 100%;
    }
}

/* ---- Edit profile -------------------------------------------------------------------------- */

/* Input with a status icon inside its right edge. */
.tvdb-input-affix {
    position: relative;
}

.tvdb-input-affix .form-control {
    padding-right: 2.5rem;
}

.tvdb-input-affix-icon {
    position: absolute;
    top: 50%;
    right: var(--tvdb-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.tvdb-input-affix .form-control.is-valid + .tvdb-input-affix-icon { color: var(--tvdb-ok-ink); }
.tvdb-input-affix .form-control.is-invalid + .tvdb-input-affix-icon { color: var(--tvdb-danger); }

/* The field's one message area: a line of its own between the field and the
   hint, holding either the server's message or the live availability line. */
.tvdb-field-message {
    min-height: calc(var(--tvdb-text-sm) * var(--bs-body-line-height));
    margin-top: var(--tvdb-space-1);
    font-size: var(--tvdb-text-sm);
}

.tvdb-field-message > span {
    display: block;
}

.tvdb-field-message > span[hidden] {
    display: none;
}

.tvdb-field-status {
    font-size: var(--tvdb-text-sm);
}

.tvdb-field-status.is-ok { color: var(--tvdb-ok-ink); }
.tvdb-field-status.is-bad { color: var(--tvdb-danger-ink); }
.tvdb-field-status.is-checking { color: var(--tvdb-text-muted); }

/* ---- Sign in --------------------------------------------------------------------------------- */

/* What signing in gets you: an icon column and a text column, so wrapped
   lines stay aligned with their text. */
.tvdb-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-2);
    margin: 0;
    padding-top: var(--tvdb-space-4);
    border-top: 1px solid var(--tvdb-ink-line);
    color: var(--tvdb-text-muted);
}

.tvdb-benefits > li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--tvdb-space-2);
    align-items: start;
}

.tvdb-benefits > li > i {
    font-size: var(--tvdb-text-lg);
    line-height: var(--bs-body-line-height);
    text-align: center;
}

/* A long address must not push the panel wider. */
.tvdb-break-anywhere {
    overflow-wrap: anywhere;
}

/* Honeypot field: off screen for people, present for bots. */
.tvdb-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ---- Admin: digest preview ------------------------------------------------------------------ */

.tvdb-preview-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--tvdb-space-3);
}

.tvdb-preview-form > div {
    flex: 1 1 14rem;
    max-width: 22rem;
}

/* The email as a mail client would show it, in a frame of its own. */
.tvdb-email-preview {
    display: block;
    width: 100%;
    height: 40rem;
    border: 1px solid var(--tvdb-ink-line-strong);
    border-radius: var(--tvdb-radius-md);
    background: var(--tvdb-ink);
}

.tvdb-email-text {
    margin: 0;
    padding: var(--tvdb-space-4);
    overflow-x: auto;
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-md);
    font-family: var(--tvdb-font-mono);
    font-size: var(--tvdb-text-sm);
    line-height: var(--tvdb-leading-body);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- Privacy -------------------------------------------------------------------------------- */

.tvdb-privacy-list {
    padding-left: var(--tvdb-space-5);
}

.tvdb-privacy-list > li + li {
    margin-top: var(--tvdb-space-2);
}

/* ---- Error ------------------------------------------------------------------------------------ */

.tvdb-error-reference {
    margin: 0;
    font-size: var(--tvdb-text-xs);
    color: var(--tvdb-text-muted);
    text-align: center;
    overflow-wrap: anywhere;
}

/* ---- Import from IMDb ---------------------------------------------------------- */

/* The outcome counts: one wrapping row of status-coloured chips. */
.tvdb-import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tvdb-space-2);
    margin: 0;
}

.tvdb-import-summary > .tvdb-badge {
    font-size: var(--tvdb-text-sm);
    letter-spacing: 0;
    text-transform: none;
}

/* An outcome nothing ended in stays in the row, but steps back. */
.tvdb-import-summary > .tvdb-badge.is-zero {
    color: var(--tvdb-text-muted);
    background: transparent;
    border-color: var(--tvdb-ink-line);
}

/* One imported row: title, meta and detail on the left, the status on the right. */
.tvdb-import-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tvdb-space-3);
}

.tvdb-import-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tvdb-import-row__title {
    overflow-wrap: anywhere;
}

.tvdb-import-row__detail {
    font-size: var(--tvdb-text-sm);
    color: var(--tvdb-text-muted);
    overflow-wrap: anywhere;
}

.tvdb-import-row > .tvdb-badge {
    flex: none;
    white-space: nowrap;
}

/* ---- Stats ------------------------------------------------------------------------------------
   Charts drawn by the server as lists: no script, no images. A bar's length is
   --tvdb-bar, a percentage set inline on the element. That is the data, not a
   design value, and the only inline style the page has. Every chart's text is
   in the list itself; the bars are aria-hidden. */

/* Four figures: two by two on a phone (the row of three is the Dashboard's). */
.tvdb-stat-row--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Twelve months as columns, oldest on the left. */
.tvdb-month-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--tvdb-space-1);
    margin: 0 0 var(--tvdb-space-3);
    padding: var(--tvdb-space-3) var(--tvdb-space-2) var(--tvdb-space-2);
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-md);
}

.tvdb-month-chart__col {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-1);
    min-width: 0;
}

/* The bar grows from the bottom; the tallest month leaves room for its value above it. */
.tvdb-month-chart__plot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 9rem;
}

.tvdb-month-chart__value {
    display: none;
    margin-bottom: var(--tvdb-space-1);
    font-size: var(--tvdb-text-xs);
    line-height: var(--tvdb-leading-tight);
    text-align: center;
    white-space: nowrap;
    color: var(--tvdb-text-muted);
}

.tvdb-month-chart__bar {
    display: block;
    height: calc(var(--tvdb-bar, 0%) * 0.85);
    min-height: 2px;
    background: var(--tvdb-signal);
    border-radius: var(--tvdb-radius-sm) var(--tvdb-radius-sm) 0 0;
}

/* A month with nothing in it keeps a baseline, so the row of twelve reads as a row. */
.tvdb-month-chart__bar.is-empty {
    background: var(--tvdb-ink-line-strong);
    border-radius: 0;
}

.tvdb-month-chart__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--tvdb-text-xs);
    line-height: var(--tvdb-leading-snug);
    color: var(--tvdb-text-muted);
}

/* A phone has room for one letter per month ("O") and a short year; wider screens for "Oct" and "2026". */
.tvdb-month-chart__wide {
    display: none;
}

.tvdb-month-chart__year {
    font-size: var(--tvdb-text-xs);
}

@media (min-width: 576px) {
    .tvdb-month-chart {
        gap: var(--tvdb-space-2);
        padding: var(--tvdb-space-4) var(--tvdb-space-3) var(--tvdb-space-3);
    }

    .tvdb-month-chart__plot {
        height: 11rem;
    }

    .tvdb-month-chart__value {
        display: block;
    }

    .tvdb-month-chart__wide {
        display: inline;
    }

    .tvdb-month-chart__narrow {
        display: none;
    }
}

/* The same figures as a table, behind a native disclosure. */
.tvdb-disclosure > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: var(--tvdb-text-sm);
    font-weight: 500;
    color: var(--tvdb-signal-text);
    cursor: pointer;
}

.tvdb-stats-table {
    max-width: 34rem;
    margin: var(--tvdb-space-2) 0 0;
}

/* Most watched series, Genres and Your ratings: one column, and from 992px
   two, so the ratings sit under the series at one column's width. */
.tvdb-stats-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tvdb-space-6);
}

@media (min-width: 992px) {
    .tvdb-stats-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--tvdb-space-7);
    }
}

/* A ranked list with a bar under each row: most watched series, genres. */
.tvdb-bar-list {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-3);
    margin: 0 0 var(--tvdb-space-3);
}

.tvdb-bar-list__row {
    display: flex;
    flex-direction: column;
    gap: var(--tvdb-space-1);
}

/* The label, and its figures on a line of their own under it; from 576px
   the figures move up beside the label when there is room. */
.tvdb-bar-list__head {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .tvdb-bar-list__head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        column-gap: var(--tvdb-space-3);
    }
}

.tvdb-bar-list__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tvdb-bar-list__value {
    font-size: var(--tvdb-text-sm);
    white-space: nowrap;
    color: var(--tvdb-text-muted);
}

.tvdb-bar-list__track {
    display: block;
    height: var(--tvdb-space-2);
    overflow: hidden;
    background: var(--tvdb-paper-dim);
    border: 1px solid var(--tvdb-ink-line);
    border-radius: var(--tvdb-radius-pill);
}

.tvdb-bar-list__fill {
    display: block;
    width: var(--tvdb-bar, 0%);
    height: 100%;
    background: var(--tvdb-signal);
}

/* Ratings: the rating, its bar and how many, on one line each. */
.tvdb-bar-list--ratings {
    gap: var(--tvdb-space-2);
}

.tvdb-bar-list--ratings .tvdb-bar-list__row {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: var(--tvdb-space-2);
}

.tvdb-bar-list__key {
    font-size: var(--tvdb-text-sm);
    text-align: right;
}

.tvdb-bar-list__tally {
    font-size: var(--tvdb-text-sm);
    color: var(--tvdb-text-muted);
}