: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); }
.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; }
.editor-surface {
  max-width: 760px; margin: 0 auto;
  background: #fdfcf9; color: #1c1a22;
  min-height: 1000px; padding: 64px 72px;
  border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  line-height: 1.6; font-size: 16px;
}
.editor-surface:focus { outline: none; }
.editor-surface h1 { color: #1c1a22; font-size: 28px; }
.editor-surface h2 { color: #1c1a22; font-size: 22px; }
.editor-surface h3 { color: #1c1a22; font-size: 18px; }
.editor-surface blockquote {
  border-left: 3px solid #c8a86e; margin: 0 0 0 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; }

@media print {
  .editor-topbar, .toolbar, .no-print, #dl-footer { display: none !important; }
  .editor-page-wrap { overflow: visible; padding: 0; }
  .editor-surface { box-shadow: none; max-width: none; 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;
}