/* edet-base.css — full-viewport app shell, layout tokens, shared buttons, context menu, reorder feedback, unsupported state. Loaded first; later edet-*.css assume these tokens + grid. Mobile-first: the BASE rules are the mobile shape (off-canvas sidebar + notes); desktop opts in via @media (min-width: 721px). This mirrors music-base.css's inversion — iOS Safari cold-load paints at the 980 px fallback width before meta-viewport shrinks it, so a desktop-default would leak the desktop layout through. All colors/motion reference site.css :root tokens. */ /* Lock the page to the viewport like /musiced so the editor fills it and the footer / cross-page mini-player don't double up. Both selectors (server-set body.drafted + :has fallback) keep the lock even before edet-core.js runs. */ body:has(.edet-app), body.drafted { overflow: hidden; height: 100vh; height: 100dvh; } body:has(.edet-app) main, body.drafted main { max-width: none; padding: 0; flex: 1; overflow: hidden; min-height: 0; } body:has(.edet-app) .site-footer, body.drafted .site-footer { display: none; } /* NOTE: the cross-page mini-player is intentionally NOT hidden on /drafted. Like /clipped, Edet has no audio player of its own, so the mini-player surfaces what's playing on Musiced. site.css's `body:not(.musiced):has(.mini-player:not([hidden]))` rule reserves 68px of body padding-bottom when it's visible; with box-sizing: border-box that shrinks this 100dvh grid by 68px so the editor + "New chapter" button never sit behind the strip. Only /musiced hides the mini-player (it has its own full player chrome). */ /* Keyboard-focus ring — app-wide accessibility baseline. :focus-visible only, so mouse/touch focus stays quiet. Several inputs (textarea, find, notes, goal, search) set `outline: none`; this (0,2,0) selector outranks those (0,1,0) so keyboard users always get a visible ring. Context-menu items mount on , outside .edet-app, so they're covered too. */ .edet-app :focus-visible, .dr-context-menu :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The main writing column shows focus via its blinking caret; a constant ring around it reads loud against the calm iA-Writer measure. Every other control keeps the ring above. */ .edet-app .dr-textarea:focus-visible { outline: none; } .edet-app { --dr-sidebar-w-open: 260px; /* the EXPANDED sidebar width (canvas-offset reference) */ --dr-sidebar-w: var(--dr-sidebar-w-open); /* collapsed state overrides this to the rail width */ --dr-notes-w: 300px; --dr-chrome-h: 48px; position: relative; height: 100%; width: 100%; overflow: hidden; background: var(--bg); color: var(--fg); /* mobile: single column; sidebar + notes are absolute overlays */ display: grid; grid-template-columns: 1fr; grid-template-areas: "main"; padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 721px) { .edet-app { grid-template-columns: var(--dr-sidebar-w) 1fr var(--dr-notes-w); grid-template-areas: "sidebar main aux"; } /* Aux column (notes OR history) only reserves width when open. */ .edet-app[data-aux="none"] { grid-template-columns: var(--dr-sidebar-w) 1fr 0; } /* Focus mode collapses to a single centered editor column. */ .edet-app[data-focus="on"] { grid-template-columns: 1fr; grid-template-areas: "main"; } } /* Focus mode (any width): hide everything but the editor. */ .edet-app[data-focus="on"] .dr-sidebar, .edet-app[data-focus="on"] .dr-sidebar-overlay, .edet-app[data-focus="on"] .dr-aux, .edet-app[data-focus="on"] .dr-preview, .edet-app[data-focus="on"] .dr-goal-bar { display: none !important; } /* ---- shared buttons ---- */ .dr-btn { height: var(--control-h); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.7rem; background: var(--btn-bg); color: var(--fg); border: 1px solid var(--btn-border); border-radius: 6px; font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer; box-sizing: border-box; white-space: nowrap; transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .dr-btn:hover { background: var(--btn-bg-hover); } .dr-btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .dr-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); } .dr-icon-btn { height: var(--control-h); width: var(--control-h); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fg-muted); border: none; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-base); box-sizing: border-box; transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .dr-icon-btn:hover { background: var(--row-hover); color: var(--fg); } /* ---- context menu (chapters, projects, export) ---- */ .dr-context-menu { position: fixed; min-width: 190px; z-index: 200; background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: 6px; padding: 0.25rem; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1px; /* tall menus (the Aa appearance menu) scroll instead of clipping off-screen */ max-height: calc(100vh - 12px); overflow-y: auto; animation: dr-context-pop var(--dur-fast) var(--ease-smooth) both; } @keyframes dr-context-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .dr-context-item { display: block; width: 100%; padding: 6px 12px; background: transparent; border: none; color: var(--fg); text-align: left; cursor: pointer; border-radius: 4px; font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .dr-context-item:hover { background: var(--accent-muted); color: var(--accent); } .dr-context-item-danger:hover { background: color-mix(in srgb, var(--status-err) 14%, transparent); color: var(--status-err); } .dr-context-sep { border: none; border-top: 1px solid var(--rule); margin: 0.25rem 0; } .dr-context-heading { padding: 0.35rem 0.75rem 0.15rem; font-size: var(--text-xs, 0.72rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-deep); pointer-events: none; } /* ---- reorder feedback (shared by sidebar chapter rows) ---- */ .dr-chapter-row.reordering { opacity: 0.4; } .dr-chapter-row.reorder-before { box-shadow: inset 0 2px 0 var(--accent); } .dr-chapter-row.reorder-after { box-shadow: inset 0 -2px 0 var(--accent); } .reorder-ghost { position: fixed; z-index: 300; pointer-events: none; transform: translate(-50%, -50%); opacity: 0.92; background: var(--bg-elevated); border: 1px solid var(--accent); border-radius: 6px; box-shadow: var(--shadow-lg); overflow: hidden; } /* ---- sidebar scrim (mobile only; shown via media query) ---- */ .dr-sidebar-overlay { display: none; } /* ---- unsupported (no OPFS) ---- */ .dr-unsupported { grid-area: main; max-width: 32rem; margin: 4rem auto; padding: 0 1.5rem; text-align: center; } .dr-unsupported h2 { color: var(--fg); font-size: var(--text-2xl); margin-bottom: 0.75rem; } .dr-unsupported p { color: var(--fg-muted); font-size: var(--text-base); line-height: 1.6; } /* ---- chrome: chapter-only controls (Notes / History) hide for an open entity, and the Exit-focus button shows only in focus mode ---- */ .edet-app[data-doc-kind="entity"] .dr-chrome-chapter-only, .edet-app[data-doc-kind="research"] .dr-chrome-chapter-only { display: none; } /* hidden unless in focus mode; .dr-chrome scope outranks the .dr-tb-btn display:inline-flex the button now also carries */ .dr-chrome .dr-focus-exit { display: none; } .edet-app[data-focus="on"] .dr-focus-exit { display: inline-flex; } /* In focus mode, the rest of the chrome buttons collapse away. */ .edet-app[data-focus="on"] .dr-history-toggle, .edet-app[data-focus="on"] #dr-history-toggle, .edet-app[data-focus="on"] #dr-focus-toggle, .edet-app[data-focus="on"] #dr-export, .edet-app[data-focus="on"] #dr-notes-toggle, .edet-app[data-focus="on"] #dr-pane-toggle, .edet-app[data-focus="on"] #dr-toolbar, .edet-app[data-focus="on"] #dr-prefs-btn, .edet-app[data-focus="on"] #dr-mode-toggle, .edet-app[data-focus="on"] #dr-sidebar-toggle { display: none; } /* ---- toast (transient bottom-center) ---- */ .dr-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px); z-index: 400; max-width: 80vw; padding: 0.5rem 0.9rem; background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-lg); font-family: var(--font-mono); font-size: var(--text-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); } .dr-toast[data-open="true"] { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ v2.0 — chrome visibility, corkboard/overlay hosting ============================================================ */ /* Manuscript|Scenes view toggle — shown only for scenesMode chapters. A proper segmented control (outlined pill with a divider) so it reads as a single grouped control instead of two cramped, borderless words. */ .dr-view-toggle { display: none; } .dr-view-toggle[data-show="true"] { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 2px; box-sizing: border-box; background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 8px; /* match the reports scope pill + insights tabs (was 6px) */ } /* Base segmented-toggle button (also used by the reports / timeline / page-view scope toggles). Moved here from edet-sidebar.css when the sidebar dropped its Chapters|Outline toggle; these widgets are now its only consumers. */ .dr-viewtoggle-btn { background: transparent; color: var(--fg-muted); border: none; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-sm); transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .dr-viewtoggle-btn:hover { color: var(--fg); } .dr-viewtoggle-btn[data-active="true"] { background: var(--accent-muted); color: var(--accent); } .dr-view-toggle .dr-viewtoggle-btn { flex: 0 0 auto; height: var(--control-h-compact); /* 28px — match the reports scope pill (was 24px) */ padding: 0 0.7rem; border-radius: 6px; font-size: var(--text-xs); white-space: nowrap; } /* The ⋯ More button (overflow for notes/history/drafts/sync/export) + the Preview-active accent. */ .dr-more { font-size: var(--text-lg); } .dr-pane-toggle[aria-pressed="true"], #dr-focus-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } /* Focus mode collapses the chrome to saved/wordcount + Exit focus. */ .edet-app[data-focus="on"] .dr-view-toggle, .edet-app[data-focus="on"] #dr-more, .edet-app[data-focus="on"] .dr-corkboard { display: none !important; } /* ---- full-area overlay host (plot grid / timeline / compile) ---- */ .dr-overlay { position: absolute; inset: 0; z-index: 60; display: none; flex-direction: column; background: var(--bg); color: var(--fg); } .edet-app[data-overlay="plotgrid"] .dr-overlay, .edet-app[data-overlay="timeline"] .dr-overlay, .edet-app[data-overlay="compile"] .dr-overlay, .edet-app[data-overlay="reports"] .dr-overlay, .edet-app[data-overlay="trash"] .dr-overlay, .edet-app[data-overlay="pageview"] .dr-overlay, .edet-app[data-overlay="stats"] .dr-overlay, .edet-app[data-overlay="storybible"] .dr-overlay, .edet-app[data-overlay="outliner"] .dr-overlay, .edet-app[data-overlay="split"] .dr-overlay, .edet-app[data-overlay="importwizard"] .dr-overlay, .edet-app[data-overlay="audit"] .dr-overlay, .edet-app[data-overlay="historypreview"] .dr-overlay, .edet-app[data-overlay="appearance"] .dr-overlay, .edet-app[data-overlay="help"] .dr-overlay { display: flex; } /* EVERY tool overlay (Codex, Insights, Compile, Page view, Outliner, Compare, Trash, Audit, Help, Plot grid, Timeline, Import, Version preview) = one sheet of frosted glass. The overlay's frost covers the FULL viewport (position:fixed inset:0) so the region behind the global top bar frosts the SAME desk as the content does — one continuous glass with no hard line, the desk reading softly through it. The global top bar floats on top (transparent, raised); the surrounding chrome is put to sleep. Scoped by attribute-presence so it applies to any open overlay (and any future one), never to the closed `none`/empty state. Both themes. */ .edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""]) .dr-overlay { position: fixed; inset: 0; padding-top: calc(3.1rem + env(safe-area-inset-top, 0px)); /* clear the global top bar */ background: var(--edet-glass); /* uses --edet-blur (customizable in Appearance → Frost) so the blur slider changes the overlay you're looking at; falls back to a heavy default. */ backdrop-filter: var(--edet-blur, blur(18px)) saturate(118%); -webkit-backdrop-filter: var(--edet-blur, blur(18px)) saturate(118%); } .edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""]) .dr-overlay-head { background: transparent; border-bottom: none; } /* the global top bar is just text floating on the one glass: transparent, no border, raised above the overlay's frost so its label + menu stay sharp. */ body.edet:has(.edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""])) .site-header { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; position: relative; z-index: 70; } /* Put the surrounding chrome to sleep so ONLY the manuscript frosts through — but keep the editor itself VISIBLE: the softly-blurred desk behind the glass is what makes it read as frosted rather than a flat opaque slab. */ .edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""]) :is(.dr-sidebar, .dr-chrome, .dr-readonly-banner, .dr-suggest-bar, .dr-corkboard, .dr-aux, .dr-wc-overlay) { visibility: hidden !important; /* these are invisible under the overlay anyway — drop their backdrop-filter so the browser sheds the redundant blur-compositing layers (free perf, zero visual change) */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* drop the shared chrome frost panes so they don't paint a second frosted rectangle */ body.edet:has(.edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""]))::before, body.edet:has(.edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""]))::after, .edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""])::after { display: none !important; } /* the mini-player lives OUTSIDE .edet-app — hide it + reclaim its reserved bottom strip so the sheet is whole. */ body.edet:has(.edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""])) { padding-bottom: 0 !important; } body.edet:has(.edet-app[data-overlay]:not([data-overlay="none"]):not([data-overlay=""])) #mini-player { display: none !important; } /* ---- Trash panel (soft-deleted chapters) ---- */ .dr-trash { max-width: 46rem; margin: 0 auto; } .dr-trash-note, .dr-trash-empty { color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 1rem; } .dr-trash-empty { color: var(--fg-dim); } .dr-trash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .dr-trash-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-raised); } .dr-trash-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .dr-trash-title { color: var(--fg); font-family: var(--font-mono); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-trash-meta { color: var(--fg-dim); font-size: var(--text-xs); } .dr-trash-kind { display: inline-block; padding: 0 0.35rem; margin-right: 0.3rem; border-radius: 4px; background: var(--bg-raised, var(--bg-elevated)); border: 1px solid var(--rule); color: var(--fg-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; } /* CriticMarkup track-changes in rendered previews ({++ins++} / {--del--}, P14c) */ ins.dr-crit-ins { text-decoration: none; background: color-mix(in srgb, var(--status-ok) 16%, transparent); color: var(--status-ok); border-radius: 2px; padding: 0 1px; } del.dr-crit-del { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--status-err) 70%, transparent); color: var(--fg-dim); } .dr-trash-actions { display: inline-flex; gap: 0.4rem; flex: 0 0 auto; } .dr-trash-actions .dr-btn { height: 28px; font-size: var(--text-xs); } .dr-trash-purge:hover { color: var(--status-err); border-color: color-mix(in srgb, var(--status-err) 45%, var(--rule)); } /* ---- Page view (true paginated print preview) ---- */ .dr-pageview-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.8rem; } .dr-pageview-count { color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-xs); } .dr-pageview-print { height: var(--control-h-compact); font-size: var(--text-xs); margin-left: auto; } .dr-pages { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 0.5rem 0 2rem; } /* white paper on the dark desk — print artifact, deliberately not theme-tinted */ .dr-page { position: relative; width: 8.5in; min-height: 11in; background: #fff; color: #14110c; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); flex: 0 0 auto; } .dr-page-content { width: 6.5in; height: 9in; margin: 1in auto 0; overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-size: 12pt; line-height: 1.5; } .dr-page-content h1, .dr-page-content h2, .dr-page-content h3 { line-height: 1.2; } .dr-page-content .dr-page-chapter { font-size: 18pt; margin: 0 0 1em; } .dr-page-content p { margin: 0 0 0.8em; } .dr-page-foot { position: absolute; left: 0; right: 0; bottom: 0.5in; text-align: center; color: #999; font-size: 10pt; font-family: Georgia, serif; } /* running header + manuscript front/back matter (Phase 6) */ .dr-page-head { position: absolute; top: 0.5in; left: 0; right: 0; text-align: center; color: #999; font-size: 10pt; font-family: Georgia, serif; font-style: italic; } .dr-page-blank .dr-page-content { visibility: hidden; } .dr-matter { font-family: Georgia, "Times New Roman", serif; color: #14110c; } .dr-matter-center { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; } .dr-title-h { font-size: 30pt; margin: 0 0 0.5em; line-height: 1.15; } .dr-title-by { font-size: 14pt; color: #444; } .dr-matter-copyright { font-size: 10pt; color: #333; line-height: 1.7; } .dr-matter-ded { font-style: italic; font-size: 13pt; } .dr-matter-epi { font-style: italic; font-size: 12pt; border: none; margin: 0; max-width: 4.5in; } .dr-matter-h { font-size: 16pt; margin: 0 0 0.6em; } /* manuscript-setup form */ .dr-ms-form { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 8px; padding: 0.3rem 0.7rem; margin-bottom: 1rem; } .dr-ms-form > summary { cursor: pointer; color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-sm); padding: 0.3rem 0; } .dr-ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.8rem; padding: 0.5rem 0 0.7rem; } .dr-ms-field { display: flex; flex-direction: column; gap: 0.2rem; } .dr-ms-wide { grid-column: 1 / -1; } .dr-ms-label { color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; } .dr-ms-input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--font-mono); font-size: var(--text-sm); padding: 0.3rem 0.45rem; outline: none; resize: vertical; } .dr-ms-input:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); } .dr-ms-check { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg); } .dr-ms-check input { accent-color: var(--accent); } /* ---- Writing stats (reading time / streak / heatmap / sprint) ---- */ /* width comes from the shared .dr-insights column; this is just the vertical stack */ .dr-stats { display: flex; flex-direction: column; gap: 1rem; } .dr-heatmap { display: flex; gap: 3px; padding: 0.3rem 0; overflow-x: auto; } .dr-heatmap-col { display: flex; flex-direction: column; gap: 3px; } /* empty cells sit on the bg (the section is bg-raised) so the full 12×7 lattice stays visible even when only a few days are filled — reads as a grid, not a strip */ .dr-heatmap-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); } .dr-heatmap-cell[data-b="1"] { background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised)); } .dr-heatmap-cell[data-b="2"] { background: color-mix(in srgb, var(--accent) 45%, var(--bg-raised)); } .dr-heatmap-cell[data-b="3"] { background: color-mix(in srgb, var(--accent) 70%, var(--bg-raised)); } .dr-heatmap-cell[data-b="4"] { background: var(--accent); } .dr-sprint { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-family: var(--font-mono); } .dr-sprint-set { color: var(--fg-muted); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 0.4rem; } .dr-sprint-set .dr-goal-input { width: 4rem; } .dr-sprint-clock { font-size: var(--text-2xl, 1.6rem); color: var(--accent); } .dr-sprint-words { color: var(--fg-muted); font-size: var(--text-sm); } /* Typewriter scrolling — extra tail room so the caret line can sit centred. */ .dr-editor-host.dr-typewriter .ProseMirror, .dr-editor-host.dr-typewriter .cm-content { padding-bottom: 45vh; } @media print { /* The sheet IS the paper (8.5×11 with a 1in margin baked into .dr-page-content), so the printed page must have ZERO browser margin — otherwise the browser's default ~0.5in margin DOUBLES up and the page overflows / spills a blank page. */ @page { size: letter; margin: 0; } body * { visibility: hidden; } #dr-overlay, #dr-overlay * { visibility: visible; } .dr-overlay-head, .dr-pageview-bar { display: none !important; } /* override the on-screen frosted full-viewport overlay back to a plain white sheet */ #dr-overlay { position: absolute; inset: 0; overflow: visible; background: #fff; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .dr-overlay-body { padding: 0 !important; } .dr-pages { gap: 0; padding: 0; } .dr-page { box-shadow: none; page-break-after: always; min-height: auto; } .dr-page:last-child { page-break-after: auto; } /* no trailing blank page */ .dr-page-foot { color: #555; } } /* keep any inline image inside the printable page box (it would otherwise be clipped by .dr-page-content's overflow:hidden, silently losing it from preview AND print) */ .dr-page-content img { max-width: 100%; max-height: 8in; height: auto; object-fit: contain; } .dr-overlay-head { flex: 0 0 auto; height: var(--dr-chrome-h); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 0.75rem; border-bottom: 1px solid var(--rule); background: var(--bg-elevated); } .dr-overlay-title { font-family: var(--font-mono); font-size: var(--text-base); color: var(--fg); } .dr-overlay-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem; } .dr-overlay-empty { color: var(--fg-muted); font-size: var(--text-sm); max-width: 38rem; line-height: 1.6; }