/* 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). */
.dr-canvas { display: contents; }
.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). Applies at ALL widths now (incl. touch / mobile —
   one-finger pan + pinch-zoom, edet-desk.js); the flat-surface fallback below is
   scoped to :not([data-desk="grid"]) so it no longer needs a width gate. */
    /* 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 */
        touch-action: none;         /* the desk OWNS touch: 1-finger pan + 2-finger pinch (edet-desk.js),
                                       not native scroll/zoom. Taps still place the caret; long-press
                                       still selects — touch-action only governs scroll/zoom gestures. */
    }
    /* 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;
        /* The page is NAILED to ONE desk spot in EVERY view (manuscript + scenes) and at any strip
           state: the canvas top is a CONSTANT offset = the scene strip's fixed height. So switching
           Manuscript<->Scenes never moves the page (the strip just fills the reserved space above
           it), and collapsing the strip never moves it either (the offset doesn't change). In
           manuscript that space is simply empty desk above the page. The scene bar itself is an
           ABSOLUTE overlay (edet-corkboard.css) — no JS height compensation, pure CSS, can't desync. */
        top: calc(var(--dr-scenebar-open-h) - 8px);
        /* 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 (FLAT desk only): drop the desk/sheet chrome for a clean full-width
   writing surface — a tiny page with margins would waste the screen. The GRID
   desk now works on mobile too (pan + pinch), so this is scoped to NON-grid;
   grid mode keeps its fixed sheet + canvas at every width. */
@media (max-width: 820px) {
    .edet-app[data-editor-mode="wysiwyg"]:not([data-desk="grid"]) .dr-editor-host { background: var(--bg); padding: 0; }
    .edet-app:not([data-desk="grid"]) .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;
    }
}

/* GRID DESK LINES — at ALL widths (desktop infinite too, not just mobile). Instead of the
   12000px in-canvas tile (a giant GPU texture that couldn't composite → lag), the grid is a
   VIEWPORT-FIXED layer (.dr-editor-host::before) moved by TRANSFORM translate(pan mod cell):
     • transform (not background-position) → it composites on the GPU in lockstep with the
       page's transform, so panning has no paint-lag jiggle;
     • the modulo keeps the layer viewport-sized yet effectively INFINITE (the per-cell wrap
       is invisible — the line pattern is periodic), so it never runs out under a long page;
     • the cell is frozen + snapped during zoom (edet-desk.js writePan) so zooming doesn't shake.
   The body carries the desk colour so the chrome frost is never black; the layer sits behind
   the page (z-index 0) so the frost reads the lines. Vars (--dr-grid-px/x/y, --dr-desk,
   --dr-grid-line) are mirrored to :root by edet-prefs/edet-desk so every element resolves them. */
body.edet[data-edet-desk="grid"] .dr-canvas-grid { display: none !important; }
body.edet[data-edet-desk="grid"] { background-color: var(--dr-desk); }
body.edet[data-edet-desk="grid"] .dr-editor-host::before {
    content: "";
    position: fixed;
    top: calc(0px - var(--dr-grid-px, 28px));
    left: calc(0px - var(--dr-grid-px, 28px));
    width: calc(100vw + 2 * var(--dr-grid-px, 28px));
    height: calc(100vh + 2 * var(--dr-grid-px, 28px));
    z-index: 0;
    pointer-events: none;
    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-px, 28px) var(--dr-grid-px, 28px);
    /* translate = pan (lockstep with the page when panning). scale(--dr-grid-rel) is the
       Procreate-style smooth zoom: during a pinch it scales the whole grid by the same
       relative factor the page scaled, about the pinch midpoint (--dr-grid-ox/oy, +the cell
       margin since the layer starts at -cell) — GPU lockstep, no re-raster, no shake. It's 1
       at rest; the real cell is re-rastered once on pinch-end. */
    transform: scale(var(--dr-grid-rel, 1)) translate(var(--dr-grid-x, 0px), var(--dr-grid-y, 0px));
    transform-origin: calc(var(--dr-grid-ox, 50vw) + var(--dr-grid-px, 28px)) calc(var(--dr-grid-oy, 50vh) + var(--dr-grid-px, 28px));
    will-change: transform;
}
.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: 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: var(--radius-sm);
}
.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: var(--radius-lg);
    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) 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; }