/* The entry view: the entry's own facts and places on the left, the viewer's mark and note on the right; on a phone
   one column, the mark under the facts and the note after the entry's own notes (NFR-9, mock 08). */

p.back {
    margin: 0 0 12px;
    font-size: 13px;
}

article.entry {
    --mark-panel: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 24px;
    align-items: start;
    container-type: inline-size;
}

article.entry > * {
    grid-column: 1;
    margin: 0;
}

/* The viewer's mark and note. In the markup the mark follows the facts and the note the entry's own notes, the order a
   phone reads them in. On a desktop both go to the right column, each spanning every row as one box would, the mark at
   the top at a fixed height and the note under it by the margin that height leaves, so the two stack as they did in one
   box while the left column's rows stay their own. */
article.entry > form.mark,
article.entry > .your-note {
    grid-column: 2;
    grid-row: 1 / span 20;
    align-self: start;
}

article.entry > form.mark {
    height: var(--mark-panel);
}

article.entry > .your-note {
    margin-top: calc(var(--mark-panel) + 14px);
}

/* The kicker: the series' chip and the code, above the title. */
article.entry > p.series {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--muted);
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Blazor drops the whitespace between elements, so the code keeps its own distance from the name. */
article.entry .episode-code {
    margin-left: 0.35em;
    color: var(--tan);
}

article.entry > h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 0.95;
    margin-bottom: 10px;
    text-wrap: balance;
}

/* The synopsis: what the story is about, in a line or three under the title, and its credit in small print beneath. */
article.entry > section.synopsis {
    margin: 4px 0 12px;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.45;
}

article.entry > section.synopsis p {
    margin: 0;
}

article.entry > section.synopsis .credit {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

dl.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    font-size: 13px;
    margin: 8px 0 0;
}

dl.facts dt {
    color: var(--muted);
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 2px;
}

dl.facts dd {
    margin: 0;
}

article.entry > section,
article.entry > p.visitor {
    margin-top: 16px;
}

/* An entry's place in each order: the neighbour before as a block, the position, the neighbour after as a block, in one
   row. The two orders share one grid, so their columns line up. The grid is sized to its content, and in a grid sized
   so, every fr column takes the width of the widest of them: the four blocks come out the same width, that of the
   longest title, and a row is no wider than it needs. Where the page is narrower than that, the grid is clamped to the
   page and the two block columns share what there is. A block is one line, a chevron pointing its way at the outer
   edge, the series chip, and the title, and carries its series' colour on that edge, the way the rail's blocks and the
   next-up card do; the link's name says the direction in words. */
article.entry > .orders {
    display: grid;
    grid-template-columns: 150px 1fr max-content 1fr;
    width: fit-content;
    max-width: 100%;
    gap: 10px 12px;
    margin-top: 16px;
    font-size: 13px;
}

section.order {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
}

section.order h2 {
    margin: 0;
}

section.order .position {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    color: var(--amber);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

section.order .position .of {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.neighbour {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 4px 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 6px solid var(--sc, var(--amber));
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.neighbour.next {
    border-left: 1px solid var(--line);
    border-right: 6px solid var(--sc, var(--amber));
}

/* The chevron is two borders of a small box turned to point the way, drawn rather than typed, so it is crisp, centred
   on the line, and the same in every face. */
.neighbour .chevron {
    flex: none;
    width: 9px;
    height: 9px;
    margin: 0 2px;
    border: solid var(--amber);
    border-width: 0 0 2.5px 2.5px;
    transform: rotate(45deg);
}

.neighbour.next .chevron {
    transform: rotate(-135deg);
}

/* One line, cut with an ellipsis, by a line clamp rather than nowrap: nowrap would make the whole title the block's
   least width, and a row of two blocks would then overrun the column beside the viewer's panels; clamped, the least
   width is the longest word, and the most is still the whole title, which is what sizes the columns. */
.neighbour .ttl {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

a.neighbour:hover .ttl {
    color: var(--amber);
    text-decoration: underline;
}

/* Where the article is narrow, so the column beside the viewer's panels is too, each order stacks: the label and the
   position on one line, then the block before, then the block after, each the width of the column. This also holds on
   a phone, where the article is one column. */
@container (max-width: 960px) {
    article.entry > .orders {
        grid-template-columns: minmax(0, 1fr) max-content;
        width: auto;
        max-width: none;
    }

    section.order h2 {
        grid-area: 1 / 1;
    }

    section.order .position {
        grid-area: 1 / 2;
    }

    section.order .neighbour.previous {
        grid-area: 2 / 1 / 3 / -1;
    }

    section.order .neighbour.next {
        grid-area: 3 / 1 / 4 / -1;
    }

    /* Stacked, the blocks mirror each other: the next block's chip and title sit against its chevron at the right, as
       the previous block's sit against its chevron at the left (mock 08). */
    section.order .neighbour.next {
        justify-content: flex-end;
    }

    section.order .neighbour.next .ttl {
        flex: 0 1 auto;
        text-align: right;
    }
}

/* An edge of the order: no link, the words alone, centred where the block would be. */
.neighbour.none {
    min-height: 0;
    padding: 4px 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}

/* The notes about the entry's place, set apart. */
section[aria-label="Placement note"],
section[aria-label="Revision note"] {
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 6px solid var(--amber);
    border-radius: 8px;
    font-size: 13px;
}

section[aria-label="Revision note"] {
    background: transparent;
    border: 1px dashed var(--line-2);
    color: var(--muted);
}

section[aria-label="Read more"] ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

p.watch {
    margin-top: 16px;
}

/* The viewer's side: a panel for the mark, a panel for the note. A saved note is read as text; Edit note, a native
   disclosure, swaps the editor in for it, and Remove stays beside it while the editor is closed. */
article.entry > form.mark,
article.entry > .your-note {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--panel);
}

article.entry > form.mark {
    display: flex;
    align-items: center;
}

article.entry > form.mark button {
    padding: 4px 6px;
}

.your-note .saved-note {
    white-space: pre-wrap;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--panel-2);
    border-radius: 6px;
    font-size: 13px;
}

.your-note .status {
    margin: 0 0 8px;
}

.note-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
}

.note-tools details[open] {
    flex: 1 1 100%;
}

.note-tools details[open] > .note-editor {
    margin-top: 8px;
}

.your-note:has(details[open]) .saved-note {
    display: none;
}

.your-note summary {
    list-style: none;
    cursor: pointer;
}

.your-note summary::-webkit-details-marker {
    display: none;
}

.note-editor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
}

.note-editor textarea {
    align-self: stretch;
}

.note-editor .hint,
.note-editor .refused {
    margin: 0;
}

.note-remove {
    margin: 0;
}

@media (max-width: 900px) {
    article.entry {
        grid-template-columns: minmax(0, 1fr);
    }

    article.entry > form.mark,
    article.entry > .your-note {
        grid-column: 1;
        grid-row: auto;
        height: auto;
        margin-top: 16px;
    }
}

@media (max-width: 860px) {
    /* The entry view as a phone shows it (NFR-9, mock 08): the toggle full width and 48 pixels tall under the facts;
       the neighbours 44-pixel blocks; Back, the position, Read more, and the watch link 44-pixel rows; and the note's
       field 16 pixels, so the phone does not zoom into it. */
    p.back a,
    section[aria-label="Read more"] a,
    p.watch a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The position reaches 44 pixels by padding, not flex, which would drop the space before "of". */
    section.order .position {
        padding: 11px 0;
    }

    p.back {
        margin-bottom: 4px;
    }

    article.entry > form.mark {
        padding: 0;
    }

    article.entry > form.mark button {
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        font-size: 16px;
    }

    article.entry > form.mark .box {
        width: 22px;
        height: 22px;
    }

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

    .neighbour {
        min-height: 44px;
    }

    .neighbour.none {
        min-height: 0;
    }

    section[aria-label="Read more"] ul {
        flex-direction: column;
        gap: 0;
    }

    .note-editor textarea {
        font-size: 16px;
    }
}