/* edet-editor.css — the center column: chrome (saved indicator +
   word counts + export/notes/pane buttons), the editor|preview split,
   the textarea, the rendered preview, and the in-doc find bar.
   All colors/motion from site.css :root tokens. */

/* ---------------- Edet "glass chrome" (see site.css) ----------------
   Every chrome surface around the canvas goes translucent at the SAME --edet-glass
   level (defined on body.edet) with a backdrop blur — the desk shows through. The
   page (.ProseMirror paper) and board cards (.dr-board-card) deliberately keep their
   solid backgrounds: they're the content, not chrome. Scene index cards stay
   readable; only the strip BEHIND them goes translucent. */
body.edet .dr-chrome,
body.edet .dr-sidebar,
body.edet .edet-app[data-view-mode="scenes"] .dr-corkboard {
    background: var(--edet-glass);
    backdrop-filter: var(--edet-blur);
    -webkit-backdrop-filter: var(--edet-blur);
}
/* drop the divider borders so the bars blend seamlessly into the desk (no cut strips) */
body.edet .dr-chrome { border-bottom: none; }
body.edet .dr-sidebar { border-right: none; }

/* ---- Maximum-contrast chrome text + icons ----
   The muted/dim greys (--fg-muted, --fg-dim) were hard to read on the frosted chrome.
   Inside the chrome CONTAINERS (top bar, toolbar, sidebar, aux panels, word-count pill,
   read-only banner, mini-player) promote ALL THREE foreground tokens to the pure theme
   foreground — white in dark, black in light — so every label, icon and placeholder is
   full contrast. Set on the containers (not body.edet) so the page/editor
   (.dr-editor-host) keeps its own paper ink (--dr-ink), editor placeholder and task
   strike-through. The accent (active doc, links) is intentionally left as-is. */
[data-theme="dark"] body.edet .site-header,
[data-theme="dark"] body.edet .dr-chrome,
[data-theme="dark"] body.edet .dr-sidebar,
[data-theme="dark"] body.edet .dr-aux,
[data-theme="dark"] body.edet .dr-overlay,
[data-theme="dark"] body.edet .dr-wc-overlay,
[data-theme="dark"] body.edet .dr-readonly-banner,
[data-theme="dark"] body.edet .dr-suggest-bar,
[data-theme="dark"] body.edet .mini-player {
    --fg: #fff;
    --fg-muted: #fff;
    --fg-dim: #fff;
    color: var(--fg);   /* re-declare so plain inherited text flips too; accent/status
                           children keep their own explicit color and stay coloured. */
}
[data-theme="light"] body.edet .site-header,
[data-theme="light"] body.edet .dr-chrome,
[data-theme="light"] body.edet .dr-sidebar,
[data-theme="light"] body.edet .dr-aux,
[data-theme="light"] body.edet .dr-overlay,
[data-theme="light"] body.edet .dr-wc-overlay,
[data-theme="light"] body.edet .dr-readonly-banner,
[data-theme="light"] body.edet .dr-suggest-bar,
[data-theme="light"] body.edet .mini-player {
    --fg: #000;
    --fg-muted: #000;
    --fg-dim: #000;
    color: var(--fg);
}
/* the editor fills the full height in grid mode (no mini-player reservation), so when
   the mini-player IS showing, lift the word-count pill above it (GPU transform). */
body.edet[data-edet-desk="grid"]:has(.mini-player:not([hidden])) .dr-wc-overlay { transform: translateY(-55px); }
/* the toolbar floats ABOVE the canvas so cards/page spilling up show through it */
body.edet .dr-chrome { position: relative; z-index: 20; }
/* controls inside the glass had solid/own backgrounds (the project switcher was
   fully OPAQUE, search + toggle a different tint) — those read as patches that
   break up the grid + look like "different transparency". Make them ALL transparent
   so the SAME panel glass + grid shows through uniformly; borders keep affordance.
   (Active/hover states still tint, see edet-sidebar.css.) */
body.edet .dr-doc-search,
body.edet .dr-research-chip,
body.edet .dr-project-switcher,
body.edet .dr-doc-search input {
    background: transparent;
}

/* The right AUX panels — Notes, Comments, Version history, Scene details — use the
   IDENTICAL frosted-chrome recipe as the sidebar / top bar / corkboard / mini-player
   (body.edet .dr-sidebar etc. above): the same --edet-glass tint + --edet-blur, so
   the whole chrome reads as one consistent frosted surface over the desk. Heads + big
   inner surfaces stay transparent so the one glass reads uniformly; content cards
   keep their own surface for legibility. */
body.edet .dr-aux {
    background: var(--edet-glass);
    backdrop-filter: var(--edet-blur);
    -webkit-backdrop-filter: var(--edet-blur);
}
body.edet .dr-notes-head,
body.edet .dr-history-head,
body.edet .dr-notes-text,
body.edet .dr-history-list,
body.edet .dr-comments-list,
body.edet .dr-inspector-body {
    background: transparent;
}

.dr-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* ---- chrome ----
   One unified row: sidebar toggle · formatting toolbar · (spacer) · word-count
   + compact goal + save dot · view toggle · Aa/Rich · Preview/Focus/⋯. The row
   scrolls horizontally rather than wrapping if a narrow window can't fit it. */
.dr-chrome {
    height: var(--dr-chrome-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.6rem;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;          /* the row is a control strip, not content */
}
.dr-chrome::-webkit-scrollbar { display: none; }
.dr-chrome-spacer { flex: 1 1 auto; min-width: 0.4rem; }

/* The formatting toolbar is now inline in the chrome row, so it drops its own
   strip chrome (border / padding / background) and just lays out its buttons. */
.dr-chrome #dr-toolbar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0;
    border-bottom: none;
    background: transparent;
}
/* Uniform control sizing: the icon buttons (sidebar toggle, ⋯) match the 30px
   height + 6px radius of the formatting buttons and pills, so the whole row is
   one consistent set of controls — not five different button styles/sizes. */
.dr-chrome .dr-icon-btn {
    height: 30px;
    width: 30px;
    border-radius: 6px;
    font-size: var(--text-base);
}

/* Save state — the visible dot was removed (autosave is automatic + flushes on
   blur, doc-switch, tab-hide and pagehide, so there's nothing to act on). The
   element is kept VISUALLY HIDDEN (sr-only): screen readers still announce
   "All changes saved"/"Saving…" via its aria-label, and the e2e suite still uses
   #dr-saved[data-state="saved"] as a save-completion signal. data-state colors
   are no longer needed. */
.dr-saved {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.dr-wc {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--fg-dim);
    white-space: nowrap;
}

/* ---- split ----
   The editor opens as a SINGLE centered writing column; the live preview
   is opt-in (the Preview button toggles data-preview="split" on desktop).
   On mobile a one-pane-at-a-time toggle (data-pane) is used instead. */
.dr-split {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
}
.dr-editor-pane {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Fixed word-count overlay — pinned to the editor pane's bottom-right corner so
   it stays put when the canvas is panned/zoomed or the page scrolls. A subtle
   translucent pill; pointer-events:none so it never blocks editing or panning. */
.dr-wc-overlay {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 6;
    pointer-events: none;   /* the pill never blocks panning; only its controls opt back in */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform var(--dur-fast) var(--ease-smooth);   /* GPU-smooth lift, not a layout animation */
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--edet-glass, color-mix(in srgb, var(--bg) 55%, transparent));   /* SAME cloudy glass as the rest */
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.4;
    backdrop-filter: var(--edet-blur);
    -webkit-backdrop-filter: var(--edet-blur);
}
.dr-wc-overlay:empty { display: none; }
.dr-wc-words { white-space: nowrap; }
/* Zoom control (grid desk only) — the slider + ± + % + recenter are the only
   interactive bits, so they re-enable pointer events; the pill stays click-through. */
.dr-wc-zoom {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    pointer-events: auto;
    padding-left: 0.5rem;
    border-left: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.dr-wc-zoom[hidden] { display: none; }
.dr-wc-zbtn, .dr-wc-zpct {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
    padding: 0.05rem 0.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-smooth);
}
.dr-wc-zbtn:hover, .dr-wc-zpct:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.dr-wc-zpct { min-width: 2.7em; font-variant-numeric: tabular-nums; }
.dr-wc-recenter { color: var(--accent); }
.dr-wc-zrange {
    -webkit-appearance: none;
    appearance: none;
    width: 78px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fg) 24%, transparent);
    cursor: pointer;
    margin: 0;
}
.dr-wc-zrange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    cursor: grab;
}
.dr-wc-zrange::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    cursor: grab;
}
.dr-preview {
    flex: 1 1 50%;
    min-width: 0;
    overflow-y: auto;
    line-height: 1.8;
    color: var(--fg-soft, var(--fg));
    word-wrap: break-word;
}
/* Centered reading measure shared by the editor + preview content. */
.dr-textarea,
.dr-preview-inner {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 2.6rem clamp(1.1rem, 4vw, 2.25rem) 8rem;
}
.dr-preview { padding: 0; }

/* Desktop: preview off ⇒ editor fills the column; split ⇒ 50/50. */
@media (min-width: 721px) {
    .edet-app[data-preview="off"] .dr-preview { display: none; }
    .edet-app[data-preview="off"] .dr-editor-pane { border-right: none; }
    .edet-app[data-preview="split"] .dr-editor-pane {
        flex: 1 1 50%;
        border-right: 1px solid var(--rule);
    }
    .edet-app[data-preview="split"] .dr-preview { flex: 1 1 50%; }
    /* a tighter measure inside each half of the split */
    .edet-app[data-preview="split"] .dr-textarea,
    .edet-app[data-preview="split"] .dr-preview-inner { max-width: 38rem; }
}

/* ---- textarea (markdown source) — the writing surface ---- */
.dr-textarea {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    resize: none;
    border: none;
    outline: none;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    line-height: 1.85;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
}
.dr-textarea:disabled { color: var(--fg-dim); background: var(--bg); }
.dr-textarea::placeholder { color: var(--fg-deep); }
.dr-textarea[readonly] { color: var(--fg-dim); }

/* ---- rendered preview elements ---- */
.dr-preview-inner > :first-child { margin-top: 0; }
.dr-preview h1, .dr-preview h2, .dr-preview h3,
.dr-preview h4, .dr-preview h5, .dr-preview h6 {
    color: var(--fg);
    line-height: 1.25;
    margin: 1.4em 0 0.5em;
    font-weight: 700;
}
.dr-preview h1 { font-size: var(--text-3xl); }
.dr-preview h2 { font-size: var(--text-2xl); }
.dr-preview h3 { font-size: var(--text-xl); }
.dr-preview h4 { font-size: var(--text-lg); }
.dr-preview h5, .dr-preview h6 { font-size: var(--text-base); }
.dr-preview p { margin: 0 0 1em; }
.dr-preview ul, .dr-preview ol { margin: 0 0 1em; padding-left: 1.5rem; }
.dr-preview li { margin: 0.2em 0; }

/* footnotes (Phase 7) — superscript refs + the notes section. Scoped to .dr-fn-*
   so it also styles the page-view + exported HTML output of mdToHtml. */
.dr-fn-ref { font-size: 0.75em; line-height: 0; }
.dr-fn-ref a { text-decoration: none; }
.dr-footnotes { margin-top: 2em; font-size: 0.9em; }
.dr-footnotes hr { border: none; border-top: 1px solid var(--rule); margin: 0 0 0.8em; width: 30%; }
.dr-footnotes ol { padding-left: 1.4rem; color: var(--fg-muted); }
.dr-footnotes li { margin: 0.3em 0; }
.dr-fn-back { text-decoration: none; margin-left: 0.3em; }
.dr-preview a { color: var(--accent); text-decoration: underline; }
.dr-preview a:hover { color: var(--accent-hover); }
.dr-preview strong { color: var(--fg); font-weight: 700; }
.dr-preview em { font-style: italic; }
.dr-preview code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.05em 0.35em;
}
.dr-preview pre.dr-code {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    margin: 0 0 1em;
}
.dr-preview pre.dr-code code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);
}

/* GFM tables (rendered by mdToHtml in the preview; also in the WYSIWYG page) */
.dr-table, .dr-editor-host .ProseMirror .dr-table {
    border-collapse: collapse;
    margin: 0 0 1.1em;
    font-size: 0.95em;
    width: auto;
    max-width: 100%;
}
/* Borders + header tint are INK-relative (not site --rule/--bg-raised, which are dark
   site tokens that rendered a black header row + dark borders on a light paper). Now the
   table reads correctly on ANY paper/theme. */
.dr-table th, .dr-table td {
    border: 1px solid color-mix(in srgb, var(--dr-ink, var(--fg)) 28%, transparent);
    padding: 0.35em 0.7em;
    text-align: left;
}
.dr-table thead th {
    background: color-mix(in srgb, var(--dr-ink, var(--fg)) 9%, transparent);
    font-weight: 600;
}

/* ---- in-document find & replace bar (overlays top-right of editor) ---- */
.dr-find-bar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
}
.dr-find-bar[data-open="true"] { display: flex; }
.dr-find-row, .dr-replace-row { display: flex; align-items: center; gap: 0.3rem; }
/* replace row hidden until replace mode is toggled on */
.dr-replace-row { display: none; }
.dr-find-bar[data-replace="true"] .dr-replace-row { display: flex; }
.dr-find-input {
    width: 11rem;
    height: 26px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--btn-border);
    border-radius: 4px;
    padding: 0 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    outline: none;
    box-sizing: border-box;
}
.dr-find-input:focus { border-color: var(--rule-hot); }
.dr-find-count {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    min-width: 3.2rem;
    text-align: center;
    white-space: nowrap;
}
.dr-find-bar .dr-icon-btn { height: 26px; width: 26px; font-size: var(--text-sm); }
/* small toggles (match-case, replace-mode): active = accent */
.dr-find-toggle { font-size: var(--text-xs); font-weight: 600; }
.dr-find-toggle[data-active="true"] { background: var(--accent-muted); color: var(--accent); }
.dr-find-action { height: 26px; font-size: var(--text-xs); }
.dr-replace-row .dr-find-input { flex: 1 1 auto; width: auto; }

/* entity tag in across-docs search hits */
.dr-doc-search-hit-kind {
    margin-left: 0.4rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: var(--bg-raised);
    color: var(--fg-dim);
    font-size: var(--text-xs);
    text-transform: capitalize;
}

/* ---- mobile-only chrome controls: hidden on desktop ---- */
@media (min-width: 721px) {
    .dr-sidebar-toggle { display: none; }
}