:root {
  color-scheme: dark;
  --bg: #1a1820;
  --panel: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --text: #d0cdd8;
  --text-bright: #f2f0f8;
  --accent: #c8a86e;
  --danger: #f4839a;
  --ok: #7ed59d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); }

h1, h2, h3 { font-family: Georgia, serif; color: var(--text-bright); margin: 0 0 12px; }

button, .btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-bright);
  border-radius: 6px;
  padding: 8px 16px;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.primary {
  background: var(--accent);
  color: #1a1820;
  font-weight: 700;
  border: none;
}
button.danger { color: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input[type="text"], input[type="email"], input[type="password"] {
  font: inherit;
  background: #14121a;
  border: 1px solid var(--border);
  color: var(--text-bright);
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

/* flex:1 so short pages (empty doc list, login form) push the shared
   #dl-footer (appended after .container by chrome.v1.js) down to the
   true bottom of the viewport instead of it trailing right under sparse
   content — standard sticky-footer pattern, paired with body's flex
   column above. */
.container { max-width: 900px; margin: 0 auto; padding: 32px 24px; flex: 1; }

/* The ecosystem default (chrome.v1.css: 48px margin-top, 32/36px padding)
   is sized for a full marketing page; trim it down for this app. */
#dl-footer { margin-top: 24px; padding: 18px 16px 22px; }

.doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.doc-row .title { font-weight: 600; color: var(--text-bright); }
.doc-row .meta { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.doc-row .actions { display: flex; gap: 8px; }
.doc-row a.open { flex: 1; text-decoration: none; color: inherit; }

.empty-state { text-align: center; padding: 60px 20px; opacity: 0.7; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: #1f1d27; border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; width: 420px; max-width: 90vw;
}
.modal .row { display: flex; gap: 8px; margin-top: 16px; }
.share-link-box {
  display: flex; gap: 8px; margin-top: 12px;
}
.share-link-box input { flex: 1; }

/* Editor */
/* Not height:100vh on .editor-shell directly: the shared chrome shell
   (master architecture) reserves body padding-top/padding-bottom for its
   fixed top bar and footer via `!important` — a flat 100vh here ignores
   that and overflows the real viewport by however much the bars take up
   (measured ~84px live before this fix). Making body the flex container
   means editor-shell's flex:1 fills whatever space is ACTUALLY left after
   body's own padding, chrome present or not — verified against a live
   screenshot, not just reasoned about, since this exact class of chrome-vs-
   fixed-height conflict is easy to get wrong on paper. */
/* height, not min-height: flex:1 children need a DEFINITE container size to
   compute their own available space against — min-height only sets a floor,
   so the chain below just hugs content (including .editor-surface's
   min-height:1000px) instead of clipping it into a scrollable region. Safe
   with the global `* { box-sizing: border-box }` reset above: body's own
   chrome-injected padding is subtracted from this height, not added to it. */
body.editor-page { display: flex; flex-direction: column; height: 100vh; }
.editor-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Matches the platform chrome bar's (#dl-chrome-bar, chrome.v1.css) size
   and format exactly: same height var, same frosted-glass background +
   blur, same font, same --dlc-* text/border/accent tokens — reads as a
   continuation of that bar rather than the app's own dark-mode chrome.
   Values fall back to the light-theme defaults chrome.v1.css ships if
   that stylesheet hasn't loaded (e.g. local dev, blocked cross-origin by
   this app's own CSP) so the bar still renders sanely on its own. */
.editor-topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  /* min-height, not height: a fixed height let wrapped rows (narrow
     screens, many toolbar buttons) render outside the box and overlap
     .editor-page-wrap below — caught by measuring the export button's
     real position (y:190) against the topbar's own claimed bottom edge
     (y:74), not by eyeballing a screenshot where it wasn't obvious. */
  min-height: var(--dlc-bar-h, 40px);
  padding: 4px 16px;
  background: var(--dlc-bg-glass, linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 60%, rgba(255,255,255,0)), rgba(243,241,250,0.55));
  backdrop-filter: blur(32px) saturate(160%) brightness(104%);
  -webkit-backdrop-filter: blur(32px) saturate(160%) brightness(104%);
  border-bottom: 1px solid var(--dlc-border, rgba(60,56,84,0.15));
  box-shadow: 0 1px 0 var(--dlc-rim, rgba(255,255,255,0.75)) inset, 0 4px 18px -8px var(--dlc-bar-shadow, rgba(60,56,84,0.16));
  font-family: var(--dlc-sans, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  color: var(--dlc-text, #3a3848);
}
.editor-topbar .btn, .editor-topbar button {
  color: var(--dlc-text, #3a3848);
  background: transparent;
  border-color: var(--dlc-border, rgba(60, 56, 84, 0.15));
  font-family: inherit;
  padding: 4px 12px;
}
.editor-topbar .btn:hover, .editor-topbar button:hover { border-color: var(--dlc-accent, #b8911e); }
/* Small square icon button (the eraser "clear saved data" reset) — centers
   its inline SVG; the SVG strokes follow the bar's text colour via currentColor. */
.editor-topbar .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; }
.editor-topbar .icon-btn svg { display: block; }
.editor-topbar #resetBtn:hover { color: var(--danger, #f4839a); border-color: var(--danger, #f4839a); }
.editor-topbar .inline-toolbar button.active {
  border-color: var(--dlc-accent, #b8911e); color: var(--dlc-accent, #b8911e);
}
.editor-topbar input.doc-title {
  flex: 1; min-width: 120px; background: transparent; border: none;
  color: var(--dlc-text-bright, #1c1a26);
  font-size: 14px; font-family: inherit;
}
.editor-topbar input.doc-title::placeholder { color: var(--dlc-text-dim, #6e6c7e); }
.editor-topbar input.doc-title:focus { outline: none; border-bottom: 1px solid var(--dlc-accent, #b8911e); }
.editor-topbar .save-status { color: var(--dlc-text-dim, #6e6c7e); }
.save-status { font-size: 12px; opacity: 0.6; min-width: 90px; }

/* Merged into .editor-topbar itself, between the title and Save/Export,
   instead of shared.html's separate full-width .toolbar row below the
   title bar — smaller buttons since this one now competes for space with
   the title/save/export in a single bar. */
.inline-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.inline-toolbar button { padding: 4px 7px; min-width: 24px; font-size: 13px; font-weight: 700; }
.inline-toolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 1px; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px;
  border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.15);
}
.toolbar button {
  padding: 6px 10px; min-width: 32px; font-weight: 700;
}
.toolbar button.active, .inline-toolbar button.active { border-color: var(--accent); color: var(--accent); }
.toolbar .sep { width: 1px; background: var(--border); margin: 4px 6px; }

/* Lives inside .editor-page-wrap now, right after .editor-surface (moved
   there in editor.html) — was previously a full-width strip above the
   toolbar, permanently squeezing the editing area exactly like #dl-footer
   used to. Sized to match the document card above it rather than the
   footer's full-width treatment, since this note is about the document,
   not site-wide chrome. */
.local-banner {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 10px 16px;
  font-size: 13px;
  background: rgba(200, 168, 110, 0.12);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.local-banner a { font-weight: 600; }

.editor-page-wrap { flex: 1; overflow-y: auto; padding: 32px 16px; }
/* editor.js/shared.js relocate the shared #dl-footer in here (after
   .editor-surface) once chrome.v1.js appends it to <body> — on this
   fixed-100vh flex layout, leaving it as a body-level sibling squeezes
   .editor-shell's flex:1 by the footer's height instead of it reading as
   the end of the document. Tightened further since it now sits right
   under the document card rather than a full page. */
.editor-page-wrap #dl-footer { margin-top: 32px; padding: 16px 16px 8px; }
/* The sheet matches a real US Letter page: 8.5in x 11in at 96px/in = 816 x
   1056, with 1in (96px) margins. `width` (not just max-width) fixes the page
   size so it reads as an actual printout, and `max-width:100%` lets it shrink
   to fit narrow screens instead of overflowing (a fixed 816 would force the
   mobile shrink-to-fit zoom). min-height is exactly one page; it grows by
   content past that. box-sizing:border-box (global reset) means the 96px
   padding is the page margin, inside the 816x1056 sheet. */
.editor-surface {
  width: 816px; max-width: 100%; margin: 0 auto 40px;
  background: #fdfcf9; color: #1c1a22;
  min-height: 1056px; padding: 96px;
  border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  line-height: 1.5; font-size: 16px;
}
/* Phones don't print — drop the rigid page height and the wide margins so the
   sheet stays usable (and never wider than the viewport) on a small screen. */
@media (max-width: 620px) {
  .editor-surface { padding: 40px 22px; min-height: 78vh; }
}
/* Make an actual print/PDF export come out as Letter with 1in margins. */
@page { size: letter; margin: 1in; }
.editor-surface:focus { outline: none; }
/* Tight, document-like vertical rhythm. The browser default <p> margin
   (1em top + 1em bottom) stacked on EVERY paragraph, so pasted notes — lots
   of short lines and blank lines — sprawled with ~1.5 blank lines between
   each and looked broken. A small bottom-only margin + 1.5 line-height reads
   like a real document. `div` is covered too in case a browser emits <div>s
   instead of <p> on Enter. */
.editor-surface p, .editor-surface div { margin: 0 0 0.35em; }
.editor-surface ul, .editor-surface ol { margin: 0.15em 0 0.4em; }
.editor-surface h1 { color: #1c1a22; font-size: 28px; margin: 0.4em 0 0.3em; }
.editor-surface h2 { color: #1c1a22; font-size: 22px; margin: 0.55em 0 0.25em; }
.editor-surface h3 { color: #1c1a22; font-size: 18px; margin: 0.55em 0 0.25em; }
.editor-surface > *:first-child { margin-top: 0; }
.editor-surface blockquote {
  border-left: 3px solid #c8a86e; margin: 0 0 0.5em 4px; padding-left: 16px; color: #514d5c;
}
.editor-surface a { color: #8a6a30; }

/* Alignment as classes, not inline style="text-align:...": execCommand's
   justifyLeft/Center/Right/Full sets a style attribute, which this app's
   CSP (style-src 'self', no unsafe-inline) silently refuses to render —
   confirmed by actually checking getComputedStyle after using the button,
   not just checking that the markup round-tripped. Classes go through the
   same 'self' stylesheet and aren't affected. */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

/* ---------- Editor v2 content formatting ----------
   Every rule below is class-based on purpose: the CSP is style-src 'self'
   with no unsafe-inline, so an inline style="" attribute silently doesn't
   render (that's the whole reason alignment above is class-based too). */

/* Indent as classes, not execCommand's inline margin-left (CSP-blocked). */
.indent-1 { margin-left: 32px; }
.indent-2 { margin-left: 64px; }
.indent-3 { margin-left: 96px; }
.indent-4 { margin-left: 128px; }
.indent-5 { margin-left: 160px; }
.indent-6 { margin-left: 192px; }
.indent-7 { margin-left: 224px; }
.indent-8 { margin-left: 256px; }

/* Highlight swatches (on <mark>) and text-colour swatches (on <span>),
   tuned for the cream document surface (#fdfcf9, dark text). */
mark.hl-yellow { background: #fdf19a; color: inherit; }
mark.hl-green  { background: #bdeec0; color: inherit; }
mark.hl-pink   { background: #ffc7d9; color: inherit; }
mark.hl-blue   { background: #bfe3ff; color: inherit; }
span.fg-red    { color: #c0392b; }
span.fg-orange { color: #c26a1c; }
span.fg-green  { color: #2e7d46; }
span.fg-blue   { color: #2265b8; }
span.fg-purple { color: #7a3fb0; }
span.fg-gray   { color: #6b6675; }

.editor-surface pre {
  background: #f4f2ec; color: #2a2833;
  padding: 12px 14px; border-radius: 6px; margin: 0 0 12px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px;
}
.editor-surface code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em;
  background: #eeece6; padding: 1px 5px; border-radius: 4px;
}
.editor-surface pre code { background: none; padding: 0; font-size: inherit; }
.editor-surface hr { border: none; border-top: 1px solid #d8d4c8; margin: 20px 0; }

/* Checklist: a <ul class="task-list"> whose <li>s draw a class-based
   checkbox via ::before (no <input> — the sanitizer would strip it and its
   checked state wouldn't persist). A click in the left gutter toggles the
   `checked` class (see editor.js). */
.editor-surface ul.task-list { list-style: none; padding-left: 6px; }
.editor-surface ul.task-list li { position: relative; list-style: none; padding-left: 30px; }
.editor-surface ul.task-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.3em;
  width: 16px; height: 16px; box-sizing: border-box;
  border: 1.6px solid #6b6675; border-radius: 4px;
}
.editor-surface ul.task-list li.checked::before {
  content: "\2713"; color: #fff; background: #3aa06a; border-color: #3aa06a;
  font-size: 12px; line-height: 15px; text-align: center;
}
.editor-surface ul.task-list li.checked { color: #8a8790; text-decoration: line-through; }

/* Find & replace highlighting via the CSS Custom Highlight API — styles the
   match ranges WITHOUT mutating the DOM (nothing to strip before save, and
   no inline styles for the CSP to block). */
::highlight(find-match)   { background: #ffe08a; color: #1c1a22; }
::highlight(find-current) { background: #c8a86e; color: #1c1a22; }

/* ---------- Editor v2 toolbar/UI chrome ---------- */

/* Find & replace bar: a real flex row between the topbar and the page, so
   opening it pushes the document down rather than covering it. */
.find-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 16px; border-bottom: 1px solid var(--dlc-border, rgba(60,56,84,0.15));
  background: rgba(0,0,0,0.15);
}
.find-bar input[type="text"] { width: auto; flex: 1; min-width: 110px; max-width: 240px; padding: 6px 10px; }
.find-bar button { padding: 6px 10px; }
.find-count { font-size: 12px; opacity: 0.7; min-width: 60px; }

/* Text-colour / highlight swatch dropdowns in the toolbar. */
.swatch-wrap { position: relative; display: inline-flex; }
.swatch-menu {
  position: absolute; left: 0; top: 34px; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 22px); gap: 6px;
  background: #1f1d27; border: 1px solid var(--border); border-radius: 8px; padding: 8px;
}
.swatch {
  width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.25); cursor: pointer;
}
.swatch-menu-fg .swatch { display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #14121a; }
/* Swatch preview colours come from these class rules (not inline styles) so
   each swatch shows the colour/highlight it applies. The palette mirrors the
   fg-*/hl-* rules above and the sanitizer allowlist — keep the three in sync. */
.swatch.fg-red { color: #c0392b; }
.swatch.fg-orange { color: #c26a1c; }
.swatch.fg-green { color: #2e7d46; }
.swatch.fg-blue { color: #2265b8; }
.swatch.fg-purple { color: #7a3fb0; }
.swatch.fg-gray { color: #6b6675; }
.swatch.hl-yellow { background: #fdf19a; }
.swatch.hl-green { background: #bdeec0; }
.swatch.hl-pink { background: #ffc7d9; }
.swatch.hl-blue { background: #bfe3ff; }
.swatch.swatch-none {
  grid-column: 1 / -1; width: auto; height: auto; padding: 4px 0;
  font-size: 12px; background: transparent; color: var(--text); text-align: center;
}

.doc-stats { font-size: 12px; opacity: 0.6; white-space: nowrap; }

/* Inline link editor — a small floating card positioned at the caret. */
.link-popover {
  position: fixed; z-index: 60; width: 280px; max-width: 92vw;
  background: #1f1d27; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.link-popover input[type="text"] { margin-bottom: 10px; }
.link-popover-actions { display: flex; gap: 6px; }
.link-popover-actions button { padding: 6px 10px; flex: 1; }

@media print {
  .editor-topbar, .toolbar, .find-bar, .swatch-menu, .link-popover, .no-print, #dl-footer { display: none !important; }
  .editor-page-wrap { overflow: visible; padding: 0; }
  /* @page already supplies the Letter size + 1in margins, so the sheet itself
     resets to fill that content box (no double margin, no fixed page height). */
  .editor-surface { box-shadow: none; max-width: none; width: auto; min-height: 0; margin: 0; padding: 0; }
  body { background: #fff; }
}

.auth-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 8px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 60px auto; }
.auth-flip { cursor: pointer; opacity: 0.8; text-align: center; }

/* Utility classes exist so nothing needs an inline style="" attribute —
   the CSP is script-src/style-src 'self' with no 'unsafe-inline'. */
.hidden { display: none !important; }
.link-plain { text-decoration: none; }
.export-menu-wrap { position: relative; }
.export-menu {
  position: absolute; right: 0; top: 36px; background: #1f1d27;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  z-index: 10; min-width: 160px;
}
.export-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
}

/* Doc's own nav, relocated below the document (2026-07-30): the editor
   bottom bar is now the standard /files nav; these links carry the
   documents-app navigation. Styled to match the .local-banner card. */
.doc-belownav {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  font-size: 13px;
  background: rgba(200, 168, 110, 0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.doc-belownav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  opacity: 0.85;
}
.doc-belownav a:hover { opacity: 1; text-decoration: underline; }