/* App.css — narrowed to slice-1 surfaces. */

.boot {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; color: var(--c-gray-500); font-size: var(--text-md);
}

/* `100dvh` is the dynamic viewport height — adjusts as iOS Safari's
   URL bar shows/hides. Without it, `100vh` measures the URL-bar-hidden
   ("largest") viewport, so the app overflows what's actually visible.
   Combined with `body { overflow: hidden }` in index.css, the result
   on iOS is that single-finger touches get consumed by the (blocked)
   page-level scroll attempt and never reach the nested .chrome-pane;
   two-finger touches bypass that and one-finger works thereafter.
   The 100vh line stays as a fallback for browsers older than iOS
   15.4 / Chrome 108 (early 2022) that don't understand dvh. */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

.app-header {
  height: var(--header-height); flex-shrink: 0;
  background: var(--color-header-bg); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}
.app-brand a { color: var(--c-white); text-decoration: none; font-weight: 600; font-size: var(--text-md); }
.header-right { display: flex; align-items: center; gap: 12px; font-size: var(--text-base); }
.user-name { color: var(--c-gray-300); }
.user-role-badge {
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--color-on-dark-soft);
}
.role-owner { background: var(--c-warning-accent); }
.role-admin { background: var(--c-accent-strong); }

/* The default surface for .btn-link is LIGHT (breadcrumb bar, PR view,
 * modals, discussion panel, inbox). It renders as a quiet secondary
 * button: white fill, hairline border, dark label. The dark app-header
 * reuse ("Sign out") opts back into the translucent-on-dark treatment
 * via the .app-header scope below. (Before v0.31.4 the base rule WAS the
 * dark-header style, so every light-surface .btn-link was white-on-near-
 * white and effectively invisible.) */
.btn-link {
  display: inline-flex; align-items: center;
  color: var(--c-gray-700); text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md); padding: 4px 10px;
  font-size: var(--text-base); cursor: pointer;
}
.btn-link:hover {
  background: var(--c-gray-50); border-color: var(--c-gray-400); color: var(--c-ink);
}
/* Dark header reuse: restore the original translucent-white treatment. */
.app-header .btn-link {
  color: var(--c-white); background: var(--color-on-dark-soft); border-color: transparent;
}
.app-header .btn-link:hover {
  color: var(--c-white); background: var(--color-on-dark-hover); border-color: transparent;
}

.btn-signin-header {
  color: var(--c-white); text-decoration: none;
  background: var(--color-on-dark-soft);
  border-radius: var(--radius-md); padding: 4px 10px;
  font-size: var(--text-base);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-signin-header:hover { background: var(--color-on-dark-hover); }

/* Beta chip — small uppercase tag sitting alongside a button label or
 * link. Renders well on both dark headers and light surfaces. */
.beta-chip {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 1px 5px; border-radius: var(--radius-sm);
  background: var(--c-warning-accent); color: var(--c-white);
  line-height: 1.5;
  vertical-align: middle;
}
.btn-link .beta-chip,
.btn-mode-toggle .beta-chip,
.btn-start-contribution-header .beta-chip {
  margin-left: 5px;
}

.app-body { flex: 1; display: flex; overflow: hidden; }

/* --- Catalog (left pane, §7) --- */

.catalog {
  width: 320px; flex-shrink: 0;
  background: var(--c-white); border-right: 1px solid var(--c-gray-200);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.catalog-search {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-gray-150);
}
.catalog-search input {
  width: 100%; border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: var(--text-base); outline: none;
}
.catalog-search input:focus { border-color: var(--c-ink); }

.catalog-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-gray-150);
  font-size: var(--text-sm); color: var(--c-gray-500);
}
.catalog-controls select {
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-sm);
  font-size: var(--text-sm); padding: 2px 4px;
}

.catalog-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--c-gray-150);
}
.chip {
  font-size: var(--text-xs);
  background: var(--c-gray-150); color: var(--c-gray-600);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 2px 9px; cursor: pointer;
}
.chip.active { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }

.catalog-list { flex: 1; overflow-y: auto; padding: 4px 0; }

.catalog-row {
  display: flex; flex-direction: column;
  padding: 8px 14px;
  border: none; background: none; text-align: left; cursor: pointer;
  border-left: 3px solid transparent; width: 100%;
}
.catalog-row:hover { background: var(--c-gray-100); }
.catalog-row.active { background: var(--c-gray-150); border-left-color: var(--c-ink); }
.catalog-row .row-top { display: flex; align-items: center; gap: 6px; }
.row-id {
  font-size: var(--text-2xs); font-weight: 700;
  color: var(--c-gray-500); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.row-id.super { color: var(--c-warning-accent); }
.row-title { font-size: var(--text-base); margin-top: 2px; }
.catalog-row.is-super .row-title { color: var(--c-gray-500); }
.row-tags { font-size: var(--text-xs); color: var(--c-gray-500); margin-top: 2px; }
.row-malformed { font-size: var(--text-2xs); color: var(--c-warning-accent); font-weight: 600; }

/* §22.4a SLICE-3 — faceted left-pane filters (§5.1). */
.facets {
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-gray-150);
}
.facet-group { margin-bottom: 8px; }
.facet-header {
  background: none; border: 0; cursor: pointer; width: 100%; text-align: left;
  font-size: var(--text-xs); font-weight: 700; color: var(--c-gray-600);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0;
}
.facet-values { display: flex; flex-direction: column; gap: 2px; }
.facet-value {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--c-gray-600); cursor: pointer;
}
.facet-value-label { flex: 1; }
.facet-count { color: var(--c-gray-500); font-variant-numeric: tabular-nums; }
.facet-value-search {
  width: 100%; margin: 4px 0; font-size: var(--text-xs);
  padding: 2px 6px; border: 1px solid var(--c-gray-150); border-radius: var(--radius-sm);
}
.facet-clear {
  background: none; border: 0; cursor: pointer; padding: 0 0 6px;
  font-size: var(--text-xs); color: var(--c-ink); text-decoration: underline;
}
.facet-empty { font-size: var(--text-xs); color: var(--c-gray-500); }
.facet-malformed {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: var(--text-xs); color: var(--c-warning-accent); cursor: pointer;
}

.catalog-pending {
  border-top: 1px solid var(--c-gray-150);
  flex-shrink: 0;
  background: var(--c-gray-50);
}
.pending-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-gray-500);
  cursor: pointer;
  background: none; border: none; width: 100%; text-align: left;
}
.pending-count {
  background: var(--c-gray-200); color: var(--c-gray-700);
  border-radius: var(--radius-pill);
  padding: 1px 8px; font-size: var(--text-xs);
}
.pending-list { padding: 2px 0 8px; }
.pending-row {
  display: block;
  padding: 6px 14px;
  font-size: var(--text-base); color: var(--c-gray-600); text-decoration: none;
  cursor: pointer; background: none; border: none; text-align: left; width: 100%;
}
.pending-row:hover { background: var(--c-white); color: var(--c-ink); }
.pending-row.active { background: var(--c-white); color: var(--c-ink); }
.pending-row .pending-by {
  font-size: var(--text-xs); color: var(--c-gray-500); margin-top: 1px;
}

.catalog-footer {
  border-top: 1px solid var(--c-gray-200);
  padding: 10px 14px;
  flex-shrink: 0;
  background: var(--c-white);
}
.btn-propose {
  width: 100%;
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--text-base); font-weight: 600;
  cursor: pointer;
}
.btn-propose:hover { background: var(--c-gray-700); }
.btn-propose:disabled { opacity: 0.5; cursor: default; }

/* --- Main pane --- */

.main-pane {
  flex: 1; overflow-y: auto;
  padding: 32px 48px;
}

/* `.main-pane` is the §8 flex shell and carries no padding (the bare
   `.main-pane` override below shadows the padded read-view rule), so the
   welcome surface owns its own breathing room — top offset, comfortable
   side gutters, and a capped measure for readable line length. */
.welcome {
  max-width: 680px;
  padding: 56px 48px 64px;
}
.welcome h1 {
  font-size: var(--text-3xl); font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-8);
}
.welcome p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--c-gray-600);
  margin: 0 0 var(--space-8);
}
.welcome p:last-child { margin-bottom: 0; }
.welcome strong { color: var(--c-gray-800); }

/* --- RFC / Proposal view (read-only for slice 1) --- */

.entry-view { max-width: 720px; margin: 0 auto; }
.entry-state-banner {
  font-size: var(--text-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-warning-accent);
  padding: 6px 10px;
  background: var(--c-warning-bg-soft); border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  display: inline-block; margin-bottom: 16px;
}
.entry-state-banner.active { color: var(--c-success-fg); background: #f0fdf4; border-color: #bbf7d0; }
.entry-state-banner.declined { color: var(--c-danger-fg); background: var(--c-danger-bg); border-color: var(--c-danger-border); }
.entry-state-banner.merged { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }

.entry-title { font-size: var(--text-3xl); font-weight: 700; margin: 0 0 8px; }
.entry-meta { font-size: var(--text-sm); color: var(--c-gray-500); margin-bottom: 24px; }
.entry-meta .entry-tag {
  display: inline-block;
  background: var(--c-gray-150); color: var(--c-gray-500);
  padding: 1px 8px; border-radius: var(--radius-pill);
  margin-right: 4px;
}
.entry-body {
  font-size: var(--text-lg); line-height: 1.75; color: var(--c-ink);
}
.entry-body h1, .entry-body h2, .entry-body h3 { font-weight: 600; }
.entry-body h1 { font-size: var(--text-2xl); margin-top: 24px; }
.entry-body h2 { font-size: var(--text-xl); margin-top: 20px; }
.entry-body h3 { font-size: var(--text-lg); margin-top: 16px; }
.entry-body p { margin: 0 0 12px; }
.entry-body ul, .entry-body ol { padding-left: 24px; }
.entry-body code { background: var(--c-gray-150); padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--text-base); }

.entry-actions {
  display: flex; gap: 8px; margin: 16px 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-gray-200);
}
.btn-primary {
  background: var(--c-success-fg); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: var(--text-base); font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: #14532d; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-secondary {
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: var(--text-base); font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--c-gray-100); }
.btn-danger {
  background: var(--c-white); color: var(--c-danger-fg);
  border: 1px solid var(--c-danger-border); border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: var(--text-base); font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: var(--c-danger-bg); }

/* --- Modals --- */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--c-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  width: 560px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
}
.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-gray-150);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h2 { margin: 0; font-size: var(--text-xl); font-weight: 600; }
.modal-close {
  background: none; border: none; font-size: var(--text-2xl); cursor: pointer;
  color: var(--c-gray-500); line-height: 1; padding: 0;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-body label {
  display: block;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--c-gray-500);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.modal-body input, .modal-body textarea {
  width: 100%;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: var(--text-md); font-family: inherit;
  outline: none; margin-bottom: 14px;
}
.modal-body input:focus, .modal-body textarea:focus { border-color: var(--c-ink); }
.modal-body textarea { resize: vertical; min-height: 100px; }
.field-help {
  font-size: var(--text-sm); color: var(--c-gray-500);
  margin-top: -10px; margin-bottom: 14px;
}
.field-error {
  font-size: var(--text-sm); color: var(--c-danger-fg);
  margin-top: -10px; margin-bottom: 14px;
}
.modal-actions {
  border-top: 1px solid var(--c-gray-150);
  padding: 14px 20px;
  display: flex; justify-content: flex-end; gap: 10px;
}

/* --- Landing page (pre-login, §14.1) --- */

.landing {
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px;
  text-align: center;
}
.landing h1 { font-size: var(--text-3xl); font-weight: 700; margin: 0 0 8px; }
.landing .subtitle { font-size: var(--text-lg); color: var(--c-gray-500); margin: 0 0 28px; }
.landing .pitch {
  max-width: 540px;
  line-height: 1.7; color: var(--c-gray-700);
  font-size: var(--text-lg);
  margin: 0 0 28px;
}
.landing .btn-signin {
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-size: var(--text-md); font-weight: 600;
  text-decoration: none;
}
.landing .btn-signin:hover { background: var(--c-gray-700); }
.landing .secondary-link {
  margin-top: 14px;
  font-size: var(--text-base);
  color: var(--c-gray-500); text-decoration: none;
}
.landing .secondary-link:hover { color: var(--c-ink); text-decoration: underline; }

/* --- v0.7.0: email + one-time-code sign-in (§6.2) --- */

.otc-login {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.otc-login-inner {
  max-width: 360px;
  width: 100%;
  display: flex; flex-direction: column;
  gap: 14px;
}
.otc-login h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0 0 4px;
}
.otc-login .otc-hint {
  color: var(--c-gray-500);
  font-size: var(--text-md);
  line-height: 1.5;
  margin: 0;
}
.otc-login input {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--text-lg);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}
.otc-login input:focus {
  outline: none;
  border-color: var(--c-ink);
}
.otc-login button[type="submit"] {
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: var(--text-md); font-weight: 600;
  cursor: pointer;
}
.otc-login button[type="submit"]:hover:not(:disabled) { background: var(--c-gray-700); }
.otc-login button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
.otc-login form {
  display: flex; flex-direction: column;
  gap: 10px;
}
.otc-actions {
  display: flex; align-items: center; gap: 12px;
}
.otc-login .btn-link-quiet {
  background: none; border: none;
  color: var(--c-gray-500); font-size: var(--text-base);
  cursor: pointer; padding: 0;
}
.otc-login .btn-link-quiet:hover { color: var(--c-ink); text-decoration: underline; }
/* v0.8.0 — labels + textarea for the first-OTC profile capture step. */
.otc-field-label {
  font-size: var(--text-sm); color: var(--c-gray-500);
  margin: 8px 0 -4px;
  font-weight: 600;
}
.otc-login textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--text-lg);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.otc-login textarea:focus {
  outline: none;
  border-color: var(--c-ink);
}
.otc-shortcut-hint {
  color: var(--c-gray-500); font-size: var(--text-sm); margin: 4px 0 0;
}
.otc-shortcut-hint kbd {
  background: var(--c-gray-150); border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  padding: 1px 5px; font-size: var(--text-xs); font-family: inherit;
}
.otc-status {
  color: var(--c-gray-500); font-size: var(--text-base);
  background: var(--c-gray-100);
  border-left: 3px solid #cfc8a8;
  padding: 8px 12px;
  margin: 4px 0 0;
}
.otc-fallback {
  font-size: var(--text-sm); color: var(--c-gray-500);
  margin: 16px 0 0;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.otc-fallback a, .otc-fallback .otc-fallback-link {
  color: var(--c-gray-500); text-decoration: none;
}
.otc-fallback a:hover { color: var(--c-ink); text-decoration: underline; }
.otc-fallback-sep { color: var(--c-gray-300); }

/* v0.11.0 — "trust this device for 30 days" checkbox on the verify
   step. Sits above the action row, padded so it doesn't crowd the
   passcode/code input. */
.otc-trust-device {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-base); color: var(--c-gray-600);
  margin: 8px 0 4px;
  cursor: pointer;
  user-select: none;
}
.otc-trust-device input[type="checkbox"] {
  width: auto; margin: 0; cursor: pointer;
}

/* v0.11.0 — /settings/devices revoke-device UI. */
.device-list {
  list-style: none; padding: 0; margin: 12px 0 0;
}
.device-list-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  padding: 10px 12px; margin: 0 0 8px;
  background: var(--c-gray-50);
}
.device-list-item .device-meta {
  flex: 1; min-width: 0;
}
.device-list-item .device-ua {
  font-size: var(--text-base); color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.device-list-item .device-stamps {
  font-size: var(--text-sm); color: var(--c-gray-500);
  margin-top: 2px;
}
.device-list-item button {
  font-size: var(--text-sm); padding: 4px 10px;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  background: white; cursor: pointer;
}
.device-list-item button:hover:not(:disabled) {
  background: var(--c-gray-100);
}
.device-revoke-all {
  margin-top: 8px;
  font-size: var(--text-base); padding: 6px 12px;
  border: 1px solid #cb6a6a; border-radius: var(--radius-sm);
  background: white; color: #cb6a6a; cursor: pointer;
}
.device-revoke-all:hover:not(:disabled) {
  background: var(--c-danger-bg);
}
.device-empty {
  font-size: var(--text-base); color: var(--c-gray-500);
  background: var(--c-gray-50); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  padding: 12px;
}

/* --- Beta-pending page (post-OAuth-rejection) --- */

.beta-pending {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.beta-pending-inner {
  max-width: 560px;
  text-align: center;
}
.beta-pending h1 { font-size: var(--text-2xl); margin: 0 0 16px; }
.beta-pending p { font-size: var(--text-lg); line-height: 1.6; color: var(--c-gray-700); margin: 0 0 14px; }
.beta-pending-contact {
  background: var(--c-gray-50); border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg);
  padding: 14px 18px;
  color: var(--c-gray-600);
}
.beta-pending-actions {
  margin-top: 24px;
  display: flex; gap: 18px; justify-content: center; align-items: center;
}
.beta-pending-actions .btn-primary {
  background: var(--c-ink); color: var(--c-white);
  border-radius: var(--radius-lg); padding: 9px 18px;
  font-size: var(--text-md); font-weight: 600; text-decoration: none;
}
.beta-pending-actions .btn-primary:hover { background: var(--c-gray-700); }
.btn-link-quiet {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--c-gray-500); text-decoration: none; font-size: var(--text-base);
}
.btn-link-quiet:hover { color: var(--c-ink); text-decoration: underline; }

/* v0.8.0 — thin "your beta access is in review" banner. Shown on every
   page (other than /beta-pending itself, which carries the larger
   form of the message). Sits just under the app header so it doesn't
   compete with the catalog rail. */
.pending-access-banner {
  background: var(--c-warning-bg-soft);
  border-bottom: 1px solid #e6dca0;
  color: #4a3f00;
  font-size: var(--text-base);
  padding: 8px 16px;
  text-align: center;
}
.pending-access-banner a {
  color: #4a3f00; text-decoration: underline;
}

/* ── §8 RFC view: three-column shape ─────────────────────────────────── */

.main-pane {
  /* Override the §9.x padded read-view; the §8 surface manages its own
     internal layout and needs to fill the pane edge-to-edge. */
  padding: 0;
  overflow: hidden;
  display: flex;
}

.rfc-view {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.rfc-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-gray-200);
  background: var(--c-gray-50);
  font-size: var(--text-base); color: var(--c-gray-500);
  flex-shrink: 0;
}
.breadcrumb-label {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--c-gray-500);
}
.breadcrumb-sep { color: var(--c-gray-300); }
.breadcrumb-meta { color: var(--c-gray-500); font-size: var(--text-sm); }
.breadcrumb-actions {
  margin-left: auto;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 8px; align-items: center; min-width: 0;
}
/* Normalize every action in the bar to one height + shape so the mode
 * toggle, the filled CTAs (Start Contributing / Open PR / Graduate) and
 * the secondary buttons (Metadata / Claim ownership / Invitations / …)
 * line up as a single, intentional control group. Higher specificity
 * than the per-variant rules, so it harmonizes their size/radius/type
 * without disturbing each variant's fill colors. */
.breadcrumb-actions > button,
.breadcrumb-actions > a {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap;
}

.btn-mode-toggle {
  font-size: var(--text-sm); font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--c-gray-300); background: var(--c-white); color: var(--c-gray-600);
  cursor: pointer;
}
.btn-mode-toggle.discuss { background: var(--c-white); color: var(--c-gray-600); }
.btn-mode-toggle.contribute { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }

.btn-start-contribution-header {
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 5px 12px; font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
}

.branch-dropdown { position: relative; }
.branch-dropdown-trigger {
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 3px 8px; font-weight: 600; color: var(--c-ink); font-size: var(--text-base);
  cursor: pointer;
}
.branch-dropdown-trigger:hover { border-color: var(--c-gray-200); }
.branch-dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  z-index: 50; min-width: 240px; padding: 4px;
}
.branch-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-size: var(--text-base); border-radius: var(--radius-md);
}
.branch-dropdown-item:hover { background: var(--c-gray-100); }
.branch-dropdown-item.active { background: var(--c-gray-150); font-weight: 600; }
.branch-name { flex: 1; }
.branch-creator { font-size: var(--text-xs); color: var(--c-gray-500); }
.branch-private-icon { font-size: var(--text-2xs); }

.rfc-body { flex: 1; display: flex; overflow: hidden; }

/* ── Editor area ─────────────────────────────────────────────────────── */

.editor-area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  background: var(--c-white);
}

.discuss-mode-banner {
  padding: 8px 16px;
  background: var(--c-warning-bg-soft); border-bottom: 1px solid #fde68a;
  color: var(--c-warning-fg); font-size: var(--text-sm);
}
.discuss-mode-banner.muted { background: var(--c-gray-150); color: var(--c-gray-500); border-color: var(--c-gray-200); }

.editor-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--c-gray-150);
  background: var(--c-gray-50);
  font-size: var(--text-sm); color: var(--c-gray-500);
}
.btn-review-toggle {
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 4px 10px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.btn-review-toggle.active { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.editor-toolbar-hint { color: var(--c-gray-500); font-size: var(--text-xs); }

.editor-wrapper {
  flex: 1; overflow-y: auto;
  padding: 32px 48px;
}
.editor-content {
  max-width: 720px; margin: 0 auto; outline: none;
}
/* CodeMirror 6 source editor (Contribute mode). */
.cm-source-editor {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Split-pane Contribute layout (Phase 2) ──────────────────────────── */
.editor-split {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row;
  overflow: hidden;
}
.editor-split-pane {
  flex: 1 1 50%; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.editor-split-raw { border-right: 1px solid var(--c-gray-200); }
.editor-split-preview { background: var(--c-white); overflow-y: auto; }
.editor-split-preview .markdown-preview { padding: 24px 32px; }

/* ── Markdown preview (Phase 2 render pane) ──────────────────────────── */
.markdown-preview {
  font-size: var(--text-lg); line-height: 1.75; color: var(--c-ink);
  max-width: 720px; margin: 0 auto;
  outline: none;
}
.markdown-preview-solo {
  flex: 1; overflow-y: auto;
  padding: 32px 48px;
}
.markdown-preview h1 { font-size: var(--text-2xl); font-weight: 700; margin: 24px 0 12px; }
.markdown-preview h2 { font-size: var(--text-xl); font-weight: 600; margin: 20px 0 8px; }
.markdown-preview h3 { font-size: var(--text-lg); font-weight: 600; margin: 16px 0 6px; }
.markdown-preview p { margin: 0 0 12px; }
.markdown-preview ul, .markdown-preview ol { padding-left: 24px; }
.markdown-preview code {
  background: var(--c-gray-150); padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--text-base);
}
.markdown-preview pre {
  background: var(--c-gray-100); padding: 12px 16px; border-radius: var(--radius-md);
  overflow-x: auto; font-size: var(--text-base); line-height: 1.5;
}
.markdown-preview pre code { background: none; padding: 0; }
.markdown-preview blockquote {
  margin: 0 0 12px; padding: 4px 14px;
  border-left: 3px solid var(--c-gray-300); color: var(--c-gray-500);
}
.markdown-preview table { border-collapse: collapse; margin: 0 0 12px; }
.markdown-preview th, .markdown-preview td {
  border: 1px solid var(--c-gray-200); padding: 6px 10px;
}
.markdown-preview th { background: var(--c-gray-50); font-weight: 600; }

/* Mermaid placeholder shown until the lazy-loaded module resolves.
   The .mermaid-block container is preserved so future authoring tools
   can decorate it; SVG output replaces only the inner contents. */
.markdown-preview .mermaid-block {
  margin: 12px 0;
  text-align: center;
}
.markdown-preview .mermaid-block svg { max-width: 100%; height: auto; }
.markdown-preview .mermaid-placeholder {
  background: var(--c-gray-100); color: var(--c-gray-500);
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: var(--text-sm); line-height: 1.5;
  text-align: left; white-space: pre-wrap;
}
.markdown-preview .mermaid-error {
  background: var(--c-danger-bg); color: var(--c-danger-fg);
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: var(--text-sm); line-height: 1.5;
  text-align: left; white-space: pre-wrap;
}

/* Browser-native selection styling inside the preview — replaces the
   PM selection-highlight plugin that lived in Tiptap's surface. The
   SelectionTooltip's onMouseDown preventDefault keeps the selection
   visible while the tooltip captures input. */
.markdown-preview ::selection {
  background: rgba(99, 102, 241, 0.22);
}

/* Tracked-change overlay (Phase 3, §8.10) — green/red decorations on
   accepted-change spans inside the rendered preview. The Contribute
   pane shows these by default; the Discuss pane gates them behind a
   toolbar toggle. Hovering surfaces a ChangeTooltip with the source
   message and reason. */
.markdown-preview .tracked-delete {
  background: var(--c-danger-bg); color: var(--c-danger-fg); text-decoration: line-through;
  border-radius: var(--radius-xs); padding: 1px 2px; cursor: pointer;
  margin-right: 2px;
}
.markdown-preview .tracked-insert {
  background: var(--c-success-bg); color: var(--c-success-fg);
  border-radius: var(--radius-xs); padding: 1px 2px; cursor: pointer;
}

.cm-source-editor .cm-editor {
  flex: 1; min-height: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--text-base); line-height: 1.6;
  background: var(--c-white);
}
.cm-source-editor .cm-editor.cm-focused { outline: none; }
.cm-source-editor .cm-scroller { padding: 24px 0; }
.cm-source-editor .cm-content { padding: 0 32px; max-width: 880px; }
.cm-source-editor .cm-gutters {
  background: var(--c-gray-50); border-right: 1px solid var(--c-gray-150); color: var(--c-gray-400);
}
.cm-source-editor .cm-activeLineGutter { background: var(--c-gray-100); color: var(--c-gray-500); }
.cm-source-editor .cm-activeLine { background: var(--c-gray-50); }

/* §8.10 paragraph-margin marker (Phase 4) — gutter accent on lines
   that differ from the open-session baseline (last server-confirmed
   body). A scannable "did anything change in this region?" cue,
   visually distinct from the preview pane's green/red tracked-insert
   / tracked-delete overlay. Amber signals in-flight / uncommitted. */
.cm-source-editor .cm-diff-gutter {
  width: 3px; padding: 0;
  background: transparent;
}
.cm-source-editor .cm-diff-gutter .cm-gutterElement {
  padding: 0;
}
.cm-source-editor .cm-diff-gutter-mark {
  width: 3px; height: 100%;
  background: #f59e0b;
}

.readonly-bar {
  border-top: 1px solid var(--c-gray-200);
  padding: 10px 16px; text-align: center;
  font-size: var(--text-base); color: var(--c-gray-500); background: var(--c-gray-50);
}
.readonly-bar a { color: var(--c-ink); font-weight: 600; }

/* ── Prompt bar ──────────────────────────────────────────────────────── */

.prompt-bar {
  border-top: 1px solid var(--c-gray-200);
  background: var(--c-white);
  padding: 12px 48px;
  flex-shrink: 0;
}
.selection-badge {
  font-size: var(--text-sm); color: var(--c-accent);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.selection-icon { font-size: var(--text-2xs); }
.prompt-row {
  display: flex; gap: 10px; align-items: flex-end;
  max-width: 720px; margin: 0 auto;
}
.prompt-input {
  flex: 1; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg);
  padding: 9px 13px; font-size: var(--text-md); font-family: inherit;
  resize: none; line-height: 1.5; outline: none;
  min-height: 40px; max-height: 120px;
}
.prompt-input:focus { border-color: var(--c-ink); }
.prompt-submit {
  background: var(--c-ink); color: var(--c-white); border: none;
  border-radius: var(--radius-lg); padding: 9px 16px;
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
  height: 40px;
}
.prompt-submit:disabled { background: var(--c-gray-300); cursor: default; }

/* ── Model picker ──────────────────────────────────────────────────── */

.model-picker { display: flex; gap: 4px; padding: 0 4px; flex-shrink: 0; }
.model-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
  border: 1px solid var(--c-gray-200); background: none; color: var(--c-gray-500);
  cursor: pointer;
}
.model-pill:hover { border-color: var(--c-gray-400); color: var(--c-gray-700); }
.model-pill.active { font-weight: 700; }
.model-dot { width: 7px; height: 7px; border-radius: 50%; }

/* ── Selection tooltip ───────────────────────────────────────────────── */

.selection-tooltip {
  position: fixed; z-index: 100;
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 8px 10px;
  width: max-content; min-width: 320px; max-width: 480px;
  display: flex; flex-direction: column; gap: 6px;
}
.selection-tooltip-quote {
  font-size: var(--text-xs); color: var(--c-gray-500); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selection-tooltip-tabs { display: flex; gap: 4px; }
.selection-tooltip-tab {
  background: none; border: 1px solid transparent;
  font-size: var(--text-sm); padding: 3px 10px; border-radius: var(--radius-md);
  cursor: pointer; color: var(--c-gray-500);
}
.selection-tooltip-tab.active { background: var(--c-ink); color: var(--c-white); }
.selection-tooltip-input-row { display: flex; gap: 6px; align-items: center; }
.selection-tooltip-input {
  flex: 1; border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: var(--text-base); font-family: inherit; outline: none;
  background: var(--c-gray-50);
}
.selection-tooltip-input:focus { border-color: var(--c-ink); background: var(--c-white); }
.selection-tooltip-btn {
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 6px 12px; font-size: var(--text-base); font-weight: 600; cursor: pointer;
}
.selection-tooltip-btn:disabled { background: var(--c-gray-300); cursor: default; }

/* ── Right panel (chat + change panel) ───────────────────────────────── */

/* Phase 6 — narrow viewport (<1280px) defaults: the right panel is an
   off-canvas drawer sliding in from the right. The header (.app-header)
   is 48px tall and stays visible above the drawer so branch/breadcrumb
   navigation remains accessible. The @media (min-width: 1280px) block
   below restores the inline three-column layout. */
.right-panel {
  position: fixed;
  top: var(--header-height); right: 0; bottom: 0;
  width: min(420px, 92vw);
  border-left: 1px solid var(--c-gray-200);
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--c-white);
  transform: translateX(100%);
  transition: transform 150ms ease;
  z-index: 30;
  box-shadow: -8px 0 24px rgba(0,0,0,0.08);
}
.right-panel.drawer-open { transform: translateX(0); }

.right-panel-backdrop {
  position: fixed; inset: var(--header-height) 0 0 0;
  background: rgba(0,0,0,0.2);
  z-index: 29;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.right-panel-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* Chat drawer toggle button — sits in the editor toolbar at narrow widths
   and gets hidden above 1280px (where the right panel is always inline). */
.btn-chat-drawer-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 4px 10px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.btn-chat-drawer-toggle.active { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.btn-chat-drawer-toggle .badge {
  font-size: var(--text-2xs); padding: 1px 6px;
  background: var(--c-warning-accent); color: var(--c-white); border-radius: var(--radius-xl);
}
.btn-chat-drawer-toggle.active .badge { background: var(--c-white); color: var(--c-ink); }

/* When the drawer is open at narrow widths, scoot the editor toolbar's
   content left so the Chat toggle button is not hidden under the drawer.
   The toggle has margin-left: auto, so padding-right on the toolbar
   effectively shifts it left by the drawer's footprint, keeping "click
   toggle again to close" reachable. The @media (min-width: 1280px) block
   below resets this. */
.rfc-body.drawer-open .editor-toolbar {
  padding-right: calc(min(420px, 92vw) + 8px);
}

@media (min-width: 1280px) {
  /* Restore inline three-column layout above the 1280px breakpoint. */
  .rfc-body.drawer-open .editor-toolbar { padding-right: 16px; }
  .right-panel {
    position: static;
    top: auto; right: auto; bottom: auto;
    width: 360px; flex-shrink: 0;
    transform: none;
    transition: none;
    z-index: auto;
    box-shadow: none;
  }
  .right-panel-backdrop { display: none; }
  .btn-chat-drawer-toggle { display: none; }
  .editor-toolbar-narrow-only { display: none; }
}

.chat-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.chat-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-gray-150);
  background: var(--c-gray-50);
  display: flex; flex-direction: column; gap: 4px;
}
.chat-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-header-title { font-size: var(--text-sm); color: var(--c-gray-500); }
.chat-fork-link {
  background: none; border: none; padding: 0;
  font-size: var(--text-xs); color: var(--c-accent); cursor: pointer;
}
.chat-thread-disclosure {
  font-size: var(--text-xs); color: var(--c-gray-500);
  display: flex; gap: 4px; align-items: center;
}
.chat-thread-flag-count { color: var(--c-warning-accent); }
.chat-filter-clear {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--c-accent);
}
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.chat-empty p { font-size: var(--text-base); color: var(--c-gray-500); line-height: 1.6; max-width: 240px; }

.chat-message { display: flex; flex-direction: column; gap: 3px; }
.chat-message.user { align-items: flex-end; }
.chat-message.assistant { align-items: flex-start; }
.chat-message.system { align-items: stretch; }
.chat-message.flag { align-items: stretch; }
.chat-message.in-thread { padding-left: 12px; border-left: 2px solid #c4b5fd; }

.chat-bubble {
  max-width: 92%;
  padding: 8px 11px; border-radius: var(--radius-xl);
  font-size: var(--text-base); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.chat-message.user .chat-bubble {
  background: var(--c-ink); color: var(--c-white); border-bottom-right-radius: 4px;
}
.chat-message.assistant .chat-bubble {
  background: var(--c-gray-100); color: var(--c-ink); border-bottom-left-radius: 4px;
}
.chat-message.streaming .chat-bubble { opacity: 0.85; }
.chat-thinking { color: var(--c-gray-500); font-style: italic; }
.chat-cursor {
  display: inline-block; width: 2px; height: 12px;
  background: var(--c-violet); margin-left: 2px; vertical-align: middle;
  animation: blink 0.75s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.chat-quote {
  font-size: var(--text-xs); color: var(--c-gray-500); font-style: italic;
  border-left: 2px solid var(--c-gray-300); padding-left: 7px; margin-bottom: 3px;
  max-width: 92%; align-self: flex-end;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-anchor-preview {
  font-size: var(--text-2xs); color: var(--c-gray-500); font-style: italic;
}

.chat-model-label {
  font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; gap: 4px; padding-left: 2px;
}
.chat-model-dot { width: 6px; height: 6px; border-radius: 50%; }

.chat-change-hint {
  align-self: flex-start;
  background: none; border: none; padding: 0;
  font-size: var(--text-xs); color: var(--c-violet); font-weight: 600;
  cursor: pointer;
}
.chat-change-hint.discuss { color: var(--c-warning-accent); }
.chat-change-hint-cta {
  background: none; border: none; padding: 0;
  color: var(--c-accent); font-weight: 600; cursor: pointer; text-decoration: underline;
}

.chat-system-bubble {
  font-size: var(--text-xs); color: var(--c-gray-500); font-style: italic;
  border-top: 1px dashed var(--c-gray-200); padding-top: 8px;
}
.chat-flag-row {
  display: flex; gap: 8px;
  padding: 8px 10px;
  background: var(--c-warning-bg-soft); border: 1px solid #fdba74; border-radius: var(--radius-lg);
}
.chat-flag-icon { color: #c2410c; font-size: var(--text-md); }
.chat-flag-content { flex: 1; }
.chat-flag-author { font-size: var(--text-xs); font-weight: 700; color: #9a3412; }
.chat-flag-text { font-size: var(--text-base); color: var(--c-ink); margin-top: 2px; }
.chat-flag-resolve {
  margin-top: 6px;
  background: none; border: 1px solid #fdba74;
  border-radius: var(--radius-md); padding: 2px 8px;
  font-size: var(--text-xs); color: #c2410c; cursor: pointer;
}

/* ── Change panel ──────────────────────────────────────────────── */

.change-panel {
  border-top: 1px solid var(--c-gray-200);
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
  max-height: 50%;
}
.change-panel-header {
  padding: 12px 14px;
  font-size: var(--text-base); font-weight: 600;
  border-bottom: 1px solid var(--c-gray-150);
  display: flex; align-items: center; gap: 8px;
}
.badge {
  background: var(--c-warning-accent); color: var(--c-white);
  font-size: var(--text-xs); padding: 2px 7px; border-radius: var(--radius-xl);
}
.change-list { flex: 1; overflow-y: auto; padding: 8px; }
.change-group-label {
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-gray-400); padding: 8px 6px 4px;
}
.change-group-label.muted { color: var(--c-gray-300); }

.change-item {
  border-radius: var(--radius-lg);
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--c-gray-200);
  font-size: var(--text-base);
}
.change-item.type-claude { border-left: 3px solid var(--c-accent); }
.change-item.type-manual { border-left: 3px solid var(--c-gray-500); }
.change-item.state-accepted { opacity: 0.5; }
.change-item.state-declined { opacity: 0.4; }
.change-item.stale { border-color: #fbbf24; background: var(--c-warning-bg-soft); }
.change-item.focused {
  animation: change-focus-flash 1.8s ease forwards;
}
@keyframes change-focus-flash {
  0%   { box-shadow: 0 0 0 3px #3b82f6; }
  70%  { box-shadow: 0 0 0 3px #3b82f6; }
  100% { box-shadow: none; }
}
.change-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.change-author { font-weight: 600; font-size: var(--text-sm); }
.change-state-badge {
  font-size: var(--text-2xs); padding: 2px 7px; border-radius: var(--radius-xl);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.change-state-badge.pending { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.change-state-badge.accepted { background: var(--c-success-bg); color: var(--c-success-fg); }
.change-state-badge.declined { background: #f1f5f9; color: var(--c-gray-400); }
.change-state-badge.stale { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.change-label { color: var(--c-gray-600); margin-bottom: 6px; line-height: 1.4; }
.change-stale-banner {
  font-size: var(--text-xs); color: var(--c-warning-fg);
  background: var(--c-warning-bg); border-radius: var(--radius-sm);
  padding: 4px 8px; margin-bottom: 6px;
}
.change-manual-status {
  font-size: var(--text-xs); color: var(--c-gray-500);
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}

/* §8.11 Phase 5 — per-paragraph word-diff inside the pending manual
   card. Shares Phase 3's green/red register with .markdown-preview
   .tracked-insert / .tracked-delete so the contributor sees one
   "change layer" vocabulary across the preview pane (accepted) and the
   change card (their own pending typing). Scoped under its own class
   rather than reusing the preview selectors since the card is not
   inside .markdown-preview. */
.change-manual-diff {
  margin: 6px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.change-manual-diff-block {
  font-size: var(--text-sm); line-height: 1.6;
  background: var(--c-gray-50); border-radius: var(--radius-sm);
  padding: 6px 8px; border: 1px solid var(--c-gray-200);
  white-space: pre-wrap; word-break: break-word;
}
.change-manual-diff .manual-diff-insert {
  background: var(--c-success-bg); color: var(--c-success-fg);
  border-radius: var(--radius-xs); padding: 1px 2px;
}
.change-manual-diff .manual-diff-delete {
  background: var(--c-danger-bg); color: var(--c-danger-fg);
  text-decoration: line-through;
  border-radius: var(--radius-xs); padding: 1px 2px;
}
.btn-save-now {
  background: none; border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-sm); padding: 2px 8px;
  font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.change-source-link {
  background: none; border: none; padding: 0;
  font-size: var(--text-xs); color: var(--c-accent); cursor: pointer;
  display: block; margin-top: 4px;
}
.change-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn-accept {
  background: var(--c-success-fg); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 5px 10px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.btn-edit {
  background: none; border: 1px solid #c4b5fd; color: var(--c-violet);
  border-radius: var(--radius-md); padding: 5px 10px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.btn-decline {
  background: none; border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md); padding: 5px 10px; font-size: var(--text-sm); cursor: pointer;
}
.btn-reask {
  background: none; border: 1px solid #fbbf24; color: var(--c-warning-fg);
  border-radius: var(--radius-md); padding: 5px 10px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.diff-edit-textarea {
  width: 100%; font-size: var(--text-sm); font-family: inherit;
  line-height: 1.5; border: 1px solid #c4b5fd;
  border-radius: var(--radius-sm); padding: 6px; resize: vertical;
}
.inline-diff {
  font-size: var(--text-sm); line-height: 1.7;
  background: var(--c-gray-50); border-radius: var(--radius-sm);
  padding: 8px 10px;
  white-space: pre-wrap; word-break: break-word;
  border: 1px solid var(--c-gray-200);
}
.diff-word-add {
  background: var(--c-success-bg); color: var(--c-success-fg);
  border-radius: var(--radius-xs); padding: 1px 1px;
}
.diff-word-remove {
  background: var(--c-danger-bg); color: var(--c-danger-fg);
  text-decoration: line-through;
  border-radius: var(--radius-xs); padding: 1px 1px;
}
.text-fade { color: var(--c-gray-400); }
.expand-toggle {
  display: block; margin-top: 5px;
  background: none; border: none; padding: 0;
  font-size: var(--text-xs); font-weight: 600; color: var(--c-violet);
  cursor: pointer; text-decoration: underline;
}

.change-stub {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--c-gray-500);
  padding: 4px 6px; border-bottom: 1px solid var(--c-gray-100);
}
.change-stub .stub-author { font-weight: 600; color: var(--c-gray-500); }
.change-stub .stub-badge {
  font-size: 9px; padding: 1px 5px; border-radius: var(--radius-lg);
}
.change-stub .stub-badge.accepted { background: var(--c-success-bg); color: var(--c-success-fg); }
.change-stub .stub-badge.declined { background: #f1f5f9; color: var(--c-gray-400); }
.change-stub .stub-reason { flex: 1; color: var(--c-gray-500); }
.change-stub .stub-source-link {
  background: none; border: none; padding: 0;
  font-size: var(--text-xs); color: var(--c-accent); cursor: pointer;
}

.contribution-cta {
  border-top: 1px solid var(--c-gray-200);
  background: var(--c-gray-50);
  padding: 16px;
  text-align: center;
}
.contribution-cta-count {
  font-size: var(--text-base); font-weight: 600; color: var(--c-ink);
}
.contribution-cta-desc {
  font-size: var(--text-sm); color: var(--c-gray-500); margin: 6px 0 12px;
}
.btn-start-contribution {
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
}

/* ── ChangeTooltip (shared between the Phase 3 preview-pane overlay
   and the §8.10 hover affordance) ─────────────────────────────────── */

.diff-tooltip {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg); padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  max-width: 320px; font-size: var(--text-sm);
  z-index: 200;
}
.diff-tooltip-header {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.diff-tooltip-badge {
  font-size: var(--text-2xs); padding: 2px 7px; border-radius: var(--radius-lg);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.diff-tooltip-badge--manual { background: #f1f5f9; color: var(--c-gray-600); }
.diff-tooltip-badge--edited { background: #faf5ff; color: var(--c-violet); }
.diff-tooltip-prompt {
  border-top: 1px solid var(--c-gray-150);
  padding-top: 6px;
  font-size: var(--text-xs); color: var(--c-gray-600);
}
.diff-tooltip-quote {
  font-style: italic; color: var(--c-gray-500); margin-bottom: 4px;
}
.diff-tooltip-reason {
  border-top: 1px solid var(--c-gray-150);
  padding-top: 6px; margin-top: 6px;
  color: var(--c-gray-500);
}
.diff-tooltip-reason-label {
  display: inline-block; font-size: 9px; font-weight: 700;
  color: var(--c-gray-500); text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 6px;
}
.diff-tooltip-no-context {
  font-size: var(--text-xs); color: var(--c-gray-400); font-style: italic;
}

/* ── Slice 3: the §10 PR flow surfaces ─────────────────────────────── */

.pr-modal { max-width: 640px; }
.pr-modal-warning {
  background: var(--c-warning-bg); border: 1px solid #fbbf24;
  padding: 10px 12px; border-radius: var(--radius-md); margin-bottom: 14px;
  font-size: var(--text-sm); line-height: 1.5;
}
.pr-modal-warning p { margin: 0 0 6px 0; }
.modal-label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  color: var(--c-gray-500); margin: 10px 0 4px; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal-input, .modal-textarea {
  width: 100%; padding: 7px 10px; font-size: var(--text-base);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm); box-sizing: border-box;
  font-family: inherit;
}
.modal-textarea { resize: vertical; min-height: 100px; }
.btn-open-pr { background: var(--c-ink); color: var(--c-white); border: none;
  padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.btn-open-pr:hover { background: var(--c-gray-700); }

/* PR view header strip + two-column body */
.pr-view { display: flex; flex-direction: column; height: 100%; }
.pr-header {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--c-gray-200);
  background: var(--c-gray-50);
}
.pr-header-left { min-width: 0; }
.pr-breadcrumb { font-size: var(--text-xs); color: var(--c-gray-500); margin-bottom: 6px; }
.pr-breadcrumb a { color: var(--c-accent); text-decoration: none; }
.pr-breadcrumb a:hover { text-decoration: underline; }
.pr-title { font-size: var(--text-xl); margin: 0 0 6px 0; }
.pr-description { font-size: var(--text-base); color: var(--c-gray-600); margin: 0 0 6px 0; line-height: 1.55; }
/* Roadmap #28 Part 1: inline auto-links to referenced RFCs inside PR text
   and comments. Subtle accent + dotted underline so they read as enriched
   references, not as primary navigation. */
.rfc-autolink {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  font-weight: 500;
}
.rfc-autolink:hover { text-decoration-style: solid; }

/* #28 Parts 2–3: a matched term that isn't a live link but carries an
   offer (contribute to a pending RFC / create a new one). The term reads
   as enriched (dotted underline, no link colour); the offer is a small
   trailing chip so the prose stays readable. */
.rfc-pending, .rfc-candidate {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.rfc-offer {
  margin-left: 4px;
  padding: 0 5px;
  font-size: 0.74em;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--color-border, #ccc);
  color: var(--color-link);
}
.rfc-offer:hover { background: var(--color-surface-alt, rgba(0,0,0,0.04)); }
.rfc-offer-create { border-style: dashed; }
.pr-header-edit { display: flex; flex-direction: column; gap: 8px; }
.pr-header-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-size: var(--text-sm);
}
.pr-state-banner {
  padding: 3px 10px; border-radius: var(--radius-xl);
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pr-state-banner.open { background: var(--c-success-bg); color: #14532d; }
.pr-state-banner.merged { background: #ddd6fe; color: #4c1d95; }
.pr-state-banner.withdrawn { background: var(--c-warning-bg); color: #78350f; }
.pr-state-banner.closed { background: var(--c-gray-200); color: var(--c-gray-700); }
.pr-counts { display: flex; gap: 12px; font-size: var(--text-xs); color: var(--c-gray-500); }
.pr-count-flags { color: var(--c-warning-accent); font-weight: 600; font-size: var(--text-base); }
.pr-supersedes { font-size: var(--text-xs); color: var(--c-gray-500); }
.pr-supersedes a { color: var(--c-accent); text-decoration: none; }
.pr-conflict-banner {
  background: var(--c-danger-bg); border: 1px solid var(--c-danger-border);
  padding: 10px 12px; border-radius: var(--radius-md);
  font-size: var(--text-sm); line-height: 1.5; max-width: 320px;
}
.pr-conflict-banner p { margin: 0 0 8px 0; }
.pr-actions { display: flex; gap: 8px; }

.pr-body { display: grid; grid-template-columns: 1fr 360px; flex: 1; overflow: hidden; }

.diff-mode-toolbar {
  display: flex; gap: 12px; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid var(--c-gray-150);
  font-size: var(--text-sm);
}
.diff-mode-toolbar .btn-link.active {
  font-weight: 600; color: var(--c-white);
  background: var(--c-ink); border-color: var(--c-ink);
}
.pr-diff-accent {
  margin-left: auto;
  font-size: var(--text-xs); color: var(--c-accent); font-weight: 600;
}

.diff-pane { flex: 1; overflow: auto; font-family: 'SF Mono', Monaco, monospace; font-size: var(--text-sm); }
.diff-pane.diff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-gray-200); }
.diff-col { background: var(--c-white); overflow: auto; }
.diff-col-header {
  padding: 4px 10px; background: var(--c-gray-100); font-weight: 600;
  font-size: var(--text-xs); color: var(--c-gray-500); border-bottom: 1px solid var(--c-gray-200);
}
.diff-row {
  display: flex; padding: 1px 8px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}
.diff-row.diff-equal { color: var(--c-gray-700); }
.diff-row.diff-del { background: var(--c-danger-bg); color: #7f1d1d; }
.diff-row.diff-add { background: var(--c-success-bg); color: #14532d; }
.diff-row.diff-empty { background: var(--c-gray-50); color: var(--c-gray-300); }
.diff-marker { width: 16px; opacity: 0.5; user-select: none; }
.diff-text { flex: 1; }

/* PR conversation — chat + review interleaved */
.pr-conversation { padding: 10px 12px; overflow-y: auto; }
.pr-conv-disclosure {
  display: flex; gap: 12px; font-size: var(--text-xs); color: var(--c-gray-500);
  padding-bottom: 6px; border-bottom: 1px solid var(--c-gray-150); margin-bottom: 10px;
}
.thread-disclosure strong { color: var(--c-ink); }
.chat-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.chat-msg {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: var(--radius-md); background: var(--c-gray-50);
  font-size: var(--text-sm); line-height: 1.55;
}
.chat-msg-review { background: #ede9fe; border-left: 3px solid var(--c-violet); }
.chat-msg-flag { background: var(--c-warning-bg); border-left: 3px solid #d97706; }
.chat-msg-new { box-shadow: 0 0 0 2px #c7d2fe; }
.chat-msg-header { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--c-gray-500); }
.chat-msg-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.chat-msg-badge.review { background: var(--c-violet); color: var(--c-white); }
.chat-msg-badge.flag { background: #d97706; color: var(--c-white); }
.chat-msg-author { font-weight: 600; color: var(--c-ink); }
.chat-msg-new-pip { color: var(--c-accent); }
.chat-msg-quote {
  background: var(--c-white); border-left: 2px solid var(--c-gray-300);
  padding: 4px 8px; font-size: var(--text-xs); color: var(--c-gray-500);
  margin: 0; white-space: pre-wrap;
}
.chat-msg-body { white-space: pre-wrap; }

.pr-review-composer {
  border-top: 1px solid var(--c-gray-200); padding: 10px 12px;
  background: var(--c-gray-50);
}
.pr-review-quote { font-size: var(--text-xs); color: var(--c-gray-500); margin-bottom: 6px; }
.pr-review-quote pre { background: var(--c-white); padding: 4px 8px; border-radius: var(--radius-sm); margin: 4px 0 0 0; }

/* ── Slice 5: §13 graduation dialog ──────────────────────────────────── */

.modal-wide { width: min(720px, 92vw); }
.modal-intro { margin: 0 0 16px 0; font-size: var(--text-base); color: var(--c-gray-600); line-height: 1.55; }

.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.form-row label { font-weight: 600; font-size: var(--text-sm); color: var(--c-ink); }
.form-row input, .form-row textarea {
  font: inherit; padding: 6px 8px; border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
}
.field-help { font-size: var(--text-xs); color: var(--c-gray-500); margin: 2px 0 0 0; }
.field-error { font-size: var(--text-sm); color: var(--c-danger-fg-strong); margin: 4px 0 0 0; }

.owner-list {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px;
  padding: 4px 0;
}
.owner-empty { font-size: var(--text-sm); color: var(--c-gray-500); font-style: italic; }
.owner-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef2ff; color: #3730a3; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}
.owner-chip-x {
  background: none; border: none; cursor: pointer; color: var(--c-gray-500);
  font-size: var(--text-md); line-height: 1; padding: 0 2px;
}
.owner-chip-x:hover { color: var(--c-danger-fg-strong); }
.owner-picker { display: flex; gap: 6px; margin-top: 6px; }
.owner-picker input { flex: 1; }

.precondition-block { margin-top: 12px; padding: 10px; background: var(--c-danger-bg); border-radius: var(--radius-md); border: 1px solid var(--c-danger-border); }
.precondition-toggle {
  background: none; border: none; cursor: pointer; color: var(--c-danger-fg-strong); font-weight: 600;
  font-size: var(--text-base); padding: 0;
}
.precondition-popover { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.precondition-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--c-white); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--c-gray-100);
}
.precondition-row-meta { font-size: var(--text-xs); color: var(--c-gray-500); }
.precondition-row-actions a { color: var(--c-accent); }
.precondition-help { font-size: var(--text-xs); color: var(--c-gray-500); margin: 4px 0 0 0; font-style: italic; }

.btn-graduate { margin-left: 6px; }

.step-stack { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.step-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-md); background: var(--c-gray-50); border: 1px solid var(--c-gray-100);
}
.step-row.step-running { background: #eff6ff; border-color: #bfdbfe; }
.step-row.step-done    { background: #f0fdf4; border-color: #bbf7d0; }
.step-row.step-failed  { background: var(--c-danger-bg); border-color: var(--c-danger-border); }
.step-row.step-not-reached { opacity: 0.45; }
.step-marker {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-gray-300);
}
.step-marker-pending     { background: var(--c-gray-300); }
.step-marker-running     { background: #3b82f6; animation: pulse 1s ease-in-out infinite; }
.step-marker-done        { background: #10b981; }
.step-marker-failed      { background: #ef4444; }
.step-marker-not-reached { background: var(--c-gray-200); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.step-label { font-weight: 600; font-size: var(--text-base); color: var(--c-ink); }
.step-detail { font-size: var(--text-xs); color: var(--c-gray-500); margin-top: 2px; }
.step-status-pill {
  font-size: var(--text-2xs); font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pill-pending     { background: var(--c-gray-200); color: var(--c-gray-600); }
.pill-running     { background: #3b82f6; color: var(--c-white); }
.pill-done        { background: #10b981; color: var(--c-white); }
.pill-failed      { background: #ef4444; color: var(--c-white); }
.pill-not-reached { background: var(--c-gray-200); color: var(--c-gray-400); }

.rollback-divider {
  margin: 10px 0 6px 0; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-danger-fg-strong); font-weight: 700;
}

.what-happened {
  margin-top: 14px; padding: 12px; background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border); border-radius: var(--radius-md);
}
.what-happened h3 { margin: 0 0 6px 0; font-size: var(--text-md); color: var(--c-danger-fg); }
.what-happened p { margin: 0 0 6px 0; font-size: var(--text-base); color: var(--c-gray-600); line-height: 1.55; }
.graduation-complete {
  margin-top: 14px; padding: 12px; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: var(--radius-md);
}
.graduation-complete h3 { margin: 0 0 6px 0; font-size: var(--text-md); color: var(--c-success-fg); }
.graduation-complete p { margin: 0; font-size: var(--text-base); color: #14532d; line-height: 1.55; }

.modal-progress-note { font-size: var(--text-sm); color: var(--c-gray-500); }
.modal-error {
  padding: 8px 12px; background: var(--c-danger-bg); color: var(--c-danger-fg);
  border-top: 1px solid var(--c-danger-border); font-size: var(--text-sm);
}
.rfc-error-banner {
  padding: 8px 12px; background: var(--c-danger-bg); color: var(--c-danger-fg);
  border-bottom: 1px solid var(--c-danger-border); font-size: var(--text-sm);
}

.branch-dropdown-section {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-gray-500); padding: 8px 10px 4px 10px; font-weight: 700;
}
.branch-dropdown-item.pre-graduation {
  font-style: italic; color: var(--c-gray-600);
}
.branch-dropdown-item.pre-graduation .branch-meta {
  font-size: var(--text-2xs); color: var(--c-gray-400); margin-left: auto;
}

/* ---- §15 / Slice 6: inbox, badge, toasts ---- */

/* Lives on the dark header — so it speaks the nav-link vocabulary
   (.header-about et al.): borderless, gray-300 icon brightening to white
   on a faint translucent-white hover. The old light-gray border + gray-50
   hover were styled for a light surface and rendered as a pale box that
   went white-on-white (invisible icon) on hover. */
.inbox-trigger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--c-gray-300); cursor: pointer;
  padding: 5px 8px; border-radius: var(--radius-sm);
}
.inbox-trigger:hover { color: var(--c-white); background: rgba(255,255,255,0.08); }
.inbox-trigger .badge {
  position: absolute; top: -6px; right: -6px;
  background: #dc2626; color: white; font-size: var(--text-2xs);
  border-radius: var(--radius-pill); padding: 1px 5px; font-weight: 700;
  min-width: 16px; text-align: center;
}

.inbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.25);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 60px; z-index: 100;
}
.inbox-panel {
  background: white; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg);
  width: 720px; max-width: 90vw; max-height: 80vh;
  display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.inbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--c-gray-200);
}
.inbox-header h2 { margin: 0; font-size: var(--text-lg); }
.inbox-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--c-gray-100); align-items: center;
}
.inbox-filters .chip {
  font-size: var(--text-sm); padding: 4px 8px; background: var(--c-gray-50);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 4px;
}
.inbox-filters .chip input[type=checkbox] { margin-right: 2px; }
.inbox-filters select.chip { padding: 4px 8px; }

.inbox-body { overflow-y: auto; flex: 1; }
.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-row { border-bottom: 1px solid var(--c-gray-100); }
.inbox-row.unread { background: var(--c-warning-bg-soft); }
.inbox-row-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  text-decoration: none; color: inherit;
}
.inbox-row-link:hover { background: var(--c-gray-50); }
.inbox-cat {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 700;
}
.inbox-cat.cat-personal-direct { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.inbox-cat.cat-structural { background: #dbeafe; color: #1e40af; }
.inbox-cat.cat-churn { background: var(--c-gray-100); color: var(--c-gray-600); }
.inbox-summary { flex: 1; font-size: var(--text-base); }
.inbox-bundle-count {
  font-size: var(--text-xs); color: var(--c-gray-500);
  background: var(--c-gray-100); padding: 1px 6px; border-radius: var(--radius-pill);
}
.inbox-when { font-size: var(--text-xs); color: var(--c-gray-400); }

.toast-host {
  position: fixed; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px; z-index: 200;
}
.toast {
  padding: 10px 14px; background: white; border: 1px solid var(--c-gray-200);
  border-left: 4px solid var(--c-gray-500); border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); font-size: var(--text-base);
  max-width: 360px; cursor: pointer;
}
.toast.cat-personal-direct { border-left-color: #d97706; }
.toast.cat-structural { border-left-color: #2563eb; }
.toast.cat-churn { border-left-color: var(--c-gray-500); }

/* ── Slice 7: §14 chrome + /settings/notifications + /admin ──────────── */

/* Header chrome — the persistent §14.3 About link plus the Settings and
   Admin entrypoints. The header's job is to be invisible until the user
   reaches for it, so these read as quiet text links rather than buttons. */
.header-about, .header-settings, .header-admin {
  color: var(--c-gray-300); text-decoration: none;
  font-size: var(--text-sm); letter-spacing: 0.02em;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.header-about:hover, .header-settings:hover, .header-admin:hover {
  color: var(--c-white); background: rgba(255,255,255,0.08);
}
.header-admin {
  color: #fbbf24;  /* admin link sits a notch warmer to signal authority */
}

/* /philosophy — the §14.2 read surface. The body uses the shared
   markdown styling; the header is a thin chrome strip. */
.chrome-pane {
  flex: 1; min-width: 0; overflow: auto;
  padding: 0; background: var(--c-white);
}

.philosophy-page {
  max-width: 760px; margin: 0 auto;
  padding: 24px 32px 64px;
}
.philosophy-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--c-gray-150);
  margin-bottom: 28px;
}
.philosophy-back {
  border: none; background: none; cursor: pointer;
  color: var(--c-gray-600); font-size: var(--text-base);
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.philosophy-back:hover { background: var(--c-gray-100); color: var(--c-gray-900); }
.philosophy-title {
  font-size: var(--text-base); color: var(--c-gray-500);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.philosophy-signin {
  margin-left: auto;
  font-size: var(--text-base); color: var(--c-gray-600); text-decoration: none;
}
.philosophy-signin:hover { color: var(--c-gray-900); text-decoration: underline; }

.philosophy-body h1 {
  font-size: var(--text-3xl); font-weight: 700; margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.philosophy-body h2 {
  font-size: var(--text-xl); font-weight: 600; margin: 36px 0 12px;
  color: var(--c-gray-900);
}
.philosophy-body h3 {
  font-size: var(--text-lg); font-weight: 600; margin: 24px 0 10px;
}
.philosophy-body p {
  margin: 0 0 16px; line-height: 1.65; font-size: var(--text-lg); color: var(--c-gray-800);
}
.philosophy-body em { color: var(--c-gray-600); font-style: italic; }
.philosophy-body strong { color: var(--c-gray-900); }
.philosophy-body ul, .philosophy-body ol {
  margin: 0 0 20px; padding-left: 24px;
}
.philosophy-body li { margin-bottom: 8px; line-height: 1.6; }
.philosophy-body hr {
  border: none; border-top: 1px solid var(--c-gray-200); margin: 32px 0;
}
.philosophy-body code {
  background: var(--c-gray-100); padding: 1px 5px; border-radius: var(--radius-sm);
  font-size: 0.92em;
}

/* Richer landing page (§14.1) — adds the three-item deck under the
   pitch. The .landing container handles flex centering; the new
   content lives inside .landing-inner. */
.landing-inner {
  max-width: 620px;
  display: flex; flex-direction: column; align-items: center;
}
.landing-deck {
  list-style: none; padding: 0;
  margin: 48px 0 0; text-align: left;
  display: flex; flex-direction: column; gap: 18px;
  border-top: 1px solid var(--c-gray-200); padding-top: 32px;
  max-width: 540px;
}
.landing-deck li {
  font-size: var(--text-md); line-height: 1.6; color: var(--c-gray-700);
}
.landing-deck strong { color: var(--c-gray-900); }

/* Attribution line below the deck — names Wiggleverse RFC as the
   underlying software, so a reader can tell this instance (OHM, run
   by Ben) apart from the substrate (the open-source process tool). */
.landing-attribution {
  max-width: 540px;
  margin: 32px 0 0; padding-top: 24px;
  border-top: 1px solid var(--c-gray-150);
  font-size: var(--text-sm); line-height: 1.6; color: var(--c-gray-500);
  text-align: center;
}
.landing-attribution strong { color: var(--c-gray-500); font-weight: 600; }

/* /settings/notifications */
.settings-page {
  max-width: 720px; margin: 0 auto;
  padding: 24px 32px 64px;
}
.settings-header h1 {
  margin: 0 0 6px; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em;
}
.settings-sub {
  color: var(--c-gray-500); font-size: var(--text-base); margin: 0 0 24px;
  line-height: 1.5;
}
.settings-section {
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 16px; background: var(--c-white);
}
.settings-section h2 {
  margin: 0 0 4px; font-size: var(--text-lg); font-weight: 600;
}
.settings-section-body { display: flex; flex-direction: column; gap: 12px; }
.settings-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quiet-hours-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--text-sm); color: var(--c-gray-500);
}
.quiet-hours-row input, .quiet-hours-row select {
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: var(--text-base);
  background: white; color: var(--c-gray-900);
}
.settings-note { font-size: var(--text-sm); color: var(--c-gray-500); margin: 0; }
.settings-note.warning { color: var(--c-danger-fg-strong); }

.toggle-row {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; padding: 10px 0;
  border-top: 1px solid var(--c-gray-100);
}
.toggle-row:first-child { border-top: none; padding-top: 0; }
.toggle-row.disabled { cursor: not-allowed; opacity: 0.6; }
.toggle-row input[type=checkbox] { margin-top: 3px; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-size: var(--text-md); font-weight: 500; color: var(--c-gray-900); }
.toggle-desc { font-size: var(--text-sm); color: var(--c-gray-500); line-height: 1.5; }

.btn-primary {
  background: var(--c-gray-900); color: var(--c-white); border: none;
  padding: 7px 14px; border-radius: var(--radius-md); font-size: var(--text-base); cursor: pointer;
}
.btn-primary:hover { background: var(--c-gray-700); }
.btn-primary:disabled { background: var(--c-gray-400); cursor: not-allowed; }
.btn-link-muted {
  background: none; border: none; cursor: pointer;
  color: var(--c-gray-500); font-size: var(--text-sm); padding: 4px 6px;
}
.btn-link-muted:hover { color: var(--c-gray-900); text-decoration: underline; }

.settings-table, .admin-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-base);
}
.settings-table th, .admin-table th {
  text-align: left; padding: 6px 8px;
  font-size: var(--text-xs); text-transform: uppercase; white-space: nowrap;
  color: var(--c-gray-500); letter-spacing: 0.05em; font-weight: 600;
  border-bottom: 1px solid var(--c-gray-200);
}
.settings-table td, .admin-table td {
  padding: 8px 8px; border-bottom: 1px solid var(--c-gray-100);
}
.settings-table select { font-size: var(--text-base); padding: 3px 6px; }
.set-by {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 600;
}
.set-by-auto { background: var(--c-gray-100); color: var(--c-gray-500); }
.set-by-explicit { background: #dbeafe; color: #1e40af; }

.mutes-list { list-style: none; padding: 0; margin: 8px 0 0; }
.mutes-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-bottom: 1px solid var(--c-gray-100);
  font-size: var(--text-base);
}
.mute-handle { font-weight: 500; color: var(--c-gray-900); }
.mute-when { font-size: var(--text-xs); margin-left: auto; }

.mute-typeahead { position: relative; }
.mute-typeahead input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 7px 10px; font-size: var(--text-base); outline: none;
}
.mute-typeahead input:focus { border-color: var(--c-gray-900); }
.mute-typeahead-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: white; border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 4px; padding: 4px 0; z-index: 10;
  list-style: none;
}
.mute-typeahead-results button {
  display: flex; gap: 10px; align-items: center;
  width: 100%; padding: 6px 10px;
  background: none; border: none; text-align: left; cursor: pointer;
  font-size: var(--text-base);
}
.mute-typeahead-results button:hover { background: var(--c-gray-50); }

/* /admin */
.admin-page {
  display: flex; height: 100%;
  width: 100%;
}
.admin-rail {
  width: 220px; flex-shrink: 0;
  background: var(--c-gray-50); border-right: 1px solid var(--c-gray-200);
  padding: 24px 16px;
}
.admin-rail h2 {
  font-size: var(--text-base); color: var(--c-gray-500);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.admin-rail ul { list-style: none; padding: 0; margin: 0 0 24px; }
.admin-rail li { margin-bottom: 2px; }
.admin-rail-link {
  display: block; padding: 6px 10px;
  font-size: var(--text-base); color: var(--c-gray-700); text-decoration: none;
  border-radius: var(--radius-sm);
}
.admin-rail-link:hover { background: var(--c-gray-100); }
.admin-rail-link.active { background: var(--c-gray-900); color: var(--c-white); }
.admin-rail-note {
  font-size: var(--text-xs); color: var(--c-gray-500); line-height: 1.5;
}
.admin-content {
  flex: 1; min-width: 0;
  padding: 28px 36px;
  overflow: auto;
}
.admin-tab-header h2 {
  margin: 0 0 4px; font-size: var(--text-xl); font-weight: 700;
}
.admin-tab-header p { margin: 0 0 24px; font-size: var(--text-base); max-width: 70ch; line-height: var(--leading-normal); }
/* Title row: heading on the left, primary action flush right. */
.admin-tab-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-7); margin-bottom: var(--space-2);
}
.admin-tab-heading h2 { margin: 0; }
.admin-tab-actions { flex-shrink: 0; }
/* Inline DB-column references in admin copy read as quiet chips, not raw
   monospace runs jammed against the sans body. */
.admin-tab-header code {
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--c-gray-100); color: var(--c-gray-700);
  padding: 1px 5px; border-radius: var(--radius-sm);
}
.admin-section-h {
  font-size: var(--text-base); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--c-gray-500);
  margin: 24px 0 8px;
}

.audit-filters {
  display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
}
.audit-filters input, .audit-filters select {
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 5px 9px; font-size: var(--text-base); background: white;
}
.audit-table code {
  font-size: var(--text-xs); background: var(--c-gray-100);
  padding: 1px 5px; border-radius: var(--radius-sm);
}

.allowlist-add {
  display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap;
  align-items: center;
}
.allowlist-add input[type="email"] {
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: var(--text-base); min-width: 240px;
}
.allowlist-add input[type="text"] {
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: var(--text-base); flex: 1; min-width: 200px;
}
.allowlist-add .btn-primary {
  background: var(--c-ink); color: var(--c-white);
  border: none; border-radius: var(--radius-md);
  padding: 6px 14px; font-size: var(--text-base); font-weight: 600;
  cursor: pointer;
}
.allowlist-add .btn-primary:hover:not(:disabled) { background: var(--c-gray-700); }
.allowlist-add .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.user-cell { display: flex; flex-direction: column; gap: 2px; }
.user-cell-handle { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.user-handle { font-weight: 500; color: var(--c-gray-900); }
/* "(pending invite)" — an unclaimed admin-created row. A quiet amber pill
   so the admin spots it at a glance without it shouting. */
.invite-badge {
  font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--c-warning-bg); color: var(--c-warning-fg);
  white-space: nowrap;
}
/* Timestamps: an intentional date-over-time stack rather than a ragged
   mid-value wrap. nowrap keeps each line whole. */
.user-when { white-space: nowrap; }
.user-when-date { display: block; color: var(--c-gray-700); }
.user-when-time { display: block; font-size: var(--text-xs); }
.mute-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-base); cursor: pointer;
}

/* v0.9.0 — admin user-management surface (roadmap item #7). */
.admin-filter-chips {
  display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
}
.admin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-white); border: 1px solid var(--c-gray-300); border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: var(--text-sm); color: var(--c-gray-700); cursor: pointer;
}
.admin-chip:hover { background: var(--c-gray-50); }
.admin-chip.active {
  background: var(--c-gray-900); color: var(--c-white); border-color: var(--c-gray-900);
}
.admin-chip-count {
  font-size: var(--text-xs); opacity: 0.7;
}
.admin-users-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.permission-cell { display: flex; flex-direction: column; gap: 4px; }
.permission-actions { display: flex; gap: 6px; }
.permission-badge {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
  width: max-content;
}
.permission-badge-pending {
  background: var(--c-warning-bg); color: var(--c-warning-fg);
}
.permission-badge-granted {
  background: var(--c-success-bg); color: var(--c-success-fg);
}
.permission-badge-revoked {
  background: var(--c-danger-bg); color: var(--c-danger-fg);
}
.permission-decided { font-size: var(--text-xs); }
.user-row-reason td {
  background: var(--c-warning-bg-soft); border-top: none !important;
  padding: 0 16px 12px !important;
}
.user-reason-block {
  border-left: 3px solid #f59e0b;
  padding: 8px 12px; font-size: var(--text-base);
  background: var(--c-warning-bg-soft);
}
.user-reason-block strong { display: block; margin-bottom: 4px; color: var(--c-warning-fg); }
.user-reason-block p { margin: 0; white-space: pre-wrap; color: var(--c-gray-700); }
.grad-queue { list-style: none; padding: 0; margin: 8px 0 24px; }
.grad-queue li { padding: 8px 0; border-bottom: 1px solid var(--c-gray-100); }
.grad-queue-link { color: var(--c-gray-900); text-decoration: none; font-size: var(--text-md); }
.grad-queue-link:hover strong { text-decoration: underline; }
.muted { color: var(--c-gray-500); }
.error { color: var(--c-danger-fg-strong); }

/* v0.5.0 — PR-less per-RFC discussion panel (RFCDiscussionPanel.jsx).
   Visual neighbor of .chat-panel but distinct: discussion lives on the
   RFC, branch chat lives on the branch. Same flex column shape so it
   slots cleanly into the existing .right-panel container.
*/
.discussion-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.discussion-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-gray-150);
  background: var(--c-gray-50);
  display: flex; flex-direction: column; gap: 4px;
}
.discussion-header-title { font-size: var(--text-sm); color: var(--c-gray-500); font-weight: 600; }
.discussion-header-meta { font-size: var(--text-xs); color: var(--c-gray-500); }
.discussion-thread-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px 14px;
  border-bottom: 1px solid var(--c-gray-150);
  background: var(--c-gray-150);
}
.discussion-thread-tab {
  background: var(--c-white); border: 1px solid var(--c-gray-200); cursor: pointer;
  font-size: var(--text-xs); color: var(--c-gray-500);
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.discussion-thread-tab.active {
  background: #eef2ff; border-color: var(--c-accent); color: #3737a0;
}
.discussion-thread-tab.resolved { opacity: 0.6; }
.discussion-messages {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.discussion-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.discussion-empty p {
  font-size: var(--text-base); color: var(--c-gray-500); line-height: 1.6; max-width: 280px;
}
.discussion-error {
  background: var(--c-danger-bg); border: 1px solid var(--c-danger-border); color: var(--c-danger-fg-strong);
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.discussion-message { display: flex; flex-direction: column; gap: 3px; }
.discussion-message-meta {
  display: flex; gap: 8px; font-size: var(--text-xs); color: var(--c-gray-500);
}
.discussion-message-author { color: var(--c-accent); font-weight: 500; }
.discussion-message-quote {
  font-size: var(--text-xs); color: var(--c-gray-500); font-style: italic;
  border-left: 2px solid var(--c-gray-300); padding-left: 8px; margin-bottom: 2px;
}
.discussion-message-body {
  font-size: var(--text-base); color: var(--c-gray-800); line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
  background: var(--c-gray-100); padding: 8px 10px; border-radius: var(--radius-md);
}
.discussion-message.system .discussion-system-bubble {
  font-size: var(--text-sm); color: var(--c-gray-500); font-style: italic;
  text-align: center; padding: 4px 0;
}
.discussion-composer {
  border-top: 1px solid var(--c-gray-150);
  padding: 10px 14px;
  background: var(--c-gray-50);
  display: flex; flex-direction: column; gap: 6px;
}
.discussion-composer-textarea {
  width: 100%; resize: vertical; min-height: 60px;
  font-family: inherit; font-size: var(--text-base);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.discussion-composer-textarea:focus {
  outline: none; border-color: var(--c-accent);
}
.discussion-composer-actions {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
}
.discussion-readonly {
  font-size: var(--text-sm); color: var(--c-gray-500); padding: 4px 0;
}

/* §14.5 — cookie consent banner (v0.13.0) */
.cookie-consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-300);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
}
.cookie-consent-body {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.cookie-consent-title {
  margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--c-gray-900);
}
.cookie-consent-intro {
  margin: 0; font-size: var(--text-base); color: var(--c-gray-600); line-height: 1.5;
}
.cookie-consent-choices {
  border: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cookie-consent-choice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--c-gray-200);
  cursor: pointer;
}
.cookie-consent-choice.is-selected {
  border-color: var(--c-gray-900); background: var(--c-gray-50);
}
.cookie-consent-choice input[type=radio] { margin-top: 3px; }
.cookie-consent-choice-text {
  display: flex; flex-direction: column; gap: 2px;
}
.cookie-consent-choice-label {
  font-size: var(--text-base); font-weight: 600; color: var(--c-gray-900);
}
.cookie-consent-choice-desc {
  font-size: var(--text-sm); color: var(--c-gray-500); line-height: 1.5;
}
.cookie-consent-links {
  margin: 0; font-size: var(--text-sm); color: var(--c-gray-500);
}
.cookie-consent-links a { color: var(--c-gray-900); text-decoration: underline; }
.cookie-consent-error {
  margin: 0; font-size: var(--text-sm); color: var(--c-danger-fg-strong);
}
.cookie-consent-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* §14.5 / §14.6 — privacy + cookies policy pages */
.policy-page {
  max-width: 720px; margin: 0 auto;
  padding: 0 32px 80px;
}
.policy-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0; border-bottom: 1px solid var(--c-gray-100);
  margin-bottom: 24px;
}
.policy-back {
  background: none; border: none; cursor: pointer;
  color: var(--c-gray-500); font-size: var(--text-base); padding: 4px 8px;
}
.policy-back:hover { color: var(--c-gray-900); }
.policy-title { font-size: var(--text-base); font-weight: 600; color: var(--c-gray-500); }
.policy-body { line-height: 1.7; color: var(--c-gray-900); }
.policy-body h1 { font-size: var(--text-3xl); margin: 0 0 6px; font-weight: 700; }
.policy-body .policy-subtitle { color: var(--c-gray-500); margin: 0 0 24px; font-size: var(--text-md); }
.policy-body h2 { font-size: var(--text-lg); margin: 28px 0 8px; font-weight: 600; }
.policy-body p { margin: 0 0 12px; }
.policy-body ul { margin: 0 0 16px; padding-left: 22px; }
.policy-body li { margin-bottom: 6px; }
.policy-body code {
  background: var(--c-gray-100); padding: 1px 5px; border-radius: var(--radius-sm);
  font-family: ui-monospace, monospace; font-size: var(--text-sm);
}
.policy-body .policy-footnote {
  margin-top: 24px; font-size: var(--text-sm); color: var(--c-gray-500);
}
.policy-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-base); margin: 8px 0 16px;
}
.policy-table th, .policy-table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--c-gray-100);
  vertical-align: top;
}
.policy-table th {
  font-size: var(--text-xs); text-transform: uppercase;
  color: var(--c-gray-500); letter-spacing: 0.05em; font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   v0.19.0 / roadmap item #30 — /docs/* flyout + sessions browser.

   The shell is `.docs-layout` (header + body). The body is a flex
   row: `.docs-nav` is the persistent left sidebar on desktop and a
   slide-out drawer on mobile (toggled by the `.docs-drawer-toggle`
   icon in `.docs-header`). The content area `.docs-content` mounts
   the sub-route via React Router's <Outlet/>.

   The article body inside each sub-route reuses `.philosophy-body`
   (defined above) for the markdown rendering — same `marked` lib,
   same typography. The new classes here just handle the chrome
   (sidebar + drawer + header).
   ────────────────────────────────────────────────────────────────── */

.docs-layout {
  height: 100%;
  display: flex; flex-direction: column;
}

.docs-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px 12px 16px;
  border-bottom: 1px solid var(--c-gray-150);
  flex-shrink: 0;
}
.docs-back, .docs-drawer-toggle {
  border: none; background: none; cursor: pointer;
  color: var(--c-gray-600); font-size: var(--text-base);
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.docs-back:hover, .docs-drawer-toggle:hover {
  background: var(--c-gray-100); color: var(--c-gray-900);
}
.docs-drawer-toggle {
  display: none;
  font-size: var(--text-xl);
  line-height: 1;
}
.docs-title {
  font-size: var(--text-base); color: var(--c-gray-500);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.docs-signin {
  margin-left: auto;
  font-size: var(--text-base); color: var(--c-gray-600); text-decoration: none;
}
.docs-signin:hover { color: var(--c-gray-900); text-decoration: underline; }

.docs-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row;
  position: relative;
}

.docs-nav {
  flex-shrink: 0;
  width: 260px;
  border-right: 1px solid var(--c-gray-150);
  padding: 24px 20px;
  overflow-y: auto;
  background: var(--c-gray-50);
}

.docs-nav-inner { display: flex; flex-direction: column; gap: 24px; }
.docs-nav-section { display: flex; flex-direction: column; gap: 8px; }
.docs-nav-section-label {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-gray-500);
}
.docs-nav-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.docs-nav-list a {
  display: block;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--c-gray-800); text-decoration: none;
  font-size: var(--text-md); line-height: 1.4;
  word-break: break-word;
}
.docs-nav-list a:hover { background: var(--c-gray-150); }
.docs-nav-list a.active {
  background: var(--c-gray-200); color: var(--c-gray-900); font-weight: 600;
}

/* v0.20.0 — nested transcript rows under each session row. The parent
   <li> holds the session link; the nested <ul> holds the transcript
   children. Indent + a softer font color so the hierarchy reads at a
   glance. */
.docs-nav-list--children {
  list-style: none; padding: 0; margin: 2px 0 8px 14px;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--c-gray-200);
}
.docs-nav-list--children a {
  padding: 4px 10px;
  font-size: var(--text-base); color: var(--c-gray-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.docs-nav-list--children a.active {
  background: var(--c-gray-200); color: var(--c-gray-900); font-weight: 600;
}

.docs-nav-skeleton .skeleton-row {
  display: block;
  height: 14px; margin: 8px 10px;
  background: linear-gradient(90deg, var(--c-gray-150) 25%, var(--c-gray-200) 50%, var(--c-gray-150) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: docs-skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes docs-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.docs-nav-error {
  padding: 8px 10px;
  font-size: var(--text-base); color: #9a3412;
  background: var(--c-warning-bg-soft); border: 1px solid #fed7aa; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.docs-nav-error button {
  align-self: flex-start;
  background: var(--c-white); border: 1px solid #fed7aa;
  color: #9a3412; font-size: var(--text-sm);
  padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.docs-nav-error button:hover { background: var(--c-warning-bg-soft); }

.docs-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 24px 32px 64px;
}

.docs-article {
  max-width: 760px;
  margin: 0 auto;
}
.docs-article-title {
  font-size: var(--text-3xl); font-weight: 700; margin: 0 0 24px;
  letter-spacing: -0.01em;
  color: var(--c-gray-900);
}
.docs-breadcrumbs { margin: 0 0 16px; font-size: var(--text-base); }
.docs-breadcrumbs a {
  color: var(--c-gray-600); text-decoration: none;
}
.docs-breadcrumbs a:hover { color: var(--c-gray-900); text-decoration: underline; }

.docs-session-files {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.docs-session-files a {
  display: block;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--c-gray-50); border: 1px solid var(--c-gray-150);
  color: var(--c-gray-800); text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-base); word-break: break-all;
}
.docs-session-files a:hover {
  background: var(--c-gray-100); border-color: var(--c-gray-200);
}

/* v0.20.0 — session-overview body. Replaces the per-session body
   transcript-link list; transcripts are now picked from the left
   nav. The body just states the count + the nav hint. */
.docs-session-overview {
  padding: 16px; border-radius: var(--radius-md);
  background: var(--c-gray-50); border: 1px solid var(--c-gray-150);
  font-size: var(--text-md); line-height: 1.6; color: var(--c-gray-600);
}

/* v0.20.0 — spec article header (title + "View source" link sit on
   the same row, wrapping on narrow widths). */
.docs-article-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 24px;
  flex-wrap: wrap;
}
.docs-article-header .docs-article-title { margin: 0; }
.docs-source-link {
  font-size: var(--text-base); color: var(--c-gray-600); text-decoration: none;
  padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--c-gray-200);
  background: var(--c-gray-50);
  white-space: nowrap;
}
.docs-source-link:hover { background: var(--c-gray-100); color: var(--c-gray-900); }

.docs-empty, .docs-error {
  padding: 16px; border-radius: var(--radius-md);
  background: var(--c-gray-50); border: 1px solid var(--c-gray-150);
  font-size: var(--text-md); line-height: 1.6; color: var(--c-gray-600);
}
.docs-error { background: var(--c-danger-bg); border-color: var(--c-danger-border); color: var(--c-danger-fg); }
.docs-error button {
  margin-top: 10px;
  background: var(--c-white); border: 1px solid var(--c-danger-border);
  color: var(--c-danger-fg); font-size: var(--text-base);
  padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.docs-error button:hover { background: var(--c-danger-bg); }

.docs-drawer-scrim {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  border: none; padding: 0;
  cursor: pointer;
  z-index: 5;
}

/* Mobile: the sidebar becomes a slide-out drawer. */
@media (max-width: 720px) {
  .docs-drawer-toggle { display: inline-block; }
  .docs-nav {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 80%; max-width: 320px;
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  }
  .docs-body--drawer-open .docs-nav {
    transform: translateX(0);
  }
  .docs-body--drawer-open .docs-drawer-scrim {
    display: block;
  }
  .docs-content { padding: 16px 18px 64px; }
}

/* ──────────────────────────────────────────────────────────────────
   v0.21.0 / roadmap item #31 — interaction polish layer.

   Appended (not interleaved) so it touches no existing selector's
   declarations: it only ADDS a coherent transition vocabulary to the
   interactive surfaces that already carry hover/active/focus states,
   and a single consistent keyboard-focus ring. Colors/durations come
   from the token module, so reduced-motion collapses transitions to
   0ms automatically. Nothing here changes resting-state appearance.
   ────────────────────────────────────────────────────────────────── */

/* Subtle transitions on the interactive surfaces that already react to
   hover. Limited to color/background/border/box-shadow/opacity so layout
   never animates. */
button,
a,
input,
textarea,
select,
.chip,
.model-pill,
.catalog-row,
.pending-row,
.branch-dropdown-trigger,
.branch-dropdown-item,
.selection-tooltip-tab,
.admin-chip,
.admin-rail-link,
.docs-nav-list a,
.inbox-row-link,
.toggle-row {
  transition:
    color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    opacity var(--motion-base) var(--ease-out);
}

/* One consistent keyboard-focus ring across all interactive controls.
   :focus-visible only — it never shows on mouse/touch, so it does not
   alter the existing pointer-driven hover look. The few inputs that set
   their own border-color on :focus keep that; this just guarantees a
   visible ring for keyboard users on every control. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* §22 S4 — the collection directory head (title + owner controls) and the
   role-aware empty state. The S2 directory shipped with semantic classnames
   and default styling; S4 adds the action row and the create CTA. */
.directory-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.directory-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.directory-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}