.pgn-reader {
    max-width: 1800px;
    margin: 0 auto;
    padding: 1rem 3.5rem 1rem 1rem;
}

@media (max-width: 768px) {
    .pgn-reader {
        padding: 1rem;
    }
}

.pgn-reader-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Collapsing caps the height rather than setting it: dragging the native resize handle writes an
   inline height on the textarea, which would outrank a height declared here and leave the box
   expanded. max-height constrains that inline height, and dropping the cap restores the size the
   user dragged to. */
/* Exactly one line, vertically centred. A textarea clips at its padding box, not its content box,
   so any vertical padding leaves a sliver of the next line showing; zero padding plus a
   line-height equal to the full inner height both hides line two and centres line one. */
.pgn-reader-input--collapsed .pgn-reader-textarea {
    max-height: 2.4rem;
    padding-block: 0;
    line-height: calc(2.4rem - 2px);
    white-space: pre;
    resize: none;
    overflow: hidden;
}

.pgn-reader-textarea-row {
    position: relative;
}

.pgn-reader-textarea {
    display: block;
    width: 100%;
    height: 12rem;
    resize: vertical;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--raise);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.4;
}

.pgn-reader-textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.pgn-reader-collapse-btn {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--outline);
    border-radius: 0.4rem;
    color: var(--icon);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pgn-reader-collapse-btn:hover {
    background-color: var(--accent-soft);
    color: var(--text);
}

/* The collapse button hangs outside the textarea in the page's right padding. Where the layout is
   stacked there is no such padding, so it becomes an ordinary flex sibling instead. */
@media (max-width: 768px) and (min-height: 621px),
       (max-width: 900px) and (orientation: portrait) {
    .pgn-reader-textarea-row {
        display: flex;
        align-items: stretch;
        gap: 0.5rem;
    }

    .pgn-reader-textarea {
        flex: 1 1 auto;
    }

    .pgn-reader-collapse-btn {
        position: static;
        flex: 0 0 auto;
        align-self: flex-start;
        margin-left: 0;
    }
}

.pgn-reader-input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pgn-reader-input-actions-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pgn-reader-input-actions-buttons button:disabled {
    opacity: 0.5;
    cursor: default;
}

.pgn-reader-input-actions-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.pgn-reader-file-name {
    color: var(--muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pgn-reader-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.pgn-reader-file-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 1px 6px;
    border-width: 2px;
    border-style: solid;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
}

.pgn-reader-file-input:focus-visible + .pgn-reader-file-label {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.pgn-reader-load-label {
    margin-left: 0.4rem;
}

.pgn-reader-error {
    color: var(--alert-error-text, #9b2f2f);
    background: var(--alert-error-bg, rgba(155, 47, 47, 0.08));
    border: 1px solid var(--alert-error-bd, rgba(155, 47, 47, 0.25));
    border-radius: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.pgn-reader-notice {
    color: var(--alert-warn-text);
    background: var(--alert-warn-bg);
    border: 1px solid var(--alert-warn-bd);
    border-radius: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.pgn-reader-panel-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
}

.pgn-reader-game-select {
    /* form-select-sm's own left padding+border would otherwise indent the label past where the
       game title text starts right below it; pull it back so both start at the same edge. */
    width: calc(100% + 0.5rem + 1px);
    margin-left: calc(-0.5rem - 1px);
}

.pgn-reader-header {
    color: var(--text);
}

.pgn-reader-header-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pgn-reader-players {
    font-weight: 600;
}

.pgn-reader-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.pgn-reader-result {
    color: var(--accent);
    font-weight: 600;
}

.navigator-card-header .pgn-reader-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
}

/* ── Phone portrait ───────────────────────────────────────────
   The board is what the page is for, so it goes edge to edge and everything else yields vertical
   space to it: the input shrinks to a single row while collapsed, and the move tree takes what is
   left below the board. Landscape keeps the desktop input instead — see further down. The
   condition matches the portrait block in pgnviewer.css and must move together with it. */
@media (max-width: 900px) and (orientation: portrait) {
    /* Cancels the ancestors' horizontal padding whatever it currently is, so the board can be a
       full 100vw without this page having to know what .content pads to at each breakpoint. */
    .pgn-reader {
        max-width: none;
        margin-inline: calc(50% - 50vw);
        padding: 0.35rem 0;
    }

    .pgn-reader-input {
        gap: 0.4rem;
        margin-bottom: 0.5rem;
        padding-inline: 0.75rem;
    }

    .pgn-reader-input--collapsed {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 0.4rem;
    }

    .pgn-reader-input--collapsed .pgn-reader-textarea-row {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pgn-reader-input--collapsed .pgn-reader-input-actions {
        flex: 0 0 auto;
    }

    /* Collapsed keeps only paste-and-load; Reset, Export and file upload come back on expand. */
    .pgn-reader-input--collapsed .pgn-reader-input-actions-file,
    .pgn-reader-input--collapsed .pgn-reader-secondary-action {
        display: none;
    }

    .pgn-reader-input--collapsed .pgn-reader-error,
    .pgn-reader-input--collapsed .pgn-reader-notice {
        flex: 1 0 100%;
    }

    .pgn-reader-panel-head {
        gap: 0.25rem;
    }
}

/* ── Phone landscape ──────────────────────────────────────────
   The desktop input, unchanged in structure — full-width textarea with the collapse button in the
   page's right padding, the whole action row underneath, and the block stretched across board and
   panel by pgnReaderLayout.sync. Only the vertical rhythm tightens, because every pixel above the
   board comes straight out of the board. */
@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
    .content:has(.pgn-reader) {
        padding-top: 0.25rem;
    }

    .pgn-reader {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .pgn-reader-input {
        gap: 0.35rem;
        margin-bottom: 0.4rem;
    }

    /* Matches the panel scale-down in pgnviewer.css — desktop type looks oversized beside a board
       this small. */
    .pgn-reader-players {
        font-size: 0.82rem;
    }

    .pgn-reader-meta {
        font-size: var(--ls-text-sm);
    }

    .pgn-reader-textarea,
    .pgn-reader-input .wood-btn-primary,
    .pgn-reader-input .wood-btn-secondary,
    .pgn-reader-game-select {
        font-size: var(--ls-text);
    }

    .pgn-reader-input .wood-btn-primary,
    .pgn-reader-input .wood-btn-secondary {
        padding: 0.2rem 0.6rem;
    }

    .pgn-reader-panel-head {
        gap: 0.2rem;
    }

    /* The button hangs in the page's 2rem right padding, and at its desktop size it does not fit
       there once the layout is this narrow — a 667px phone pushes it 6px past the viewport. */
    .pgn-reader-collapse-btn {
        width: 2rem;
        height: 2rem;
        margin-left: 0.3rem;
    }
}