/* BrochureBoss editor
   ------------------------------------------------------------------------
   Its own visual language: warm paper greys, ink black, a single magenta
   accent reserved for anything that means "this is a measurement", so guides,
   snap lines and ruler markers all read as one family. Chrome is quiet on
   purpose; the page is the only thing on screen that should look like paper. */

:root {
  --bb-zoom: 1;
  --ink: #16150f;
  --ink-soft: #55504a;
  --paper: #ffffff;
  --shell: #e6e2d8;
  --shell-dark: #d5d0c3;
  --panel: #f6f4ee;
  --line: #c3bdaf;
  --accent: #c2185b;
  --accent-soft: rgba(194, 24, 91, 0.16);
  --focus: #1f6feb;
  --toolbar-h: 40px;
  --ruler: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--shell);
  overscroll-behavior: none;
}

button, input, select {
  font: inherit;
  color: inherit;
}

button {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button.is-on,
button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ------------------------------------------------------------------- auth */

#auth {
  max-width: 340px;
  margin: 12vh auto;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
}
#auth h1 {
  margin: 0 0 4px;
  font: 400 26px/1.1 Georgia, "Times New Roman", serif;
}
#auth .auth-sub { margin: 0 0 18px; color: var(--ink-soft); }
#auth input[type="email"],
#auth input[type="password"] {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
}
#auth button { width: 100%; margin-bottom: 6px; padding: 8px; }
#loginBtn { background: var(--ink); border-color: var(--ink); color: #fff; }
#authMsg { min-height: 18px; color: var(--accent); margin: 6px 0 0; }
.auth-hint {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--shell-dark);
  color: var(--ink-soft);
  font-size: 12px;
}

/* --------------------------------------------------------------- shell */

#editor {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100vh;
}
#editor[hidden] { display: none; }

.bb-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  min-height: var(--toolbar-h);
  flex-wrap: wrap;
}
.bb-bar .sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 3px;
}
.bb-brand {
  font: 400 16px/1 Georgia, "Times New Roman", serif;
  margin-right: 6px;
  letter-spacing: 0.01em;
}
#docName {
  width: 170px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
.bb-spacer { flex: 1; }
.bb-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

/* Text bar only matters while text is selected or being edited. */
#textBar { background: #fbf9f4; }
#fontSelect { width: 150px; }
#fontSize { width: 58px; }
input[type="color"] {
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
}

/* ---------------------------------------------------------- import panel */

.import-report {
  padding: 8px 12px;
  background: #eaf1ea;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.import-report[hidden] { display: none; }
.import-report strong { font: 400 14px Georgia, serif; }
.import-report p { margin: 2px 0 6px; }
.import-report ul { margin: 0 0 8px; padding-left: 1.1em; }

/* -------------------------------------------------------------- workspace */

#workspace {
  display: grid;
  grid-template-columns: 52px 1fr 250px;
  min-height: 0;
}

#pages {
  background: var(--shell-dark);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 6px 0;
  text-align: center;
}
#addPage { width: 40px; margin-bottom: 8px; padding: 4px 0; }
.bb-page-chip {
  position: relative;
  display: block;
  width: 36px;
  height: 46px;
  margin: 0 auto 6px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 0;
}
.bb-page-chip.is-current {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}
.bb-page-num { color: var(--ink-soft); font-size: 12px; }
.bb-page-del {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  line-height: 13px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  opacity: 0;
}
.bb-page-chip:hover .bb-page-del { opacity: 1; }

#boardArea {
  position: relative;
  display: grid;
  grid-template-columns: var(--ruler) 1fr;
  grid-template-rows: var(--ruler) 1fr;
  min-width: 0;
  min-height: 0;
}
#rulerCorner {
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  color: var(--ink-soft);
  display: grid;
  place-items: center;
}
#rulerH { border-bottom: 1px solid var(--line); cursor: ns-resize; }
#rulerV { border-right: 1px solid var(--line); cursor: ew-resize; }
#rulerH, #rulerV { display: block; width: 100%; height: 100%; }

#board {
  position: relative;
  overflow: auto;
  background:
    repeating-conic-gradient(#dcd7cb 0% 25%, #e3ded2 0% 50%) 0 0 / 16px 16px;
  padding: 32px;
}
#board.bb-pan-ready { cursor: grab; }
#board.bb-panning { cursor: grabbing; }

#stageWrap { margin: 0 auto; }
#stage { transform-origin: 0 0; }

/* ------------------------------------------------------------ the page */

.bb-sheet {
  position: relative;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 10px 26px rgba(0, 0, 0, 0.12);
}
.bb-page { position: absolute; background: #fff; }
.bb-content { position: absolute; inset: 0; }

.bb-item { position: absolute; }
.bb-text { overflow: visible; }
.bb-text-body { width: 100%; }
.bb-text-body p { margin: 0; }
.bb-text-body.is-editing {
  outline: 1px dashed var(--accent);
  cursor: text;
  min-height: 1em;
}
.bb-image img { display: block; }
.bb-group-inner { position: absolute; }
.bb-item[data-locked] { cursor: default; }

/* ------------------------------------------------------------- guides */

.bb-guides { position: absolute; inset: 0; pointer-events: none; }
.bb-guide-margin {
  position: absolute;
  border: 1px dashed #7fb0d8;
}
.bb-guide-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #b98fd0;
}
.bb-guide-user {
  position: absolute;
  pointer-events: auto;
}
.bb-guide-h {
  left: 0; right: 0;
  border-top: 1px solid #23a0a0;
  height: 0;
  cursor: ns-resize;
  padding: calc(3px / var(--bb-zoom)) 0;
  margin-top: calc(-3px / var(--bb-zoom));
}
.bb-guide-v {
  top: 0; bottom: 0;
  border-left: 1px solid #23a0a0;
  width: 0;
  cursor: ew-resize;
  padding: 0 calc(3px / var(--bb-zoom));
  margin-left: calc(-3px / var(--bb-zoom));
}

.bb-trim {
  position: absolute;
  outline: 1px dashed #d08f8f;
  pointer-events: none;
}

/* --------------------------------------------------- selection overlay */

.bb-overlay, .bb-snaplayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bb-overlay > * { pointer-events: none; }

.bb-outline {
  position: absolute;
  outline: calc(1px / var(--bb-zoom)) solid var(--accent-soft);
}
.bb-frame {
  position: absolute;
  outline: calc(1px / var(--bb-zoom)) solid var(--accent);
}
.bb-frame-locked { outline-style: dashed; }

.bb-handle {
  position: absolute;
  width: calc(9px / var(--bb-zoom));
  height: calc(9px / var(--bb-zoom));
  margin-left: calc(-4.5px / var(--bb-zoom));
  margin-top: calc(-4.5px / var(--bb-zoom));
  background: #fff;
  border: calc(1px / var(--bb-zoom)) solid var(--accent);
  pointer-events: auto;
}
.bb-handle-nw { cursor: nwse-resize; }
.bb-handle-se { cursor: nwse-resize; }
.bb-handle-ne { cursor: nesw-resize; }
.bb-handle-sw { cursor: nesw-resize; }
.bb-handle-n, .bb-handle-s { cursor: ns-resize; }
.bb-handle-e, .bb-handle-w { cursor: ew-resize; }

.bb-handle-rotate {
  left: 50%;
  top: calc(-20px / var(--bb-zoom));
  border-radius: 50%;
  cursor: grab;
  background: var(--accent);
}

.bb-marquee {
  position: absolute;
  border: calc(1px / var(--bb-zoom)) dashed var(--ink);
  background: rgba(22, 21, 15, 0.06);
}

.bb-snapline {
  position: absolute;
  background: var(--accent);
}
.bb-snapline-v { top: -1000px; bottom: -1000px; width: calc(1px / var(--bb-zoom)); }
.bb-snapline-h { left: -1000px; right: -1000px; height: calc(1px / var(--bb-zoom)); }

/* ---------------------------------------------------------- inspector */

#inspector {
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 0 0 24px;
}
.insp-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--shell-dark);
}
.insp-section h3 {
  margin: 0 0 8px;
  font: 600 11px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}
.insp-unit { float: right; text-transform: none; letter-spacing: 0; }
.insp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.insp-section label {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
}
.insp-section input[type="text"],
.insp-section input[type="number"],
.insp-section select {
  width: 100%;
  margin-top: 2px;
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
.insp-full { display: block; margin-bottom: 6px; }
.insp-row { display: flex; gap: 4px; margin-bottom: 6px; }
.insp-row button { flex: 1; padding: 4px 0; }
.insp-check {
  display: flex;
  align-items: center;
  gap: 5px;
  align-self: end;
  padding-bottom: 5px;
}
.insp-check input { width: auto; margin: 0; }
.insp-hint, .insp-warn {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.insp-warn { color: #9a4b12; }
.insp-empty { padding: 14px 12px; color: var(--ink-soft); }
.insp-empty p { margin: 0 0 6px; }
.insp-doc { background: #efece4; }

/* ------------------------------------------------------------- status */

#status {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 3px 10px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-soft);
}
#status .bb-spacer { flex: 1; }
#printWarn {
  margin: 0;
  padding-left: 1.1em;
  color: #9a4b12;
  max-width: 60ch;
}
#printWarn[hidden] { display: none; }

#site-footer { display: none; }
#status a { color: var(--ink-soft); }

/* -------------------------------------------------------------- toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 7px 16px;
  border-radius: 3px;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
#toast[hidden] { display: none; }
#toast.is-error { background: #8c1d3f; }

/* --------------------------------------------------------------- print */

#bb-print-root { display: none; }

@media (max-width: 900px) {
  #workspace { grid-template-columns: 44px 1fr; }
  #inspector { display: none; }
}

/* ===================================================================
   Tier 2: linked frames, masters, merge, tables, templates
   =================================================================== */

/* Master furniture sits under the page content and never takes a click. */
.bb-master-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.999; /* own stacking context, so page items always sit above */
}
#editor.is-master-mode .bb-master-layer { display: none; }

/* Overflow marker: Publisher's red box, in this app's accent family. */
.bb-overflow-flag {
  position: absolute;
  right: calc(-7px / var(--bb-zoom));
  bottom: calc(-7px / var(--bb-zoom));
  width: calc(14px / var(--bb-zoom));
  height: calc(14px / var(--bb-zoom));
  display: grid;
  place-items: center;
  background: #b3202c;
  color: #fff;
  font-size: calc(9px / var(--bb-zoom));
  line-height: 1;
  border: calc(1px / var(--bb-zoom)) solid #fff;
  pointer-events: none;
}

/* While picking a link target every frame invites a click. */
#editor.is-linking #board { cursor: crosshair; }
#editor.is-linking .bb-text { outline: 1px dashed var(--accent); }

/* Mode bars */
.bb-mode-bar,
.bb-merge-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.bb-mode-bar[hidden],
.bb-merge-bar[hidden] { display: none !important; }
.bb-mode-bar { background: #efe6d2; }
.bb-merge-bar { background: #e4ecf0; }
.bb-hint { color: var(--ink-soft); }

/* Tables */
.bb-table table { background: transparent; }
.bb-table td { overflow: hidden; }
.bb-cell-body p { margin: 0; }
.bb-cell-body.is-editing {
  outline: 1px dashed var(--accent);
  cursor: text;
}

/* Page chips gain a master badge */
.bb-page-master {
  display: block;
  font-size: 8px;
  color: var(--ink-soft);
  line-height: 1;
  margin-top: 2px;
}

/* Inspector additions */
.insp-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.insp-chip {
  padding: 2px 7px;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.insp-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Template chooser */
.bb-dialog {
  position: fixed;
  inset: 0;
  background: rgba(22, 21, 15, 0.45);
  display: grid;
  place-items: center;
  z-index: 60;
  padding: 24px;
}
.bb-dialog[hidden] { display: none !important; }
.bb-dialog-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  width: min(880px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.bb-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.bb-dialog-head h2 {
  margin: 0;
  font: 400 19px/1 Georgia, "Times New Roman", serif;
}
#templateClose {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
}
.bb-dialog-body { overflow-y: auto; padding: 8px 16px 20px; }
.tpl-group { margin-top: 14px; }
.tpl-group h4 {
  margin: 0 0 8px;
  font: 600 10.5px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.tpl-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.tpl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  min-height: 62px;
}
.tpl-card:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tpl-name { font-weight: 600; }
.tpl-note { font-size: 11px; color: var(--ink-soft); line-height: 1.35; }

/* Offscreen measuring host for text flow. Never visible, never printed. */
.bb-measure { contain: layout style; }
@media print { .bb-measure, .bb-overflow-flag, .bb-dialog { display: none !important; } }

/* ===================================================================
   Tier 3: picture tools
   =================================================================== */

.bb-image-src { display: block; max-width: none; }

/* Crop mode: the frame stays, the picture moves. The cue is the cursor plus
   a marked frame, not a modal overlay, so the page around it stays readable. */
#editor.is-cropping #board { cursor: move; }
#editor.is-cropping .bb-image {
  outline: calc(2px / var(--bb-zoom)) solid var(--accent);
  outline-offset: calc(-1px / var(--bb-zoom));
}
#editor.is-cropping .bb-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Thirds, the framing guide people actually use. */
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,0.5) 33.33%,
      rgba(255,255,255,0.5) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent 66.66%, rgba(255,255,255,0.5) 66.66%,
      rgba(255,255,255,0.5) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,0.5) 33.33%,
      rgba(255,255,255,0.5) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent 66.66%, rgba(255,255,255,0.5) 66.66%,
      rgba(255,255,255,0.5) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

/* Sliders in the inspector */
.insp-slider {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.insp-slider input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 2px;
  accent-color: var(--ink);
}
.insp-val { float: right; font-variant-numeric: tabular-nums; }

/* A field showing "mixed" should read as absent, not as zero. */
.insp-section input::placeholder { color: #a39c8e; font-style: italic; }

@media print {
  .bb-image::after { display: none !important; }
}

/* Scheme swatches in the inspector */
.insp-swatches {
  display: flex;
  gap: 3px;
  margin: 0 0 8px;
}
.insp-swatch {
  flex: 1;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ===================================================================
   Tier 3: word art, blocks, document check
   =================================================================== */

.bb-wordart svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Blocks list: same card as templates, plus row actions */
.blk-card { position: relative; padding-bottom: 30px; }
.blk-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}
.blk-actions button { flex: 1; padding: 2px 0; font-size: 11px; }
.blk-actions button[data-delblock] { flex: 0 0 24px; }

/* The check panel. Levels are ordered and colour-coded because the whole
   value of a preflight is telling someone what to fix FIRST. */
#checkBody h4 {
  margin: 16px 0 6px;
  font: 600 11px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}
#checkBody h4:first-child { margin-top: 4px; }
.check-clean {
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: #eaf1ea;
  border-left: 3px solid #3e7a52;
}
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  padding: 7px 10px;
  margin-bottom: 4px;
  background: #fff;
  border-left: 3px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
}
.check-error { border-left-color: #b3202c; }
.check-warning { border-left-color: #bc6c25; }
.check-note { border-left-color: #8d99ae; }
.check-word { border-left-color: #57606f; }

.check-jump {
  float: right;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
}
.check-context { display: block; color: var(--ink-soft); }
.check-context mark {
  background: #ffe9a8;
  color: var(--ink);
  font-weight: 600;
  padding: 0 2px;
}
.check-meta {
  display: block;
  font-size: 11px;
  color: #8a8375;
  margin-top: 2px;
}
.check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}

/* ===================================================================
   Lists, tab leaders, text wrap
   =================================================================== */

/* The marker sits in the hanging indent created by the paragraph's own
   padding and negative text-indent. inline-block with a fixed width keeps
   every marker in a list aligned regardless of how wide the number gets. */
.bb-marker {
  display: inline-block;
  text-indent: 0;
  text-align: left;
}

/* A tabbed line is a row: segments with a leader stretching between them.
   CSS has no tab stops, and this is what tabs are actually used for. */
p[data-tabbed] {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.bb-tab-cell { white-space: pre-wrap; flex: 0 0 auto; }
.bb-tab-fill {
  flex: 1 1 auto;
  min-width: 8pt;
  margin: 0 3pt;
  /* The leader sits on the baseline, not through the middle of the text. */
  transform: translateY(-0.18em);
  align-self: center;
}

/* Invisible blocks that real text flows around, standing in for a picture
   that is absolutely positioned and therefore outside the text's layout. */
.bb-wrap-shim {
  pointer-events: none;
  visibility: hidden;
}

/* While editing, tabs are literal characters, so the raw text has to keep
   them rather than collapsing them into a single space. */
.bb-text-body.is-editing { white-space: pre-wrap; }
.bb-text-body.is-editing p[data-tabbed] { display: block; }

@media print {
  .bb-wrap-shim { visibility: hidden; }
}

/* ===================================================================
   Shapes, business details, find and replace
   =================================================================== */

.bb-shape-svg svg { display: block; }
/* Text inside a shape sits over the artwork, centred by default, because a
   callout with its words jammed in the top left is not a callout. */
.bb-shape-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.bb-shape-text.is-editing { pointer-events: auto; }

.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.shape-card {
  padding: 10px 8px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 12px;
}
.shape-card:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.bb-dialog-narrow { width: min(520px, 100%); }
.biz-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.biz-row input {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
#bizSave {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  padding: 6px 16px;
}

#findResults { margin-top: 10px; max-height: 40vh; overflow-y: auto; }
#findInput, #replaceInput {
  width: 100%;
  padding: 6px 8px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}

/* Text recovered from the original .pub that the converter could not carry.
   Offered for copying, never placed on the page, because we cannot know where
   it belonged or how it was styled. */
.salvage-box {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
  max-height: 140px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
}
.salvage-item {
  padding: 2px 7px;
  background: #f4f1ea;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
  user-select: all;
}
#copySalvaged {
  margin-top: 4px;
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}