/* The Documents screen and its two editing surfaces.
 *
 * They are deliberately different tools for different jobs. A legal page is
 * prose and gets a page to write on. An email is an HTML document and gets its
 * source beside a live rendering of it — the only useful question about an
 * email being what it looks like when it arrives. */

/* ==========================================================================
   Layout
   ========================================================================== */
.docsgrid {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap-x);
  grid-template-columns: clamp(240px, 24%, 320px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
@media (max-width: 1079px) { .docsgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } }

/* --- The document list --------------------------------------------------- */
.doclist {
  min-height: 0; background: var(--panel); border-radius: var(--r-card);
  padding: clamp(10px, 1.3vh, 16px) clamp(10px, 1vw, 14px);
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overscroll-behavior: contain;
}
.docgroup { display: flex; flex-direction: column; gap: 4px; }
.docgroup + .docgroup { margin-top: 12px; }
.docgroup-head { padding: 2px 8px 4px; }

.docrow {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border: 0; border-radius: var(--r-nav);
  background: transparent; cursor: pointer; text-align: left; width: 100%;
  transition: background .16s var(--ease);
}
.docrow:hover { background: var(--sub); }
.docrow[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.docrow-icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sub-2); color: var(--ink-3);
}
.docrow[aria-pressed="true"] .docrow-icon { background: #fff; color: var(--accent-ink); }
.docrow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.docrow-title {
  font-size: var(--t-body); font-weight: 500; line-height: 1.3;
  /* Wrapped rather than truncated: the names differ only at the end
     ("Confirmation email to the submitter" vs "…to you"), so an ellipsis
     hides exactly the word that tells them apart. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
.docrow-where { font-size: var(--t-micro); color: var(--muted); }

@media (max-width: 1079px) {
  .doclist { flex-direction: row; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
  .docgroup { flex-direction: row; align-items: stretch; }
  .docgroup + .docgroup { margin-top: 0; margin-left: 8px; }
  .docgroup-head { display: none; }
  .docrow { min-width: 240px; }
}

/* --- The editor pane ----------------------------------------------------- */
.doceditor {
  min-height: 0; background: var(--panel); border-radius: var(--r-card);
  display: flex; flex-direction: column; overflow: hidden;
}

/* One row, ~52px. The document is named in the list beside it, so this
   carries only what changes: its state and the two actions. */
.doc-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: clamp(9px, 1.2vh, 13px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--line-2);
}
.doc-bar-name { font-size: var(--t-body); font-weight: 600; min-width: 0; }
.doc-bar-where { font-size: var(--t-micro); color: var(--muted); min-width: 0; }
.doc-bar-spacer { flex: 1 1 auto; min-width: 4px; }
.doc-status { color: var(--muted); white-space: nowrap; font-size: var(--t-micro); }
.doc-status.dirty { color: var(--warn); font-weight: 500; }

/* The subject line is one short input whose meaning differs per document,
   so it is a labelled field rather than a page heading. */
.doc-field {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 5px;
  padding: clamp(10px, 1.4vh, 15px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--line-2);
}
.doc-field-label {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--t-small); font-weight: 500; color: var(--ink-2);
}
.doctitle {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-btn);
  outline: none; padding: 0 12px; height: clamp(38px, 4.2vh, 46px);
  background: var(--panel);
  font-size: var(--t-mid); font-weight: 500; color: var(--ink);
}
.doctitle:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 47, 248, .12); }

.doc-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 34px; padding-bottom: 10px;
}
.doc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.doc-body { padding: clamp(10px, 1.4vh, 16px) clamp(14px, 1.6vw, 22px) clamp(12px, 1.6vh, 18px); }
.doc-surface { flex: 1 1 auto; min-height: 0; display: flex; }
/* Prose gets a centred page that scrolls; an email fills the pane. */
.doc-body:not(.is-email) .doc-surface {
  justify-content: center; overflow-y: auto; overscroll-behavior: contain;
}

.tool {
  border: 0; border-radius: var(--r-sm); padding: 7px 11px;
  background: var(--sub-2); color: var(--ink-3);
  font-size: var(--t-small); font-weight: 500; cursor: pointer;
  white-space: nowrap; min-height: 32px;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.tool:hover { background: #ece7f3; color: var(--ink); }

/* ==========================================================================
   Prose editor
   ========================================================================== */
.notion-wrap { position: relative; width: 100%; max-width: 740px; align-self: flex-start; }

.notion {
  min-height: 320px;
  font-size: clamp(15px, 1.95vh, 17px); line-height: 1.75; color: #232228;
  outline: none; overflow-wrap: anywhere;
}
.notion:focus-visible { outline: none; }
.notion:empty:before,
.notion > p:only-child:empty:before {
  content: attr(data-placeholder); color: #b3aec0; pointer-events: none;
}
.notion h1 { font-size: 1.7em; font-weight: 600; margin: 1.1em 0 .35em; line-height: 1.2; letter-spacing: -.015em; }
.notion h2 { font-size: 1.35em; font-weight: 600; margin: 1em 0 .3em; line-height: 1.28; letter-spacing: -.01em; }
.notion h3 { font-size: 1.12em; font-weight: 600; margin: .9em 0 .25em; }
.notion p { margin: 0 0 .85em; }
.notion ul, .notion ol { margin: 0 0 .85em; padding-left: 1.35em; }
.notion li { margin: .22em 0; }
.notion li::marker { color: var(--muted); }
.notion blockquote {
  margin: 0 0 .9em; padding: 4px 0 4px 16px;
  border-left: 3px solid var(--accent-ring); color: var(--ink-3);
}
.notion a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.notion code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--accent-chip); color: #6d3fb0; border-radius: 5px; padding: 1px 5px;
}
.notion :first-child { margin-top: 0; }

/* The hovered block, marked in the margin. A target for the eye, not a drag
   handle — this screen edits two documents and never re-orders them. */
.block-marker {
  position: absolute; left: -18px; width: 3px;
  border-radius: 999px; background: var(--accent-ring);
  transition: top .12s var(--ease), height .12s var(--ease);
  pointer-events: none;
}
@media (max-width: 859px) { .block-marker { display: none; } }

/* --- Selection toolbar --------------------------------------------------- */
.bubble {
  position: fixed; z-index: 170;
  display: flex; align-items: center; gap: 2px;
  background: var(--dark); border-radius: var(--r-btn);
  padding: 4px; box-shadow: var(--shadow-pop);
  animation: bubble-in .12s var(--ease);
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } }
.bubble-btn {
  border: 0; border-radius: 7px; padding: 6px 9px; min-height: 30px;
  background: transparent; color: #d7d4dd;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.bubble-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bubble-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.bubble-btn.b { font-weight: 700; }
.bubble-btn.i { font-style: italic; }
.bubble-btn.u { text-decoration: underline; }
.bubble-div { width: 1px; height: 18px; background: rgba(255, 255, 255, .16); margin: 0 3px; }

/* --- Slash menu ---------------------------------------------------------- */
.slash {
  position: fixed; z-index: 170; width: 250px;
  background: var(--panel); border-radius: var(--r-row);
  box-shadow: var(--shadow-pop); border: 1px solid var(--line);
  padding: 5px; overflow: hidden;
  animation: bubble-in .12s var(--ease);
}
.slash-list { display: flex; flex-direction: column; gap: 1px; max-height: 280px; overflow-y: auto; }
.slash-item {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.slash-item.on { background: var(--accent-soft); }
.slash-label { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.slash-hint { font-size: var(--t-micro); color: var(--muted); }

/* ==========================================================================
   Email editor — source beside a live rendering
   ========================================================================== */
.email-panes {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: grid; gap: clamp(8px, 1vw, 14px);
  grid-template-rows: minmax(0, 1fr);
}
/* The --split fraction is set by the drag handle and remembered per browser. */
.email-panes[data-view="split"]   { grid-template-columns: var(--split, 1fr) 10px minmax(0, 1fr); }
.email-panes[data-view="code"]    { grid-template-columns: minmax(0, 1fr); }
.email-panes[data-view="preview"] { grid-template-columns: minmax(0, 1fr); }
.email-panes[data-view="code"] .email-preview,
.email-panes[data-view="code"] .splitter,
.email-panes[data-view="preview"] .email-code,
.email-panes[data-view="preview"] .splitter { display: none; }
@media (max-width: 1079px) {
  .email-panes[data-view="split"] { grid-template-columns: minmax(0, 1fr); }
  .email-panes[data-view="split"] .splitter { display: none; }
}

.splitter {
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  cursor: col-resize; touch-action: none; border-radius: 999px;
  background: transparent;
}
.splitter-grip {
  display: block; width: 3px; height: 42px; border-radius: 999px;
  background: var(--line); transition: background .14s var(--ease), height .14s var(--ease);
}
.splitter:hover .splitter-grip,
.splitter.dragging .splitter-grip { background: var(--accent); height: 72px; }
.splitter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.email-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.email-preview {
  border-radius: var(--r-row); overflow: hidden;
  background: var(--sub-2); box-shadow: inset 0 0 0 1px var(--line);
}
.email-preview-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--panel);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--t-micro); color: var(--muted);
}
.email-frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #f4f2f6; }

.code-problems {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px; padding: 9px 11px;
  background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-btn); font-size: var(--t-micro); line-height: 1.5;
}

/* --- The code surface ---------------------------------------------------- */
/* A textarea over a highlighted <pre>. Both must share every metric exactly,
   or the colour drifts away from the characters underneath the caret. */
.code {
  flex: 1 1 auto; min-height: 0; display: flex;
  background: var(--sub); border-radius: var(--r-row);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.code:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(139, 47, 248, .1); }

.code-gutter {
  flex: 0 0 auto; width: 44px; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 14px 8px 14px 0;
  background: var(--sub-2); color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.65; user-select: none;
}
.code-gutter > span { display: block; }

/* The clipping lives here, on the box that never moves. Putting it on the
   highlight instead would clip against an edge that the scroll transform is
   itself dragging around, which hides the tail of every scrolled document. */
.code-scroll { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }

.code-hl,
.code-input {
  margin: 0; padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.65; letter-spacing: 0;
  tab-size: 2; white-space: pre; overflow-wrap: normal;
  border: 0;
}
/* Sized by its own text, not by the viewport, so the whole document is drawn
   and the transform can bring any part of it into view. */
.code-hl {
  position: absolute; top: 0; left: 0;
  min-width: 100%; min-height: 100%;
  pointer-events: none; color: var(--ink-2);
  will-change: transform;
}
.code-input {
  position: relative; width: 100%; height: 100%;
  resize: none; outline: none; overflow: auto;
  /* Never chain a scroll out to .code-scroll: it would move the highlight
     without moving the caret. */
  overscroll-behavior: contain;
  background: transparent;
  /* The text is invisible; the highlighted layer behind supplies the glyphs
     and the textarea supplies the caret, the selection and the undo stack. */
  color: transparent; caret-color: var(--accent);
}
.code-input::selection { background: rgba(139, 47, 248, .22); }

.t-tag     { color: #7c2ae8; }
.t-attr    { color: #b3541e; }
.t-value   { color: #1c6b45; }
.t-punct   { color: #8a8692; }
.t-comment { color: #9a96a3; font-style: italic; }
.t-doctype { color: #9a96a3; }
.t-css     { color: #2c2a32; }

/* --- Field menu ---------------------------------------------------------- */
.field-menu {
  position: fixed; z-index: 170; width: 250px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-row);
  box-shadow: var(--shadow-pop); padding: 5px;
  max-height: 300px; overflow-y: auto;
  animation: bubble-in .12s var(--ease);
}
.field-menu-item {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left;
}
.field-menu-item:hover { background: var(--accent-soft); }
.field-menu-item .mono { font-size: 12px; color: #6d3fb0; }

/* --- The AI brief dialog -------------------------------------------------- */
.dialog-wide { max-width: 620px; }
.prompt-box {
  width: 100%; height: clamp(220px, 40vh, 340px); resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-row);
  padding: 12px 14px; background: var(--sub);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: var(--ink-2);
  outline: none; white-space: pre-wrap;
}
.prompt-box:focus { border-color: var(--accent); }

/* --- Footer counter ------------------------------------------------------- */
.doc-count { font-variant-numeric: tabular-nums; }
.doc-count.over { color: var(--bad); font-weight: 500; }