/* edet-tiptap.css — the TRUE-WYSIWYG editor (Tiptap/ProseMirror). Renders a
   document the way it reads (bold looks bold, headings inline) in the same calm
   centered measure as the Source editor + preview. Tokens from site.css :root. */

/* User editor-appearance prefs (edet-prefs.js → data-attributes on
   #edet-app). These drive the page measure / type scale / typeface. */
.edet-app {
    --dr-page-width: 8.5in; --dr-font-size: 18px; --dr-line: 1.85;   /* default page = US Letter width (8.5in), like Google Docs */
    --dr-font-family: var(--font-mono);   /* default mono — matches the site/Musiced */
    /* writing-page theme (default tracks the site theme; others are explicit).
       The desk is the SITE BLACK (var(--bg)) so all chrome is one continuous
       black like Musiced — only the paper page is lighter. */
    --dr-paper: var(--bg-elevated);
    --dr-ink: var(--fg);
    --dr-desk: var(--bg);
    /* Procreate-style canvas desk (edet-desk.js). The page (.dr-canvas) is a
       freely transformed canvas — translate(pan) scale(zoom) — and an infinite
       grid overlay (.dr-grid-overlay) fills the whole viewport above everything,
       its size/position locked to the same pan+zoom so it reads as one canvas.
       --dr-pan-x/-y are screen-px offsets; --dr-zoom is the scale. The line
       color is token-derived (no raw hex); per-theme overrides below mirror the
       --dr-desk pattern. */
    --dr-grid-size: 28px;
    --dr-zoom: 1;
    --dr-pan-x: 0px;
    --dr-pan-y: 0px;
    --dr-grid-line: color-mix(in srgb, var(--fg) 16%, transparent);
}
.edet-app[data-editor-theme="cream"]    { --dr-paper: #f5edda; --dr-ink: #473d2f; --dr-desk: #2b2620; --dr-grid-line: color-mix(in srgb, #f5edda 12%, transparent); }
.edet-app[data-editor-theme="slate"]    { --dr-paper: #222931; --dr-ink: #dbe1e8; --dr-desk: #10141a; --dr-grid-line: color-mix(in srgb, #dbe1e8 9%, transparent); }
.edet-app[data-editor-theme="contrast"] { --dr-paper: #ffffff; --dr-ink: #0a0a0a; --dr-desk: #3a3a3a; --dr-grid-line: color-mix(in srgb, #ffffff 14%, transparent); }
/* Typeface family, text size (px) + line height are set as inline CSS vars by
   edet-prefs.js (--dr-font-family / --dr-font-size / --dr-line) so any value
   works. Page width stays a few discrete data-attr steps. */
.edet-app[data-page-width="narrow"] { --dr-page-width: 40rem; }
.edet-app[data-page-width="wide"]   { --dr-page-width: 62rem; }
.edet-app[data-page-width="full"]   { --dr-page-width: 100%; }

/* In WYSIWYG mode the editor reads as a DOCUMENT PAGE: a centered paper "sheet"
   (the brightest surface, --bg-elevated) with margins + a soft shadow, sitting
   on a subtly-recessed "desk". The host is the scroller / desk. */
.edet-app[data-editor-mode="wysiwyg"] .dr-editor-host {
    display: block;
    overflow-y: auto;
    background: var(--dr-desk);   /* desk (theme-aware) */
    padding: 2.4rem 1.5rem 5rem;
    -webkit-tap-highlight-color: transparent;
}
.dr-editor-host .ProseMirror {
    width: 100%;
    max-width: var(--dr-page-width, 8.5in);   /* user-adjustable page measure (default US Letter width) */
    min-height: 11in;                          /* empty page = a full US Letter sheet (8.5 × 11in); grows with content */
    margin: 0 auto;
    box-sizing: border-box;
    padding: 3.5rem clamp(1.5rem, 6vw, 4.5rem) 6rem;   /* page margins (matches Source so text doesn't shift on toggle) */
    background: var(--dr-paper);            /* paper (theme-aware) */
    color: var(--dr-ink);
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 10px 34px rgba(0, 0, 0, 0.12);   /* the page reads as a sheet on the desk */
    font-family: var(--dr-font-family);
    font-size: var(--dr-font-size, 18px);
    line-height: var(--dr-line, 1.85);
    caret-color: var(--accent);
    outline: none;   /* the caret is the focus indicator; no ring around the page */
}
.edet-app[data-preview="split"] .dr-editor-host .ProseMirror { max-width: min(var(--dr-page-width, 8.5in), 40rem); }

/* The Tiptap editor mounts inside a .dr-canvas wrapper (edet-tiptap.js) so the
   page can become a freely transformed canvas. In Flat mode the wrapper is
   display:contents — invisible to layout, so the page behaves exactly as a
   direct child of the host (no behaviour change) — and the grid overlay is
   hidden. */
.dr-canvas { display: contents; }
.dr-grid-overlay { display: none; }
.dr-canvas-grid { display: none; }   /* only the grid desk shows it (rule below) */

/* Procreate-style canvas desk (toggle in editor settings; edet-desk.js handles
   drag-to-pan + wheel-pan + ⌘/Ctrl-wheel zoom). The host becomes a clipped
   viewport; the page is absolutely positioned and transformed (translate(pan)
   scale(zoom)) so it can be dragged anywhere at any zoom. An infinite grid
   layer fills the whole viewport BEHIND the page, its size/position locked to
   the same pan+zoom — so the opaque page floats ABOVE the grid yet the two move
   together as one canvas (the grid shows only in the margins). Crisp
   single-pixel lines via two layered linear gradients tiled by background-size
   (no anti-aliased doubling). pointer-events:none lets clicks fall through to
   the page (edit) or host (pan). Desktop-gated (min-width:821px) so the mobile
   flat-surface block below isn't overridden by specificity. */
@media (min-width: 821px) {
    /* The desk + grid live on the BODY (see site.css body[data-edet-desk]) so they
       run CONTINUOUSLY behind EVERY surface — header, sidebar, toolbar, canvas,
       mini-player — one grid, one origin, no seams. The whole app chain is
       transparent so that single body grid shows through; the translucent glass
       chrome reveals it, while the opaque page + cards sit on top. */
    /* whole app chain transparent in grid mode so the body desk-grid shows through
       behind the chrome + in the canvas margins (one continuous grid). */
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] { background: transparent; }
    /* CANVAS RUNS UNDER ALL CHROME: the canvas keeps its exact position (no card or
       page shifts), but the whole app chain stops clipping so the canvas spills in
       EVERY direction — under the sidebar, the toolbar, AND down toward the mini-
       player. The body (overflow:hidden, see site.css) is the single clip at the
       viewport, so there are no scrollbars. Every chrome bar floats translucent on
       top (z-index below), so cards/photos/page show THROUGH them (intended). */
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"],
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-main,
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-split,
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-editor-pane { overflow: visible; }
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-editor-host {
        position: relative;
        overflow: visible;
        padding: 0;
        cursor: default;            /* desk feels like a document, not a map — arrow by default */
        background: transparent;    /* let the body desk-grid show through */
    }
    /* the per-host overlay grid is now redundant — the app background carries one
       continuous grid (a second host-origin grid would double up + misalign). */
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-grid-overlay { display: none; }
    /* only while actively panning does the whole desk read as grabbing */
    .edet-app[data-desk="grid"] .dr-editor-host.is-panning,
    .edet-app[data-desk="grid"] .dr-editor-host.is-panning * { cursor: grabbing !important; }
    /* while panning, promote the canvas to a stable compositor layer so the browser
       just TRANSLATES the rasterized desk+grid+cards on the GPU instead of repainting
       them each frame. Only during the drag (memory), so it's released on pointerup. */
    .edet-app[data-desk="grid"] .dr-editor-host.is-panning .dr-canvas { will-change: transform; }
    /* the page: editable text → I-beam; a read-only (scenes-synthesis) page → arrow
       so it doesn't look typeable when it isn't. */
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-editor-host .ProseMirror { cursor: text; }
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-editor-host .ProseMirror[contenteditable="false"] { cursor: default; }
    /* On the GRID desk the page is a FIXED sheet you pan around — it must NOT shrink to
       fit the host the way a flowing column does (width:100%). Lock it to the chosen page
       width regardless of window / sidebar / aux-panel width, with fixed margins (no 6vw
       reflow), so the sheet's size + shape never change. When the host is narrower than
       the sheet it overflows symmetrically (deskRecenter centres on the page's own centre)
       and you pan to it. ("full" page-width = 100% still fills, by choice.) */
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"]:not([data-page-width="full"]) .dr-editor-host .ProseMirror {
        width: var(--dr-page-width, 8.5in);
        max-width: none;
        /* anchor to the canvas's left, NOT margin:0 auto — auto re-centres the sheet
           whenever the canvas width changes (e.g. opening the Notes panel shrinks the
           main column), making the page JUMP. deskRecenter pans the sheet to centre on
           mount/resize instead, so toggling a side panel never moves it. */
        margin: 0;
        padding-left: 4.5rem;
        padding-right: 4.5rem;
    }
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-canvas {
        display: block;
        position: absolute;
        /* Vertical twin of the `left` offset below: the scene bar (corkboard) sits in flow above
           the editor, so showing/collapsing it shoves this canvas down by its height. Cancel that
           by lifting the canvas `top` by the corkboard height (--dr-cork-h, published by
           setTopFrostHeight; 0 when no corkboard) so the grid + page stay SCREEN-FIXED. */
        top: calc(-1 * var(--dr-cork-h, 0px));
        /* The canvas is absolute inside the editor-host, which sits in the MAIN grid column —
           so its left edge = the sidebar width. Collapsing the sidebar would slide the whole
           canvas (page + grid + cards) left with it. Offset `left` by the column delta so the
           canvas stays SCREEN-FIXED at any sidebar width: left = open_width − current_width
           (0 when expanded, +208 when collapsed, exactly cancelling the host's leftward shift).
           `left` is screen-px (applied before the canvas's own scale), so it's zoom-correct.
           Pure CSS — mirrors why the right aux panel never moves the page. */
        left: calc(var(--dr-sidebar-w-open, 260px) - var(--dr-sidebar-w, 260px));
        width: 100%;
        z-index: 2;                 /* page floats ABOVE the grid */
        transform-origin: 0 0;
        transform: translate(var(--dr-pan-x), var(--dr-pan-y)) scale(var(--dr-zoom));
    }
    /* The desk grid lives INSIDE the transformed canvas (first child), so it pans +
       zooms in PIXEL-LOCK with the page + cards — no GPU/CPU lag, no jiggle — and
       inherits the editor theme's --dr-desk/--dr-grid-line. It's a big tile that
       spills under the chrome with the rest of the canvas (frosted there). Cells are
       a fixed 28px; the canvas's own scale() handles zoom. */
    .edet-app[data-editor-mode="wysiwyg"][data-desk="grid"] .dr-canvas-grid {
        display: block;
        position: absolute;
        left: -6000px;
        top: -6000px;
        width: 12000px;
        height: 12000px;
        z-index: 0;                 /* behind the page + board, inside the canvas */
        pointer-events: none;
        background-color: var(--dr-desk);
        background-image:
            linear-gradient(to right,  var(--dr-grid-line) 1px, transparent 1px),
            linear-gradient(to bottom, var(--dr-grid-line) 1px, transparent 1px);
        background-size: var(--dr-grid-size, 28px) var(--dr-grid-size, 28px);
    }
}

/* Phone: drop the desk/sheet chrome for a clean full-width writing surface —
   a tiny page with margins would waste the screen. */
@media (max-width: 820px) {
    .edet-app[data-editor-mode="wysiwyg"] .dr-editor-host { background: var(--bg); padding: 0; }
    .dr-editor-host .ProseMirror {
        max-width: 100%;
        min-height: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 1.8rem clamp(1.1rem, 5vw, 1.6rem) 6rem;
    }
}
.edet-app .dr-editor-host .ProseMirror:focus,
.edet-app .dr-editor-host .ProseMirror:focus-visible { outline: none; }

/* readonly (scenes synthesis) / disabled (no doc) → dimmed, like the textarea's
   :disabled / [readonly] states. PM sets contenteditable=false on both. */
.dr-editor-host .ProseMirror[contenteditable="false"] { color: color-mix(in srgb, var(--dr-ink) 55%, var(--dr-paper)); }

/* Block rhythm — visually distinct, WYSIWYG (no markdown markers shown). */
.dr-editor-host .ProseMirror > :first-child { margin-top: 0; }
.dr-editor-host .ProseMirror p { margin: 0 0 1.1em; }
.dr-editor-host .ProseMirror h1,
.dr-editor-host .ProseMirror h2,
.dr-editor-host .ProseMirror h3,
.dr-editor-host .ProseMirror h4 { font-family: var(--font-display, var(--font-body, inherit)); line-height: 1.25; margin: 1.6em 0 0.6em; color: var(--dr-ink); }
.dr-editor-host .ProseMirror h1 { font-size: 1.9em; }
.dr-editor-host .ProseMirror h2 { font-size: 1.5em; }
.dr-editor-host .ProseMirror h3 { font-size: 1.25em; }
.dr-editor-host .ProseMirror h4 { font-size: 1.08em; }
.dr-editor-host .ProseMirror strong { font-weight: 700; color: var(--dr-ink); }
.dr-editor-host .ProseMirror em { font-style: italic; }
.dr-editor-host .ProseMirror a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dr-editor-host .ProseMirror code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: color-mix(in srgb, var(--dr-ink) 9%, var(--dr-paper));
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.dr-editor-host .ProseMirror pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    background: color-mix(in srgb, var(--dr-ink) 9%, var(--dr-paper));
    padding: 0.9rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
}
.dr-editor-host .ProseMirror pre code { background: none; padding: 0; font-size: inherit; }
.dr-editor-host .ProseMirror blockquote {
    margin: 0 0 1.1em;
    padding-left: 1rem;
    border-left: 3px solid color-mix(in srgb, var(--dr-ink) 30%, transparent);
    color: color-mix(in srgb, var(--dr-ink) 70%, var(--dr-paper));
}
.dr-editor-host .ProseMirror ul,
.dr-editor-host .ProseMirror ol { margin: 0 0 1.1em; padding-left: 1.6em; }
.dr-editor-host .ProseMirror li { margin: 0.2em 0; }
.dr-editor-host .ProseMirror li > p { margin: 0; }
.dr-editor-host .ProseMirror hr { border: none; border-top: 1px solid color-mix(in srgb, var(--dr-ink) 20%, transparent); margin: 1.8em 0; }
/* Page break — a labelled dashed divider in the editor/preview; forces a real new page in
   print + PDF (page mode). Distinct from a plain <hr>. The label rides a centered chip. */
.dr-pagebreak {
    border: none;
    border-top: 2px dashed color-mix(in srgb, var(--dr-ink, var(--fg)) 38%, transparent);
    margin: 2em 0;
    height: 0;
    position: relative;
    overflow: visible;
    break-after: page;
    -webkit-column-break-after: page;
}
.dr-pagebreak::after {
    content: "Page break";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.05rem 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dr-ink, var(--fg));
    background: var(--dr-paper, var(--bg));
    opacity: 0.55;
    white-space: nowrap;
}
.dr-editor-host .ProseMirror hr.dr-pagebreak.ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 3px; }
@media print { .dr-pagebreak::after { display: none; } }
.dr-editor-host .ProseMirror img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.3em auto;
    border-radius: 5px;
    border: 1px solid var(--rule);
}
.dr-editor-host .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 2px; }

/* task lists / checklists (Tiptap renders ul[data-type="taskList"]) */
.dr-editor-host .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 0.1em; }
.dr-editor-host .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.55em; margin: 0.2em 0; }
.dr-editor-host .ProseMirror ul[data-type="taskList"] li > label { margin: 0; flex: 0 0 auto; user-select: none; }
.dr-editor-host .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] { width: 1.05em; height: 1.05em; margin-top: 0.45em; accent-color: var(--accent); cursor: pointer; }
.dr-editor-host .ProseMirror ul[data-type="taskList"] li > div { flex: 1 1 auto; min-width: 0; }
.dr-editor-host .ProseMirror ul[data-type="taskList"] li > div > p { margin: 0; }
.dr-editor-host .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--fg-muted); text-decoration: line-through; }

/* images render in the live preview + .html export too */
#dr-preview img { display: block; max-width: 100%; height: auto; margin: 1.3em auto; border-radius: 5px; }
/* checklists in the preview + .html export */
#dr-preview .dr-tasklist { list-style: none; padding-left: 0.1em; }
#dr-preview .dr-task { display: flex; align-items: baseline; gap: 0.55em; }
#dr-preview .dr-task input { accent-color: var(--accent); }

/* selection tint on-brand (matches CM) */
.dr-editor-host .ProseMirror ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* inline comment highlight (a ProseMirror decoration, NOT in the doc/markdown) */
.dr-editor-host .ProseMirror .dr-comment-hl {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 2px;
    cursor: pointer;
}
/* author notes (private) — a softer, dashed warning-toned underline, no fill */
.dr-editor-host .ProseMirror .dr-comment-hl.dr-note-hl {
    background: color-mix(in srgb, var(--status-warn) 12%, transparent);
    border-bottom: 2px dashed color-mix(in srgb, var(--status-warn) 60%, transparent);
}

/* focus-current-paragraph: dim every top-level block except the active one */
.dr-editor-host[data-focuspara="on"] .ProseMirror > * {
    opacity: 0.28;
    transition: opacity var(--dur-med) var(--ease-smooth, ease);
}
.dr-editor-host[data-focuspara="on"] .ProseMirror > .dr-focus-active { opacity: 1; }

/* track-changes (suggestion mode) marks */
.dr-editor-host .ProseMirror ins.dr-sug-ins {
    text-decoration: none;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-radius: 2px;
}
.dr-editor-host .ProseMirror del.dr-sug-del {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--status-err, #e06c6c) 75%, transparent);
    color: var(--fg-dim);
}

/* empty-doc placeholder (Tiptap Placeholder extension decoration) */
.dr-editor-host .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--fg-deep);
    float: left;
    height: 0;
    pointer-events: none;
}

/* WYSIWYG tables (Phase 8). Borders + header tint are INK-relative — NOT the site
   --rule/--bg-raised tokens, which are DARK site-chrome colors that render a black header
   row + near-black borders on the light editor paper (same bug fixed for the preview/export
   .dr-table in v335; the WYSIWYG .ProseMirror table was missed). color-mix off --dr-ink so
   it reads on any paper/theme. */
.ProseMirror table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 1em 0; overflow: hidden; }
.ProseMirror td, .ProseMirror th { border: 1px solid color-mix(in srgb, var(--dr-ink, var(--fg)) 28%, transparent); padding: 0.35em 0.55em; vertical-align: top; position: relative; min-width: 3em; }
.ProseMirror th { background: color-mix(in srgb, var(--dr-ink, var(--fg)) 9%, transparent); font-weight: 600; text-align: left; }
.ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); pointer-events: none; }
.ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--accent); pointer-events: none; }