/* paper-editor.css — styles for the paper builder list and editor pages.
 *
 * Phase A scope: list cards, modal, two-pane editor (sidebar + main),
 * skeleton/write toggle per paragraph, status pills, autosave indicator.
 * Reuses .btn / .chip / .form-group / .empty-state from /css/style.css.
 */

/* ── List page ── */

.pb-status {
  margin: 0 0 12px;
  min-height: 18px;
  font-size: 13px;
  color: var(--muted, #6b7280);
}
.pb-status-ok  { color: #047857; }
.pb-status-err { color: #b91c1c; }
/* V3.470 — grant-builder legacy hand-off note. */
.gb-legacy-note {
  font-size: 12.5px; line-height: 1.5; color: #334155;
  background: #eef0f9; border: 1px solid #c7cded; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 14px;
}

.pb-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
/* V3.740 — on the papers page the list is a stack of type groups (Papers /
 * Grants / …), each its own card grid. Scoped by the .pb-grouped modifier
 * because protocols.html and grant-builder.html reuse .pb-list as a flat grid. */
.pb-list.pb-grouped {
  display: flex; flex-direction: column; gap: 22px;
}
.pb-group { min-width: 0; }
.pb-group-title {
  margin: 0 0 8px; padding: 0 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7280;
}
.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.pb-card-ago { white-space: nowrap; }
.pb-card {
  display: block;
  position: relative;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pb-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.pb-card-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 6px;
  padding-right: 52px;   /* clear the corner export (V3.741) + delete (V3.482) buttons */
}
/* V3.482 — per-card delete control (hover-revealed, top-right corner).
 * V3.741 — the export-for-updates ⇩ sits just left of it, same treatment. */
.pb-card-del,
.pb-card-export {
  position: absolute; top: 8px; right: 8px;
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  color: #9ca3af; opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.pb-card-export { right: 34px; }
.pb-card:hover .pb-card-del,
.pb-card-del:focus-visible,
.pb-card:hover .pb-card-export,
.pb-card-export:focus-visible { opacity: 1; }
.pb-card-del:hover { background: #fee2e2; color: #dc2626; }
.pb-card-export:hover { background: #dbeafe; color: #1d4ed8; }

/* V3.741 — checked-out paper: amber lock row with the who/when + actions. */
.pb-card.pb-locked { border-color: #fcd34d; background: #fffbeb; }
.pb-card-lockrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed #fde68a;
  font-size: 12px; color: #92400e;
}
.pb-card-lock { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; margin-right: auto; }
.pb-card-lock svg { width: 14px; height: 14px; }
.pb-lock-btn {
  border: 1px solid #f59e0b; background: #fff; color: #92400e;
  font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
}
.pb-lock-btn:hover { background: #fef3c7; }
.pb-lock-btn-warn { border-color: #e5e7eb; color: #6b7280; }
.pb-lock-btn-warn:hover { background: #f3f4f6; color: #374151; }
.pb-btn-danger { border-color: #fca5a5 !important; color: #b91c1c !important; }
.pb-btn-danger:hover { background: #fee2e2 !important; }
.pb-card-title {
  font-weight: 600; font-size: 15px; line-height: 1.35;
}
.pb-card-meta {
  font-size: 12px; color: #6b7280; line-height: 1.5;
}
.pb-card-repo {
  margin-top: 6px; font-size: 11px; color: #9ca3af;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pb-template-tag {
  background: #eef2ff; color: #4338ca;
  padding: 1px 6px; border-radius: 4px; font-size: 11px;
}

/* ── New-paper modal ── */

.pb-modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.pb-modal[hidden] { display: none; }
.pb-modal-card {
  width: min(520px, 92vw);
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 90vh;
}
.pb-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
}
.pb-modal-header h2 { margin: 0; font-size: 17px; }
.pb-icon-btn {
  background: none; border: 0; font-size: 22px; line-height: 1;
  cursor: pointer; color: #6b7280; padding: 0 4px;
}
.pb-icon-btn:hover { color: #111827; }
.pb-modal-body {
  padding: 16px 18px; overflow-y: auto;
}
.pb-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.pb-modal-error {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
}

/* ── Editor page ── */

.pe-page { display: flex; flex-direction: column; height: 100vh; }
.pe-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #e5e7eb;
  background: #fff; flex-wrap: wrap;
}
.pe-back {
  text-decoration: none; color: #6b7280; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
}
.pe-back:hover { color: #111827; }
.pe-title-input {
  flex: 1; min-width: 220px;
  font-size: 17px; font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 8px; border-radius: 4px;
}
.pe-title-input:focus {
  outline: none; border-color: #93c5fd; background: #fff;
}
/* V3.365 — draft status selector in the topbar. Admin-enabled only
 * (projects/papers.json is admin-write); disabled state still shows the
 * current status to authors. */
.pe-status-select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  max-width: 110px;
}
.pe-status-select:disabled {
  background: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

/* V3.366 — citation-popover scope chips (linked-to-draft vs all library)
 * + the amber hollow "not yet cited" dot on linked References rows. */
.pe-cite-pop-scope {
  display: flex;
  gap: 4px;
  padding: 4px 10px 2px;
}
.pe-cite-scope-btn {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
}
.pe-cite-scope-btn.on {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
}
.pe-ref-uncited-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #fbbf24;
  margin-left: 4px;
  vertical-align: baseline;
}

.pe-savestate {
  font-size: 12px; color: #6b7280; min-width: 90px; text-align: right;
}
.pe-savestate-saving { color: #b45309; }
.pe-savestate-saved  { color: #047857; }
.pe-savestate-err    { color: #b91c1c; }

/* V3.235 — Phone: tighten the topbar so it doesn't push the title input
 * off-screen with the new ☰ Outline + 💬 Comments toggles. The base
 * `.pe-topbar` already has flex-wrap, so when the four buttons + title
 * compete for room the title input drops to a second row. */
@media (max-width: 640px) {
  .pe-topbar { gap: 8px; padding: 8px 12px; }
  .pe-topbar .pe-title-input { min-width: 0; font-size: 15px; }
  .pe-topbar .pe-savestate { min-width: 0; }
  .pe-topbar .pe-back { font-size: 12px; }
}

.pe-readonly-banner {
  background: #fffbeb; border-bottom: 1px solid #fde68a;
  padding: 8px 16px; font-size: 13px; color: #92400e;
}
/* V3.741 — checkout variant: text + the two ways back, on one line. */
.pe-checkout-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pe-checkout-text { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 320px; min-width: 0; }
.pe-checkout-text svg { width: 14px; height: 14px; flex: none; }
.pe-checkout-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pe-checkout-btn {
  border: 1px solid #f59e0b; background: #fff; color: #92400e; text-decoration: none;
  font-size: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer; line-height: 1.4;
}
.pe-checkout-btn:hover { background: #fef3c7; }
.pe-checkout-unlock { border-color: #e5e7eb; color: #6b7280; }
.pe-checkout-unlock:hover { background: #f3f4f6; color: #374151; }
.pe-checkout-unlock:disabled { opacity: .6; cursor: default; }

/* ── Presence row + per-block presence dots ── */
.pe-presence-row {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
}
.pe-presence-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 600;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .15);
  user-select: none;
}
.pe-presence-mini {
  width: 18px; height: 18px; font-size: 9px; border-width: 1px;
}
.pe-presence-self { box-shadow: 0 0 0 2px #2563eb; }
.pe-block-presence {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 4px;
}

/* V3.217 — soft section lock badge.
 *
 * Visible to both the holder ("You") and everyone else ("Locked by
 * Alex"). The block wrapper gains `data-locked="self"` or
 * `data-locked="other"` so the body styling can react: locked-by-other
 * dims the prose, draws a left accent in the holder's color (passed
 * via `--pe-lock-color`), and the click-toast handler in JS surfaces
 * the holder name on attempted clicks. The 30s stale-presence check in
 * paper-yjs.js means a holder who walks away from a tab eventually
 * frees the lock without any manual intervention. */
.pe-block-lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #4b5563;
  border: 1px solid transparent;
  user-select: none;
}
.pe-block-lock-badge[hidden] { display: none; }
.pe-block-lock-badge.pe-block-lock-self {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.35);
  color: #166534;
}
.pe-block-lock-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pe-block-lock-name { font-weight: 600; }
.pe-block[data-locked="other"] {
  border-left: 3px solid var(--pe-lock-color, #9ca3af);
  background: #fafafa;
}
.pe-block[data-locked="other"] .pe-block-content {
  cursor: not-allowed;
  color: #4b5563;
}
.pe-block[data-locked="other"] .pe-skeleton-bullet {
  cursor: not-allowed;
  opacity: 0.85;
}
/* V3.220 — `.pe-block[data-locked="self"]` styling lives entirely in
 * the later V3.218/V3.219 block (outline + border-left in the holder's
 * presence color). The V3.217 first-cut green box-shadow is removed
 * here to avoid a double-ring (green inner glow + holder-color outline)
 * that ships when both rules apply at the same cascade level. */

/* V3.217 — transient toast surfaced when a non-holder clicks into a
 * locked-by-other block. Positioned near the click and auto-hides
 * after ~1.8s. */
.pe-lock-toast {
  position: absolute;
  z-index: 4300;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}
.pe-lock-toast[hidden] { display: none; }
.pe-invite-btn {
  font-size: 12px; padding: 4px 10px;
}

.pe-layout {
  display: flex; flex: 1; min-height: 0;
}

/* Sidebar — outline of sections + (V3.197) current-paragraph skeleton mirror */
.pe-sidebar {
  width: 240px; min-width: 220px; max-width: 280px;
  background: #f9fafb; border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.pe-sidebar-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; padding: 0 16px 8px; font-weight: 600;
}

/* V3.197 — sidebar tab nav. Two tabs ("Outline" / "Paragraph") that
 * persist their active state via localStorage `rm_paper_sidebar_tab`. */
.pe-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  position: sticky; top: 0; z-index: 1;
}
.pe-sidebar-tab {
  flex: 1 1 50%;
  background: transparent;
  border: 0;
  padding: 10px 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: background 80ms, color 80ms, border-color 80ms;
}
.pe-sidebar-tab:hover:not(.active) {
  background: #f3f4f6;
  color: #374151;
}
.pe-sidebar-tab.active {
  color: #1d4ed8;
  border-bottom-color: #2563eb;
  background: #eff6ff;
}
.pe-sidebar-tab-content {
  padding: 8px 0;
  flex: 1 1 auto;
}
.pe-sidebar-tab-content[hidden] { display: none; }

.pe-sidebar-empty {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  padding: 14px 16px;
  text-align: center;
  line-height: 1.4;
}
.pe-sidebar-skel-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  font-weight: 700;
  padding: 4px 16px 6px;
}
.pe-sidebar-skel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pe-sidebar-skel-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #374151;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.pe-sidebar-skel-item:hover {
  background: #f3f4f6;
  border-left-color: #93c5fd;
}
.pe-sidebar-skel-item-claim {
  background: #fffbeb;
}
.pe-sidebar-skel-item-claim:hover {
  background: #fef3c7;
}
.pe-sidebar-skel-flag {
  color: #f59e0b;
  font-size: 12px;
  flex-shrink: 0;
  line-height: 1.3;
}
.pe-sidebar-skel-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.pe-sidebar-skel-empty-bullet {
  color: #9ca3af;
  font-style: italic;
}
.pe-sidebar-list { list-style: none; margin: 0; padding: 0; }
.pe-sidebar-item {
  padding: 6px 16px; font-size: 13px; color: #374151;
  cursor: pointer; display: flex; justify-content: space-between; gap: 8px;
  border-left: 2px solid transparent;
}
.pe-sidebar-item:hover { background: #f3f4f6; }
.pe-sidebar-item.active {
  background: #eff6ff; color: #1d4ed8; border-left-color: #2563eb;
}
.pe-sidebar-actions {
  padding: 12px 16px; border-top: 1px solid #e5e7eb; margin-top: 8px;
}
.pe-add-section {
  width: 100%; font-size: 12px;
}

/* Main pane */
.pe-main {
  flex: 1; overflow-y: auto;
  background: #fff;
  padding: 24px 0 80px;
}
.pe-main-inner {
  max-width: 820px; margin: 0 auto; padding: 0 32px;
}

.pe-viewfilter-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  font-size: 12px; color: #6b7280;
}
.pe-viewfilter-bar select {
  font-size: 12px; padding: 3px 6px;
}

.pe-section {
  margin-bottom: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.pe-section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 8px;
}
.pe-section-label {
  font-size: 22px; font-weight: 700; color: #111827;
  flex: 1;
  border: 1px solid transparent;
  padding: 2px 6px; border-radius: 4px;
}
.pe-section-label:focus {
  outline: none; border-color: #93c5fd; background: #f9fafb;
}
.pe-section-kind {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; background: #f3f4f6; padding: 2px 6px; border-radius: 4px;
}
.pe-section-actions {
  display: flex; gap: 4px;
}
.pe-block {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
  position: relative;
}
.pe-block-toolbar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
}
.pe-block-handle {
  cursor: grab; color: #d1d5db; font-size: 14px; user-select: none;
  padding: 0 4px;
}
.pe-block-handle:active { cursor: grabbing; }
.pe-mode-toggle {
  display: inline-flex; border: 1px solid #d1d5db; border-radius: 4px;
  overflow: hidden;
}
.pe-mode-toggle button {
  padding: 2px 8px; font-size: 11px;
  background: #fff; border: 0; cursor: pointer;
  color: #6b7280;
}
.pe-mode-toggle button.active {
  background: #2563eb; color: #fff;
}
.pe-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px; font-size: 11px;
  border: 1px solid;
  cursor: pointer;
}
.pe-status-pill[data-status="draft"] {
  background: #f3f4f6; border-color: #d1d5db; color: #4b5563;
}
.pe-status-pill[data-status="needs-review"] {
  background: #fef3c7; border-color: #fcd34d; color: #92400e;
}
.pe-status-pill[data-status="complete"] {
  background: #d1fae5; border-color: #6ee7b7; color: #065f46;
}
.pe-block-actions {
  margin-left: auto;
  display: flex; gap: 4px;
}
.pe-block-actions button {
  background: none; border: 0; font-size: 14px; cursor: pointer;
  color: #9ca3af; padding: 0 4px;
}
.pe-block-actions button:hover { color: #111827; }
.pe-block-actions button:disabled {
  color: #e5e7eb; cursor: not-allowed;
}
.pe-block-content {
  font-size: 15px; line-height: 1.55;
  color: #111827;
  outline: none;
  min-height: 1.55em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.pe-block-content[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: #9ca3af; pointer-events: none;
}
/* KaTeX inline rendering — don't let math break paragraph line height. */
.pe-block-content .katex { font-size: 1em; }
.pe-math-err {
  background: #fef2f2; color: #b91c1c;
  padding: 0 2px; border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}

/* ── Citation chips (rendered in paragraph blur view) ── */
.pe-cite-chip {
  display: inline-block;
  background: #eef2ff; color: #3730a3;
  padding: 0 6px; border-radius: 4px;
  font-size: 0.88em;
  line-height: 1.5;
  cursor: help;
  border: 1px solid #c7d2fe;
}
.pe-cite-chip:hover { background: #e0e7ff; }
.pe-cite-chip-unknown {
  background: #fef3c7; color: #92400e; border-color: #fcd34d;
}
.pe-cite-sep { color: #9ca3af; padding: 0 2px; }
/* V3.453 — the author-year separator lost its literal space (justified
 * doc-view paragraphs stretched it); restore the editor's "; " look with
 * padding instead. Numeric families keep the packed 2px. */
.pe-cite-group.pe-cite-family-author-year .pe-cite-sep,
.pe-cite-group:not([class*="pe-cite-family-"]) .pe-cite-sep { padding-right: 6px; }

/* ── Add-block button row ── */
.pe-add-block-row {
  display: flex; gap: 6px;
  margin-top: 6px;
}
.pe-add-block-row .pe-add-block { width: auto; flex: 0 0 auto; }

/* ── Equation block ── */
.pe-block-equation .pe-equation-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  white-space: pre-wrap;
  background: #fafafa;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px dashed #d1d5db;
}
.pe-block-equation .pe-equation-body:focus { background: #fff; }
/* When KaTeX has rendered (innerHTML replaced), the styles above shouldn't
 * apply — the rendered HTML has its own structure. */
.pe-block-equation .pe-equation-body:not(:focus):not([data-empty="true"]) {
  font-family: inherit;
  background: #fff;
  border: 1px solid transparent;
  text-align: center;
  padding: 12px;
}

/* ── Subheading block (\subsection / \subsubsection) ── */
.pe-block-subheading { border-left: 3px solid #f59e0b; }
.pe-block-subheading .pe-subheading-text {
  font-weight: 700;
  font-size: 1.1em;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.pe-block-subheading[data-level="3"] .pe-subheading-text {
  font-size: 1em;
  font-style: italic;
}
.pe-block-subheading .pe-subheading-text:focus {
  background: #fff;
  border-color: #d1d5db;
}
.pe-block-subheading .pe-subheading-text[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  font-weight: 400;
  font-style: italic;
}

/* ── List block (itemize / enumerate) ── */
.pe-block-list { border-left: 3px solid #10b981; }
.pe-block-list .pe-list-body {
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: pre-wrap;   /* focused: one raw item per line */
}
.pe-block-list .pe-list-body:focus { background: #fff; border-color: #d1d5db; }
.pe-block-list .pe-list-body[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  font-style: italic;
}
.pe-block-list .pe-list-body ul,
.pe-block-list .pe-list-body ol { margin: 0; padding-left: 1.4em; white-space: normal; }

/* ── Status filter note ── */
.pe-filter-note {
  font-size: 12px; color: #6b7280;
  padding: 6px 10px;
  background: #f9fafb; border: 1px dashed #d1d5db;
  border-radius: 4px;
  margin-top: 4px;
}

/* ── Table block ── */
.pe-block-table .pe-table-body { margin-top: 6px; }
.pe-grid-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.pe-grid-table td {
  border: 1px solid #d1d5db;
  padding: 0;
  vertical-align: top;
}
.pe-grid-cell {
  min-height: 22px; padding: 6px 8px;
  outline: none;
  white-space: pre-wrap;
}
.pe-grid-cell:focus { background: #eff6ff; }
.pe-table-rawtex {
  background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 4px;
  padding: 8px 10px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 240px; overflow: auto; white-space: pre;
}
.pe-tbl-small-btn { background: #fff; border: 1px solid #d1d5db; }
.pe-tbl-small-btn:hover { background: #eff6ff; }

/* ── Figure block (V3.102) ── */
.pe-block-figure .pe-figure-preview {
  margin: 8px 0 6px;
  padding: 12px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-block-figure .pe-figure-img {
  max-width: 100%;
  max-height: 480px;
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.pe-block-figure .pe-figure-empty {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}
.pe-block-figure .pe-figure-uploadrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pe-block-figure .pe-figure-upload-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.pe-block-figure .pe-figure-upload-btn:hover:not(:disabled) { background: #eff6ff; }
.pe-block-figure .pe-figure-upload-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.pe-block-figure .pe-figure-uploadstatus {
  font-size: 12px;
  color: #6b7280;
}
.pe-block-figure .pe-figure-layout {
  margin: 4px 0 8px;
  font-size: 12px;
}
.pe-block-figure .pe-figure-layout > summary {
  cursor: pointer;
  color: #4b5563;
  user-select: none;
  padding: 2px 0;
}
.pe-block-figure .pe-figure-layout > summary:hover { color: #111827; }
.pe-block-figure .pe-figure-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.pe-block-figure .pe-figure-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pe-block-figure .pe-figure-field > span {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pe-block-figure .pe-figure-field input[type="text"],
.pe-block-figure .pe-figure-field select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.pe-block-figure .pe-figure-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-block-figure .pe-figure-caption-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
  margin-bottom: 2px;
}
.pe-block-figure .pe-figure-caption {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 10px;
  min-height: 28px;
}
.pe-block-figure .pe-figure-caption:focus { border-color: #93c5fd; outline: none; }
.pe-block-figure .pe-figure-rawtex {
  margin-top: 8px;
  font-size: 12px;
}
.pe-block-figure .pe-figure-rawtex > summary {
  cursor: pointer; color: #6b7280;
}
.pe-block-figure .pe-figure-rawtex pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 10px;
  max-height: 200px;
  overflow: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

/* ── Inventory popover (reuses .pe-cite-popover styles) ── */
.pe-inv-popover { z-index: 2001; }

/* V3.108 — kind badge so the user can tell reagents (chemical) from
 * equipment (item) at a glance in the inventory popover. */
.pe-inv-kind-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.pe-inv-kind-badge.pe-inv-kind-chemical {
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
.pe-inv-kind-badge.pe-inv-kind-item {
  background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe;
}
.pe-cite-pop-row .pe-inv-name {
  vertical-align: middle;
}

/* ── Comments pane + per-block button ── */
.pe-comments-pane {
  width: 320px; flex-shrink: 0;
  border-left: 1px solid #e5e7eb;
  background: #fafafa;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pe-comments-pane[hidden] { display: none; }
.pe-comments-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.pe-comments-title { font-weight: 600; font-size: 14px; }
.pe-comments-context {
  padding: 6px 14px; font-size: 11px; color: #6b7280;
  border-bottom: 1px solid #e5e7eb; background: #fff;
}

/* V3.204 — comments-pane filter dropdown ("This paragraph" / "Paragraphs in view"). */
.pe-comments-filterbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  font-size: 11px; color: #6b7280;
}
.pe-comments-filterbar label {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600;
}
.pe-comments-filterbar select {
  flex: 1 1 auto;
  font-size: 12px; padding: 3px 6px;
  border: 1px solid #d1d5db; border-radius: 4px;
  background: #fff; color: #1f2937;
}
.pe-comments-filterbar select:focus { outline: none; border-color: #2563eb; }

/* V3.204 — anchor preview shows the highlighted snippet the comment
 * will be tied to (between the filter bar and the comment list). */
.pe-comments-anchor-preview {
  padding: 8px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 12px; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 6px;
}
.pe-comments-anchor-preview[hidden] { display: none; }
.pe-comments-anchor-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #92400e;
  flex-shrink: 0;
}
.pe-comments-anchor-snippet {
  flex: 1 1 auto; color: #78350f;
  font-style: italic;
}
.pe-comments-anchor-clear {
  background: transparent; border: 0; cursor: pointer;
  color: #92400e; font-size: 14px; line-height: 1;
  padding: 0 4px;
}
.pe-comments-anchor-clear:hover { color: #78350f; }

/* V3.204 — anchor snippet on a comment card. Sits above the meta
 * row to indicate "this comment is on this specific text". */
.pe-comment-anchor-snippet {
  padding: 6px 8px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 3px;
  font-size: 12px; font-style: italic;
  color: #78350f; line-height: 1.4;
  margin-bottom: 6px;
}

/* V3.204 — scope label + block header for view-mode comments. */
.pe-comments-scope-label {
  font-size: 11px; color: #6b7280; font-style: italic;
  padding: 4px 0 8px;
  border-bottom: 1px dashed #e5e7eb;
  margin-bottom: 6px;
}
.pe-comments-block-header {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700; color: #2563eb;
  padding: 8px 0 4px;
  cursor: pointer;
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
}
.pe-comments-block-header:first-of-type {
  border-top: 0; margin-top: 0;
}
.pe-comments-block-header:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* V3.204 — floating "💬 Comment" button that follows the text
 * selection. Position-absolute so it lays over the editor. */
.pe-comment-floating-btn {
  position: absolute;
  z-index: 4200;
  background: #2563eb;
  color: #fff;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.pe-comment-floating-btn:hover {
  background: #1d4ed8;
}
.pe-comment-floating-btn[hidden] { display: none; }

/* V3.216 — in-body highlight on commented text spans. Backed by the
 * V3.204 (anchorStart, anchorEnd) fields on each comment doc; injected
 * by `applyCommentHighlightsToBlock` after every full-HTML render of
 * a paragraph body. Open comments tint the span amber; resolved-only
 * spans get a thin underline so the prose stays clean while still
 * surfacing historical context. */
.pe-comment-highlight {
  background-color: rgba(252, 211, 77, 0.40);
  border-bottom: 1px solid rgba(217, 119, 6, 0.45);
  border-radius: 2px;
  /* V3.219 — highlights are no longer click-to-filter; cursor stays as
   * text-caret so the writer can place the caret inside a highlighted
   * span like any other prose. The hover-glow + comment-card link still
   * fire via the V3.218 mouseover handler. */
  cursor: text;
  transition: background-color 0.12s ease;
}
.pe-comment-highlight:hover {
  background-color: rgba(252, 211, 77, 0.70);
}
.pe-comment-highlight-resolved {
  border-bottom: 1px dotted rgba(107, 114, 128, 0.55);
  cursor: text;
}
.pe-comment-highlight-resolved:hover {
  border-bottom-color: rgba(55, 65, 81, 0.9);
  background-color: rgba(229, 231, 235, 0.5);
}

/* V3.216 — anchor-scope chip rendered above the comments list when a
 * highlight click narrows the list. */
.pe-comments-anchor-scope {
  display: flex; align-items: center; gap: 6px;
  font-style: normal; color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 4px 8px;
  border-radius: 4px;
}
.pe-comments-scope-clear {
  margin-left: auto;
  background: transparent; border: 0; cursor: pointer;
  color: #92400e; font-size: 14px; line-height: 1;
  padding: 0 4px;
}
.pe-comments-scope-clear:hover { color: #78350f; }
.pe-comments-list {
  flex: 1; overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.pe-comments-empty {
  font-size: 13px; color: #9ca3af; text-align: center; padding: 20px 0;
}
.pe-comment {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 8px 10px;
}
.pe-comment-resolved { opacity: 0.6; }
.pe-comment-meta {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 11px; color: #6b7280; margin-bottom: 4px;
}
.pe-comment-author { font-weight: 600; color: #374151; }
.pe-comment-body {
  font-size: 13px; line-height: 1.45; color: #111827;
  white-space: pre-wrap; word-wrap: break-word;
}
.pe-comment-actions {
  display: flex; gap: 6px; margin-top: 6px;
  font-size: 11px;
}
.pe-comment-action {
  background: none; border: 0; color: #6b7280; cursor: pointer;
  padding: 0; font-size: 11px;
}
.pe-comment-action:hover { color: #2563eb; }
.pe-comment-action-danger:hover { color: #b91c1c; }
/* V3.211 — composer is now wrapped in a labeled .pe-comments-new
 * section that includes the anchor preview directly above the textarea,
 * so the highlighted snippet visually belongs to the "new comment"
 * being authored. The user can highlight while the pane is open and
 * keep typing in the same textbox without ever clicking the floating
 * button. */
.pe-comments-new {
  border-top: 1px solid #e5e7eb;
  background: #fff;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.pe-comments-new-title {
  padding: 8px 14px 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280;
}
.pe-comments-new .pe-comments-anchor-preview {
  margin: 0 14px 6px;
  border-radius: 4px;
  border: 1px solid #fde68a;
}
.pe-comments-new .pe-comments-anchor-preview[hidden] {
  display: none;
}
.pe-comments-composer {
  border-top: 0;
  padding: 4px 14px 10px;
  background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.pe-comments-composer textarea {
  width: 100%; resize: vertical; min-height: 60px;
  border: 1px solid #d1d5db; border-radius: 4px;
  padding: 6px 8px; font: inherit; font-size: 13px;
}
.pe-comments-composer textarea:focus {
  outline: none; border-color: #2563eb;
}
.pe-comment-btn {
  background: none; border: 0;
  font-size: 12px; cursor: pointer; color: #9ca3af;
  padding: 0 4px;
}
.pe-comment-btn:hover { color: #2563eb; }
.pe-comment-btn-active { color: #2563eb; font-weight: 600; }

/* ── Citation popover (Cmd+K) ── */
.pe-cite-popover {
  position: fixed; z-index: 2000;
  width: min(460px, 92vw);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pe-cite-popover[hidden] { display: none; }
.pe-cite-pop-title {
  padding: 8px 12px; font-size: 11px; font-weight: 600;
  color: #6b7280; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #e5e7eb; background: #f9fafb;
}
.pe-cite-pop-search {
  margin: 8px 12px; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
}
.pe-cite-pop-search:focus { outline: none; border-color: #2563eb; }
.pe-cite-pop-list {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.pe-cite-pop-row {
  text-align: left; background: #fff; border: 0;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  display: flex; flex-direction: column; gap: 2px;
}
/* V3.157 — when the row contains a checkbox (citation popover only —
 * the V3.108 inventory popover reuses .pe-cite-pop-row but doesn't
 * mount the check element), flip to a horizontal layout so the
 * checkbox sits left of the body. */
.pe-cite-pop-row:has(.pe-cite-pop-row-check) {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}
.pe-cite-pop-row:hover, .pe-cite-pop-row.active { background: #eff6ff; }
/* V3.157 — checkbox column on the left of each row. */
.pe-cite-pop-row-check {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: #2563eb; font-weight: 700;
  margin-top: 1px;
}
.pe-cite-pop-row.checked .pe-cite-pop-row-check {
  background: #2563eb; border-color: #2563eb; color: #fff;
}
.pe-cite-pop-row.checked {
  background: #eff6ff;
}
.pe-cite-pop-row.checked.active {
  background: #dbeafe;
}
.pe-cite-pop-row-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pe-cite-pop-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #4338ca; font-weight: 600;
}
.pe-cite-pop-meta { font-size: 12px; color: #6b7280; }
.pe-cite-pop-title-line {
  font-size: 12px; color: #374151;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-cite-pop-empty {
  padding: 14px 12px; font-size: 13px; color: #6b7280;
}
/* V3.157 — selected-bar shows currently-checked keys at the top of
 * the list as small dismissable chips. */
.pe-cite-pop-selected-bar {
  padding: 6px 12px; border-bottom: 1px solid #e5e7eb;
  background: #fffbeb;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.pe-cite-pop-selected-bar[hidden] { display: none; }

/* V3.192 — claim-context section. Shows the claims linked to the
 * paragraph the popover was opened from, with each claim's linked
 * citations + expandable highlight evidence. Renders ABOVE the search
 * results so the user sees the work they've already done first. */
.pe-cite-pop-claims {
  padding: 6px 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  background: #f0f9ff;
  max-height: 280px;
  overflow-y: auto;
}
.pe-cite-pop-claims[hidden] { display: none; }
.pe-cite-pop-claims-header {
  font-size: 11px; color: #075985; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 0 6px;
}
.pe-cite-pop-claims-loading {
  font-size: 12px; color: #6b7280; font-style: italic; padding: 8px 0;
}
.pe-cite-pop-claim-card {
  background: #fff; border: 1px solid #bae6fd;
  border-radius: 5px;
  padding: 6px 8px; margin-bottom: 6px;
}
.pe-cite-pop-claim-statement {
  font-size: 12px; font-weight: 600; color: #0c4a6e;
  padding-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.pe-cite-pop-claim-status {
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  background: #e0f2fe; color: #075985;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: auto;
}
.pe-cite-pop-claim-status-supported { background: #dcfce7; color: #166534; }
.pe-cite-pop-claim-status-contested { background: #fee2e2; color: #991b1b; }
.pe-cite-pop-claim-status-disproven { background: #fef3c7; color: #78350f; }
.pe-cite-pop-claim-empty {
  font-size: 12px; color: #6b7280; font-style: italic; padding: 4px 0;
}
.pe-cite-pop-claim-paper {
  border-top: 1px dashed #e5e7eb;
  padding: 4px 0;
}
.pe-cite-pop-claim-paper:first-of-type { border-top: 0; }
.pe-cite-pop-claim-paper-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 3px 0;
}
.pe-cite-pop-claim-paper-head:hover { background: #eff6ff; }
.pe-cite-pop-claim-paper.checked .pe-cite-pop-claim-paper-head { background: #dbeafe; }
.pe-cite-pop-claim-paper-meta { flex: 1 1 auto; min-width: 0; }
.pe-cite-pop-claim-stance {
  display: inline-flex; gap: 4px; align-items: center;
  font-size: 10px;
}
.pe-cite-pop-claim-stance-for {
  background: #dcfce7; color: #166534; padding: 1px 6px; border-radius: 3px;
  font-weight: 600;
}
.pe-cite-pop-claim-stance-against {
  background: #fee2e2; color: #991b1b; padding: 1px 6px; border-radius: 3px;
  font-weight: 600; margin-left: 2px;
}
.pe-cite-pop-claim-expand {
  background: transparent; border: 0; cursor: pointer;
  color: #2563eb; font-size: 11px; padding: 2px 4px;
  border-radius: 3px;
}
.pe-cite-pop-claim-expand:hover { background: #dbeafe; }
.pe-cite-pop-claim-evidence {
  margin: 4px 0 4px 26px;
  border-left: 2px solid #93c5fd;
  padding: 2px 0 2px 8px;
}
.pe-cite-pop-claim-evrow {
  padding: 4px 0;
  font-size: 12px;
}
.pe-cite-pop-claim-evrow + .pe-cite-pop-claim-evrow {
  border-top: 1px dashed #e5e7eb;
  margin-top: 4px;
}
.pe-cite-pop-claim-evrow-stance {
  display: inline-block;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 3px;
  margin-right: 6px;
}
.pe-cite-pop-claim-evrow-for .pe-cite-pop-claim-evrow-stance {
  background: #dcfce7; color: #166534;
}
.pe-cite-pop-claim-evrow-against .pe-cite-pop-claim-evrow-stance {
  background: #fee2e2; color: #991b1b;
}
.pe-cite-pop-claim-evrow-text {
  color: #374151; font-style: italic; line-height: 1.4;
  display: inline;
}
.pe-cite-pop-claim-evrow-comment {
  color: #4b5563; font-size: 11px;
  margin-top: 2px; padding-left: 4px;
  border-left: 2px solid #d1d5db;
}
.pe-cite-pop-selected-label {
  font-size: 11px; color: #92400e; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.pe-cite-pop-selected-chip {
  background: #fde68a; border: 1px solid #f59e0b; color: #78350f;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
.pe-cite-pop-selected-chip:hover {
  background: #fcd34d; border-color: #d97706;
}
/* V3.157 — popover footer (commit / cancel / remove buttons). */
.pe-cite-pop-foot {
  padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex; align-items: center; gap: 8px;
}
.pe-cite-pop-foot-spacer { flex: 1 1 auto; }
.pe-cite-pop-commit, .pe-cite-pop-cancel, .pe-cite-pop-remove {
  font-size: 12px; padding: 5px 12px;
  border: 1px solid #d1d5db; border-radius: 5px;
  background: #fff; color: #374151;
  cursor: pointer;
}
.pe-cite-pop-commit {
  background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600;
}
.pe-cite-pop-commit:hover:not(:disabled) {
  background: #1d4ed8; border-color: #1d4ed8;
}
.pe-cite-pop-commit:disabled {
  background: #d1d5db; border-color: #d1d5db; color: #6b7280; cursor: not-allowed;
}
.pe-cite-pop-cancel:hover { background: #f3f4f6; }
.pe-cite-pop-remove {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.pe-cite-pop-remove:hover { background: #fee2e2; border-color: #f87171; }
.pe-cite-pop-remove[hidden] { display: none; }
.pe-cite-pop-hint {
  padding: 6px 12px; font-size: 11px; color: #9ca3af;
  border-top: 1px solid #e5e7eb; background: #f9fafb;
}
.pe-cite-pop-hint kbd {
  background: #fff; border: 1px solid #d1d5db; border-radius: 3px;
  padding: 0 4px; font-size: 10px; font-family: inherit;
}
/* V3.157 — clickable rendered citation group. Hover signals editability. */
.pe-cite-group {
  cursor: pointer;
}
.pe-cite-group:hover {
  background: rgba(37, 99, 235, 0.08);
  border-radius: 3px;
}
.pe-block-content.skeleton {
  font-style: italic;
  color: #475569;
  background: #f9fafb;
  padding: 8px 10px; border-radius: 4px;
  border: 1px dashed #cbd5e1;
}
.pe-block-content[contenteditable="false"] {
  background: #f9fafb;
  cursor: default;
}

/* ── Rich-text toolbar above paragraph bodies (V3.107) ──
 *
 * Mounted by paper-blocks.js' buildRichToolbar(). Visibility is tied to
 * the body view (skeleton view hides .pe-paragraph-body-wrap entirely).
 * Buttons use mousedown.preventDefault to keep the caret in the body
 * across the click. */
.pe-paragraph-body-wrap {
  display: flex;
  flex-direction: column;
}
.pe-rich-toolbar {
  display: flex;
  gap: 4px;
  padding: 2px 0 4px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 4px;
  user-select: none;
}
.pe-rich-toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #6b7280;
  cursor: pointer;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 22px;
  height: 22px;
}
.pe-rich-toolbar-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.pe-rich-toolbar-btn.pe-rt-bold   { font-family: inherit; font-weight: 700; }
.pe-rich-toolbar-btn.pe-rt-italic { font-family: inherit; font-style: italic; font-weight: 600; }
.pe-rich-toolbar-btn.pe-rt-sub    { font-family: inherit; }
.pe-rich-toolbar-btn.pe-rt-sup    { font-family: inherit; }
.pe-rich-toolbar-btn.pe-rt-code   { font-size: 11px; }

/* Sensible defaults for the rendered markdown tokens inside a paragraph
 * body. The browser's native styles already cover most of this — these
 * overrides just keep code spans visually distinct in an authoring view. */
.pe-block-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: #f3f4f6;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid #e5e7eb;
}

/* ── Equations: panel + chips + context menu + picker (V3.109) ──
 *
 * The Equations system has four distinct surfaces:
 *   1. Topbar toggle button (`.pe-eq-toggle-btn`)
 *   2. Slide-out panel listing the inline library + numbered eqs
 *   3. Right-click context menu over paragraph bodies
 *   4. Picker popover (positioned at click point)
 * Plus block-level UI: numbered toggle + label input + number badge.
 * Plus paragraph-text chips: [!eqi:] (inline KaTeX) and [!eqr:] (Eq. n).
 */

/* Topbar toggle. */
.pe-eq-toggle-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #4b5563;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}
.pe-eq-toggle-btn:hover { background: #eff6ff; color: #1d4ed8; }

/* Slide-out panel — right-anchored, similar to claim-detail panel. */
.pe-equations-pane {
  position: fixed;
  top: 0; right: 0;
  height: 100%; width: 380px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -8px 0 20px rgba(0,0,0,0.08);
  z-index: 3500;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.pe-equations-pane[hidden] { display: none; }

/* ── MathLive Visual ⇄ LaTeX toggle (E1) ── */
:root { --keyboard-zindex: 5000; }   /* virtual keyboard above panels/modals/doc-view */
.pe-visual-toggle {
  display: inline-flex;
  gap: 2px;
  margin: 2px 0;
}
.pe-visual-toggle button {
  font-size: 10.5px;
  padding: 1px 8px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
}
.pe-visual-toggle button.active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
  font-weight: 600;
}
math-field.pe-mathfield {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 17px;
  padding: 6px 8px;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  background: #fff;
}

/* S-β — submission-document sections */
.pe-section-submission { border-left: 3px solid #6366f1; }
.pe-submission-banner {
  font-size: 11.5px;
  color: #3730a3;
  background: #eef2ff;
  border: 1px dashed #c7d2fe;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 6px 0 2px;
}

/* F1 — figure panel composer + Figure-builder placeholder */
.pe-figbuilder-card {
  margin: 6px 10px;
  padding: 8px 10px;
  border: 1px dashed #c7d2fe;
  border-radius: 8px;
  background: #f5f3ff;
  font-size: 11.5px;
  color: #4c1d95;
  line-height: 1.45;
}
.pfc-overlay {
  position: fixed; inset: 0;
  z-index: 4500;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.pfc-card {
  background: #fff; border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 14px 16px;
  width: min(860px, 95vw);
  max-height: 92vh;
  overflow-y: auto;
}
.pfc-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pfc-hint { display: block; font-weight: 400; font-size: 11px; color: #6b7280; margin-top: 2px; }
.pfc-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pfc-ctl { font-size: 12px; color: #374151; }
.pfc-ctl input { width: 58px; }
.pfc-body { display: flex; gap: 12px; align-items: flex-start; }
.pfc-list { flex: 0 0 300px; max-height: 55vh; overflow-y: auto; }
.pfc-panel {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid #f3f4f6; border-radius: 6px;
  padding: 5px; margin-bottom: 4px;
}
.pfc-panel img { width: 54px; height: 40px; object-fit: contain; background: #f8fafc; border-radius: 3px; }
.pfc-panel-meta { font-weight: 700; width: 18px; text-align: center; }
.pfc-preview { flex: 1; min-width: 0; max-height: 55vh; overflow: auto; border: 1px dashed #e5e7eb; border-radius: 6px; padding: 6px; background: #fafafa; }
.pfc-preview-canvas { max-width: 100%; height: auto; display: block; }
.pfc-empty { font-size: 12px; color: #9ca3af; font-style: italic; padding: 12px; }
.pfc-status { font-size: 11.5px; color: #b45309; min-height: 16px; margin-top: 6px; }
.pfc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* E4 — equation import + capture browser */
.pe-eqimport-ta {
  width: 100%; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 6px 8px;
  border: 1px solid #e5e7eb; border-radius: 4px;
  margin-bottom: 6px;
}
.pe-eqimport-hint { font-size: 11.5px; color: #6b7280; margin: 4px 0 8px; }
.pe-eqimport-rows { max-height: 40vh; overflow-y: auto; margin-top: 8px; }
.pe-eqimport-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border: 1px solid #f3f4f6; border-radius: 6px; margin-bottom: 4px;
}
.pe-eqimport-prev { flex: 1; min-width: 0; overflow-x: auto; }
.pe-eqimport-row input { width: 180px; flex: none; }
.pe-eqcap-browse-list { max-height: 55vh; overflow-y: auto; margin-top: 6px; }
.pe-eqcap-browse-row {
  border: 1px solid #f3f4f6; border-radius: 6px;
  padding: 8px; margin-bottom: 6px;
}
.pe-eqcap-browse-meta { font-size: 11.5px; color: #6b7280; margin: 4px 0; }
.pe-eqcap-browse-copy { display: block; font-size: 11.5px; color: #374151; margin: 4px 0; cursor: pointer; }
.pe-eqcap-linked {
  font-size: 9.5px; font-weight: 700; color: #0f766e;
  background: #ccfbf1; border-radius: 8px; padding: 0 6px; margin-left: 6px;
}

/* E2 — in-doc visual-equation overlay */
.pe-eq-visual-btn {
  font-size: 11px;
  padding: 1px 8px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #3730a3;
  cursor: pointer;
  white-space: nowrap;
}
.pe-eq-visual-btn:hover { background: #e0e7ff; }
.pe-eqviz-overlay {
  position: fixed; inset: 0;
  z-index: 4500;                    /* above modals 4000, below keyboard 5000 */
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.pe-eqviz-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  padding: 14px 16px;
  width: min(640px, 92vw);
}
.pe-eqviz-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pe-eqviz-host { min-height: 56px; }
.pe-eqviz-host math-field.pe-mathfield { font-size: 21px; padding: 10px; }
.pe-eqviz-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ── Tables II — merge selection + width controls ── */
.pe-grid-table td.pe-cell-selected {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  background: #eff6ff;
}
.pe-grid-table td.pe-cell-merged { background: #fafaf9; }
.pe-table-width-sel {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  padding: 0 2px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  color: #6b7280;
  max-width: 64px;
}
.pe-table-notes {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  resize: vertical;
}

/* ── Pill PAGES — the pane mounted full-width as a tool page ──
 * (?page=guide|equations|figures|tables|references). The pane keeps its
 * DOM + ids; only the chrome changes: static flow, full width, no
 * resize handle / close button / internal tab nav (the header pills ARE
 * the navigation). */
.pe-toolpage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 18px 60px;
}
.pe-toolpage-pane.pe-equations-pane {
  position: static;
  height: auto;
  width: 100% !important;   /* beats the persisted inline width */
  border-left: none;
  box-shadow: none;
  z-index: auto;
  overflow-y: visible;
}
.pe-toolpage-pane .pe-pane-resize-handle,
.pe-toolpage-pane .pe-equations-head,
.pe-toolpage-pane .pe-tab-nav { display: none; }
.pe-equations-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.pe-equations-title {
  font-size: 14px; font-weight: 600; color: #111827;
}
.pe-equations-section {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.pe-equations-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.pe-equations-section-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7280;
}
.pe-equations-section-hint {
  font-size: 10px; color: #9ca3af; font-style: italic;
}
.pe-equations-add-btn {
  font-size: 11px; padding: 3px 8px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 3px;
  cursor: pointer; color: #1d4ed8;
}
.pe-equations-add-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.pe-equations-empty {
  font-size: 12px; color: #9ca3af; font-style: italic;
  padding: 8px 0;
}

/* Library row. */
.pe-eq-library-row {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.pe-eq-library-row-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.pe-eq-library-name {
  flex: 1 1 auto;
  font-size: 13px; padding: 4px 6px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff;
}
.pe-eq-library-name:focus { border-color: #93c5fd; outline: none; }
.pe-eq-library-row-actions { display: flex; gap: 4px; }
.pe-eq-library-insert-btn {
  font-size: 11px; padding: 3px 8px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 3px;
  color: #1d4ed8; cursor: pointer;
}
.pe-eq-library-insert-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.pe-eq-library-srclabel {
  font-size: 10px; color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 2px;
}
.pe-eq-library-src {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 6px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff; resize: vertical;
  box-sizing: border-box;
}
.pe-eq-library-src:focus { border-color: #93c5fd; outline: none; }
.pe-eq-library-preview {
  margin-top: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid #f3f4f6; border-radius: 3px;
  font-size: 14px;
  text-align: center;
  min-height: 24px;
}
.pe-eq-library-preview-empty {
  color: #9ca3af; font-style: italic; font-size: 12px;
}

/* Numbered equation row. */
.pe-eq-numbered-row {
  display: flex; flex-direction: column;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms;
}
.pe-eq-numbered-row:hover { background: #eff6ff; border-color: #bfdbfe; }
.pe-eq-numbered-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.pe-eq-numbered-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #6b7280;
}
.pe-eq-numbered-preview {
  font-size: 14px;
  padding: 6px;
  background: #fff; border-radius: 3px;
  text-align: center;
  min-height: 24px;
}
.pe-eq-numbered-preview-empty {
  color: #9ca3af; font-style: italic; font-size: 12px;
}

/* Block-flash on click-to-scroll. */
@keyframes pe-block-flash-anim {
  0%   { background: #fef3c7; }
  100% { background: transparent; }
}
.pe-block.pe-block-flash {
  animation: pe-block-flash-anim 1200ms ease-out;
}

/* Number badge on a numbered equation block. */
.pe-eq-num-badge {
  background: #ede9fe; color: #5b21b6;
  border: 1px solid #ddd6fe;
  font-size: 11px; font-weight: 600;
  padding: 1px 8px;
  border-radius: 3px;
  font-family: inherit;
}

/* Equation block toolbar additions: numbered checkbox + label input. */
.pe-eq-num-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #4b5563;
  cursor: pointer;
  padding: 0 4px;
}
.pe-eq-num-toggle input[type="checkbox"] {
  margin: 0;
}
.pe-eq-label-input {
  font-size: 11px; padding: 2px 6px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff;
  width: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-eq-label-input:focus { border-color: #93c5fd; outline: none; }

/* Context menu (right-click on paragraph body). */
.pe-eq-context-menu {
  position: fixed;
  z-index: 4000;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 4px 0;
  min-width: 220px;
}
.pe-eq-context-menu-item {
  display: block; width: 100%;
  background: transparent; border: none;
  padding: 6px 12px;
  text-align: left;
  font-size: 13px; color: #1f2937;
  cursor: pointer;
}
.pe-eq-context-menu-item:hover { background: #eff6ff; color: #1d4ed8; }

/* Picker popover. */
.pe-eq-picker {
  position: fixed;
  z-index: 4100;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 8px;
  min-width: 320px;
  max-width: 420px;
  max-height: 60vh;
  display: flex; flex-direction: column;
}
.pe-eq-picker-title {
  font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.pe-eq-picker-search {
  width: 100%; box-sizing: border-box;
  font-size: 13px; padding: 5px 8px;
  border: 1px solid #d1d5db; border-radius: 3px;
  margin-bottom: 6px;
}
.pe-eq-picker-search:focus { border-color: #93c5fd; outline: none; }
.pe-eq-picker-list {
  overflow-y: auto;
  max-height: 320px;
}
.pe-eq-picker-row {
  display: block; width: 100%;
  background: #fff; border: 1px solid transparent;
  border-radius: 3px;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  margin-bottom: 2px;
}
.pe-eq-picker-row:hover, .pe-eq-picker-row.active {
  background: #eff6ff; border-color: #bfdbfe;
}
.pe-eq-picker-row-name {
  font-size: 12px; color: #111827; font-weight: 500;
  margin-bottom: 2px;
}
.pe-eq-picker-row-preview {
  font-size: 14px;
  padding: 4px 0;
  text-align: center;
}
.pe-eq-picker-empty,
.pe-eq-picker-empty-tex {
  color: #9ca3af; font-style: italic; font-size: 12px;
  padding: 8px 4px;
}
.pe-eq-picker-hint {
  font-size: 10px; color: #9ca3af;
  padding-top: 4px;
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
}

/* V3.648 — the picker's inline form. Replaces the window.prompt() chain that
   used to define a value: every field lives inside the dropdown the writer
   already had open, and errors land next to the field instead of in an
   alert. Same visual language as the rows above it. */
.pe-eq-picker-form {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 2px 2px 0;
}
/* Only the fields scroll — the error line and the buttons stay pinned. */
.pe-eq-picker-form-fields {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.pe-eq-picker-field {
  display: block;
  margin-bottom: 8px;
}
.pe-eq-picker-field-label {
  display: block;
  font-size: 11px; font-weight: 600; color: #374151;
  margin-bottom: 3px;
}
.pe-eq-picker-field-input {
  width: 100%; box-sizing: border-box;
  font-size: 13px; padding: 5px 8px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff; color: #111827;
}
.pe-eq-picker-field-input:focus { border-color: #93c5fd; outline: none; }
.pe-eq-picker-field-hint {
  display: block;
  font-size: 10px; color: #9ca3af;
  margin-top: 3px;
}
.pe-eq-picker-form-err {
  font-size: 11px; color: #991b1b;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 3px;
  padding: 5px 7px;
  flex: none;
  margin-top: 6px;
}
.pe-eq-picker-form-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  flex: none;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
  margin-top: 2px;
}
.pe-eq-picker-form-btn {
  font-size: 12px; padding: 5px 12px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff; color: #374151;
  cursor: pointer;
}
.pe-eq-picker-form-btn:hover { background: #f9fafb; }
.pe-eq-picker-form-btn-primary {
  background: #1e40af; border-color: #1e40af; color: #fff;
}
.pe-eq-picker-form-btn-primary:hover { background: #1d4ed8; }
.pe-eq-picker-form-btn-danger {
  background: #b91c1c; border-color: #b91c1c;
}
.pe-eq-picker-form-btn-danger:hover { background: #991b1b; }
/* V3.650 — a list line in the WRITE view renders as a real list item: the
   marker is an atomic chip (contenteditable=false, data-src = its exact
   source prefix) so it looks like a bullet, cannot be typed into, and still
   round-trips to the source byte-for-byte. Hanging indent per nesting level,
   so a wrapped item lines up under its own text. */
.pe-src-li {
  display: inline-block;
  padding-left: 1.5em;
  text-indent: -1.5em;
  vertical-align: top;
}
.pe-src-li[data-list-depth="1"] { padding-left: 3.0em; text-indent: -1.5em; }
.pe-src-li[data-list-depth="2"] { padding-left: 4.5em; text-indent: -1.5em; }
.pe-src-li[data-list-depth="3"] { padding-left: 6.0em; text-indent: -1.5em; }
/* text-indent inherits, and any descendant that establishes its own line box
   (the citation / value / footnote chips are inline-block) would apply the
   negative indent to its OWN text — sliding "smith2024" out of the left edge
   of its background box so it reads "mith2024". Reset it below the line. */
.pe-src-li * { text-indent: 0; }
.pe-li-mark {
  display: inline-block;
  width: 1.5em;
  text-indent: 0;
  /* Slightly muted against the prose: it is structure, not something you
     wrote. Close enough to the rendered <ul>/<ol> markers that switching
     between Write and the rendered view is not a jolt. */
  color: #4b5563;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* V3.649 — bullet / numbered lists inside a paragraph body. Rendered only
   when the body is NOT focused; while editing you see the raw `- item`
   source, exactly as you do for `**bold**`. Margins are tight because the
   list sits inside a paragraph rather than replacing it. */
.pe-body-list {
  margin: 4px 0 4px 0;
  padding-left: 22px;
}
.pe-body-list li { margin: 1px 0; }
.pe-body-list .pe-body-list { margin: 1px 0; }

.pe-eq-picker-form-note {
  font-size: 12px; color: #374151; line-height: 1.45;
  margin-bottom: 10px;
}

/* Inline-library equation chip in paragraph render. */
.pe-eqi-chip {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.pe-eqi-chip:hover { background: #fef3c7; border-color: #fde68a; }
.pe-eqi-chip-unknown {
  background: #fee2e2; border-color: #fecaca;
  color: #991b1b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.pe-eqi-chip-empty {
  background: #f3f4f6; border: 1px dashed #d1d5db;
  color: #9ca3af; font-style: italic;
  font-size: 11px;
}

/* Numbered-reference chip (Eq. N). */
.pe-eqref-chip {
  display: inline-block;
  background: #ede9fe; color: #5b21b6;
  border: 1px solid #ddd6fe;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
}
.pe-eqref-chip:hover { background: #ddd6fe; }
.pe-eqref-chip-unknown {
  background: #fee2e2; color: #991b1b;
  border-color: #fecaca;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  cursor: not-allowed;
}

/* ── Tabbed pane (V3.115) ─────────────────────────────────────────────
 *
 * Refactor of the V3.109 .pe-equations-pane into a four-tab container.
 * The old .pe-equations-pane class is kept on the same element for
 * back-compat (CSS rules above keep applying); .pe-tabbed-pane is a
 * cosmetic alias.
 */
.pe-tabbed-pane {
  /* All structural styling inherited from .pe-equations-pane. */
}
.pe-tab-nav {
  display: flex;
  gap: 2px;
  padding: 6px 10px 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.pe-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 10px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid transparent;
}
.pe-tab-btn:hover { background: #fff; color: #1d4ed8; }
.pe-tab-btn.active {
  background: #fff;
  color: #111827;
  border-color: #e5e7eb;
  border-bottom-color: #fff;
  font-weight: 500;
}
.pe-tab-content {
  /* Inactive tabs are display:none via JS; padding lives on the
   * inner sections. */
}
.pe-tab-placeholder {
  padding: 20px;
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
}

/* ── Figures tab — figure rows ───────────────────────────────────── */
.pe-fig-row {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  margin-bottom: 10px;
}
.pe-fig-row-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pe-fig-row-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pe-fig-thumb {
  width: 96px;
  height: 72px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pe-fig-thumb img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.pe-fig-thumb-empty {
  font-size: 10px;
  color: #9ca3af;
  font-style: italic;
}
.pe-fig-num-badge {
  background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-fig-caption-preview {
  font-size: 12px; color: #1f2937; line-height: 1.4;
}
.pe-fig-caption-preview-empty {
  color: #9ca3af; font-style: italic;
}
.pe-fig-field-label {
  font-size: 10px; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 4px;
}
.pe-fig-label-row {
  display: flex; align-items: center; gap: 4px;
}
.pe-fig-label-input {
  flex: 1 1 auto;
  font-size: 11px; padding: 3px 6px;
  border: 1px solid #d1d5db; border-radius: 3px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-fig-label-input:focus { border-color: #93c5fd; outline: none; }
.pe-fig-checkbox-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #4b5563;
}
.pe-fig-subfigs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.pe-fig-subfig-chips {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
}
.pe-fig-subfig-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a;
  font-size: 11px; font-weight: 600;
  padding: 1px 4px 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-fig-subfig-chip-x {
  background: transparent; border: none;
  color: #92400e; cursor: pointer;
  padding: 0 2px;
  font-size: 12px; line-height: 1;
}
.pe-fig-subfig-chip-x:hover { color: #b45309; }
.pe-fig-subfig-add {
  background: #fff; border: 1px dashed #d1d5db; border-radius: 3px;
  font-size: 10px; padding: 2px 6px;
  color: #6b7280; cursor: pointer;
}
.pe-fig-subfig-add:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.pe-fig-row-actions {
  display: flex; gap: 4px;
  margin-top: 4px;
}

/* Picker row variants for figure thumbnails. */
.pe-eq-picker-figthumb {
  display: block;
  max-width: 100%;
  max-height: 80px;
  margin: 4px auto;
  border-radius: 2px;
}
.pe-eq-picker-figthumb-empty {
  color: #9ca3af;
  font-size: 11px;
  font-style: italic;
}
.pe-eq-picker-figcap {
  font-size: 11px; color: #6b7280;
  margin-top: 4px; line-height: 1.3;
}

/* Figure reference chip in paragraph render. */
.pe-figref-chip {
  display: inline-block;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
}
.pe-figref-chip:hover { background: #fde68a; }
.pe-figref-chip-unknown {
  background: #fee2e2; color: #991b1b;
  border-color: #fecaca;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  cursor: not-allowed;
}
.pe-figref-chip-panel-unknown {
  /* Panel suffix is unknown — show the panel half faded so the writer
   * notices the typo without losing the underlying number. */
  text-decoration: underline dotted #b91c1c;
}

/* ── V3.120 — pill-tab bar + global toolbar + Tables tab ──────────── */

/* Pill tabs always visible at the top of the editor. No icons —
 * text-only labels. Active pill (= active tab in the open slide-out)
 * is highlighted blue. */
.pe-pillbar {
  display: flex;
  gap: 6px;
  padding: 10px 16px 6px;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}
.pe-pill {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}
.pe-pill:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.pe-pill.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 3px rgba(29, 78, 216, 0.25);
}

/* Global toolbar below the pills — three sectioned groups
 * (FORMAT / INLINE / REFERENCE), each with a small uppercase sublabel
 * floating above the buttons, separated by a vertical divider. */
.pe-global-toolbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px 16px 8px;
  background: linear-gradient(to bottom, #fafafa 0%, #f5f5f4 100%);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.02);
}
.pe-gt-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}
.pe-gt-group:first-child { padding-left: 0; }
.pe-gt-group:last-child  { padding-right: 0; }
.pe-gt-group-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  padding-left: 2px;
  user-select: none;
}
.pe-gt-group-row {
  display: flex;
  gap: 3px;
  align-items: center;
}
.pe-gt-divider {
  display: inline-block;
  width: 1px;
  background: #e5e7eb;
  margin: 14px 0 0;
  align-self: stretch;
}
.pe-gt-btn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.2;
  color: #374151;
  cursor: pointer;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 80ms, color 80ms, border-color 80ms, transform 60ms;
}
.pe-gt-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.pe-gt-btn:active {
  transform: translateY(1px);
}
.pe-gt-bold   { font-family: inherit; font-weight: 700; }
.pe-gt-italic { font-family: inherit; font-style: italic; font-weight: 600; }
.pe-gt-sub, .pe-gt-sup { font-family: inherit; }
.pe-gt-code   { font-size: 11px; }
.pe-gt-ref {
  font-family: inherit;
  padding: 4px 11px;
  font-weight: 500;
}
/* The Inline group's buttons get a slight tint to differentiate from
 * Reference group buttons — they create chips that *render the thing
 * itself*, not pointers to it. */
.pe-gt-group-inline .pe-gt-btn {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}
.pe-gt-group-inline .pe-gt-btn:hover {
  background: #fde68a;
  border-color: #fbbf24;
  color: #78350f;
}
/* Reference buttons stay white but get a subtle blue accent on hover
 * (matches the picker UI for cross-references). */
.pe-gt-group-reference .pe-gt-btn:hover {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1e40af;
}

/* The slide-out pane now reuses the pillbar for tab switching, so its
 * internal V3.115 tab nav is hidden. */
.pe-tabbed-pane .pe-tab-nav { display: none; }

/* Tables tab — row layout (V3.120). */
.pe-tab-row {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.pe-tab-row-head {
  display: flex; align-items: center; gap: 8px;
}
.pe-tab-num-badge {
  background: #d1fae5; color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-tab-schema {
  font-size: 11px;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-tab-caption-preview {
  font-size: 12px; color: #1f2937; line-height: 1.4;
}
.pe-tab-caption-preview-empty {
  color: #9ca3af; font-style: italic;
}

/* Table block — styling toolbar (booktabs / header / per-column align). */
.pe-table-stylebar {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px;
  padding: 4px 8px 6px;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
}
.pe-table-style-cb {
  display: inline-flex; align-items: center; gap: 4px;
  color: #4b5563;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.pe-table-style-label {
  font-size: 11px; color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.04em; margin-right: 4px;
}
.pe-table-align-wrap {
  display: inline-flex; align-items: center; gap: 4px;
}
.pe-table-align-col {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  overflow: hidden;
}
.pe-table-align-btn {
  background: #fff;
  border: none;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-right: 1px solid #d1d5db;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-table-align-btn:last-child { border-right: none; }
.pe-table-align-btn:hover { background: #eff6ff; color: #1d4ed8; }
.pe-table-align-btn.active {
  background: #1d4ed8;
  color: #fff;
}

/* Table caption editor below the grid. */
.pe-table-caption-label {
  font-size: 10px; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 8px; padding: 0 4px;
}
.pe-table-caption {
  margin: 4px 4px 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  min-height: 28px;
}
.pe-table-caption:focus { border-color: #93c5fd; outline: none; }

/* Table reference chip in paragraph render. */
.pe-tabref-chip {
  display: inline-block;
  background: #d1fae5; color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
}
.pe-tabref-chip:hover { background: #a7f3d0; }
.pe-tabref-chip-unknown {
  background: #fee2e2; color: #991b1b;
  border-color: #fecaca;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  cursor: not-allowed;
}

/* Section-reference chip + the ref-label inputs. */
.pe-secref-chip {
  display: inline-block;
  background: #e0e7ff; color: #3730a3;
  border: 1px solid #c7d2fe;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
}
.pe-secref-chip:hover { background: #c7d2fe; }
.pe-secref-chip-unknown {
  background: #fee2e2; color: #991b1b;
  border-color: #fecaca;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  cursor: not-allowed;
}
.pe-section-reflabel, .pe-subheading-reflabel {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 6px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #3730a3;
  width: 96px;
}
.pe-section-reflabel::placeholder, .pe-subheading-reflabel::placeholder { color: #a5b4fc; }

/* ── References tab (V3.122) ──────────────────────────────────────── */
.pe-ref-search-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 8px;
}
.pe-ref-search-input:focus { border-color: #93c5fd; outline: none; }

.pe-ref-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.pe-ref-row-head {
  display: flex; align-items: center; gap: 8px;
}
.pe-ref-status {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-ref-status-cited {
  background: #d1fae5; color: #065f46; border-color: #a7f3d0;
}
.pe-ref-status-linked {
  background: #fef3c7; color: #92400e; border-color: #fde68a;
}
.pe-ref-status-library {
  background: #f3f4f6; color: #4b5563; border-color: #e5e7eb;
}
.pe-ref-status-unknown {
  background: #fee2e2; color: #991b1b; border-color: #fecaca;
}
.pe-ref-row-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #6b7280;
}
.pe-ref-row-title {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.3;
}
.pe-ref-row-title:hover { color: #1d4ed8; text-decoration: underline; }
.pe-ref-row-meta {
  font-size: 11px; color: #6b7280;
}
.pe-ref-row-actions {
  display: flex; gap: 4px;
  margin-top: 4px;
}
.pe-ref-row-unknown {
  border-style: dashed;
}

/* ── V3.124 — pane polish ─────────────────────────────────────────── */

/* Resize handle on the left edge of the slide-out pane. */
.pe-pane-resize-handle {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 5px;
  cursor: ew-resize;
  background: transparent;
  z-index: 1;
}
.pe-pane-resize-handle:hover {
  background: linear-gradient(to right, transparent 40%, #93c5fd 50%, transparent 60%);
}
body.pe-pane-resizing {
  cursor: ew-resize;
  user-select: none;
}
body.pe-pane-resizing iframe { pointer-events: none; }

/* V3.124 — collapsible details sections. Reuses .pe-equations-section
 * styles but adds a chevron via the summary's marker pseudo. */
details.pe-equations-collapsible {
  /* Base padding/spacing inherited from .pe-equations-section. */
}
details.pe-equations-collapsible > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 16px;
}
details.pe-equations-collapsible > summary::-webkit-details-marker { display: none; }
details.pe-equations-collapsible > summary::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 100ms;
  color: #9ca3af;
  font-size: 10px;
}
details.pe-equations-collapsible:not([open]) > summary::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* V3.124 — Equations tab single + Equation button row. */
.pe-equations-tab-add-row {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

/* V3.124 — equation creation modal: type radio group. */
.pe-eq-create-type-wrap {
  display: flex; flex-direction: column; gap: 4px;
}
.pe-eq-create-type-radio {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #1f2937;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.pe-eq-create-type-radio:hover { background: #f9fafb; }
.pe-eq-create-type-radio input { margin: 0; }

/* V3.124 — "+ Add to library" pill replaces the V3.122 unknown badge. */
.pe-ref-status-add-to-library {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.pe-ref-status-add-to-library:hover {
  background: #fecaca;
}

/* ── V3.125 — block reorder + inline + Add inserter ──────────────── */

/* + Add button between blocks. Compact, hover-only emphasis. */
.pe-block-inserter {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed transparent;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 0;
  margin: 1px 0;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  transition: background 80ms, color 80ms, border-color 80ms;
  opacity: 0.5;
}
.pe-block-inserter:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  opacity: 1;
}

/* Block inserter menu — small popover anchored at the + Add button. */
.pe-block-inserter-menu {
  position: fixed;
  z-index: 4000;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 180px;
}
.pe-block-inserter-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 14px;
  text-align: left;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
}
.pe-block-inserter-item:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.pe-block-inserter-item.disabled {
  color: #d1d5db;
  cursor: not-allowed;
}
.pe-block-inserter-item.disabled:hover {
  background: transparent;
  color: #d1d5db;
}

/* Up / down arrow buttons in block toolbars. */
.pe-block-arrow-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-block-arrow-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* Drag affordance on the existing `⋮⋮` handle. */
.pe-block-handle {
  cursor: grab;
}
.pe-block-handle:active {
  cursor: grabbing;
}
.pe-block.is-drag-source {
  opacity: 0.5;
}
.pe-block.is-drop-target {
  outline: 2px dashed #1d4ed8;
  outline-offset: 2px;
}

/* "Edit in panel" link button on doc-side figure / table block toolbars. */
.pe-edit-in-panel-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #1d4ed8;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  text-decoration: none;
}
.pe-edit-in-panel-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  text-decoration: underline;
}

/* ── V3.127 — preview-only doc-side figure / table blocks ──────────
 *
 * The full editor moved to the panel's Figures / Tables tab. Doc-side
 * blocks now show ONLY the rendered output (image/grid + caption). All
 * inline editor controls (upload, layout, caption editor, label input,
 * grid +Row/+Col, alignment toolbar) are hidden via these selectors —
 * the JS that creates them is unchanged for back-compat. The
 * Edit-in-panel ↗ link is the only interactive entry point. */
.pe-figure-preview-only .pe-eq-num-toggle,
.pe-figure-preview-only .pe-eq-label-input,
.pe-figure-preview-only .pe-figure-uploadrow,
.pe-figure-preview-only .pe-figure-layout,
.pe-figure-preview-only .pe-figure-caption-label,
.pe-figure-preview-only .pe-figure-rawtex {
  display: none !important;
}
.pe-figure-preview-only .pe-figure-caption {
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: default;
}

.pe-table-preview-only .pe-eq-num-toggle,
.pe-table-preview-only .pe-eq-label-input,
.pe-table-preview-only .pe-table-stylebar,
.pe-table-preview-only .pe-table-caption-label {
  display: none !important;
}
.pe-table-preview-only .pe-table-caption {
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: default;
}
.pe-table-preview-only .pe-grid-cell {
  cursor: default;
}

/* Panel-side full editors expanded inside <details>. */
.pe-fig-editor,
.pe-tab-editor {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.pe-fig-editor > summary,
.pe-tab-editor > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  user-select: none;
  margin-bottom: 6px;
}
.pe-fig-editor-body,
.pe-tab-editor-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pe-fig-editor-body .pe-figure-uploadrow {
  margin: 0;
}
.pe-fig-editor-body .pe-figure-caption {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 6px 8px;
  min-height: 28px;
}
.pe-fig-editor-body .pe-figure-layout-grid {
  margin-top: 0;
  padding: 6px 8px;
}
.pe-tab-editor-body .pe-table-stylebar {
  background: transparent;
  border: none;
  padding: 0;
}
.pe-tab-editor-body .pe-grid-table {
  font-size: 12px;
}
.pe-tab-editor-body .pe-table-caption {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 6px 8px;
}

/* ── V3.131 — Figures panel redesign ──────────────────────────────
 *
 * Streamlined Figures-tab row with four sections in user-task order:
 * header (thumbnail + label/numbered + actions) → caption editor →
 * sub-panels → collapsed Layout/upload. The redundant V3.115 caption
 * preview is gone.
 */
.pe-fig-row-v131 {
  /* Override V3.115 .pe-fig-row flex-row layout — V3.131 stacks
   * vertically with discrete sections. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Header: thumbnail + identity + actions. */
.pe-fig-row-header {
  display: grid;
  grid-template-columns: 156px 1fr auto;
  gap: 14px;
  align-items: stretch;
}
.pe-fig-thumb-large {
  width: 156px;
  height: 110px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pe-fig-thumb-large img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.pe-fig-thumb-empty-hint {
  color: #9ca3af;
  font-size: 12px;
  font-style: italic;
}

/* Fig. N badge overlay on thumbnail. */
.pe-fig-num-badge-overlay {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(31, 41, 55, 0.85);
  color: #fef3c7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Identity column: label input + numbered toggle. */
.pe-fig-id-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.pe-fig-label-input-large {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100%;
  box-sizing: border-box;
}
.pe-fig-label-input-large:focus {
  border-color: #93c5fd;
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.pe-fig-numbered-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
}
.pe-fig-numbered-toggle input { margin: 0; }

/* Actions column: stacked buttons. */
.pe-fig-actions-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  justify-content: center;
}
.pe-fig-action-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #1f2937;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.pe-fig-action-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.pe-fig-action-primary {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.pe-fig-action-primary:hover {
  background: #1e40af;
  border-color: #1e40af;
  color: #fff;
}
.pe-fig-action-danger {
  color: #b91c1c;
  border-color: #fecaca;
}
.pe-fig-action-danger:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
}

/* Sections (Caption, Sub-panels, Layout). */
.pe-fig-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pe-fig-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.pe-fig-section-hint {
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
  margin-bottom: 2px;
}

/* Caption editor — full-width prominent box. */
.pe-fig-caption-editor {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 36px;
}
.pe-fig-caption-editor:focus {
  background: #fff;
  border-color: #93c5fd;
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Sub-panel chip styling refresh. */
.pe-fig-row-v131 .pe-fig-subfigs {
  align-items: center;
  gap: 6px;
}
.pe-fig-row-v131 .pe-fig-subfigs > .pe-fig-field-label { display: none; }
.pe-fig-row-v131 .pe-fig-subfig-chips { gap: 6px; }
.pe-fig-row-v131 .pe-fig-subfig-chip {
  font-size: 12px;
  padding: 3px 6px 3px 10px;
  border-radius: 4px;
}
.pe-fig-row-v131 .pe-fig-subfig-chip-x {
  font-size: 14px;
  padding: 0 4px;
  margin-left: 2px;
}
.pe-fig-row-v131 .pe-fig-subfig-add {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Layout disclosure (collapsed by default). */
.pe-fig-layout-details {
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
}
.pe-fig-layout-summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 16px;
}
.pe-fig-layout-summary::-webkit-details-marker { display: none; }
.pe-fig-layout-summary::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 100ms;
  color: #9ca3af;
  font-size: 10px;
}
.pe-fig-layout-details:not([open]) .pe-fig-layout-summary::after {
  transform: translateY(-50%) rotate(-90deg);
}
.pe-fig-layout-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.pe-fig-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pe-fig-upload-btn {
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}
.pe-fig-upload-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.pe-fig-upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pe-fig-upload-status {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}
.pe-fig-layout-grid-v131 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 10px;
}

/* ── Skeleton outline (V3.104) ─────────────────────────────────────
 *
 * The skeleton was promoted from a flat Y.Text to a Y.Array<Y.Map>
 * outline. Each bullet (`.pe-skeleton-item`) lays out as a flex row:
 * marker | bullet (flex:1) | flag-or-pill. Indent is applied via
 * inline padding-left on the row (set by JS per item.depth) so we
 * don't need nested ULs.
 */
.pe-skeleton-outline {
  white-space: normal;            /* override pe-block-content pre-wrap */
  padding: 6px 4px 6px 4px;       /* tighter than the legacy textbox */
  background: #f9fafb;
  border-radius: 4px;
  border: 1px dashed #cbd5e1;
  font-style: normal;             /* italic only on bullet text below */
  color: #1f2937;
}
.pe-skeleton-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 1px 0;
  padding-right: 4px;
  position: relative;
}
.pe-skeleton-item:hover {
  background: #f1f5f9;
  border-radius: 3px;
}
.pe-skeleton-marker {
  flex: 0 0 auto;
  width: 16px; text-align: center;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.55;
  user-select: none;
}
.pe-skeleton-bullet {
  flex: 1 1 auto;
  font-style: italic;
  color: #475569;
  line-height: 1.5;
  outline: none;
  padding: 0 2px;
  min-height: 1.4em;
  word-wrap: break-word;
}
.pe-skeleton-bullet:focus {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}
.pe-skeleton-bullet[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: #cbd5e1; pointer-events: none;
  font-style: italic;
}
.pe-skeleton-flag-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  opacity: 0;             /* hidden until the row is hovered */
  transition: opacity 100ms;
}
.pe-skeleton-item:hover .pe-skeleton-flag-btn,
.pe-skeleton-bullet:focus + .pe-skeleton-flag-btn,
.pe-skeleton-flag-btn:focus {
  opacity: 1;
}
.pe-skeleton-flag-btn:hover {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

/* Claim status pill on flagged bullets. */
.pe-claim-pill {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-style: normal;
  text-transform: lowercase;
  white-space: nowrap;
  user-select: none;
}
.pe-claim-pill[data-status="developing"] {
  background: #fef3c7; border-color: #fde68a; color: #92400e;
}
.pe-claim-pill[data-status="needs-more-evidence"] {
  background: #fee2e2; border-color: #fecaca; color: #991b1b;
}
.pe-claim-pill[data-status="supported"] {
  background: #d1fae5; border-color: #a7f3d0; color: #065f46;
}
.pe-claim-pill[data-status="abandoned"] {
  background: #f3f4f6; border-color: #e5e7eb; color: #6b7280;
  text-decoration: line-through;
}
.pe-claim-pill[data-status="loading"],
.pe-claim-pill[data-status="unknown"] {
  background: #f3f4f6; border-color: #e5e7eb; color: #9ca3af;
}
.pe-claim-pill:hover { filter: brightness(0.97); }

/* ── Flag-as-claim modal ── */
.pe-claim-flag-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.pe-claim-flag-modal-card {
  width: 100%; max-width: 520px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pe-claim-flag-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.pe-claim-flag-modal-head h3 {
  margin: 0; font-size: 16px; color: #111827;
}
.pe-claim-flag-modal-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.pe-claim-flag-modal-body label {
  font-size: 12px; color: #4b5563; font-weight: 600;
}
.pe-claim-flag-hint {
  margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5;
}
.pe-claim-flag-statement {
  font-size: 14px; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 4px;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
}
.pe-claim-flag-statement:focus {
  border-color: #93c5fd; outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
.pe-claim-flag-status {
  font-size: 13px; padding: 6px 10px;
  border: 1px solid #d1d5db; border-radius: 4px;
  background: #fff;
}
.pe-claim-flag-err {
  font-size: 13px; color: #b91c1c;
  padding: 6px 10px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px;
}
.pe-claim-flag-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* ── Claim detail slide-out panel ── */
.pe-claim-detail-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100%; width: 360px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -8px 0 20px rgba(0,0,0,0.08);
  z-index: 3500;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.pe-claim-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.pe-claim-detail-title {
  font-size: 14px; font-weight: 600; color: #111827;
}
.pe-claim-detail-loading {
  padding: 20px; color: #9ca3af; font-size: 13px;
}
.pe-claim-detail-stmt {
  padding: 12px 14px; font-size: 14px; color: #1f2937; line-height: 1.5;
  border-bottom: 1px solid #e5e7eb;
}
.pe-claim-detail-section {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.pe-claim-detail-heading {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7280; margin-bottom: 6px;
}
.pe-claim-detail-heading-for { color: #065f46; }
.pe-claim-detail-heading-against { color: #991b1b; }
.pe-claim-detail-empty {
  font-size: 13px; color: #9ca3af; font-style: italic;
}
.pe-claim-detail-evidence {
  display: block;
  font-size: 12px; padding: 4px 6px; margin: 2px 0;
  border-radius: 3px;
  background: #f9fafb; color: #1f2937;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-claim-detail-evidence:hover {
  background: #eff6ff; color: #1d4ed8;
}
.pe-claim-detail-status-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  font-size: 12px; color: #4b5563;
}
.pe-claim-detail-status-row select {
  font-size: 12px; padding: 4px 8px;
  border: 1px solid #d1d5db; border-radius: 4px;
  background: #fff;
}

.pe-add-block {
  margin-top: 6px;
  font-size: 12px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  width: 100%; text-align: left;
  color: #6b7280;
}
.pe-add-block:hover {
  background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}

.pe-empty {
  padding: 40px 20px; text-align: center; color: #6b7280;
  border: 1px dashed #d1d5db; border-radius: 8px;
  margin: 20px 0;
}

.pe-unsupported {
  background: #fef3c7; border: 1px solid #fde68a;
  padding: 8px 10px; border-radius: 4px;
  font-size: 12px; color: #92400e;
}

/* Form helpers reused by modal */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.form-group input,
.form-group select {
  width: 100%; padding: 6px 8px;
  border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px;
}
.form-hint { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────────
   V3.132 — panel-first authoring (unplaced libraries + doc-side
   picker into the panel). Adds:
   - unplaced badge variants on figure/table thumbnails
   - .pe-place-picker (panel "Place at end of section…" popover)
   - .pe-doc-picker (doc-side + Add → Figure/Table/Equation popover)
   ───────────────────────────────────────────────────────────────── */

/* Unplaced badge variants on the thumbnail/head pills. */
.pe-fig-num-badge-overlay.pe-fig-num-badge-unplaced,
.pe-tab-num-badge.pe-tab-num-badge-unplaced {
  background: rgba(120, 53, 15, 0.85);
  color: #fef3c7;
}

/* Make unplaced rows visually distinct (left-side accent bar). */
.pe-fig-row-unplaced,
.pe-tab-row-unplaced {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

/* Place-in-section picker (panel side). */
.pe-place-picker {
  position: fixed;
  z-index: 950;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
}
.pe-place-picker-head {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px 4px;
}
.pe-place-picker-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pe-place-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
}
.pe-place-picker-row:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.pe-place-picker-row-meta {
  font-size: 11px;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-place-picker-empty {
  font-size: 12px;
  color: #6b7280;
  padding: 12px;
  font-style: italic;
}

/* Doc-side picker (+ Add → Figure / Table / Equation). */
.pe-doc-picker {
  position: fixed;
  z-index: 950;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  min-width: 360px;
  max-width: 480px;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pe-doc-picker-head {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px 4px;
}
.pe-doc-picker-search {
  margin: 4px 12px 8px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
}
.pe-doc-picker-rows {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pe-doc-picker-section-head {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 8px 2px;
}
.pe-doc-picker-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-column-gap: 8px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: #1f2937;
}
.pe-doc-picker-row:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.pe-doc-picker-row-new {
  background: #f0fdf4;
  border-color: #86efac;
  color: #047857;
  margin-bottom: 4px;
}
.pe-doc-picker-row-new:hover {
  background: #dcfce7;
}
.pe-doc-picker-row-badge {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 3px;
  padding: 3px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pe-doc-picker-row-new .pe-doc-picker-row-badge {
  display: none;
}
.pe-doc-picker-row-title {
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-doc-picker-row-subtitle {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-doc-picker-empty {
  font-size: 13px;
  color: #6b7280;
  padding: 12px;
  font-style: italic;
  text-align: center;
}

/* ─── V3.216 — anchored comment highlights on paragraph bodies ──── */
.pe-comment-highlight {
  background-color: rgba(252, 211, 77, 0.35);
  border-radius: 2px;
  padding: 0 1px;
  /* V3.219 — highlights are no longer clickable; cursor stays as
   * default text-caret so the writer can place the caret inside a
   * highlighted span like any other prose. Hover still glows + the
   * delegated mouseover handler still links the panel card. */
  cursor: text;
  transition: background-color 0.12s ease;
}
.pe-comment-highlight:hover {
  background-color: rgba(252, 211, 77, 0.65);
}
.pe-comment-highlight-resolved {
  border-bottom: 1px dotted rgba(107, 114, 128, 0.6);
  cursor: text;
  transition: border-bottom-color 0.12s ease;
}
.pe-comment-highlight-resolved:hover {
  border-bottom-color: rgba(107, 114, 128, 1);
  border-bottom-style: solid;
}
/* When the anchor-scope filter is active, surface a chip above the
 * results making the narrow scope obvious + clearable. */
.pe-comments-anchor-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  color: #78350f;
  font-style: normal;
  padding: 5px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.pe-comments-scope-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #92400e;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.pe-comments-scope-clear:hover { color: #78350f; }

/* ─── V3.217 — soft section lock badge + non-holder treatment ─── */
.pe-block-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  user-select: none;
}
.pe-block-lock-badge[hidden] { display: none; }
.pe-block-lock-badge.pe-block-lock-self {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.pe-block-lock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.pe-block-lock-name {
  white-space: nowrap;
}
/* A locked-by-other block dims the editable surfaces, shows a
 * not-allowed cursor, and gets a left-edge color accent matching
 * the holder's presence color (set inline via `--pe-lock-color`). */
.pe-block[data-locked="other"] {
  background-color: #fafafa;
  border-left: 3px solid var(--pe-lock-color, #f59e0b);
  position: relative;
}
.pe-block[data-locked="other"] .pe-block-content,
.pe-block[data-locked="other"] .pe-skeleton-bullet {
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.015);
}
/* V3.218 — self-held lock paints a ring around the whole block so the
 * holder can see at a glance which block they own. V3.219 — ring uses
 * the holder's presence color via `--pe-lock-color` (the same hue
 * rendered in the lock-dot and presence-row avatar). V3.221 — switched
 * from `outline` to `box-shadow`-based ring + recolored full border
 * because `outline` was being suppressed by an ancestor's stacking
 * context in production, making the feature look "broken." Box-shadow
 * is universally rendered and `border-color` (instead of just
 * `border-left`) flips all four edges so the change is unmistakable.
 * `!important` on `border-color` defeats the base `.pe-block`'s
 * `border: 1px solid #e5e7eb` longhand without having to rewrite the
 * base rule. */
.pe-block[data-locked="self"] {
  border-color: var(--pe-lock-color, #9ca3af) !important;
  box-shadow: 0 0 0 3px var(--pe-lock-color, #9ca3af) !important;
}
.pe-block-lock-badge.pe-block-lock-self {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--pe-lock-color, #d1d5db);
  color: #111827;
}
/* Floating toast that surfaces who holds the lock when a non-holder
 * clicks into the body. Auto-hides after ~1.8s. */
.pe-lock-toast {
  position: absolute;
  z-index: 4400;
  background: #1f2937;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid #f59e0b;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  white-space: nowrap;
}
.pe-lock-toast[hidden] { display: none; }

/* ─── V3.218 — comment ↔ highlight two-way hover glow ─── */
.pe-comment-highlight.pe-comment-highlight-hover,
.pe-comment-highlight-resolved.pe-comment-highlight-hover {
  background-color: rgba(252, 211, 77, 0.85);
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  border-bottom-color: transparent;
}
.pe-comment.pe-comment-anchor-hover {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* ─── V3.223 / V3.224 — Coauthors popover. Reuses the citation-picker
 * shell (`.pe-cite-popover` + `.pe-cite-pop-*` row primitives) so the
 * picker visually matches the references picker. Overrides below are
 * for the per-row layout extras (avatar + role select). */
.pe-coauthor-pop-hint {
  padding: 6px 12px 8px;
  font-size: 11px;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.pe-coauthor-popover .pe-coauthor-pop-list {
  max-height: 420px;
}
/* Per-row horizontal layout (avatar | name/email | role select) — the
 * base `.pe-cite-pop-row` is column-flex so we flip it back to row. */
.pe-coauthor-row.pe-cite-pop-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.pe-coauthor-row[data-role="first"]    { background: #fffbeb; }
.pe-coauthor-row[data-role="cofirst"]  { background: #fefce8; }
.pe-coauthor-row[data-role="coauthor"] { background: #f0fdf4; }
.pe-coauthor-row[data-role="first"]:hover,
.pe-coauthor-row[data-role="cofirst"]:hover,
.pe-coauthor-row[data-role="coauthor"]:hover {
  /* Keep the tinted background on hover; base `.pe-cite-pop-row:hover`
   * would otherwise repaint to plain blue. */
  filter: brightness(0.97);
}
.pe-coauthor-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.pe-coauthor-role {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.pe-coauthor-role:focus { outline: none; border-color: #2563eb; }

/* ─────────────────────────────────────────────────────────────────────
 * V3.235 — Paper-builder editor phone view (Phase 3 of mobile compat).
 *
 * The desktop editor uses a 3-column flex layout: 240px sidebar +
 * flex main + 320px comments pane. On phone (≤640px) both side panels
 * fly off-screen via the shared .rm-mobile-drawer-* pattern in
 * style.css; toggle buttons live in .pe-topbar. paper-editor.js wires
 * the host (.pe-page) + drawer classes (.pe-sidebar, .pe-comments-pane)
 * at editor-mode attach time so the pattern is dormant in list mode.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pe-topbar {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .pe-back { font-size: var(--fs-xs); }
  .pe-title-input {
    font-size: var(--fs-md);
    min-width: 0;
    flex: 1 1 100%;
    order: 3;  /* push title onto its own row, after the drawer toggles */
  }
  .pe-savestate {
    font-size: var(--fs-xs);
    min-width: 0;
  }
  .pe-topbar .rm-mobile-drawer-toggle {
    font-size: var(--fs-xs);
    padding: var(--sp-1) var(--sp-2);
    min-height: var(--tap-min-compact);
  }

  /* Collapse the in-main viewfilter bar so its selects + labels wrap. */
  .pe-viewfilter-bar {
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
  }
  .pe-viewfilter-bar select { font-size: var(--fs-sm); }

  /* Drawer overrides: defeat the desktop fixed widths so panels span
   * the drawer width. The shared pattern in style.css sets
   * width: 85vw + max-width: 360px. Comments pane needs
   * overflow: hidden so its inner cards-list flex column scrolls. */
  .pe-page.rm-mobile-drawer-host .pe-sidebar {
    width: 85vw;
    max-width: 360px;
    min-width: 0;
  }
  .pe-page.rm-mobile-drawer-host .pe-comments-pane {
    width: 85vw;
    max-width: 360px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}


/* ── V3.334 — Writing Guide tab ──────────────────────────────────────
 * Section-aware curated guidance + live self-checks. Compact by
 * default; deeper detail lives behind <details> disclosures. */
.pe-guide {
  padding: 14px 14px 20px;
  font-size: 13px;
  color: #374151;
}
.pe-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pe-guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pe-guide-icon { font-size: 18px; line-height: 1; }
.pe-guide-kind {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-guide-pin { font-size: 14px; }
.pe-guide-pin[aria-pressed="true"] { background: #eef2ff; }

.pe-guide-purpose {
  color: #6b7280;
  line-height: 1.45;
  margin-bottom: 12px;
}

/* Rhetorical moves — click a row to reveal its hint. */
.pe-guide-moves {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  counter-reset: pe-guide-move;
}
.pe-guide-move {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
  overflow: hidden;
}
.pe-guide-move.open { background: #fff; border-color: #d1d5db; }
.pe-guide-move-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #111827;
}
.pe-guide-move-num { counter-increment: pe-guide-move; display: inline-flex; }
.pe-guide-move-num::before {
  content: counter(pe-guide-move);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 600;
}
.pe-guide-move-label { flex: 1; font-weight: 500; }
.pe-guide-move-hint {
  padding: 0 10px 9px 36px;
  color: #6b7280;
  line-height: 1.45;
  font-size: 12.5px;
}

/* Live self-checks. */
.pe-guide-checks {
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
  margin-bottom: 14px;
}
.pe-guide-checks-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  margin-bottom: 6px;
}
.pe-guide-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  line-height: 1.4;
}
.pe-guide-check-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: #9ca3af;
}
.pe-guide-check--warn .pe-guide-check-dot { background: #f59e0b; }
.pe-guide-check--info .pe-guide-check-dot { background: #3b82f6; }
.pe-guide-check--ok   .pe-guide-check-dot { background: #10b981; }
.pe-guide-check--warn .pe-guide-check-msg { color: #92400e; }
.pe-guide-check-msg { flex: 1; }

/* Collapsed detail disclosures. */
.pe-guide-details { margin-bottom: 8px; }
.pe-guide-details > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #374151;
  padding: 6px 16px 6px 0;
  position: relative;
}
.pe-guide-details > summary::-webkit-details-marker { display: none; }
.pe-guide-details > summary::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 100ms;
  color: #9ca3af;
  font-size: 10px;
}
.pe-guide-details:not([open]) > summary::after {
  transform: translateY(-50%) rotate(-90deg);
}
.pe-guide-list {
  margin: 4px 0 8px;
  padding-left: 18px;
  color: #4b5563;
  line-height: 1.5;
}
.pe-guide-list li { margin-bottom: 4px; }

/* Good vs. weak example. */
.pe-guide-example {
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
}
.pe-guide-example--good { background: #f0fdf4; border-color: #bbf7d0; }
.pe-guide-example--bad  { background: #fef2f2; border-color: #fecaca; }
.pe-guide-example-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.pe-guide-example--good .pe-guide-example-tag { color: #15803d; }
.pe-guide-example--bad  .pe-guide-example-tag { color: #b91c1c; }
.pe-guide-example-text { color: #374151; line-height: 1.45; font-size: 12.5px; }
.pe-guide-example-note { color: #6b7280; font-style: italic; font-size: 12px; margin-top: 2px; }

/* Footer lesson link. */
.pe-guide-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.pe-guide-lesson-link { color: #4338ca; font-weight: 600; text-decoration: none; }
.pe-guide-lesson-link:hover { text-decoration: underline; }

/* Paper-level (no focus) view — per-section word counts. */
.pe-guide-section-counts { margin-top: 12px; border-top: 1px solid #f3f4f6; padding-top: 10px; }
.pe-guide-section-count {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid #f9fafb;
}
.pe-guide-section-name { color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-guide-section-words { color: #9ca3af; flex: none; font-variant-numeric: tabular-nums; }
.pe-guide-section-words.over { color: #b91c1c; font-weight: 600; }





/* ── V3.344 — template-aware citation chip families ─────────────────
 * paper-cite-style.js loads the export template's render_family and
 * renderCitationChip stamps the group with a family class. Superscript
 * raises the whole group; bracket/paren wrapping is emitted as text. */
.pe-cite-group.pe-cite-family-superscript {
  vertical-align: super;
  font-size: 0.72em;
  line-height: 1;
}
.pe-cite-group.pe-cite-family-superscript .pe-cite-chip { padding: 0 2px; }
/* V3.393 — numeric groups never split across lines (matches the
 * compiled output, where \cite superscripts/brackets are unbreakable). */
.pe-cite-group.pe-cite-family-superscript,
.pe-cite-group.pe-cite-family-numeric-bracket,
.pe-cite-group.pe-cite-family-numeric-paren {
  white-space: nowrap;
}

/* Narrative checkbox in the citation popover footer. */
.pe-cite-pop-narrative {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
}
.pe-cite-pop-narrative input { margin: 0; }


/* ── V3.345 — footnote chips + bibliography preview ────────────────── */
.pe-footnote-chip {
  display: inline-block;
  vertical-align: super;
  font-size: 0.72em;
  line-height: 1;
  padding: 0 3px;
  border-radius: 3px;
  background: #fef3c7;
  color: #92400e;
  cursor: pointer;
  user-select: none;
}
.pe-footnote-chip:hover { background: #fde68a; }

.pe-bib-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.pe-bib-num {
  flex: none;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.pe-bib-body { flex: 1; min-width: 0; }
.pe-bib-row-unresolved .pe-bib-body { color: #b91c1c; }


/* ── V3.346 — section word-count badges + shortcuts card ──────────── */
.pe-section-words {
  font-size: 11px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  white-space: nowrap;
}
.pe-section-words.over { color: #b91c1c; font-weight: 600; }

.pe-shortcuts-pop {
  position: fixed;
  z-index: 1200;
  width: 360px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 12px 14px;
  font-size: 12.5px;
  color: #374151;
}
.pe-shortcuts-title { font-weight: 600; margin-bottom: 8px; color: #111827; }
.pe-shortcuts-table { border-collapse: collapse; width: 100%; }
.pe-shortcuts-table td { padding: 3px 6px 3px 0; vertical-align: top; line-height: 1.4; }
.pe-shortcuts-table td:first-child { white-space: nowrap; color: #4b5563; }
.pe-shortcuts-table kbd {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 11px;
}


/* ── V3.350 — Evidence Inbox (References tab) ──────────────────────── */
.pe-evidence-group-head {
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.pe-evidence-group-title { color: inherit; text-decoration: none; }
.pe-evidence-group-title:hover { text-decoration: underline; }
.pe-evidence-row {
  padding: 7px 9px;
  margin-bottom: 6px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}
.pe-evidence-row--used { opacity: 0.55; }
.pe-evidence-quote {
  font-style: italic;
  font-size: 12px;
  color: #374151;
  border-left: 3px solid #d1d5db;
  padding-left: 8px;
  line-height: 1.45;
}
.pe-evidence-comment {
  font-size: 12px;
  color: #4b5563;
  margin-top: 4px;
  line-height: 1.4;
}
.pe-evidence-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pe-evidence-meta-spacer { flex: 1; }
.pe-evidence-stance, .pe-evidence-type, .pe-evidence-used-mark {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #4b5563;
  white-space: nowrap;
}
.pe-evidence-stance-for { background: #dcfce7; color: #15803d; }
.pe-evidence-stance-against { background: #fee2e2; color: #b91c1c; }
.pe-evidence-claim-mark { background: #ede9fe; color: #6d28d9; }
.pe-evidence-used-mark { background: #f0fdf4; color: #15803d; }
.pe-evidence-refresh { margin-left: 6px; font-size: 12px; }
.pe-evidence-meta .btn.btn-sm { font-size: 11px; padding: 2px 8px; }


/* ── V3.351 — citation-row library richness ────────────────────────── */
.pe-cite-pdf { font-size: 11px; }
.pe-cite-tag {
  display: inline-block;
  font-size: 10px;
  padding: 0 6px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.pe-ref-abstract {
  margin-top: 6px;
  padding: 7px 9px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: #4b5563;
  max-height: 180px;
  overflow-y: auto;
}

/* ── V3.369 — completed section: locked + final manuscript form ──
 * .pe-section-final wraps a section whose completed_at is set: every
 * block renders read-only through renderParagraphHtml (resolved
 * citations / KaTeX / cross-refs), edit chrome hides, prose goes serif
 * + justified like a manuscript page (on screen — not the PDF export). */

/* V3.455 — section STATUS pill: reflects state, click advances it.
 * Amber = editing (draft) · green = completed (locked) · red = needs
 * revision (sent back by lead author / PI via the ⚑ button). */
.pe-section-status-pill {
  font-size: 11px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.pe-section-status-editing {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e;
}
.pe-section-status-editing:hover { background: #fde68a; }
.pe-section-status-complete {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}
.pe-section-status-complete:hover { background: #d1fae5; }
.pe-section-status-revision {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 600;
}
.pe-section-status-revision:hover { background: #fecaca; }
.pe-section-flag-btn {
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff;
  color: #b91c1c;
  cursor: pointer;
  white-space: nowrap;
}
.pe-section-flag-btn:hover { background: #fee2e2; }

/* V3.456 — appendix DIVIDER bar (replaces the per-section § toggle):
 * one movable rule between sections; everything below it is the
 * appendix zone (A/B/C numbering + \appendix on compile). */
.pe-appendix-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  color: #6d28d9;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pe-appendix-divider::before,
.pe-appendix-divider::after {
  content: '';
  flex: 1;
  border-top: 2px dashed #c4b5fd;
}
.pe-appendix-divider-label { cursor: help; }
.pe-appendix-divider-ctrls { display: inline-flex; gap: 4px; }
.pe-appendix-divider-ctrls button {
  font-size: 10.5px;
  padding: 1px 7px;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  background: #f5f3ff;
  color: #6d28d9;
  cursor: pointer;
}
.pe-appendix-divider-ctrls button:hover { background: #ede9fe; }
.pe-appendix-divider-ctrls button:disabled { opacity: 0.4; cursor: default; }

/* V3.457 — "+ Add section" dropdown (replaces the window.prompt pair). */
.pe-addsec-menu {
  position: fixed;
  z-index: 3600;
  width: 236px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  padding: 6px;
}
.pe-addsec-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  padding: 7px 8px 3px;
}
.pe-addsec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: #1f2937;
  cursor: pointer;
}
.pe-addsec-item:hover { background: #f3f4f6; }
.pe-addsec-item:disabled { color: #b6bcc6; cursor: default; }
.pe-addsec-item:disabled:hover { background: none; }
.pe-addsec-note { font-size: 10px; color: #b6bcc6; }
.pe-addsec-custom { display: flex; gap: 6px; padding: 4px 8px 6px; }
.pe-addsec-custom input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.pe-addsec-custom button {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}
.pe-addsec-custom button:hover { background: #1d4ed8; }

/* ── V3.459 — ∑ Symbols page (paper-symbols.js) ──
 * Section cards with copy-to-clipboard tiles; drag ≡ / ▲▼ reorder. */
.pe-symbols { max-width: 1100px; margin: 0 auto; padding: 4px 2px 40px; }
.pe-sym-hint { font-size: 12px; color: #6b7280; margin: 2px 2px 12px; }
.pe-symcard {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.pe-symcard-dragging { opacity: 0.45; }
.pe-symcard-dropline { box-shadow: 0 -3px 0 0 #2563eb; }
.pe-symcard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f9fafb;
  border-bottom: 1px solid #eef0f3;
  cursor: pointer;
  user-select: none;
}
.pe-symcard-collapsed .pe-symcard-head { border-bottom: none; }
.pe-symcard-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 15px;
  padding: 0 2px;
  touch-action: none;
}
.pe-symcard-handle:active { cursor: grabbing; }
.pe-symcard-title { font-size: 13px; font-weight: 700; color: #111827; }
.pe-symcard-count {
  font-size: 10px;
  color: #6b7280;
  background: #eef0f3;
  border-radius: 8px;
  padding: 1px 7px;
}
.pe-symcard-spacer { flex: 1; }
.pe-symcard-head button {
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.pe-symcard-head button:hover { background: #f3f4f6; }
.pe-symcard-head button:disabled { opacity: 0.35; cursor: default; }
.pe-symcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  padding: 10px;
}
.pe-symcard-collapsed .pe-symcard-grid { display: none; }
.pe-symtile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px 6px 6px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.pe-symtile:hover { border-color: #bfdbfe; background: #f8fbff; }
.pe-symtile-math { font-size: 15px; min-height: 22px; display: flex; align-items: center; }
.pe-symtile-math .katex-display { margin: 0; }
.pe-symtile-cap {
  font-size: 9.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #9ca3af;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-symtile-copied::after {
  content: '✓ copied';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: rgba(236, 253, 245, 0.94);
}

.pe-section-final {
  background: #fffdf8;
  border: 1px solid #ece5d3;
  border-radius: 10px;
  padding: 2px 22px 18px;
  margin-bottom: 18px;
}

.pe-final-banner {
  font-size: 11px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 4px 10px;
  margin: 6px 0 12px;
}

/* V3.455 — needs-revision send-back banner. */
.pe-revision-banner {
  font-size: 11px;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 4px 10px;
  margin: 6px 0 12px;
}

/* V3.468 — Grant submission checklist (paper-grant-checklist.js). */
.pgc { margin: 0 0 26px; }
.pgc-none, .pgc-loading { font-size: 13px; color: #6b7280; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; }
.pgc-head { margin-bottom: 8px; }
.pgc-title { font-size: 16px; font-weight: 700; color: #111827; }
.pgc-solic { font-size: 12px; color: #6b7280; }
.pgc-deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 4px; font-size: 12.5px; }
.pgc-deadline label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #475569; }
.pgc-deadline-input { font-size: 12.5px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 6px; }
.pgc-countdown { font-weight: 600; color: #b3742a; }
.pgc-countdown.pgc-urgent { color: #b1402a; }
.pgc-deadline-hint { color: #9ca3af; }
.pgc-subhead { font-size: 14px; margin: 18px 0 8px; color: #111827; }
.pgc-manifest { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.pgc-mrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: start; padding: 9px 12px; border-bottom: 1px solid #eef0f3; font-size: 12.5px; }
.pgc-mrow:last-child { border-bottom: none; }
.pgc-mrow-jump { cursor: pointer; }
.pgc-mrow-jump:hover { background: #f8fbff; }
.pgc-mname { font-weight: 600; color: #111827; }
.pgc-req { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-left: 6px; }
.pgc-req-req { color: #2f3d7c; background: #e6e8f3; }
.pgc-req-cond { color: #b3742a; background: #f6ecdc; }
.pgc-req-opt { color: #6b7280; background: #eef0f3; }
.pgc-mnote { color: #9ca3af; font-size: 11px; line-height: 1.4; margin-top: 2px; }
.pgc-mlim, .pgc-mwhere { color: #6b7280; white-space: nowrap; font-size: 11.5px; }
.pgc-stat { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.pgc-stat-ok { color: #047857; background: #ecfdf5; }
.pgc-stat-mid { color: #b3742a; background: #f6ecdc; }
.pgc-stat-miss { color: #b1402a; background: #f6e2dc; }
.pgc-stat-neu { color: #6b7280; background: #eef0f3; }
.pgc-prog { margin: 20px 0 10px; }
.pgc-prog-count { font-size: 13px; }
.pgc-prog-count .pgc-done { color: #2f3d7c; font-size: 15px; }
.pgc-bar { height: 7px; background: #eef0f3; border-radius: 99px; overflow: hidden; margin-top: 5px; }
.pgc-bar-fill { display: block; height: 100%; width: 0; background: #2f3d7c; border-radius: 99px; transition: width .3s; }
.pgc-cat { margin: 16px 0; }
.pgc-cat-head { display: flex; align-items: center; gap: 8px; }
.pgc-cat-num { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #e6e8f3; color: #2f3d7c; font-size: 11px; font-weight: 700; }
.pgc-cat-title { font-size: 13.5px; font-weight: 700; color: #111827; }
.pgc-cat-note { font-size: 11.5px; color: #9ca3af; margin: 2px 0 8px 28px; }
.pgc-items { display: flex; flex-direction: column; gap: 5px; }
.pgc-item { display: flex; align-items: flex-start; gap: 9px; background: #fff; border: 1px solid #e5e7eb; border-radius: 9px; padding: 8px 10px; }
.pgc-item.pgc-checked { background: #ecfdf5; border-color: #a7f3d0; }
.pgc-item.pgc-checked .pgc-item-label { color: #6b7280; text-decoration: line-through; }
.pgc-cb { margin-top: 2px; flex: none; }
.pgc-item-txt { flex: 1; min-width: 0; }
.pgc-item-label { font-size: 12.5px; font-weight: 600; color: #1f2937; }
.pgc-item-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.pgc-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 99px; background: #eef0f3; color: #6b7280; }
.pgc-hint-btn { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff; color: #6b7280; font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer; }
.pgc-hint-btn:hover { background: #2f3d7c; color: #fff; border-color: #2f3d7c; }
.pgc-foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid #eef0f3; font-size: 11px; color: #9ca3af; line-height: 1.5; }
.pgc-pop { position: fixed; z-index: 5300; max-width: min(22rem, 90vw); background: #fff; color: #1f2937; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22); font-size: 12.5px; line-height: 1.5; }
.pgc-pop-title { font-weight: 700; color: #2f3d7c; margin-bottom: 3px; }

/* V3.467 — Grant Docs page (paper-grant-docs.js). */
.pgd-page { max-width: 820px; margin: 0 auto; padding: 12px 16px 48px; }
.pgd-title { font-size: 22px; margin: 4px 0 4px; }
.pgd-section-head { font-size: 15px; margin: 22px 0 4px; color: #111827; }
.pgd-lead { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0 0 14px; max-width: 640px; }
.pgd-empty-card {
  font-size: 13px; color: #6b7280; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 16px;
}
.pgd-doc-list { display: flex; flex-direction: column; gap: 10px; }
.pgd-doc-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px;
}
.pgd-doc-title { font-weight: 600; font-size: 14px; color: #111827; flex: 1 1 160px; min-width: 140px; }
.pgd-doc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pgd-doc-btn {
  font-size: 12px; padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 7px;
  background: #fff; color: #334155; cursor: pointer; white-space: nowrap;
}
.pgd-doc-btn:hover { background: #f1f5f9; }
.pgd-doc-btn:disabled { opacity: 0.5; cursor: default; }
a.pgd-doc-link { text-decoration: none; color: #2f3d7c; border-color: #c7cded; display: inline-flex; align-items: center; }
a.pgd-doc-link:hover { background: #eef0f9; }

/* Picker modal */
.pgd-overlay {
  position: fixed; inset: 0; z-index: 4600; display: flex; align-items: center;
  justify-content: center; background: rgba(15, 23, 42, 0.4); padding: 20px;
}
.pgd-card {
  width: min(560px, 96vw); max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28); overflow: hidden;
}
.pgd-card-head { font-size: 15px; font-weight: 600; padding: 14px 16px; border-bottom: 1px solid #eef0f3; }
.pgd-card-body { overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pgd-card-actions { padding: 10px 14px; border-top: 1px solid #eef0f3; display: flex; justify-content: flex-end; }
.pgd-empty { color: #9ca3af; font-size: 13px; padding: 18px; text-align: center; }
.pgd-pick-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  padding: 9px 11px; border: 1px solid #eef0f3; border-radius: 8px; background: #fff; cursor: pointer;
}
.pgd-pick-item:hover { border-color: #bfdbfe; background: #f8fbff; }
.pgd-pick-name { font-weight: 600; font-size: 13px; color: #111827; }
.pgd-pick-meta { font-size: 11px; color: #6b7280; }
.pgd-pick-preview { font-size: 11.5px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toast */
.pgd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  z-index: 5200; background: #111827; color: #fff; font-size: 13px; padding: 9px 16px;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity .18s, transform .18s;
}
.pgd-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* V3.466 — Grant Docs page placeholder (until R5/R6 fill it). */
.pe-grant-docs-placeholder { max-width: 640px; margin: 24px auto; padding: 0 16px; color: #374151; }
.pe-grant-docs-placeholder h2 { font-size: 20px; margin: 0 0 8px; }
.pe-grant-docs-placeholder p { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.pe-grant-docs-placeholder .pe-grant-docs-hint {
  font-size: 12.5px; color: #6b7280; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
}

/* V3.465 — grant attached-document upload slot (section header). */
.pe-upload-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0 12px;
}
.pe-upload-label { font-weight: 600; color: #475569; }
.pe-upload-empty { color: #9ca3af; }
.pe-upload-file { color: #2563eb; text-decoration: none; border-bottom: 1px dotted #93c5fd; }
.pe-upload-file:hover { border-bottom-style: solid; }
.pe-upload-btn {
  font-size: 11.5px;
  padding: 3px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}
.pe-upload-btn:hover { background: #f1f5f9; }
.pe-upload-btn.pe-upload-busy { opacity: 0.6; cursor: default; }
.pe-upload-remove {
  font-size: 11.5px;
  padding: 3px 8px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff;
  color: #b91c1c;
  cursor: pointer;
}
.pe-upload-remove:hover { background: #fee2e2; }

/* Hide every piece of editing chrome inside a completed section. */
.pe-section-final .pe-block-toolbar,
.pe-section-final .pe-skeleton-outline,
.pe-section-final .pe-filter-note,
.pe-section-final .pe-block-presence,
.pe-section-final .pe-block-lock-badge {
  display: none !important;
}

.pe-section-final .pe-block {
  border: none;
  box-shadow: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  margin: 0 0 4px;
}

/* Manuscript typography. */
.pe-section-final .pe-section-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
.pe-section-final .pe-paragraph-body-wrap .pe-block-content {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.75;
  text-align: justify;
  color: #111827;
}
.pe-section-final .pe-figure-caption,
.pe-section-final .pe-table-caption {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  line-height: 1.55;
  color: #111827;
}
.pe-section-final .pe-figure-caption-label,
.pe-section-final .pe-table-caption-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 13px;
  color: #111827;
  text-transform: none;
}
.pe-section-final .pe-block-figure img {
  display: block;
  margin: 0 auto;
}

/* Right-aligned (N) on numbered display equations — replaces the number
 * badge that lived in the now-hidden toolbar. */
.pe-section-final .pe-block-equation { position: relative; }
.pe-final-eqnum {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: #111827;
}

/* V3.491 — import progress modal (list page). */
.pi-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:9500;display:flex;align-items:center;justify-content:center;padding:24px}
.pi-modal{background:#fff;border-radius:14px;box-shadow:0 16px 50px rgba(15,23,42,.3);width:100%;max-width:440px;padding:22px 24px}
.pi-title{font-weight:600;font-size:16px;margin-bottom:12px;color:#111827}
.pi-name{color:#2563eb}
.pi-phase{font-size:13px;color:#374151;margin-bottom:8px;min-height:18px}
.pi-phase.pi-err{color:#dc2626;font-weight:600}
.pi-bar{height:8px;background:#eef2f7;border-radius:99px;overflow:hidden;border:1px solid #e5e7eb;margin-bottom:14px}
.pi-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#22c55e);border-radius:99px;transition:width .3s ease}
.pi-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pi-steps li{display:flex;align-items:center;gap:9px;font-size:13px;color:#9ca3af;transition:color .2s}
.pi-steps li .pi-dot{width:14px;height:14px;border-radius:50%;border:2px solid #d1d5db;flex:none;display:grid;place-items:center;transition:.2s}
.pi-steps li.pi-active{color:#111827;font-weight:600}
.pi-steps li.pi-active .pi-dot{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.pi-steps li.pi-done{color:#166534}
.pi-steps li.pi-done .pi-dot{border-color:#22c55e;background:#22c55e}
.pi-steps li.pi-done .pi-dot::after{content:"✓";color:#fff;font-size:9px;line-height:1;font-weight:700}
.pi-note{font-size:11px;color:#9ca3af;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}
.pi-close{margin-top:14px;border:1px solid #d1d5db;background:#fff;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:13px}
.pi-close:hover{background:#f3f4f6}
.pi-modal-err .pi-bar>i{background:#dc2626}
/* V3.741 — indeterminate bar (export phases are network-bound) + in-page
 * dialog / picker on the same modal chrome. */
.pi-bar-indet>i{width:38%;animation:pi-indet 1.1s ease-in-out infinite}
@keyframes pi-indet{0%{margin-left:-38%}100%{margin-left:100%}}
.pi-dialog{max-width:480px}
.pi-body{font-size:13.5px;color:#374151;line-height:1.5}
.pi-body p{margin:0 0 10px}
.pi-body code{font-size:12px;background:#f3f4f6;padding:1px 5px;border-radius:4px}
.pi-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:8px 10px;border-radius:8px}
.pi-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;padding:8px 10px;border-radius:8px}
.pi-ack{display:flex;align-items:center;gap:8px;font-size:13px;color:#111827;margin:4px 0 6px;cursor:pointer}
.pi-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.pi-picklist{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto;margin:0 -6px 10px;padding:0 6px}
.pi-pick-group{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin:8px 0 2px}
.pi-pick{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer}
.pi-pick:hover{border-color:#93c5fd;background:#f8fafc}
.pi-pick input{margin-top:3px}
.pi-pick-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pi-pick-title{font-weight:600;font-size:13px;color:#111827}
.pi-pick-meta{font-size:11.5px;color:#6b7280}

/* V3.493 — Grant Docs page: per-paper PDF attachments panel. */
.pgd-pdf-panel{margin:0 0 24px}
.pgd-pdf-host.pgd-busy{opacity:.5;pointer-events:none}
.pgd-pdf-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pgd-pdf-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:10px}
.pgd-pdf-icon{flex:none;font-size:15px}
.pgd-pdf-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pgd-pdf-label{font-weight:600;font-size:13px;color:#111827}
.pgd-pdf-file{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgd-pdf-file a{color:#2563eb;text-decoration:none}
.pgd-pdf-file a:hover{text-decoration:underline}
.pgd-pdf-actions{flex:none;display:flex;gap:6px}
.pgd-doc-btn-danger{color:#dc2626;border-color:#fca5a5}
.pgd-doc-btn-danger:hover:not(:disabled){background:#fee2e2}
.pgd-pdf-add{display:flex;gap:8px;align-items:center;margin-top:4px}
.pgd-pdf-kind{flex:1;max-width:280px;padding:6px 8px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;background:#fff}

/* V3.495 — submission checklist full parity: banner deadline, grouped
 * manifest tables, callout cards, legend, sticky progress. */
.pgc-deadline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:10px 0 18px;padding:12px 14px;border-radius:10px;background:#fef6e7;border:1px solid #f0d9a8}
.pgc-deadline label{font-size:12px;font-weight:600;color:#92600a}
.pgc-deadline-input{margin-left:6px;padding:3px 6px;border:1px solid #d1d5db;border-radius:6px;font-size:12px}
.pgc-deadline-hint{font-size:12px;color:#92600a;flex-basis:100%}
.pgc-countdown{margin-left:auto;font-weight:600;font-size:12px;padding:2px 10px;border-radius:99px;background:#fff;border:1px solid #f0d9a8;color:#92600a;white-space:nowrap}
.pgc-countdown.pgc-urgent{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.pgc-grp-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#6b7280;margin:16px 0 6px}
.pgc-prog{position:sticky;top:0;z-index:4;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);padding:10px 0;margin:18px 0;border-bottom:1px solid #e5e7eb}
.pgc-callouts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.pgc-callout{border:1px solid #e5e7eb;border-radius:11px;padding:12px 14px;background:#fff}
.pgc-callout-rwr{background:#fdecea;border-color:#f2b8ad}
.pgc-callout-title{font-weight:700;font-size:13px;margin-bottom:6px}
.pgc-callout-rwr .pgc-callout-title{color:#b1402a}
.pgc-callout ul{margin:0;padding-left:16px;font-size:12px;color:#4b5563;line-height:1.5}
.pgc-callout li{margin-bottom:3px}
.pgc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 4px;font-size:11px;color:#6b7280}
.pgc-legend span{display:inline-flex;align-items:center;gap:5px}
.pgc-lg{width:9px;height:9px;border-radius:2px;display:inline-block}
.pgc-lg-ok{background:#16a34a}.pgc-lg-mid{background:#d97706}.pgc-lg-miss{background:#dc2626}.pgc-lg-neu{background:#9ca3af}
@media (max-width:640px){.pgc-callouts{grid-template-columns:1fr}}

/* ── V3.645 — value keys ([!val:KEY]) and inventory refs ([@item:KEY]) ──
 * Chips print the RESOLVED text, not the key — the writer reads the
 * sentence as it will appear. The tint is what marks it as dynamic; the
 * underline survives into a printout of the editor, which the tint does
 * not. In Document view both are neutralized (see .pdv-scale below) so
 * the page reads as the final manuscript. */
.pe-val-chip,
.pe-item-chip {
  display: inline;
  background: #ecfdf5;
  color: #065f46;
  border-bottom: 1px dashed #6ee7b7;
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
}
.pe-val-chip:hover,
.pe-item-chip:hover { background: #d1fae5; }

.pe-item-chip {
  background: #eff6ff;
  color: #1e3a8a;
  border-bottom-color: #93c5fd;
}
.pe-item-chip:hover { background: #dbeafe; }

/* An undefined key must be LOUD. Silently printing nothing is how a
 * manuscript goes out with a hole where a number should be. */
.pe-val-chip-unknown,
.pe-item-chip-unknown {
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fecaca;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 0 4px;
  cursor: not-allowed;
}
/* Defined but still blank — amber, not red: the key exists, the author
 * just hasn't filled the value in yet. */
.pe-val-chip-empty {
  background: #fef3c7; color: #92400e;
  border-bottom: 1px dashed #fcd34d;
}

/* Document view = the final look. Chips become ordinary prose; only an
 * unresolved key keeps its warning colour, because shipping that
 * silently is the failure this feature exists to prevent. Pure CSS
 * rather than a post-mount JS pass — nothing to keep in sync. */
.pdv-scale .pe-val-chip,
.pdv-scale .pe-item-chip {
  background: none;
  color: inherit;
  border-bottom: none;
  padding: 0;
  cursor: inherit;
}

/* ── Values tool page ── */
.pe-val-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pe-val-table th {
  text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em; color: #6b7280; font-weight: 600;
  padding: 4px 6px; border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}
.pe-val-table td {
  padding: 4px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;
}
.pe-val-table tr:hover td { background: #fafafa; }
.pe-val-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; color: #111827;
}
.pe-val-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #6b7280;
}
.pe-val-resolved { color: #065f46; font-weight: 500; }
.pe-val-resolved-empty { color: #b45309; font-style: italic; }
.pe-val-note { color: #6b7280; font-size: 12px; }
.pe-val-kind {
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 1px 5px; border-radius: 999px;
  background: #f3f4f6; color: #4b5563;
}
.pe-val-kind-inventory { background: #eff6ff; color: #1e40af; }
.pe-val-kind-number { background: #ecfdf5; color: #065f46; }
.pe-val-uses {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #2563eb; font-size: 12px; text-decoration: underline;
}
.pe-val-uses-none { color: #9ca3af; text-decoration: none; cursor: default; }
.pe-val-dup {
  background: #fee2e2; color: #991b1b; border-radius: 3px;
  font-size: 10px; padding: 1px 5px; margin-left: 6px;
}
.pe-val-stale {
  background: #fef3c7; color: #92400e; border-radius: 3px;
  font-size: 10px; padding: 1px 5px; margin-left: 6px;
}

/* Fold-out: every sentence the key does work in. */
.pe-val-usage-wrap {
  background: #f9fafb; border-left: 2px solid #d1d5db;
  padding: 6px 10px; margin: 2px 0 6px;
}
.pe-val-usage-row {
  padding: 4px 0; border-bottom: 1px solid #f3f4f6;
  cursor: pointer; font-size: 12px; line-height: 1.5;
}
.pe-val-usage-row:last-child { border-bottom: 0; }
.pe-val-usage-row:hover { background: #f3f4f6; }
.pe-val-usage-where {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7280; display: block; margin-bottom: 1px;
}
.pe-val-usage-sentence { color: #111827; }
.pe-val-usage-empty { color: #9ca3af; font-size: 12px; font-style: italic; }

/* Inventory picker rows inside the value editor. */
.pe-val-inv-row { display: flex; gap: 8px; align-items: baseline; }
.pe-val-inv-name { font-weight: 500; }
.pe-val-inv-meta { color: #6b7280; font-size: 11px; }

/* ── V3.650 — table grid editor: border ＋/−, drag-merge, live paint ──
 *
 * The +/- controls are REAL TABLE CELLS in a gutter row / gutter column,
 * not an overlay. That is the whole trick: a head cell occupies exactly
 * one column, so a button pinned to its left edge sits exactly ON the
 * border between two columns with no measurement code — and it stays put
 * when a merge or a width change reflows the table. */
.pe-tblgrid {
  position: relative;
  /* V3.651 — a padded canvas. The gutter buttons poke 8px outside their
   * head cells, and building a table in a box with no margin feels like
   * typing into the edge of the panel, so the grid gets real air on all
   * four sides. */
  margin: 12px 0 4px;
  padding: 18px 20px 16px;
  background: #fcfcfd;
  border: 1px solid #eef0f3;
  border-radius: 6px;
}
.pe-tblgrid-scroll { overflow-x: auto; overflow-y: visible; }
.pe-tblgrid-hint {
  margin: 4px 0 2px;
  font-size: 10.5px; color: #9ca3af;
}

/* Gutter cells carry no border of their own — they are chrome, not grid. */
.pe-grid-table-edit td.pe-tbl-corner,
.pe-grid-table-edit td.pe-tbl-colhead,
.pe-grid-table-edit td.pe-tbl-rowhead {
  border: none;
  padding: 0;
  background: transparent;
  position: relative;          /* containing block for the ＋/− buttons */
}
.pe-grid-table-edit td.pe-tbl-corner,
.pe-grid-table-edit td.pe-tbl-rowhead { width: 16px; min-width: 16px; }
.pe-grid-table-edit td.pe-tbl-colhead { height: 15px; }
.pe-grid-table-edit tr.pe-tbl-gutrow { height: 15px; }
.pe-grid-table-edit tr.pe-tbl-headerrow .pe-grid-cell { font-weight: 600; }


/* While dragging across cells, suppress the browser's own text selection
 * so it does not paint underneath the cell selection. */
.pe-grid-table.pe-tbl-dragging .pe-grid-cell {
  user-select: none; -webkit-user-select: none;
}

/* Floating actions — only rendered when Merge / Unmerge actually apply. */
.pe-tbl-actbar {
  position: absolute;
  display: flex; gap: 4px;
  z-index: 6;
  pointer-events: auto;
}
.pe-tbl-actbtn {
  font-size: 11px; line-height: 1;
  padding: 4px 8px;
  border: 1px solid #2563eb; border-radius: 4px;
  background: #2563eb; color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  white-space: nowrap;
}
.pe-tbl-actbtn:hover { background: #1d4ed8; }


/* ── V3.651 — table styling, and room to build a table in ────────────
 *
 * The editor draws the table as the PDF will read it: the chosen rule
 * style solid, cell boundaries a faint dashed hint underneath so the
 * "none" look is still something you can type into. Four surfaces render
 * a table (this editor, the doc-side preview, Document view, the .tex)
 * and they all read the same parsed style out of PaperLayout. */

/* Cells you actually build in — the old 22px/6px was sized for a
 * read-only preview, not for typing. */
.pe-tab-editor-body .pe-grid-cell { min-height: 30px; padding: 8px 10px; }
.pe-tab-editor-body .pe-table-align-wrap { margin-top: 8px; }
.pe-tab-editor-body .pe-table-caption-label { margin-top: 14px; }

/* Rule presets. In the EDITOR the gutter row is tr:first-child, so the
 * first/last BODY rows carry explicit classes; the doc-side preview sets
 * the same classes so one block of rules drives both. */
.pe-grid-table-edit td[data-r] { border: 1px dashed #e8eaee; }
.pe-grid-table.pe-tbl-rules-none td[data-r] { border: 1px dashed #eef0f3; }
.pe-grid-table.pe-tbl-rules-grid td[data-r] { border: 1px solid #b6bcc6; }
.pe-grid-table.pe-tbl-rules-booktabs td[data-r] { border: 1px dashed #eef0f3; }
.pe-grid-table.pe-tbl-rules-booktabs tr.pe-tbl-r-first td[data-r] { border-top: 2px solid #374151; }
.pe-grid-table.pe-tbl-rules-booktabs tr.pe-tbl-headerrow td[data-r] { border-bottom: 1.5px solid #374151; }
.pe-grid-table.pe-tbl-rules-booktabs tr.pe-tbl-r-last td[data-r] { border-bottom: 2px solid #374151; }
.pe-grid-table tr.pe-tbl-ruled td[data-r] { border-bottom: 1.5px solid #374151; }

/* Row height — mirrors \arraystretch. */
.pe-grid-table.pe-tbl-dens-compact .pe-grid-cell { min-height: 24px; padding: 4px 10px; }
.pe-grid-table.pe-tbl-dens-roomy   .pe-grid-cell { min-height: 38px; padding: 12px 10px; }
.pe-grid-table.pe-tbl-dens-airy    .pe-grid-cell { min-height: 46px; padding: 17px 10px; }
.pe-tab-editor-body .pe-grid-table.pe-tbl-dens-compact .pe-grid-cell { min-height: 24px; padding: 4px 10px; }
.pe-tab-editor-body .pe-grid-table.pe-tbl-dens-roomy   .pe-grid-cell { min-height: 38px; padding: 12px 10px; }
.pe-tab-editor-body .pe-grid-table.pe-tbl-dens-airy    .pe-grid-cell { min-height: 46px; padding: 17px 10px; }

/* Striping, and per-cell formatting. A filled cell wins over the stripe —
 * the same precedence \cellcolor has over \rowcolors. */
.pe-grid-table tr.pe-tbl-zebrarow td[data-r]:not(.pe-cell-filled) { background: #f6f7f9; }
.pe-grid-table td.pe-cell-b .pe-grid-cell { font-weight: 700; }
.pe-grid-table td.pe-cell-i .pe-grid-cell { font-style: italic; }
.pe-grid-table td[data-r] { vertical-align: middle; }

/* Table-level style bar groups. */
.pe-tbl-stylegrp { display: inline-flex; align-items: center; gap: 3px; }
.pe-tbl-style-sel { display: inline-block; margin-top: 0; }

/* Styling buttons on the floating bar: quieter than Merge/Unmerge, which
 * are the structural actions. */
.pe-tbl-actbar { align-items: center; }
.pe-tbl-actbtn-style {
  background: #fff; color: #374151; border-color: #cbd2dc;
  min-width: 24px; padding: 4px 6px; font-weight: 600;
}
.pe-tbl-actbtn-style:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.pe-tbl-actbtn-style.active { background: #1f2937; border-color: #1f2937; color: #fff; }
.pe-tbl-fillbtn {
  width: 20px; height: 22px; padding: 0;
  border: 1px solid #cbd2dc; border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.pe-tbl-fillbtn.active { border: 2px solid #1f2937; }


/* ── V3.652 — line handles, column resizing, wrapped cells ───────────
 *
 * The +/-/||| cluster belongs to a grid LINE, not to a cell, and only
 * appears when the pointer is on that line. Each line is an invisible
 * 11px hit strip running its whole length; the cluster sits at the strip's
 * head (in the gutter) so it never covers a cell you are reading. */
.pe-tbl-lines { position: absolute; inset: 0; pointer-events: none; }
/* The strips are INERT. They are geometry, not hit targets: taking pointer
 * events would put a 5px dead band down every cell edge where a click
 * lands on the strip instead of the cell. Which line the pointer is on is
 * decided by nearest-line arbitration in JS (see pickLine) — row and
 * column strips cross at every intersection, so :hover would light up two
 * lines, and two centred clusters, at once. */
.pe-tbl-line { position: absolute; pointer-events: none; }
.pe-tbl-line-c { width: 11px; }
.pe-tbl-line-r { height: 11px; }

/* The line itself gets a hairline highlight so you can see WHICH line you
 * are about to act on. */
.pe-tbl-line::before {
  content: ''; position: absolute; background: #2563eb;
  opacity: 0; transition: opacity .1s ease;
}
.pe-tbl-line-c::before { left: 5px; width: 1px; top: 0; bottom: 0; }
.pe-tbl-line-r::before { top: 5px; height: 1px; left: 0; right: 0; }
.pe-tbl-line.is-active::before { opacity: .55; }

/* V3.653 — the cluster sits at the MIDDLE of the line it belongs to, on
 * both axes, and runs ALONG the line: stacked on a vertical column
 * border, laid out in a row on a horizontal row border. Centring it means
 * it overlaps cells, which is the point — it reads as part of the line
 * rather than as a label hanging off one end — and it stays
 * pointer-events:none until the line is hovered, so it never intercepts a
 * click meant for a cell. */
.pe-tbl-lineclu {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  display: flex; align-items: center; justify-content: center;
  gap: 1px;
  padding: 1px;
  background: #fff;
  border: 1px solid #cbd2dc; border-radius: 9px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
  opacity: 0; transform: scale(.85);
  transition: opacity .1s ease, transform .1s ease;
  pointer-events: none;
  z-index: 5;
}
.pe-tbl-lineclu-c { flex-direction: column; }
.pe-tbl-lineclu-r { flex-direction: row; }
.pe-tbl-line.is-active .pe-tbl-lineclu,
.pe-tbl-line:focus-within .pe-tbl-lineclu {
  opacity: 1; transform: scale(1);
}
/* Only the CONTROLS take clicks — never the cluster's card behind them.
 * The cluster is centred on its line, so it floats over cells; if the card
 * itself were clickable, its padding and gaps would be a dead patch in the
 * middle of every line where you could not put the caret. The three
 * buttons intercepting is correct: that is what they are for. */
.pe-tbl-line.is-active .pe-tbl-lineclu > *,
.pe-tbl-line:focus-within .pe-tbl-lineclu > * { pointer-events: auto; }

.pe-tbl-linebtn {
  width: 15px; height: 15px;
  padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  border: none; border-radius: 50%;
  background: transparent; color: #4b5563;
  cursor: pointer;
}
.pe-tbl-linebtn:hover { background: #eff6ff; color: #1d4ed8; }
.pe-tbl-del:hover { background: #fef2f2; color: #b91c1c; }
.pe-tbl-linebtn[data-armed="1"] { background: #b91c1c; color: #fff; }

/* ||| — the resize grip, between the ＋ and the −. */
.pe-tbl-grip {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: #9ca3af;
  user-select: none;
}
.pe-tbl-lineclu-c .pe-tbl-grip { width: 15px; height: 16px; cursor: col-resize; }
.pe-tbl-lineclu-r .pe-tbl-grip { width: 16px; height: 15px; }
.pe-tbl-grip:hover { color: #1d4ed8; }
.pe-grid-table.pe-tbl-colsizing { cursor: col-resize; user-select: none; }
.pe-grid-table.pe-tbl-rowsizing { cursor: row-resize; user-select: none; }
.pe-grid-table.pe-tbl-colsizing .pe-grid-cell,
.pe-grid-table.pe-tbl-rowsizing .pe-grid-cell { pointer-events: none; }
.pe-tbl-lineclu-r .pe-tbl-grip { cursor: row-resize; }

/* V3.654 — per-row extra height. Padding UNDER the row's cells, because
 * that is what \[dim] does in the PDF: space after the row, not a taller
 * cell box. Driven by a custom property so the drag can preview it
 * without touching every cell. */
.pe-grid-table tr.pe-tbl-rowext > td { padding-bottom: var(--pe-row-extra, 0); }

/* Hovering a line previews which band its − would take, and an armed −
 * marks it red. Both have to outrank the zebra stripe — `.pe-grid-table
 * tr.pe-tbl-zebrarow td[data-r]` is a 3-class selector, so a 2-class
 * highlight would lose on every other row and the preview would blink. */
.pe-grid-table tr td.pe-band-peek[data-r],
.pe-grid-table td.pe-tbl-colhead.pe-band-peek,
.pe-grid-table td.pe-tbl-rowhead.pe-band-peek { background: #fdefdc; }
.pe-grid-table tr td.pe-band-doomed[data-r],
.pe-grid-table td.pe-tbl-colhead.pe-band-doomed,
.pe-grid-table td.pe-tbl-rowhead.pe-band-doomed { background: #fef2f2; }
.pe-grid-table tr td.pe-band-doomed[data-r] .pe-grid-cell { color: #b91c1c; }

/* Wrapping is the default. `table-layout: fixed` is what actually makes a
 * long cell wrap instead of widening its column — and it is why the grid
 * always carries a colgroup, since fixed layout reads its widths from the
 * first row otherwise, and a merge can hide a column there. */
.pe-grid-table.pe-tbl-wrap { table-layout: fixed; width: 100%; }
.pe-grid-table.pe-tbl-wrap .pe-grid-cell { overflow-wrap: anywhere; }
.pe-grid-table col.pe-tbl-gutcol { width: 16px; }