/* ── Large-screen scaling (explorer page, >1180px) ──────────────────────
   Root font size is 100% up to a 1536x780 window and rises to at most
   125% (20px), following the window's vw/vh; the smaller term applies:
     width term :  13px + 0.1953vw   (16px @1536, 18px @2560, 20px @3584)
     height term:  12.55px + 0.442vh (16px @780, 18.3px @1300)
   --board-size fills the window height up to --board-size-max. Scoped to
   html.explorer (set in templates/index.html and frontend/index.html); the
   px-based admin page keeps the 16px baseline. At <=1180px both keep their
   base values. */
@media (min-width: 1181px) {
    html.explorer {
        font-size: clamp(100%, min(81.25% + 0.1953vw, 78.5% + 0.442vh), 125%);
    }
    :root {
        /* Widest the three-column row may grow. */
        --content-max: 112rem;

        /* Height budget: 100vh minus header 3rem, content padding 2.25rem,
           FEN bar/error/turn rows ~8.9rem, tray borders (0.625rem
           + 4px) and ~1rem slack for a wrapped error message = 15.75rem + 4px.
           The remainder holds the board and its two trays: 1.25 x board.
           Update when the height above the board changes. */
        /* Reserve controls at the largest font size allowed by this height.
           Using the current rem would shrink the board as a wider window
           scales the text up, even though its height has not changed. */
        --board-height-font-size: clamp(16px, calc(12.56px + 0.442vh), 20px);
        --board-fit-h: calc((100vh - 15.75 * var(--board-height-font-size) - 4px) / 1.25);

        /* Width budget: padding 4rem + gaps 3rem + results panel 50rem,
           plus the PGN column. Reserve enough for the results' 49rem
           four-metric breakpoint and borders before growing the board. */
        --board-fit-w: calc(min(100vw, var(--content-max)) - 57rem - var(--pgn-col-w));

        /* Floor 20.5rem (328px at a 16px root, a multiple of 8px); the page
           scrolls below it. The floor must stay above the FEN toolbar's
           minimum content width (321px at a 16px root: four labelled
           buttons, Back, Next and five gaps), otherwise Next sticks out
           past the Lock button's right edge. Re-check it when a toolbar
           button or its padding changes. --board-size-max caps the result,
           and the results column takes the width the board column does not
           use. */
        --board-size: min(var(--board-size-max), max(20.5rem, min(var(--board-fit-h), var(--board-fit-w))));
    }
    /* The results and PGN columns take the row height set by the board
       column and scroll their content internally. */
    .right-col, .pgn-col { contain: size; }
    .content { align-content: start; }

}

/* ── Layout ─────────────────────────────────────────────────────────── */
:root { --pgn-col-w: 16rem; }

.content {
    display: grid;
    grid-template-columns: var(--board-size) minmax(21.25rem, 1fr) var(--pgn-col-w);
    gap: var(--space-5);
    padding: 1.125rem var(--space-6);
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    max-width: var(--content-max, 96.25rem);
    margin: 0 auto;
    overflow: visible;
}

/* ── Left column ────────────────────────────────────────────────────── */
.left-col {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    min-height: 26rem;
}

/* ── Right column ───────────────────────────────────────────────────── */
.right-col {
    min-width: 0;
    min-height: 22rem;
    display: flex;
    flex-direction: column;
}

/* ── PGN column ─────────────────────────────────────────────────────── */
.pgn-col {
    min-height: 22rem;
    display: flex;
    flex-direction: column;
}