/* ==========================================================================
   suite-pages.css — the suite "Pages" tab (assets/js/suite/pages-tab.js,
   owner 2026-10-08: editable pages that combine tab fragments and
   fretboards).  The page itself is a composed, print-true SVG (white paper in
   both themes — it is what prints); these rules only frame it and draw the
   Edit overlay.  Toolbar / buttons reuse the suite idioms (.suite-diag-*,
   .suite-layout-modes, .suite-arp-notice).
   ========================================================================== */
.suite-pages-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-md, 12px); padding: var(--space-md, 12px) 0 var(--space-lg, 18px);
}
.suite-pages-sheet {
  position: relative; width: 100%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 22px rgba(0, 0, 0, 0.14);
}
.suite-pages-art svg { display: block; width: 100%; height: auto; }
.suite-pages-overlay { position: absolute; inset: 0; }

/* cells: dashed frames in Edit, a solid accent frame where a drag would land */
.suite-pages-cell {
  position: absolute; box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--accent, #3c6ec8) 40%, transparent);
  border-radius: var(--radius-sm, 3px);
}
.suite-pages-cell.has-block { cursor: grab; }
.suite-pages-cell.has-block:hover { border-color: var(--accent, #3c6ec8); background: color-mix(in srgb, var(--accent, #3c6ec8) 5%, transparent); }
.suite-pages-cell.is-drop { border-style: solid; border-color: var(--accent, #3c6ec8); background: color-mix(in srgb, var(--accent, #3c6ec8) 12%, transparent); }
.suite-pages-cell.is-empty { display: flex; align-items: center; justify-content: center; }
.suite-pages-cell.is-typing { cursor: text; }

.suite-pages-addbtn,
.suite-pages-blockbtn,
.suite-pages-rowbtn {
  font: inherit; font-size: var(--font-xs, 12px); line-height: 1;
  padding: 4px 8px; cursor: pointer;
  color: var(--text, #2a2a2a); background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d8d4c8); border-radius: var(--radius-sm, 3px);
}
.suite-pages-addbtn:hover,
.suite-pages-blockbtn:hover,
.suite-pages-rowbtn:hover { border-color: var(--accent, #3c6ec8); color: var(--accent, #3c6ec8); }
.suite-pages-blockbtn { position: absolute; top: 3px; right: 3px; opacity: 0; transition: opacity 0.12s; }
.suite-pages-cell:hover .suite-pages-blockbtn,
.suite-pages-blockbtn:focus-visible { opacity: 1; }
.suite-pages-rowbtn { position: absolute; left: 6px; }

/* the bottom margin of a paged format: content past it prints cut off */
.suite-pages-margin { position: absolute; left: 0; right: 0; border-top: 1px dashed #d23b3b; pointer-events: none; }

/* in-place text editing over a heading / text block */
.suite-pages-textedit {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 2; box-sizing: border-box;
  font: 14px/1.35 Helvetica, Arial, sans-serif; color: #111111; background: #ffffff;
  padding: 4px 6px; border: 2px solid var(--accent, #3c6ec8); border-radius: var(--radius-sm, 3px);
}
textarea.suite-pages-textedit { min-height: 7em; resize: vertical; }

.suite-pages-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm, 8px); }

/* FretlyModal.choose with a long list (every tab section of a big suite) scrolls inside the card */
.fly-modal-card.suite-pages-pick .fly-modal-options { max-height: 55vh; overflow-y: auto; }