/* edet-mobile.css — every @media (max-width: 720px) override.
   LOADED LAST so equal-specificity rules win on source order (same
   discipline as music-mobile.css). Desktop-first feature parity is a
   v2 concern; here the goal is just a usable, unbroken phone layout:
   single editor/preview pane with a toggle, off-canvas sidebar + notes
   drawers, and a compact chrome. Tokens from site.css :root. */

@media (max-width: 720px) {
    /* The global site header stays FIXED at the top when a panel (sidebar / aux)
       opens — we deliberately do NOT hide it. Hiding it dropped its ~45px row, so the
       chrome + panel head jumped up a row while the notch gap stayed (the "raise up by
       one row but keep the black bar" jolt). Keeping the header, the panel just slides
       in BELOW the static top bar — same as the desktop column layout — and the
       header's own padding-top clears the notch, so there's no extra black band and
       nothing moves between states. (An earlier build hid it for a "connected" look;
       the user chose a rock-solid static bar instead.) */

    /* sidebar scrim */
    .dr-sidebar-overlay {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 20;
        /* TRANSPARENT — opening a panel must NOT darken the rest of the screen (the user
           reads that full-screen dim as an unwanted "shadow"). This element stays only as
           the invisible tap-to-close catcher; the panel dims ITSELF (layered bg below). */
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-med) var(--ease-smooth);
    }
    .edet-app[data-sidebar="open"] .dr-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    /* The scrim already dims the page behind the LEFT sidebar; extend it to the RIGHT
       aux panel too, so the frosted aux reads over a darkened desk (not the bright,
       un-dimmed editor page). Clicking it closes the aux — see edet-sidebar.js. */
    .edet-app[data-aux]:not([data-aux="none"]):not([data-aux=""]) .dr-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* The REAL desktop frost on the WHOLE phone UI — the actual translucent --edet-glass
       glass, on every chrome surface. The top bar used to rely on the grid-desk ::before
       frost PANE (which on a phone read flat / near-black) while the panels used the
       translucent --edet-glass; that split is what looked inconsistent. Apply the SAME
       --edet-glass + --edet-blur the desktop chrome uses DIRECTLY to header + chrome +
       sidebar + aux, and drop the desk frost panes on mobile so nothing double-frosts.
       data-edet-desk is always present (flat|grid) so these match the grid rules'
       specificity and, loading LAST, win the cascade. */
    /* TOP BAR = ONE smooth frosted pane. The header and the chrome were two SEPARATE frosted
       elements meeting edge-to-edge — that boundary is the "two bars" seam. Instead make both
       transparent and frost the whole top strip with a SINGLE pane: ::after is the dimmer
       (scrim, so it can't wash to silver when the bright page scrolls under the bar), ::before
       is the one frost on top. One element frosting the strip → no seam → one smooth panel.
       Both panes are pinned to the top strip (height = the live-measured --edet-top-h) and are
       excluded in focus mode (which hides them). */
    body.edet[data-edet-desk] .site-header,
    body.edet[data-edet-desk] .dr-chrome {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body.edet[data-edet-desk]:not(.edet-focus)::after {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 0 auto 0 !important;            /* top strip, full width */
        width: auto !important;
        height: var(--edet-top-h, 96px) !important;
        z-index: 5 !important;                   /* the dimmer, under the frost */
        background: var(--scrim) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        pointer-events: none !important;
    }
    body.edet[data-edet-desk]:not(.edet-focus)::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: auto !important;
        height: var(--edet-top-h, 96px) !important;
        z-index: 6 !important;                   /* the ONE frost, over the dimmer */
        background: var(--edet-glass) !important;
        -webkit-backdrop-filter: var(--edet-blur) saturate(118%) !important;
        backdrop-filter: var(--edet-blur) saturate(118%) !important;
        pointer-events: none !important;
    }
    /* sidebar + aux keep their own translucent frost. DROP the drop-shadow that cast outside
       the panel onto the desk — the user wants a clean panel edge, no outer glow. */
    body.edet[data-edet-desk] .dr-sidebar,
    body.edet[data-edet-desk] .dr-aux {
        /* Layered background = the dimmer baked INTO the panel: --scrim (bottom) darkens the
           blurred page so the glass (top) reads dark, the SAME dark frosted gray as the top
           bar — but the dimming lives in the panel, not a full-screen overlay, so the rest of
           the screen is never darkened. */
        background: linear-gradient(var(--edet-glass), var(--edet-glass)), var(--scrim) !important;
        -webkit-backdrop-filter: var(--edet-blur) saturate(118%) !important;
        backdrop-filter: var(--edet-blur) saturate(118%) !important;
    }
    .dr-sidebar, .dr-aux { box-shadow: none !important; }
    /* TILE the panels under the top bar instead of OVERLAPPING it. The panel used to start at
       the top of .edet-app (just under the header), so its head sat in the same band as the
       chrome and its frost stacked on top of the top-bar frost → a double-frosted patch. Pin
       it BELOW the top bar (position:fixed at the live-measured --edet-top-h) so the top-bar
       frost (0 → --edet-top-h) and the panel frost (--edet-top-h → bottom) meet edge-to-edge
       as ONE continuous frosted surface — exactly like the desktop top-strip + sidebar-column
       panes. The slide transform still works; no transformed ancestor, so fixed is safe. */
    body.edet[data-edet-desk] .dr-sidebar,
    body.edet[data-edet-desk] .dr-aux {
        position: fixed !important;
        top: var(--edet-top-h, 93px) !important;
        bottom: 0 !important;
    }

    /* KEEP THE TOOLBAR ON SCREEN + FROSTED WHILE TYPING. The format strip lives in the top
       bar; when the keyboard opens iOS shifts the viewport and the in-flow bar scrolls off —
       AND the static ::before/::after desk-frost panes (sized/positioned for the non-typing
       desk) can't track the keyboard, so the page bled through behind the toolbar and the
       frost only "popped in" after a pan re-ran setTopFrostHeight. So while editing: SUPPRESS
       the desk panes and let the header + chrome carry their OWN frost (the same layered
       glass+scrim recipe as the panels — self-contained, so the page can't bleed through),
       riding the keyboard together via --edet-vv-top (published on <html> by edet-cm.js).
       Fully decoupled from the desk panes → the frost is there immediately, no pan needed. */
    body.edet[data-edet-editing="true"]:not(.edet-focus)::before,
    body.edet[data-edet-editing="true"]:not(.edet-focus)::after { display: none !important; }
    body.edet[data-edet-editing="true"] .site-header,
    body.edet[data-edet-editing="true"] .dr-chrome {
        background: linear-gradient(var(--edet-glass), var(--edet-glass)), var(--scrim) !important;
        -webkit-backdrop-filter: var(--edet-blur) saturate(118%) !important;
        backdrop-filter: var(--edet-blur) saturate(118%) !important;
        transform: translateY(var(--edet-vv-top, 0px));
        transition: transform 0.06s linear;
        will-change: transform;
    }

    /* single pane: show only the active half */
    .edet-app[data-pane="edit"] .dr-preview { display: none; }
    .edet-app[data-pane="preview"] .dr-editor-pane { display: none; }
    .dr-editor-pane { border-right: none; }

    /* compact chrome — collapse the textual saved indicator to a status
       dot and drop the word-count readout so the action buttons fit a
       360 px row */
    /* In the busiest state (e.g. the scenes Manuscript|Scenes toggle visible)
       the controls can exceed a 320 px row. Let the
       toolbar scroll horizontally (scrollbar hidden) instead of clipping the
       rightmost controls (Preview/Focus/⋯) off-screen. Buttons keep their size
       and the flexible spacer collapses first. */
    .dr-chrome {
        gap: 0.3rem;
        padding: 0 0.45rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .dr-chrome::-webkit-scrollbar { display: none; }
    .dr-chrome > *:not(.dr-chrome-spacer) { flex-shrink: 0; }
    .dr-wc { display: none; }
    .dr-saved { font-size: 0; line-height: 0; }
    .dr-saved::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--status-ok);
    }
    .dr-saved[data-state="saving"]::before { background: var(--status-warn); }
    .dr-saved[data-state="error"]::before { background: var(--status-err); }
    .dr-saved[data-state=""]::before { background: var(--fg-deep); }

    /* find/replace bar spans the editor width on a phone */
    .dr-find-bar { left: 0.5rem; right: 0.5rem; }
    .dr-find-row .dr-find-input { width: auto; flex: 1 1 auto; }
    .dr-find-row { flex-wrap: wrap; }

    /* roomier tap target for chapter + entity rows */
    .dr-chapter-title, .dr-entity-title { padding: 0.65rem 0.6rem 0.65rem 1.1rem; }

    /* chrome is tight on phones — History (a desktop-leaning feature)
       drops out; the aux panel still works for Notes. Focus + Export +
       Notes + pane toggle remain. */
    #dr-history-toggle { display: none; }
    .dr-chrome .dr-btn { padding: 0 0.5rem; }

    /* goal bar: tighten the row on a phone */
    .dr-goal-view { gap: 1rem; }

    /* v2.0 — corkboard stacks single-column */
    .edet-app[data-view-mode="scenes"] .dr-corkboard {
        grid-template-columns: 1fr;
        padding: 0.6rem;
    }
    .edet-app[data-view-mode="scenes"][data-doc-kind="scene"] .dr-corkboard { max-height: 38%; }

    /* v2.0 — folder sync leans desktop; drop the Sync button from the tight
       phone chrome. */
    #dr-sync-toggle { display: none !important; }

    /* v2.0 — overlay views: tighter padding, manuscript/cards stay usable */
    .dr-overlay-body { padding: 0.6rem; }
    .dr-tl-node { width: 160px; }
    .dr-plot-colhead, .dr-plot-cell { min-width: 100px; width: 100px; }
}