/* ── Shared chrome for the private editor pages ── */
/*
 * log-entry.html and the edit-* pages aren't linked from the nav and carry no
 * nav bar of their own, but they do share a look. Each used to inline its own
 * copy of the design tokens, the reset and the rules below; they now load
 * global.css for the first two and this file for the rest.
 *
 * Everything here is a BASE rule, identical across all five pages. Page-local
 * modifiers (.btn-ghost, .btn-save, .btn-small) deliberately stay inline in
 * each page: they carry the same specificity as .btn and only win by being
 * later in source order, so moving them here would flip ghost buttons to solid.
 * Modifiers with higher specificity (:hover, .ok/.err) are safe here.
 *
 * Also deliberately left inline: .toolbar (log-entry uses the class without a
 * rule, so hoisting would newly style it), .token-bar (log-entry lays it out as
 * a column) and .empty-note (two pages add text-align:center).
 */

:root {
  --accent: #7c5cbf;
}

/* ── Buttons ── */

.btn {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.btn:hover    { opacity: 0.75; }
.btn:disabled { opacity: 0.3; cursor: default; }

/* Must stay after .btn — same specificity, so it only wins on source order.
   .btn-save and .btn-small differ per page and remain inline; being inline
   puts them later still, so they continue to win over both of these. */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

.btn-ghost:hover { border-color: var(--border-hover); color: var(--text); opacity: 1; }

/* ── Toolbar ── */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ── Tab panels ── */

.tab-panel        { display: none; }
.tab-panel.active { display: block; }

/* ── Back link ── */

.back-link {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 20px;
}

.back-link:hover { color: var(--muted); }

/* ── Token bar status ── */

.token-status {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  flex: 1;
  min-width: 160px;
}

.token-status.ok  { color: #5a9e6f; }
.token-status.err { color: #c0614a; }

/* ── Save status ── */

.status-bar {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--faint);
  min-height: 1.4em;
}

.status-bar.ok  { color: #5a9e6f; }
.status-bar.err { color: #c0614a; }

.change-count.has-changes { color: var(--accent); font-weight: 500; }