/* 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) {
    /* sidebar scrim */
    .dr-sidebar-overlay {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 20;
        background: var(--scrim);
        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;
    }

    /* 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: drop the per-bar labels to fit a narrow row */
    .dr-goal-item-label { display: none; }
    .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; }
}