/*
 * The floating windows, and the overlay they live on.
 *
 * `12` §4, rewritten 24 August: a tab can be dragged out of the strip and becomes a window; dragged
 * back onto the strip it becomes a tab again. Where it sits, how big it is and whether it is out at
 * all are this browser's own business — nothing here has an equivalent on the server, there is no
 * route that would accept any of it, and `app.js` sends none of it anywhere.
 *
 * The threshold is 40rem, the same one `style.css` and `app.js` use. One number, so the layout, the
 * media query and the code cannot disagree about which drawing this is.
 */

/* ------------------------------------------------------------------ narrow: no windows at all */

/*
 * The default, and it is the phone's: there is nothing here.
 *
 * Written narrow-first rather than as an override, because the narrow case is the one that must not
 * depend on a rule being cancelled. A phone that got the desktop's `position: fixed` by accident
 * would have an invisible sheet over the whole page eating every press. `app.js` docks every window
 * when the glass narrows, so this rule and that one say the same thing twice — deliberately, since
 * either alone would leave the other's failure invisible.
 */
.desk {
    display: none;
}

/* ------------------------------------------------------------------ wide: windows over the stage */

@media (min-width: 40rem) {
    /*
     * The overlay: the area below the strip, and nothing else.
     *
     * Fixed rather than a box in the flow, because a window is over the page rather than in it — the
     * stage keeps its own scrolling, and a window does not push it about. `top` is the height of the
     * strip, which is sticky at the top of the document.
     *
     * **It does not take the pointer.** `pointer-events: none` on the overlay and `auto` on each
     * window is what keeps an empty desk from being an invisible sheet over the whole interface.
     * `app.js` also marks it `desk--busy` only while something is on it, so even the frames cannot
     * catch a press that belongs to the page when there are none.
     */
    .desk {
        display: block;
        position: fixed;
        /* Measured by app.js and published as `--strip-h`; the fallback is what one row costs. */
        top: var(--strip-h, 3.6rem);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        pointer-events: none;
    }

    /*
     * `left`, `top`, `width` and `height` are set by app.js in pixels, and they are the only pixels
     * in this interface that describe a layout. They never leave this browser: a 1400px screen and a
     * 2560px screen cannot share coordinates, which is why nothing about layout is transported at
     * all any more.
     *
     * Every window is clamped into the overlay above by `app.js`, which re-clamps them all whenever
     * it changes size. That is not tidiness: a window dragged off the edge would be unreachable,
     * because there is no scrollbar here to chase it with. See the header of Fabrik's `wingeom.js`,
     * where that was paid for.
     */
    .win {
        pointer-events: auto;
        position: absolute;
        display: flex;
        flex-direction: column;
        min-width: 0;
        max-height: 100%;
        overflow: hidden;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
    }

    /*
     * The bar: the name, the way back into the strip, and the way to close it.
     *
     * It is the drag handle as well, which is why the cursor changes and why nothing in it may be
     * selected — a drag that painted the label blue is a drag that looks broken.
     */
    .win__bar {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.3rem 0.4rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
        cursor: grab;
        user-select: none;
    }

    .win__title {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.3rem 0.2rem;
        font: inherit;
        font-size: 0.92rem;
        font-weight: 600;
        text-align: left;
        color: var(--text);
        background: none;
        border: 0;
        cursor: grab;
        overflow-wrap: anywhere;
    }

    .win__dock,
    .win__close {
        flex: 0 0 auto;
        /* A thumb target, not a glyph. */
        min-width: 1.9rem;
        min-height: 1.9rem;
        font: inherit;
        font-size: 1rem;
        line-height: 1;
        color: var(--text-muted);
        background: none;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .win__dock:hover,
    .win__dock:focus-visible {
        color: var(--accent);
        border-color: var(--accent);
    }

    .win__close:hover,
    .win__close:focus-visible {
        color: var(--danger);
        border-color: var(--danger);
    }

    .win__body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 0.7rem 0.7rem;
        /* Each window scrolls inside itself. The page never scrolls sideways because of one. */
        overflow: auto;
    }

    /* A screen drawn in a window is an ordinary block inside it, not a page of its own. */
    .win__body > .page,
    .win__body > section {
        max-width: none;
        margin: 0;
    }

    .win__grip {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0;
        background: none;
        border: 0;
        border-right: 3px solid var(--border-strong);
        border-bottom: 3px solid var(--border-strong);
        border-bottom-right-radius: var(--radius);
        cursor: nwse-resize;
    }

    .win__grip:hover,
    .win__grip:focus-visible {
        border-color: var(--accent);
    }
}

/*
 * Who is typing in this screen, and how long is left of their claim.
 *
 * Drawn by the CONTAINER and never by the screen module below it — in a window's bar when the screen
 * is a window, and above the stage when it is the tab in front. Loud enough to be read before
 * somebody starts typing into a box that is already taken, which is the ten seconds `12` §3 exists
 * to save. It is one of the two things that stayed shared when layout stopped being shared, because
 * it is about the data rather than about the furniture.
 */
.win__held {
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    color: var(--notice);
    background: var(--notice-weak);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}

/*
 * A box somebody else is typing in.
 *
 * Marked and NOT disabled, deliberately: a hold is a claim that expires, not a lock (`12` §3), and
 * a disabled box would be a lock with no way to take it back. What this says is "somebody is in
 * here"; the line above the screen says who, and how long is left.
 */
input.box--held,
textarea.box--held,
select.box--held {
    /* Spelled with the element so it beats `input[type="text"]` in style.css on specificity rather
       than with `!important`: this sheet is loaded after that one, so a tie is enough. */
    border-color: var(--notice);
    background: var(--notice-weak);
}

/* -----------------------------------------------------------------------------------
 * The console's two kinds of session (`07`, corrected 23 August).
 *
 * The AI one is marked and the Linux one is not, deliberately: a shell is the ordinary
 * thing to find here, and marking both equally would make neither stand out. The colour
 * is the accent rather than a warning — an AI session is not a problem, it is simply the
 * other tool, and a reader glancing at a list needs to tell them apart at a glance.
 */
.term__kind--agent {
    color: var(--accent-text);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------------
 * Presence, in the strip.
 *
 * It moved here from `#overview-panel` because that panel is hidden whenever the front tab
 * is a live one — so while somebody read a log, an arrival appeared nowhere. `10` asks for
 * presence to be permanently visible without being asked for, and this row is the only
 * thing on the page that never goes away.
 *
 * These rules come AFTER `style.css`'s `.band`, which styled it as a card in a column. What
 * is left of that shape here would be a bordered box wedged into a row of chips.
 */
.band {
    display: inline-block;
    font-size: 0.85rem;
    /* Overrides the card look from style.css — see above. */
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
}

.band__summary {
    cursor: pointer;
    color: var(--text-muted);
    white-space: nowrap;
    /* The target, not decoration: 0.85rem of text is under what a thumb hits reliably. */
    padding: 0.2rem 0.15rem;
    list-style: none;
}
.band__summary::-webkit-details-marker { display: none; }
.band__summary:hover { color: var(--text); }

/* Somebody else is here. On the CLOSED summary, because `10` wants an arrival seen rather
   than discoverable — a count that reads the same alone or watched satisfies the letter of
   the rule and none of the point. */
.band--others > .band__summary {
    color: var(--accent);
    font-weight: 600;
}

/* The list, when it is opened. Floated over the page rather than pushing the strip taller:
   the strip's height is measured into `--strip-h` and a row that grew on a press would move
   every live tab's content under the reader's eyes. */
.band[open] > .band__list {
    position: absolute;
    z-index: 60;
    margin-top: 0.35rem;
    max-width: min(30rem, calc(100vw - 1.5rem));
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}