/* The documents library's own: the outline down the left of the view, the part
   being edited beside it, and the dialog the destructive actions ask through. */

/* ─── THE TWO COLUMNS ───
   The sidebar holds the documents; the view holds the open one - its outline
   on the left, the part being edited filling the rest. The outline stays put
   while the part is scrolled through, being the way from any part to any
   other. */
.documents-pad {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* ─── THE OUTLINE ───
   As wide as its widest heading and no narrower: a heading cut short is a
   heading that has to be opened to be read, which is what an outline is for
   avoiding. Past the cap it scrolls sideways rather than wrapping - still
   whole, just not all at once - and the handle beside it moves the cap.

   `--tree-w` is the dragged width, set on the view by the feature. Unset, both
   sides of this fall back: as wide as the content, up to what fits. */
.tree {
  flex: none;
  width: var(--tree-w, max-content);
  min-width: 140px;
  max-width: var(--tree-w, min(46vw, 460px));
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 124px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}
/* A document with no parts loaded yet leaves no empty column behind. */
.tree:empty { display: none; }
.document-part {
  flex: 1;
  min-width: 0;
  max-width: 720px;
}

/* ─── THE OUTLINE'S ROWS ───
   Denser than the sidebar's items - four hundred of these are read at once,
   where a menu is seven - and never wrapped or ellipsised. */
.tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  /* As wide as the heading it carries, and never narrower than the column: the
     row is what hover and the open mark colour, so it has to reach both ends of
     what is scrolled through. */
  width: max-content;
  min-width: 100%;
  padding: 3px 8px 3px 0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tree-item:hover { background: var(--surface2); color: var(--text); }
.tree-item.active { background: rgba(61,147,203,0.12); color: var(--accent); }
/* Keyboard focus has to be visible: with the roving tabindex the arrow keys
   move it, and the outline is the only sign of where it went. */
.tree-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A part's depth is its document_path's, so the indent reads as the outline
   the document already is. */
.tree-item.depth-1 { padding-left: 0; }
.tree-item.depth-2 { padding-left: 14px; }
.tree-item.depth-3 { padding-left: 28px; }
.tree-item.depth-4 { padding-left: 42px; }
.tree-item.depth-5 { padding-left: 56px; }
.tree-item.depth-6 { padding-left: 70px; }

/* The twisty, and the same width standing empty on a part with nothing under
   it - so every heading in a level starts at the same place, leaf or branch. */
.tree-twisty {
  flex: none;
  width: 16px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text3);
  font-size: 9px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
}
button.tree-twisty:hover { color: var(--text); }
/* Points down at what it is showing, at its own row when it is showing nothing.
   The row carries the state, so the mark follows it rather than a class. */
.tree-item[aria-expanded="false"] .tree-twisty { transform: rotate(-90deg); }

.tree-name { flex: none; }
/* The part's word count, after the heading rather than against a right edge:
   the rows are as wide as they need to be, so there is no shared edge to hold
   it at. */
.tree-count {
  flex: none;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

/* A part with no embedding is not in the search: it is still a part of the
   document, so it is dimmed rather than marked with a warning of its own. */
.tree-item.unembedded .tree-name { opacity: 0.55; font-style: italic; }

/* ─── THE HANDLE ───
   The outline's edge, dragged. A hit area wider than the line it draws, the
   line being one pixel and a pointer not being. */
.tree-resizer {
  flex: none;
  align-self: stretch;
  position: sticky;
  top: 76px;
  width: 9px;
  height: calc(100vh - 124px);
  cursor: col-resize;
  background:
    linear-gradient(var(--border), var(--border)) no-repeat center / 1px 100%;
  transition: background-size 0.15s;
}
.tree-resizer:hover,
.documents-dragging .tree-resizer { background-size: 2px 100%; }
.tree-resizer:hover { background-image: linear-gradient(var(--accent), var(--accent)); }
/* While the edge is being dragged, nothing else answers the pointer: a drag
   across the fields is a drag, not a selection of what it crossed. */
.documents-dragging { user-select: none; cursor: col-resize; }

/* ─── THE PART, READ ───
   What a visitor meets, and what everyone meets until they step into editing:
   the heading and the prose under it. Set at the measure and the rhythm the
   editor's own field is, so switching modes changes what may be done to the
   text and not what the text looks like. */
.part-heading {
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.part-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text2);
}
.part-body p + p { margin-top: 14px; }
/* A heading with nothing under it - the outline is full of them. */
.part-body:empty { display: none; }

/* ─── THE PART BEING EDITED ─── */
.documents-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text3);
}
.documents-meta dt { color: var(--text3); }
.documents-meta dd { color: var(--text2); }

.documents-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}

.documents-heading,
.documents-content {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.documents-content {
  min-height: 320px;
  resize: vertical;
  /* Prose is edited, and prose wraps - a horizontal scrollbar in a text area
     is a paragraph nobody can read. */
  white-space: pre-wrap;
}
.documents-heading:focus,
.documents-content:focus { outline: none; border-color: var(--accent); }

.documents-hint {
  margin: 6px 0 18px;
  font-size: 11px;
  color: var(--text3);
}
.documents-warn { color: var(--B); }

/* ─── CONTROLS ───
   Saving on the left, where the reading stops; the structural actions after a
   gap, and the deletion last - the order they are reached in, and the one
   that cannot be undone furthest from the one used most. */
.documents-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.documents-controls-spacer { flex: 1; }

/* The buttons standing among the fields take the corner the fields do. Scoped
   to the pad rather than set on `.btn`: the same class is the bar's action and
   every other feature's, which keep the page's own corner. */
.documents-pad .btn { border-radius: var(--radius-sm); }

.documents-status { font-size: 12px; color: var(--text3); }
.documents-status-error { color: var(--A); }

@media (max-width: 700px) {
  /* No room for two columns: the outline sits over the part rather than
     beside it, and is capped so the fields are still reachable by scrolling.
     Nothing to drag either - a width the column no longer has. */
  .documents-pad { flex-direction: column; }
  .tree {
    width: 100%;
    max-width: 100%;
    position: static;
    max-height: 240px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .tree-resizer { display: none; }
  .document-part { width: 100%; }
}

/* ─── PROCESSING ───
   A run takes the view while it is under way: the parts are being rewritten
   under it, so there is nothing here to read or edit meanwhile. */
.process-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 0;
  text-align: center;
}
.process-panel p { font-size: 14px; color: var(--text2); }
/* The count moves while the stage stands, so it is set apart from it. */
.process-count { color: var(--text3); font-size: 13px; }

.btn[disabled] { opacity: 0.5; cursor: default; }