/* 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-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;
    position: relative;   /* anchor the absolute scene-bar overlay (grid scene-kind) */
}

/* ---- 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.
   (Desktop ≥721px gets the smarter "scroll only the format strip" treatment in
   the media block below; ≤720px keeps the whole-row scroll — see edet-mobile.css.) */
.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;
}

/* Wrapper that hosts the format strip + its edge scroll chevrons. The chevrons
   must sit OUTSIDE the scroller (#dr-toolbar) so they stay pinned at its edges
   instead of scrolling away with the buttons. */
.dr-tb-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
/* Edge scroll chevrons — hidden by default; edet-cm.js adds .is-on to the side
   that has more tools off-screen (desktop ≥721px only — see the media block). */
.dr-tb-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 42px;
    display: none;
    align-items: center;
    padding: 0 5px;
    border: none;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-smooth);
}
.dr-tb-edge-l { left: 0; justify-content: flex-start; }
.dr-tb-edge-r { right: 0; justify-content: flex-end; }
.dr-tb-edge:hover { color: var(--fg); }
/* A soft halo (not a background box) keeps the glyph legible over ANY backdrop —
   dark chrome or the bright grid-desk art — without painting a rectangle. */
.dr-tb-edge svg { width: 18px; height: 18px; filter: drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 3px var(--bg)); }

/* Responsive toolbar (desktop ≥721px): instead of letting the whole row scroll
   off-screen (which would carry Focus/View/⋯ out of reach at e.g. 900px), CLIP
   the row and make ONLY the format section scroll. The wrapper is the one
   flexible element: it GROWS to fill the gap on wide screens (buttons stay
   left-aligned, the right cluster sits far right) and SHRINKS below its content
   on narrow ones, where #dr-toolbar's overflow-x:auto turns it into a horizontal
   scroll strip — so every format tool stays reachable while the right cluster
   never moves. The directional fade + edge chevrons (toggled by edet-cm.js from
   the scroll position) signal which way more tools live, and the chevrons click
   to scroll. ≤720px is left to edet-mobile.css's tested whole-row scroll. */
@media (min-width: 721px) {
    .dr-chrome { overflow: hidden; min-width: 0; }
    .dr-tb-wrap { flex: 1 1 auto; }
    .dr-chrome #dr-toolbar {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .dr-chrome #dr-toolbar::-webkit-scrollbar { display: none; }
    /* Directional fade — masks only the edge(s) that have hidden content, so it
       reads as "there's more this way" rather than a static panel edge. The
       26px fade sits under the chevron so the two affordances align. */
    .dr-chrome #dr-toolbar.dr-tb-fade-r {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
    }
    .dr-chrome #dr-toolbar.dr-tb-fade-l {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 42px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 42px), transparent);
    }
    .dr-chrome #dr-toolbar.dr-tb-fade-l.dr-tb-fade-r {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 42px, #000 calc(100% - 42px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 42px, #000 calc(100% - 42px), transparent);
    }
    /* Chevrons show on the scrollable side(s). NO background box — the directional
       button-fade (mask above) provides the soft edge; the glyph's halo handles
       legibility. This avoids the dark rectangle a scrim paints over dark chrome. */
    .dr-tb-edge.is-on { display: flex; }
    /* Pin the right cluster (Focus / View / Exit / ⋯) so the shrinking format
       strip never squeezes or clips them. The view toggle is already 0 0 auto. */
    .dr-chrome .dr-tb-mode,
    .dr-chrome .dr-more { flex: 0 0 auto; }
}

/* Mobile: the format strip stays at the TOP but is hidden until you actually write.
   (Docking it above the keyboard fought iOS's native form-assistant bar, so we keep
   it up top and away from the keyboard entirely.) This keeps the top chrome clean for
   reading/navigating; tapping into the page sets data-editing (edet-cm.js) and reveals
   the strip, which scrolls horizontally as on any narrow width. Thumb-friendly sizing
   while it's shown. Desktop is untouched. */
@media (max-width: 820px) {
    /* Word-count + zoom + recenter pill: on mobile, pin it to the VERY bottom of the
       viewport (fixed, not absolute-in-the-pane — the pane doesn't reach the bottom edge,
       which left it floating high), CENTERED via auto margins on a max-content box. Sits
       just above the home indicator. */
    .dr-wc-overlay {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: max-content !important;
        bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Reveal the format strip while writing — gated on app[data-editing="true"], set by
       bindMobileToolbarReveal (edet-cm.js). data-editing = the user has INTERACTED (tapped
       the page) AND the editor is focused/keyboard-up. The `interacted` gate is the whole
       point: on-load (or iOS-restored) focus must NOT reveal the strip / hide the header —
       only a real tap-in does. (We were briefly on raw `:has(.dr-editor-host :focus)`, but
       that dropped the gate and showed the strip on load; data-editing is reliable now that
       isEditorFocused() detects Tiptap's ProseMirror, not just CM.) Toolbar buttons
       mousedown-preventDefault, so tapping one keeps the editor focused and the strip open. */
    .edet-app .dr-tb-wrap { display: none; }
    .edet-app[data-editing="true"] .dr-tb-wrap { display: flex; }
    .edet-app[data-editing="true"] #dr-toolbar .dr-tb-btn,
    .edet-app[data-editing="true"] #dr-toolbar .dr-tb-mode {
        min-width: 38px;
        height: 38px;
        border-radius: 9px;
    }
    .edet-app[data-editing="true"] #dr-toolbar .dr-tb-ico { width: 18px; height: 18px; }
    /* The format strip stays IN NORMAL FLOW — it's just an extra (horizontally
       scrollable) cluster inside the existing .dr-chrome row, which already sits
       BELOW the site header. So when you write, the toolbar appears on its OWN row
       under the header — never on the header's row — and the header keeps reserving
       the notch as always.

       This deliberately REPLACES the earlier pin-the-chrome-fixed (top:-240, z70) +
       hide-the-header approach. That rode the iOS keyboard, but on a notched device
       it left a solid black band below the strip and fought the desk's constant
       top-offset (a documented no-go). In flow there is no band, no overlap, no
       notch math — at the cost of the strip scrolling with the page instead of
       riding the keyboard, which is the right trade. The .dr-chrome already
       overflow-x:auto's on mobile, so the added buttons just scroll. */
}

/* 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: var(--radius);
    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;
}

/* Cloud-sync status pill — quiet, in the chrome. A leading dot (color = state) +
   short label. Driven by sync-auto.js via M.setSyncStatus. Tokens only. */
.dr-sync {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-soft);
    font: inherit;
    font-size: var(--text-xs);
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    cursor: default;
    transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.dr-sync::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.dr-sync[data-state="idle"] { display: none; }
.dr-sync[data-state="syncing"] { color: var(--fg-muted); }
.dr-sync[data-state="syncing"]::before { animation: dr-sync-pulse 1s ease-in-out infinite; }
.dr-sync[data-state="synced"] { color: var(--accent); }
.dr-sync[data-state="offline"] { color: var(--status-warn); }
.dr-sync[data-state="signedout"] { color: var(--fg-muted); cursor: pointer; }
.dr-sync[data-state="signedout"]:hover { color: var(--fg); background: var(--btn-bg-hover, rgba(255, 255, 255, 0.06)); }
@keyframes dr-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Narrow screens: keep just the colored dot so the chrome doesn't crowd. */
@media (max-width: 640px) {
    .dr-sync { font-size: 0; padding: 0.25rem; gap: 0; }
}

.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: var(--radius-pill);
    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; }
/* The pill is frosted glass AT REST. While you PAN the grid desk (the host gets .is-panning,
   edet-desk.js), DEBLUR it — drop the backdrop-filter so the desk slides sharp underneath it,
   not through a laggy frosted lens. (#dr-editor-host and the pill are siblings in .dr-editor-pane.) */
.dr-editor-host.is-panning ~ .dr-wc-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.dr-wc-words { white-space: nowrap; color: var(--fg-muted); }
/* live sprint countdown chip — sits between the word count and the zoom group, set off by the
   same hairline divider. The Stop button re-enables pointer events (the pill is click-through). */
.dr-wc-sprint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: 0.55rem;
    margin-left: 0.1rem;
    border-left: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.dr-wc-sprint[hidden] { display: none; }
.dr-wc-sprint-clock { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-wc-sprint-stop {
    pointer-events: auto;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    border-radius: var(--radius);
    height: 20px;
    min-width: 20px;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.dr-wc-sprint-stop:hover { background: var(--btn-bg-hover); color: var(--status-err); }
/* 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.15rem;
    pointer-events: auto;
    padding-left: 0.55rem;
    margin-left: 0.1rem;
    border-left: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.dr-wc-zoom[hidden] { display: none; }
/* ± buttons + the % reset + recenter — uniform round hit-targets with a quiet hover */
.dr-wc-zbtn, .dr-wc-zpct {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    font: inherit;
    cursor: pointer;
    border-radius: var(--radius);
    height: 22px;
    min-width: 22px;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.dr-wc-zbtn:hover, .dr-wc-zpct:hover { background: var(--btn-bg-hover); color: var(--fg); }
.dr-wc-zpct { min-width: 3em; font-variant-numeric: tabular-nums; }
.dr-wc-recenter { color: var(--accent); }
.dr-wc-recenter:hover { color: var(--accent-hover); }
/* slider — fully styled (track + thumb, both engines) so it's a clean thin accent rail,
   not the half-native blue default. */
.dr-wc-zrange {
    -webkit-appearance: none;
    appearance: none;
    width: 84px;
    height: 18px;                       /* tall hit area; the visible rail is the track below */
    background: transparent;
    cursor: pointer;
    margin: 0 0.1rem;
}
.dr-wc-zrange::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--fg) 22%, transparent);
}
.dr-wc-zrange::-moz-range-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--fg) 22%, transparent);
}
.dr-wc-zrange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -4px;                   /* centre the 12px thumb on the 4px track */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    cursor: grab;
    transition: transform var(--dur-fast) var(--ease-smooth);
}
.dr-wc-zrange::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    cursor: grab;
}
.dr-wc-zrange:hover::-webkit-slider-thumb { transform: scale(1.12); }
.dr-wc-zrange:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the small "set sprint" popover — launched from the toolbar timer button, the ⋯ menu, and the
   command palette. Same frosted-glass + pop-in as the context menu (keyframe in edet-base.css).
   Holds sprintHtml(): idle = minutes input + Start; running = clock + words + Stop. */
.dr-sprint-pop {
    position: fixed;
    z-index: 200;
    padding: 0.7rem 0.8rem;
    background: var(--edet-glass, var(--bg-elevated));
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--edet-blur);
    -webkit-backdrop-filter: var(--edet-blur);
    animation: dr-context-pop var(--dur-fast) var(--ease-smooth) both;
}
.dr-sprint-pop .dr-btn { height: var(--control-h-compact); }
.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: var(--radius);
    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: var(--radius);
    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: var(--radius-sm);
    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; }
}