/* paged-host.css — browser shell only (toolbar, preview mount, interface.css spreads).
   paged-book.css is fed to Paged.Previewer separately; never linked from <head>. */

/* ── Toolbar ── */
.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(20, 18, 16, .94);
  color: #f0eada;
  padding: 10px 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  letter-spacing: .04em;
}
.toolbar select,
.toolbar button {
  background: rgba(255, 255, 255, .08);
  color: #f0eada;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 3px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}
.toolbar select:hover,
.toolbar button:hover {
  background: rgba(255, 255, 255, .14);
}
.toolbar .status {
  opacity: .65;
  margin-left: auto;
}
.toolbar .badge {
  color: #c47030;
  font-weight: 600;
  letter-spacing: .15em;
}
.toolbar .chapter-label {
  opacity: .75;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
}

.print-hint {
  background: #FFF;  /*rgba(255, 250, 240, .94);*/
  color: #2a2620;
  padding: 12px 24px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
  font-style: italic;
}
.print-hint strong {
  font-style: normal;
  color: #c47030;
  font-weight: 600;
  letter-spacing: .04em;
}
.print-hint code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, .05);
  padding: 1px 4px;
  border-radius: 2px;
}

body {
  padding-top: 50px;
}

/* Source lives in <template>; never painted until Previewer runs */
#source {
  display: none;
}

/* ── Previewer output (interface.css idiom) ── */
@media screen, pagedjs-ignore {
  html,
  body {
    background: #2b2826;
  }

  #paged-preview {
    display: block;
    padding: 32px 0 52px;
    overflow-x: hidden;
  }

  body.paged-active .print-hint {
    display: none;
  }

  body.paged-active .pagedjs_pages {
    margin: 0 auto;
    transform-origin: 0 0;
  }

  body.paged-active .pagedjs_page {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 10px 32px rgba(0, 0, 0, .35);
    margin: 10mm auto 0;
    flex: none;
  }

  body.paged-active .pagedjs_page:last-of-type {
    margin-bottom: 10mm;
  }

  /* Single-page mode: stack vertically */
  body.paged-active:not(.spread-mode) .pagedjs_pages {
    width: var(--pagedjs-width);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Spread mode: official interface.css facing pages */
  body.paged-active.spread-mode .pagedjs_pages {
    width: calc(var(--pagedjs-width) * 2);
    display: flex;
    flex-wrap: wrap;
    flex: 0;
  }

  body.paged-active.spread-mode .pagedjs_page {
    margin: 10mm 0 0;
    flex-grow: 0;
    flex-shrink: 0;
  }

  body.paged-active.spread-mode .pagedjs_first_page {
    margin-left: var(--pagedjs-width);
  }

  body.paged-active.spread-mode .pagedjs_left_page {
    z-index: 20;
    width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important;
  }

  body.paged-active.spread-mode .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
    border-color: transparent;
  }

  body.paged-active.spread-mode .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle {
    width: 0;
  }

  body.paged-active.spread-mode .pagedjs_right_page {
    z-index: 10;
    position: relative;
    left: calc(var(--pagedjs-bleed-left) * -1);
  }

  /* Blank versos from break-before:right — keep slot, reduce chrome */
  body.paged-active.spread-mode .pagedjs_blank_page {
    box-shadow: none;
    background: transparent;
    opacity: 0.35;
  }
}

@media print {
  .toolbar,
  .print-hint {
    display: none !important;
  }

  body {
    padding-top: 0;
    background: #fff;
  }

  body.paged-active #paged-preview {
    display: block !important;
  }
}


/* Manual page-break editor controls */
.break-edit-control, .import-breaks-label, .break-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.import-breaks-label {
  cursor: pointer;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}
.break-count { opacity: .72; }
.break-editing .breakable-block {
  position: relative;
  outline: 1px dashed rgba(155, 91, 0, .35);
  outline-offset: 2px;
}
.manual-break-toggle {
  position: absolute;
  z-index: 1000;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: min(220px, calc(100% - 8px));
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #9b5b00;
  border-radius: 999px;
  background: rgba(255, 248, 232, .94);
  color: #603700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  font: 600 10px/1.2 system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
.break-editing .manual-break-before {
  outline: 2px solid rgba(155, 91, 0, .7);
}
@media print {
  .manual-break-toggle {
    display: none !important;
  }
}
