/* paperhtml-toolbar.css — Workbench-mode toolbar restyle (CANONICAL)
 *
 * Single source of truth for the wb-mode override CSS that turns the default
 * paperhtml-toolbar.js vertical/right-side button column into a horizontal
 * top bar that meshes with the AuthorAware-warm aesthetic.
 *
 * Every v2 voice variant references this file via:
 *   <link rel="stylesheet" href="./paperhtml-toolbar.css?v=...">
 * Edit here, propagates to all variants. No drift.
 *
 * Aaron 2026-06-07: "the toolbar needs to be at the top in all that space...
 * the visual design of the toolbar should mesh with the workbench aesthetic,
 * not the original aesthetic from two months ago." The toolbar is the
 * authoring app's surface — anyone contributing to the Exchange uses this.
 * Visually owned by the app, not the paper.
 *
 * Extracted from inline <style id="ph-toolbar-wb-css"> blocks 2026-06-08.
 */

/* Sections / TOC chrome — Workbench has its own navigation */
#ph-toc-toggle, #ph-toc-panel { display: none !important; }
#section-toggle, .sections-accordion, [id="sections-accordion"] { display: none !important; }
[class*="expand-all"], [class*="collapse-all"] { display: none !important; }

/* Buttons that don't belong in the Workbench authoring surface */
#ph-listen-btn, #ph-screenshot-btn, #ph-patreon-btn { display: none !important; }
#ph-fc-btn, #ph-str-btn, #ph-cit-btn { display: none !important; }
#ph-fc-panel, #ph-str-panel, #ph-cit-panel, #ph-patreon-modal { display: none !important; }

/* Deprecated legacy translate pill (bottom-left Google Translate button).
   Hidden globally in wb-mode — the translation strategy is now Exchange-side,
   not per-paper. Kept in HTML for non-wb deploys (authoraware.org public).  */
#translate-pill, #translate-pill-hider-css { display: none !important; }

/* Toolbar layout — horizontal bar across the top of the paper, anchored
   to the viewer width. Uses all the empty space above the paper title. */
#ph-toolbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #ede8de !important;
  border-bottom: 1px solid #cfc8b8 !important;
  z-index: 9000 !important;
}
/* Collapse toggle on the right edge regardless of DOM order */
#ph-collapse-btn {
  order: 99 !important;
}
/* Push paper content below the top toolbar bar */
body {
  padding-top: 50px !important;
}

/* Buttons — AuthorAware-warm aesthetic (matches Workbench tab strip +
   artifact cards). Cream/sand palette, Helvetica Neue, less rounded. */
.ph-btn {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 5px 12px !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  transition: background 0.12s, border-color 0.12s !important;
}
.ph-btn:hover {
  background: #f5f1e8 !important;
  border-color: #aaa !important;
}
.ph-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Save button (visible in edit mode) — primary accent */
.ph-btn.save-btn,
#ph-save-btn {
  background: #2a4f7a !important;
  color: #fff !important;
  border-color: #2a4f7a !important;
}
.ph-btn.save-btn:hover:not(:disabled),
#ph-save-btn:hover:not(:disabled) {
  background: #34608f !important;
  border-color: #34608f !important;
}

/* FormatFix + CiteFix — the key product-point buttons. Subtle warm
   highlight so they read as the primary editing-time value props
   rather than blending in with everything else. */
#ph-format-btn, #ph-cite-btn {
  background: #fff8e8 !important;
  border-color: #f0c674 !important;
  color: #b06b00 !important;
}
#ph-format-btn:hover, #ph-cite-btn:hover {
  background: #fff3d0 !important;
  border-color: #d9a849 !important;
}

/* In edit mode: PDF and Submit are publish actions, not editing actions.
   Hide them so the toolbar focuses on editing controls. They come back
   when you exit edit mode. */
body.edit-mode #ph-pdf-btn,
body.edit-mode #ph-submit-btn {
  display: none !important;
}

/* ── Diff view (word-level tracked changes) ─────────────────────────────────── */
/* Insertions: light green background, no underline so it reads as highlight not link */
ins.ph-diff-ins {
  background: #d4edda;
  color: #155724;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
}
/* Deletions: light red with strikethrough */
del.ph-diff-del {
  background: #f8d7da;
  color: #721c24;
  text-decoration: line-through;
  text-decoration-color: #721c24;
  padding: 0 2px;
  border-radius: 2px;
}

/* Whole-block insertions/deletions (a new paragraph or section was added/removed
   entirely). Left-border + tinted background reads as a block-scale change. */
div.ph-diff-block-ins {
  border-left: 4px solid #28a745;
  background: #f0fdf4;
  padding: 6px 14px 6px 14px;
  margin: 8px 0 8px -18px;
  border-radius: 0 4px 4px 0;
}
div.ph-diff-block-ins h2,
div.ph-diff-block-ins h3,
div.ph-diff-block-ins p,
div.ph-diff-block-ins .section-number { background: transparent; }
div.ph-diff-block-del {
  border-left: 4px solid #dc3545;
  background: #fef2f2;
  padding: 6px 14px 6px 14px;
  margin: 8px 0 8px -18px;
  border-radius: 0 4px 4px 0;
  opacity: 0.7;
}
div.ph-diff-block-del,
div.ph-diff-block-del * {
  text-decoration: line-through;
  text-decoration-color: rgba(220, 53, 69, 0.45);
}
/* While in diff mode, dim everything else slightly so changes pop */
body.ph-diff-mode #paper-content {
  /* no global change — the colored marks do the work */
}
/* Hide editing controls while showing a diff (you can't edit a diff view) */
body.ph-diff-mode #ph-edit-btn,
body.ph-diff-mode #ph-save-btn,
body.ph-diff-mode #ph-format-btn,
body.ph-diff-mode #ph-cite-btn,
body.ph-diff-mode #ph-undo-btn,
body.ph-diff-mode #ph-redo-btn {
  display: none !important;
}

/* Diff menu (small floating panel below the 🔍 Diff button) */
#ph-diff-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 260px;
  max-width: 340px;
  z-index: 10000;
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 13px;
}
.ph-diff-menu-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #888;
  font-weight: 600;
  padding: 4px 8px 8px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
}
.ph-diff-menu-body { display: flex; flex-direction: column; gap: 1px; }
.ph-diff-menu-item {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ph-diff-menu-item:hover { background: #f0f4f8; }
.ph-diff-menu-item .lbl { font-weight: 500; }
.ph-diff-menu-item .meta {
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
}
.ph-diff-menu-sep {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #aaa;
  font-weight: 600;
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid #f0f0f0;
}
.ph-diff-menu-note {
  font-size: 12px;
  color: #888;
  font-style: italic;
  padding: 8px 10px;
}

/* Exit-diff banner (bottom-center toast with stats + Exit button) */
#ph-diff-exit {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 24px;
  padding: 10px 18px 10px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 13px;
  z-index: 10000;
}
#ph-diff-exit .dx-label { color: #f9fafb; }
#ph-diff-exit .dx-label b { color: #fff; }
#ph-diff-exit .dx-stats {
  color: #9ca3af;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#ph-diff-exit .dx-exit {
  background: #fff;
  color: #1f2937;
  border: none;
  border-radius: 14px;
  padding: 5px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#ph-diff-exit .dx-exit:hover { background: #e5e7eb; }