/* Skriva — Faroese writing tool with document sidebar */

body.skriva {
  /* Left = doc list, middle = editor, right = analysis pane */
  grid-template-columns: 220px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar workbench";
}

/* The Skriva top-bar uses a contenteditable title in place of the
   plain text shown on the book page. */
.topbar .title[contenteditable] {
  border: 1px solid transparent; border-radius: 4px;
  padding: 2px 6px; cursor: text;
  color: var(--text); font-size: 14px; min-width: 80px;
  display: inline-block;
}
.topbar .title[contenteditable]:hover,
.topbar .title[contenteditable]:focus {
  background: var(--bg); border-color: var(--border-strong);
  outline: none;
}

.skriva-workbench {
  grid-template-columns: 1fr 420px;
}

.skriva-pane .editable {
  min-height: calc(100vh - 160px);
  font-size: 17px;
  line-height: 1.7;
  padding: 18px 22px;
}

/* Placeholder for empty contenteditable (no native browser support) */
.skriva-editor:empty::before {
  content: attr(placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* Document list */
#docList { list-style: none; margin: 0; padding: 0; }
#docList li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  display: flex; flex-direction: column; gap: 2px;
}
#docList li:hover { background: var(--bg); }
#docList li.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
#docList li .doc-title {
  font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#docList li.active .doc-title { color: var(--text); }
#docList li .doc-meta {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
#docList li.empty {
  color: var(--muted); font-style: italic; cursor: default;
  border-left-color: transparent; background: transparent;
}

/* "Now editing" marker for the active doc in the list */
.active-marker {
  color: var(--accent); font-weight: 600;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.actions .ghost { padding: 6px 10px; }
#saveState { font-size: 12px; }
#saveState.saving { color: var(--warn); }
#saveState.saved  { color: var(--good); }