/* The frame around every screen, ADR 0009's: the elbow and the bar across the top, the rail of eras down the left, the
   page beside it, and the footer under the page. The frame fills the window and stays put; the page scrolls inside it.
   The frame is the body's grid; the header is a grid of the same two columns, so that the elbow sits over the rail and
   its bar runs over the page. */

body {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "head head"
        "rail main"
        "rail foot";
    column-gap: var(--gutter);
    height: 100svh;
    overflow: hidden;
    padding: 12px 16px 12px 12px;
}

header.site {
    grid-area: head;
    display: grid;
    grid-template-columns: calc(var(--rail) + var(--gutter)) minmax(0, 1fr);
    align-items: start;
}

/* The elbow: the site's name, where the rail turns into the bar. Its lower corner is square, so that the rail's blocks
   continue it. The cut-out is the ground showing through the corner. */
header.site .site-name {
    position: relative;
    height: 74px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 8px 22px;
    background: var(--amber);
    border-radius: 46px 0 0 0;
    color: #000000;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

header.site .site-name::after {
    content: "";
    position: absolute;
    right: 0;
    top: var(--bar);
    width: var(--gutter);
    height: calc(74px - var(--bar));
    background: var(--ground);
    border-top-left-radius: var(--gutter);
}

/* The bar: who is signed in, then the site's pages, in black segments on the amber, the current page lit. */
header.site .bar {
    height: var(--bar);
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 14px;
    background: var(--amber);
    border-radius: 0 13px 13px 0;
}

header.site .bar nav.pages {
    margin-left: auto;
    height: 100%;
    display: flex;
    gap: 6px;
}

header.site .bar form {
    height: 100%;
    display: flex;
    margin: 0;
}

header.site .seg {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    min-height: 0;
    background: var(--ground);
    color: var(--amber);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

header.site a.seg:hover,
header.site button.seg:hover {
    border: 0;
    background: var(--ground);
    color: var(--tan);
}

header.site .seg.active {
    background: var(--tan);
    color: #000000;
    font-weight: 700;
}

header.site .seg.active:hover {
    background: var(--tan);
    color: #000000;
}

/* The rail: one block per series in its colour, the name on one line over the code and the count at the right, in the
   fixed order of the catalog's series file, and All series first; the current filter lit from within. It scrolls by
   itself when taller than the window. */
.rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 5px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.rail::-webkit-scrollbar {
    display: none;
}

.rail a {
    --c: var(--sc, var(--muted));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    padding: 5px 10px 5px 12px;
    background: var(--c);
    color: #000000;
    font-family: var(--display);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    text-decoration: none;
    white-space: nowrap;
}

.rail a.all {
    --c: var(--bone);
}

.rail a:hover {
    filter: brightness(1.12);
    color: #000000;
}

.rail a.active {
    background: var(--ground);
    color: var(--c);
    box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 5px var(--c);
}

.rail > :last-child {
    border-bottom-left-radius: 22px;
}

/* The name keeps to one line, cut with an ellipsis rather than wrapped if a name ever outgrows the rail, and the code
   sits under it at full strength: in a lit block it is the series' colour on black and must clear AA. */
.rail .text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rail .lbl {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail .sub {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.rail .num {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The page: a column, scrolling by itself, so that the frame around it stays. It is positioned because a scroll box
   only clips the positioned descendants it contains, and a visually hidden element is positioned: left uncontained,
   such an element far down the page would stretch the document past the window, and a scroll to a fragment would then
   carry the whole frame off the top. */
main {
    grid-area: main;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 14px 4px 20px 12px;
}

main > * {
    flex: none;
}

/* The footer closes the frame: a thin line in the frame's colour, then the small print. */
footer.site {
    grid-area: foot;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: center;
    padding-bottom: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

footer.site::before {
    content: "";
    flex: 1 1 100%;
    height: 2px;
    margin-bottom: 4px;
    background: var(--amber);
}

footer.site p {
    margin: 0;
}

footer.site .statement,
footer.site .credit {
    flex: 1 1 100%;
}

footer.site nav {
    display: flex;
    gap: 14px;
}

footer.site .currency {
    margin-left: auto;
}

/* The one line under the catalog's title that tells a visitor why to sign in. */
p.visitor {
    color: var(--muted);
    font-size: 12.5px;
    margin: 0 0 12px;
}

/* A word with a shorter form for a phone: the long one shows on a desktop, the short one on a phone. */
.short {
    display: none;
}

@media (max-width: 860px) {
    /* On a phone the frame lets go and takes the shape mocks 07 and 08 drew (NFR-9, ADR 0009's amendment of 2026-10-10):
       the page scrolls as a whole, the bar is one row with the elbow as its first segment, and the series are a strip
       of chips to slide. */
    body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "rail"
            "main"
            "foot";
        height: auto;
        min-height: 100svh;
        overflow: visible;
        padding: 8px 10px 10px;
    }

    .full {
        display: none;
    }

    .short {
        display: inline;
    }

    header.site {
        display: flex;
        align-items: stretch;
    }

    header.site .site-name {
        flex: none;
        height: auto;
        min-height: 44px;
        align-items: center;
        padding: 0 10px 0 12px;
        border-radius: 13px 0 0 13px;
        font-size: 11px;
    }

    header.site .site-name::after {
        display: none;
    }

    /* One row, never wrapping: the name and sign-out are the account page's on a phone. */
    header.site .bar {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        min-height: 44px;
        gap: 4px;
        padding-right: 6px;
        overflow: hidden;
    }

    header.site .bar .signed-in,
    header.site .bar form.sign-out {
        display: none;
    }

    header.site .bar nav.pages {
        margin-left: auto;
        height: auto;
        gap: 3px;
    }

    header.site .seg {
        height: 44px;
        padding: 0 7px;
        font-size: 11px;
        letter-spacing: 0.05em;
    }

    /* The strip: All first, then each series as a chip, its code over its count, 44 pixels tall, to slide sideways. It
       stays put at the top while the page scrolls, with the catalog's toolbar under it (NFR-9), and fades at the edge
       it can slide towards, which is how it says there is more; the script keeps the two edge classes right, and the
       page is rendered with the right one on, since a strip wider than a phone always has more to the right. */
    :root {
        --strip: 58px;
    }

    .rail {
        position: sticky;
        top: 0;
        z-index: 4;
        flex-direction: row;
        gap: 6px;
        padding: 8px 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        background: var(--ground);
    }

    /* The fades are painted over the chips, not cut out of the strip, since a strip made see-through at its edge
       would show the rows scrolling under it: a pseudo-element at each end, stuck to that edge of the box as the strip
       slides, pulled back over the last chip by its margin, and shown only while there is more that way. */
    .rail::before,
    .rail::after {
        content: "";
        position: sticky;
        z-index: 1;
        flex: none;
        align-self: stretch;
        width: 48px;
        pointer-events: none;
    }

    .rail::before {
        left: 0;
        margin-right: -54px;
        background: linear-gradient(to right, var(--ground), transparent);
    }

    .rail::after {
        right: 0;
        margin-left: -54px;
        background: linear-gradient(to left, var(--ground), transparent);
    }

    .rail:not(.more-left)::before,
    .rail:not(.more-right)::after {
        display: none;
    }

    .rail a {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1px;
        width: auto;
        min-width: 44px;
        min-height: 44px;
        padding: 4px 10px;
        line-height: 1.1;
    }

    .rail a,
    .rail > :last-child {
        border-radius: 10px;
    }

    .rail .text {
        flex-direction: column-reverse;
    }

    .rail a:not(.all) .lbl {
        display: none;
    }

    .rail .sub {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .rail .num {
        font-size: 11px;
        font-weight: 400;
    }

    main {
        overflow: visible;
        padding: 10px 0 20px;
    }

    footer.site .currency {
        margin-left: 0;
        flex: 1 1 100%;
    }
}