/* =====================================================================
 * File browser DRAWER - its box.
 * ---------------------------------------------------------------------
 * The file picker was a centred `.modal-overlay` dialog (520px wide,
 * 85dvh tall) that covered the terminal it was about. It is a full-height
 * drawer against the RIGHT edge, shown or hidden. It could also be PINNED
 * (docked into the layout) until 2026-09-23, when the owner removed the
 * pin: "the drawer is simply shown or hidden".
 *
 * SINCE 2026-09-24 IT DOCKS AGAIN, WITH NO PIN: above 700px it is the right
 * drawer (client/css/right-drawer.css, web/src/lib/right-drawer/), which
 * overrides this overlay into a docked column the page makes room for, at
 * the device's own resizable width. Below 700px the rules here are the
 * whole story: an overlay with a backdrop, at the phone width below.
 *
 * NOT A SECOND STYLESHEET FOR THE SAME THING. config-editor.css owns
 * everything INSIDE the drawer (header container, tree, rows) and
 * config-editor-modal.css owns the editor that opens from it. This file is
 * only the box. Load it after config-editor.css.
 *
 * FLAT, NOT ROUNDED. No pills, no ovals, square corners on the drawer -
 * matching the flattened settings screen.
 *
 * THE PALETTE IS --oc-*, NOT THE SESSION THEME. This surface is app
 * chrome, so it reads the military terminal tokens web/src/opscenter/
 * tokens.css puts on :root (they reach every screen through the single
 * client/dist/app.css that client/index.html loads), the same source the
 * shared modal chassis in styles.css and terminal-carnivore.css read.
 * No new token was added and no colour literal is left in this file.
 * ===================================================================== */

:root {
    /* The drawer's width. 40vw is the cap that matters on a wide screen:
     * a fixed 420px is a third of a 1280px window but a tenth of a 4K
     * one. */
    --config-drawer-w: min(420px, 40vw);
}

/* On a phone the width is about readability, not about how much terminal
 * is left beside it. */
@media (max-width: 700px) {
    :root {
        --config-drawer-w: min(360px, 88vw);
    }
}

/* ------------------------------------------------------------------ *
 * The drawer box
 * ------------------------------------------------------------------ */

/* `.modal-overlay` centres its child. The drawer hugs the right edge and
 * runs the full height instead. The overlay itself stays exactly what it
 * was - the backdrop, and the click target that dismisses on an outside
 * click - so nothing about the modal contract changes. */
.config-editor-picker-overlay {
    justify-content: flex-end;
    align-items: stretch;
}

.config-editor-picker-content {
    width: var(--config-drawer-w);
    max-width: 100%;
    /* Full viewport height. The `vh` line is the fallback for engines with
     * no dynamic viewport units; `dvh` is what every current engine uses.
     * Order matters - see tests/test_viewport_units.node.mjs. */
    height: 100vh;
    height: 100dvh;
    background: var(--oc-ground-panel);
    /* One hairline on the edge that faces the app. No outline box, no
     * radius: a drawer is part of the frame, not a card floating in it. */
    border: none;
    border-left: 1px solid var(--oc-line-rule);
    border-radius: 0;
    box-shadow: -4px 0 24px var(--oc-shadow-lift);
    display: flex;
    flex-direction: column;
    animation: configDrawerIn 160ms ease;
}

@keyframes configDrawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}