/* The catalog: the title, the order switch, the filters and tools, a viewer's progress and next up, and the list, which
   scrolls in a box of its own under a header that stays. */

h1.catalog-title {
    font-size: clamp(34px, 4.5vw, 48px);
    margin-bottom: 4px;
}

p.lede {
    color: var(--muted);
    max-width: 72ch;
    margin: 0 0 14px;
}

.browser {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
        "toolbar toolbar toolbar"
        "filters filters filters"
        "progress progress nextup"
        "confirm confirm confirm"
        "table table table";
    gap: 10px 14px;
    align-items: center;
}

.browser > * {
    min-width: 0;
}

/* The toolbar: the order switch and the count on one row, the filters under it in a row of their own; the buttons
   that open the filters and the tools on a phone are not shown on a desktop. */
.toolbar {
    grid-area: toolbar;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "switch toggle count";
    gap: 10px 14px;
    align-items: center;
}

.filters-toggle,
.tools-toggle {
    display: none;
}

/* The order switch: two pills in one frame, the chosen one lit. */
.order-switch {
    grid-area: switch;
    margin: 0;
}

.order-switch fieldset {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    overflow: hidden;
}

.order-switch legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.order-switch button {
    border: 0;
    border-radius: 0;
    padding: 6px 14px;
    color: var(--muted);
    background: transparent;
}

.order-switch button:hover {
    color: var(--tan);
}

.order-switch button + button {
    border-left: 1px solid var(--line-2);
}

.order-switch button[aria-pressed="true"] {
    background: var(--amber);
    color: #000000;
    font-weight: 700;
}

/* The filters: one toolbar, wrapping when it must. */
.filters {
    grid-area: filters;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
}

.filters label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.filters select,
.filters input {
    font-family: var(--body);
    letter-spacing: 0;
    text-transform: none;
}

/* The search box takes the room the row has left. */
.filters label:has(input[type="search"]) {
    flex: 1 1 240px;
}

.filters input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 160px;
}

.filters input[type="search"]::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

/* The link that clears the filters, a quiet pill beside them. */
.filters > a {
    display: inline-block;
    padding: 3px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.filters > a:hover {
    color: var(--tan);
    border-color: var(--line-2);
}

p.count {
    grid-area: count;
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    justify-self: end;
    font-variant-numeric: tabular-nums;
}

/* A button that opens a panel on a phone carries a dot while the panel holds something that is set. */
.filters-toggle.set::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-radius: 50%;
    background: var(--amber);
    vertical-align: 1px;
}

/* Progress: the count large, the share under it, one segment per series filled to its share, and the viewer's tools at
   the foot. The rail is the legend. */
/* The figure's column is fixed, wide enough for "966 / 966", so the bars beside it do not shift as the count grows. */
.progress {
    grid-area: progress;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 6px 20px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.progress .overall {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--display);
    line-height: 0.9;
    white-space: nowrap;
}

.progress .figure b {
    font-size: 46px;
    font-weight: 700;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

.progress .figure .of {
    font-size: 16px;
    color: var(--muted);
    margin-left: 4px;
}

.progress .share {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Two bars: the series in the rail's colours, and the eras along the timeline in the era colours, a gap at each edge. */
.bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bar-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 8px;
}

.bar-label {
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.series-bar,
.era-bar {
    display: flex;
    gap: 2px;
    height: 12px;
}

.series-bar .segment,
.era-bar .segment {
    --fill: var(--sc, var(--muted));
    position: relative;
    background: color-mix(in srgb, var(--fill) 22%, var(--ground));
    overflow: hidden;
    min-width: 2px;
}

.era-bar .segment {
    --fill: var(--era, var(--muted));
}

.series-bar .segment:first-child,
.era-bar .segment:first-child {
    border-radius: 6px 0 0 6px;
}

.series-bar .segment:last-child,
.era-bar .segment:last-child {
    border-radius: 0 6px 6px 0;
}

.series-bar .segment i,
.era-bar .segment i {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--fill);
}

/* The viewer's rare tools at the foot of the panel: catching up through a position, and clearing every mark. */
.progress .tools {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.progress .tools-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.progress .tools form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.progress .tools label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.progress .tools input[type="number"] {
    width: 68px;
    font-family: var(--body);
    letter-spacing: 0;
}

/* Next up: the card with the entry to watch next and the way to it, edged in its series' colour. */
.next-up {
    grid-area: nextup;
    width: 300px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--sc, var(--amber));
    border-radius: 8px;
    background: var(--panel);
}

.next-up h2 {
    grid-column: 1 / -1;
    margin: 0;
}

.next-up p {
    margin: 0;
}

.next-up .title {
    font-weight: 600;
    font-size: 15px;
}

.next-up .meta,
.next-up .all-watched {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.next-up .go {
    grid-column: 2;
    grid-row: 2 / span 2;
}

/* The question before clearing every mark. */
.confirm {
    grid-area: confirm;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--rose);
    border-left-width: 6px;
    border-radius: 8px;
    background: var(--panel);
}

.confirm p {
    flex: 1;
    margin: 0;
}

.confirm form {
    margin: 0;
}

/* The list: its box scrolls, its header stays. Positioned for the same reason as `main`: each mark's hidden label is
   positioned, and the box has to contain a thousand of them or they stretch the document by the table's height. */
.list {
    grid-area: table;
    position: relative;
    align-self: stretch;
    min-height: 0;
    overflow: auto;
    border-top: 2px solid var(--line-2);
}

/* The columns are fixed, so they hold still as the rows change; the title takes what is left and wraps. */
table.catalog {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

table.catalog .mark {
    width: 64px;
}

table.catalog .position {
    width: 52px;
}

table.catalog .series {
    width: 200px;
}

table.catalog .episode {
    width: 100px;
}

table.catalog .type {
    width: 70px;
}

table.catalog .year {
    width: 56px;
}

table.catalog .released {
    width: 100px;
}

table.catalog .note {
    width: 100px;
}

/* A row scrolled to by its fragment, by the browser or by the script, lands at the top of the box and keeps clear of the
   header that stays, by the header's height. */
table.catalog tbody tr {
    scroll-margin-top: 44px;
}

table.catalog thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tan);
    padding: 9px 8px 7px;
    background: var(--ground);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}

table.catalog tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

table.catalog tbody tr:nth-child(even of :not([hidden])) td {
    background: var(--panel);
}

/* A watched row shows it is done: its text at the muted tone and no dimmer, since the accessibility check holds every
   text to AA; its title no longer bold, its chip hollow. */
table.catalog tbody tr.watched td,
table.catalog tbody tr.watched td.title a,
table.catalog tbody tr.watched .episode {
    color: var(--muted);
}

table.catalog tbody tr.watched td.title a {
    font-weight: 400;
}

table.catalog tbody tr.watched .series-code {
    background: transparent;
    color: var(--sc, var(--muted));
    box-shadow: inset 0 0 0 1px var(--sc, var(--muted));
}

table.catalog tbody tr.next td {
    background: color-mix(in srgb, var(--amber) 18%, var(--ground));
}

table.catalog .position {
    text-align: right;
}

table.catalog td.position {
    font-family: var(--display);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

table.catalog td.series {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.catalog .episode {
    white-space: nowrap;
}

table.catalog td.episode {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--tan);
}

table.catalog td.title a {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
}

table.catalog td.title a:hover {
    text-decoration: underline;
    color: var(--tan);
}

table.catalog .type,
table.catalog .year,
table.catalog .released {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

table.catalog .series-name {
    color: var(--muted);
    font-size: 12px;
}

/* The series code as a chip, wherever it appears, in the series' own colour, the same as its block in the rail. */
.series-code {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    border-radius: 3px;
    padding: 2px 6px;
    margin-right: 6px;
    background: var(--sc, var(--muted));
    color: #000000;
}

.tag {
    display: inline-block;
    font-family: var(--display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--amber);
    border: 1px solid var(--amber);
    border-radius: 3px;
    padding: 0 5px;
    margin-left: 6px;
    vertical-align: 1px;
    white-space: nowrap;
}

table.catalog td.note {
    white-space: nowrap;
}

.note-flag {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sky);
    margin-left: 6px;
    white-space: nowrap;
}

/* The watched mark: a box that is lit when pressed. In the list the word is for the page's ear alone; beside a note it
   is shown. On the catalog the mark is a button in the one form round the table, which takes no room of its own; on
   the entry view it is a form by itself. */
form.marks {
    display: contents;
}

form.mark {
    display: inline-block;
    margin: 0;
}

.mark button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.mark button:hover {
    border-color: transparent;
    color: var(--tan);
}

.mark .box {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--muted);
    border-radius: 4px;
    background: var(--panel);
    position: relative;
}

.mark button:hover .box {
    border-color: var(--tan);
}

.mark button[aria-pressed="true"] .box {
    background: var(--amber);
    border-color: var(--amber);
}

.mark button[aria-pressed="true"] .box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

table.catalog .mark .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

@media (max-width: 900px) {
    .browser {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "toolbar"
            "filters"
            "progress"
            "nextup"
            "confirm"
            "table";
    }

    .next-up {
        width: auto;
    }

    /* The year, the release date, and the series name are the first to go on a narrow screen. */
    table.catalog .year,
    table.catalog .released,
    table.catalog .series-name {
        display: none;
    }

    table.catalog .series {
        width: 70px;
    }
}

@media (max-width: 860px) {
    /* The catalog as a phone shows it (NFR-9, mock 07): the toolbar stays put under the series strip while the page
       scrolls, with the order switch, the Filters button, and the count on its one row and the filters opening under
       it; the panels take one line each; and a row is two lines, the chip, the code, and the position over the title,
       the watched toggle at its left as a target of its own. What is put at the top of the page scrolls to just under
       the strip and the toolbar, by the scroll margin. */
    /* A column, in the markup's order, so that a part that is hidden or absent leaves no gap behind. */
    .browser {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .toolbar {
        position: sticky;
        top: var(--strip);
        z-index: 3;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 8px;
        padding: 6px 0 8px;
        background: var(--ground);
        border-bottom: 1px solid var(--line);
    }

    .order-switch button {
        min-height: 44px;
        padding: 6px 11px;
    }

    .filters-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-area: toggle;
        min-height: 44px;
    }

    .filters-toggle[hidden] {
        display: none;
    }

    p.count {
        font-size: 11.5px;
        text-align: right;
        white-space: nowrap;
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        scroll-margin-top: calc(var(--strip) + 68px);
    }

    .filters label {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        white-space: normal;
    }

    .filters label.tool {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-height: 44px;
    }

    .filters label:has(input[type="search"]) {
        flex: none;
    }

    /* The fields are 16 pixels and 44 tall, so the phone neither zooms into them nor misses them. */
    .filters select,
    .filters input[type="search"],
    .progress .tools input[type="number"] {
        min-height: 44px;
        font-size: 16px;
    }

    .filters input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    .filters > a {
        align-self: flex-end;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Progress in one line: the figure beside the two thin bars, the tools behind their button. */
    .progress {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 14px;
        padding: 8px 12px;
    }

    .progress .figure b {
        font-size: 30px;
    }

    .progress .figure .of {
        font-size: 13px;
    }

    .progress .share {
        margin-top: 2px;
        font-size: 10px;
    }

    .series-bar,
    .era-bar {
        height: 9px;
    }

    .progress .tools {
        padding-top: 4px;
    }

    .tools-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .tools-toggle[hidden] {
        display: none;
    }

    .progress .tools-body {
        padding-top: 8px;
    }

    .progress .tools-body form {
        flex-wrap: wrap;
    }

    .progress .tools-body button,
    .progress .tools-body a.clear-all {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Next up in one line, Go to it at the right. */
    .next-up {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 10px;
        padding: 6px 12px;
    }

    .next-up h2 {
        font-size: 10px;
    }

    .next-up .title {
        font-size: 14px;
    }

    .next-up .go {
        grid-row: 1 / span 3;
        align-self: center;
        justify-self: end;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .confirm {
        flex-wrap: wrap;
    }

    .confirm button,
    .confirm a.keep {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The list is the page's: no box of its own, and no header, which a phone's rows carry in themselves. The header
       stays in the document for a screen reader. */
    .list {
        max-height: none;
        overflow: visible;
        scroll-margin-top: calc(var(--strip) + 68px);
    }

    table.catalog,
    table.catalog tbody {
        display: block;
    }

    table.catalog thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    table.catalog tbody tr {
        display: grid;
        grid-template-columns: 44px auto auto auto minmax(0, 1fr) auto;
        grid-template-rows: 20px auto;
        grid-template-areas:
            "mark series episode tag note position"
            "mark title title title title position";
        column-gap: 8px;
        align-items: center;
        padding: 6px 8px 6px 0;
        border-bottom: 1px solid var(--line);
        scroll-margin-top: calc(var(--strip) + 68px);
    }

    table.catalog tbody tr:not(:has(td.mark)) {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "series episode tag note position"
            "title title title title position";
        padding-left: 10px;
    }

    table.catalog tbody tr:nth-child(even of :not([hidden])) {
        background: var(--panel);
    }

    table.catalog tbody tr.next {
        background: color-mix(in srgb, var(--amber) 18%, var(--ground));
    }

    table.catalog tbody td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        width: auto;
    }

    table.catalog tbody tr:nth-child(even of :not([hidden])) td,
    table.catalog tbody tr.next td {
        background: transparent;
    }

    table.catalog td.mark {
        grid-area: mark;
    }

    /* The meta line: the chip, the code, and the note at the left, small and on one 20-pixel line, drawn over the
       title link's box and letting taps through to it; the position larger, down the row's right and centred on it.
       The series cell gives up the width the narrow desktop gives it, so the code follows the chip closely. */
    table.catalog td.series,
    table.catalog td.episode,
    table.catalog td.note,
    table.catalog td.position {
        z-index: 1;
        align-self: start;
        line-height: 20px;
        pointer-events: none;
    }

    table.catalog td.series {
        grid-area: series;
        width: auto;
        overflow: visible;
    }

    table.catalog .series-code {
        display: inline-block;
        min-width: 36px;
        margin: 1px 0 0;
        padding: 0 6px;
        font-size: 10.5px;
        line-height: 18px;
        vertical-align: top;
    }

    table.catalog td.episode {
        grid-area: episode;
        width: auto;
        font-size: 12px;
    }

    table.catalog td.note {
        grid-area: note;
        font-size: 10px;
        white-space: nowrap;
    }

    table.catalog td.position {
        grid-area: position;
        align-self: center;
        padding-left: 6px;
        font-size: 18px;
        line-height: 1;
        text-align: right;
    }

    table.catalog td.position::before {
        content: "#";
    }

    /* The title is the row's tap: its link's box reaches up behind the meta line, so the target is 44 pixels tall while
       the row is 56. The title cell lends its children to the grid, the link taking the title line and the Next tag a
       place on the meta line after the code, where it does not crowd a long title. */
    table.catalog td.title {
        display: contents;
    }

    table.catalog td.title a {
        grid-area: title;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
        min-height: 44px;
        margin-top: -20px;
        padding-top: 20px;
        font-size: 15px;
        line-height: 24px;
    }

    table.catalog td.title .tag {
        grid-area: tag;
        z-index: 1;
        align-self: start;
        margin: 1px 0 0;
        line-height: 16px;
        pointer-events: none;
    }

    table.catalog .type,
    table.catalog .year,
    table.catalog .released {
        display: none;
    }

    /* The toggle: a 44-pixel target of its own at the row's left. */
    table.catalog .mark button {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
    }

    table.catalog .mark .box {
        width: 22px;
        height: 22px;
    }

    table.catalog .mark button[aria-pressed="true"] .box::after {
        left: 7px;
        top: 2px;
        width: 6px;
        height: 12px;
    }
}