/*
    The editor lays itself out around one question: how much room does the sheet get?

    The panels fold away at any size and the button is there until 1440px. That is deliberate: a browser
    reports CSS pixels, never inches, and Windows scaling divides the physical resolution by whatever the
    user picked -- so a 14" laptop and a 24" monitor land on the same side of any line drawn in pixels.
    Whether the sheet feels cramped is the partner's call, not a media query's. Above 1440 both fit
    comfortably (600 for the panels, 840 for the sheet) and the button would only be noise.

    Folded open beside the sheet, the sheet is held to what fits the window height, so the whole page is in
    view at once. Folded away it is there to be inspected instead and may be larger than the window: then the
    page scrolls, and the preview stops sticking -- a sticky column taller than the window scrolls into a
    dead end.

    Side by side, the preview scrolls along until its bottom is in view and then holds, so it is never gone
    while you work in the panels. Folded away it does not stick: there is nothing beside it any more.

    Where a partner starts is the one thing read from the window: open from 1280 up, folded below that. From
    then on the button decides.

    Its own stylesheet rather than Tailwind xl: utilities: wwwroot/output.css is a build artifact that lags
    the markup, and regenerating it changes how every other page looks. Not a Blazor .razor.css either --
    App.razor does not link Scopr.Portal.styles.css, so component styles are never served. Every rule below
    is on a branding- class that exists on one page only, so it cannot reach anything else.
*/

.branding-tools-toggle {
    display: inline-flex;
}

/*
    Narrow: the panels stand above the sheet, and folding them is an on-off matter. No animation here -- the
    heights involved depend on the content, and a transition that has to guess them stutters worse than none.
*/
@media (max-width: 1023.98px) {

    .branding-grid.tools-closed .branding-tools {
        display: none;
    }

    .branding-grid.tools-closed .branding-preview {
        grid-column: 1 / -1;
    }
}

/*
    From 1024px the two stand side by side, and folding slides rather than jumps: the column widths are
    fractions and fractions interpolate, so the panels narrow out of the way instead of disappearing between
    two frames.
*/
@media (min-width: 1024px) {

    .branding-grid {
        grid-template-columns: 5fr 7fr;
        transition: grid-template-columns 260ms ease, column-gap 260ms ease;
    }

    .branding-tools {
        grid-column: 1;
        /* Both needed for a column that shrinks to nothing: min-width keeps its content from propping it
           open, overflow keeps that content from spilling out while it narrows. */
        min-width: 0;
        overflow: hidden;
        transition: opacity 200ms ease;
    }

    .branding-preview {
        grid-column: 2;

        /*
            Scrolls along until its bottom edge is in view and then holds there. Sticky on the bottom rather
            than the top, because this card is about as tall as the window is: pinning its top would put its
            lower half permanently out of reach.
        */
        /*
            Pinned to the top and held to the window: whatever happens above it in the panels, the sheet is
            in view. Sticky on the top rather than the bottom -- bottom-sticky let the whole card scroll off
            before it ever held.

            The card is a little taller than the window (title, sheet, sheet picker, download button), so the
            last few dozen pixels scroll inside the panel instead of taking the sheet with them.
        */
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        /* Without this the column stretches to the height of the panels beside it and there is nothing left
           for sticky to do. */
        align-self: start;
    }

    .branding-grid.tools-closed {
        grid-template-columns: 0fr 1fr;
        column-gap: 0;
    }

    .branding-grid.tools-closed .branding-tools {
        opacity: 0;
        pointer-events: none;
    }

    /*
        Folded open: the whole page in view without scrolling. A4 is 1 to root 2, so the height left over
        around it fixes the width -- around 600px on a 1080 screen, whatever the column offers. There is no
        arrangement in which a full page both fits the height and fills an 840px column.
    */
    .branding-sheet {
        max-width: calc((100vh - 16rem) * 0.7071);
        transition: max-width 260ms ease;
    }

    /* The grey area holds the page rather than the column, so what is left beside it reads as background
       instead of waste. Spelled out rather than left to fit-content: a child on width 100% inside a
       fit-content parent is the kind of circular sizing browsers resolve differently. */
    .branding-canvas {
        max-width: calc((100vh - 16rem) * 0.7071 + 2rem);
        margin-left: auto;
        margin-right: auto;
        transition: max-width 260ms ease;
    }

    /* Folded away: room to inspect. Held to 880px, just above the 96dpi render of about 790px
       across -- and past that it is upscaling, not detail. */
    .branding-grid.tools-closed .branding-sheet {
        max-width: min(880px, 100%);
    }

    .branding-grid.tools-closed .branding-canvas {
        max-width: min(880px + 2rem, 100%);
    }

    /* Folded away there is nothing beside it to scroll past, and the sheet is bigger than the window on
       purpose: the page carries it instead. */
    .branding-grid.tools-closed .branding-preview {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/*
    Above this width the panels and a workable sheet fit together, so there is nothing to fold away and no
    button for it -- and a folded state carried over from a narrower window does not apply here.

    The number comes from what the two columns need, not from any particular screen: the panels start
    squeezing their inputs and their library below about 500px, and a sheet you place logos on wants about
    700. With the gap between them that is roughly 1250 before both are comfortable, so 1440 leaves room to
    spare -- 600 for the panels, 840 for the sheet.
*/
@media (min-width: 1440px) {

    .branding-tools-toggle {
        display: none;
    }

    .branding-grid.tools-closed {
        grid-template-columns: 5fr 7fr;
        column-gap: 1.5rem;
    }

    .branding-grid.tools-closed .branding-tools {
        opacity: 1;
        pointer-events: auto;
    }

    .branding-grid.tools-closed .branding-preview {
        position: sticky;
    }

    .branding-grid.tools-closed .branding-sheet {
        max-width: calc((100vh - 16rem) * 0.7071);
    }

    .branding-grid.tools-closed .branding-canvas {
        max-width: calc((100vh - 16rem) * 0.7071 + 2rem);
    }
}

/* The page needs an edge of its own. It used to borrow the edge of the grey area around it, which worked
   only as long as it filled that area exactly -- a white sheet on a near-white background has no visible
   boundary otherwise. A ring in a shadow rather than a border: a border would add to the width, and the
   slots are positioned in percentages of this box. */
.branding-sheet {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(60, 37, 8, 0.12), 0 10px 30px rgba(60, 37, 8, 0.10);
}

/* Room for that shadow, and the sheet no longer touching the walls of its container. */
.branding-canvas {
    padding: 1rem;
}

/*
    One panel instead of five cards floating under each other. The column itself carries the frame and the
    cards inside it become sections with a hairline between them.

    Done here rather than by rewriting the markup: those cards are plain divs holding Razor blocks, and
    restyling them from the outside leaves every conditional and every handler exactly where it was.
*/
.branding-panel {
    background: #fff;
    border: 1px solid rgba(60, 37, 8, 0.10);
    border-radius: 1rem;
    /* The sections meet each other; the hairline does the separating. */
    gap: 0;
    /* So the corners clip the first and last section instead of showing square edges through them. */
    overflow: hidden;
}

.branding-panel > div {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.branding-panel > div + div {
    border-top: 1px solid rgba(60, 37, 8, 0.10);
}

/*
    The spot being worked on keeps its emphasis, but as a tint rather than a frame of its own -- a framed
    card inside a panel is exactly the look this is meant to get rid of. Hooked on ring-1 because that
    utility appears on that one section and nowhere else on the page.
*/
.branding-panel > .ring-1 {
    background: rgba(59, 130, 246, 0.04);
    box-shadow: none;
}