/* doc.css — document pages, text layers, decorations */

.page {
  position: absolute;
  background: #fff;
  box-shadow: 0 1.5px 5px rgba(0,0,0,.2), 0 0 1px 1px rgba(0,0,0,.08);
  overflow: hidden;
}
.pages-inner.view-continuous .page { box-shadow: none; border-right: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; }
.page.hide-ws { }
.page-gap {
  position: absolute; z-index: 5;
  cursor: default;
}
.page-gap::after {
  content: '';
  position: absolute; inset: 0 30%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M5 1 L1.5 5 M5 1 L1.5 5' stroke='%23000' stroke-opacity='.35'/%3E%3C/svg%3E") center/12px no-repeat;
  opacity: 0;
  transition: opacity .15s;
}
.page-gap:hover::after { opacity: 1; }

/* header / footer */
.pg-hf { position: absolute; left: 96px; right: 96px; height: 22px; }
.pg-header-zone { top: 48px; }
.pg-footer-zone { bottom: 48px; }
.hf-wrap { height: 100%; cursor: text; }
.hf-wrap:hover { background: rgba(43,87,154,.035); }
.hf-empty { visibility: hidden; }
.hf-empty:hover { visibility: visible; }
.hf-line { font-family: 'Aptos', 'Calibri', 'Helvetica Neue', Arial, sans-serif; font-size: 11pt; color: #333; }
.hf-edit-overlay {
  position: fixed; inset: 0; z-index: 840;
  background: rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center;
}
.hf-edit-box {
  width: 620px; min-height: 90px; background: #fff; border: 1px dashed #2B579A; border-radius: 2px;
  padding: 8px 12px; font-family: 'Aptos', Calibri, 'Helvetica Neue', Arial, sans-serif; font-size: 12pt;
  outline: none; user-select: text;
}
.hf-edit-label { color: #2B579A; font-size: 11px; margin-top: 4px; }
.hf-close { margin-top: 6px; border: 1px solid #C8C8C8; background: #fff; border-radius: 2px; padding: 3px 12px; }

/* content layers */
.pg-deco { position: absolute; inset: 0; z-index: 1; }
.pg-txt { position: absolute; z-index: 2; }
.pg-ink { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ink-canvas { position: absolute; inset: 0; }

.ln { position: absolute; }
.tsp {
  position: absolute; white-space: pre;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.tab-span { position: absolute; }
.pilcrow { position: absolute; color: #B4B4B4; font-size: 10pt; }
.inline-img { display: inline-block; }
.doc-img { position: absolute; }
.mark-ins { background: #E2F0D9; box-shadow: 0 1px 0 #70AD47; }
.mark-del { background: #FBE4E4; color: #C42B1C; text-decoration: line-through; text-decoration-color: #C42B1C; }

/* selection & highlights */
.selrect { position: absolute; background: rgba(0,120,215,.28); }
.findrect { position: absolute; background: rgba(255,255,0,.55); border: 1px solid rgba(240,200,0,.8); }
.findrect.current { background: rgba(255,150,0,.65); border-color: #E08000; }
.squiggle {
  position: absolute; height: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 3 Q2 0 4 3 T8 3' fill='none' stroke='%23FF0000' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
}
.squiggle.grammar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 3 Q2 0 4 3 T8 3' fill='none' stroke='%230070C0' stroke-width='1.1'/%3E%3C/svg%3E");
}
.mark-dot { position: absolute; border-radius: 50%; background: #9E9E9E; }
.mark-arrow { position: absolute; color: #9E9E9E; font-size: 9px; }
.br-mark {
  position: absolute; height: 10px;
  border-bottom: 1px dashed #999;
}
.br-mark::after {
  content: 'Page Break';
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: #777; background: #fff; padding: 0 8px;
}
.cmt-anchor { position: absolute; background: rgba(180,120,200,.12); }
.cmt-tag { position: absolute; background: #B478C8; }

/* caret */
.caret {
  position: absolute; width: 1.6px;
  background: #000;
  animation: blink 530ms step-end infinite;
  z-index: 4;
  pointer-events: none;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* tables */
.tbl { position: absolute; }
.tbl-row { position: absolute; }
.tbl-cell {
  position: absolute;
  border: 0.75pt solid #000;
  padding: 3px 5px;
  background: #fff;
}
.tbl-cell:nth-child(2) { border-left: none; }
.tbl-row + .tbl-row .tbl-cell { border-top: none; }
.tbl-cell .ln { position: absolute; }

/* TOC */
.toc { position: absolute; }
.toc-row {
  position: absolute; display: flex; align-items: center;
  cursor: pointer; padding-right: 4px;
}
.toc-row:hover { background: #EFF6FC; }
.toc-t { white-space: nowrap; overflow: hidden; }
.toc-dots { flex: 1; border-bottom: 1px dotted #999; margin: 0 6px; height: 1em; }
.toc-n { font-variant-numeric: tabular-nums; }

/* balloons */
.pg-balloons { position: absolute; width: 170px; z-index: 5; }
.balloon {
  position: absolute; width: 168px;
  background: #FFF4CE; border: 1px solid #D9C26A; border-radius: 3px;
  margin-bottom: 6px; z-index: 5;
}
.balloon-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; font-size: 10.5px; color: #7A6A2E;
  background: rgba(217,194,106,.25);
}
.balloon-who { font-weight: 600; }
.balloon-date { flex: 1; color: #A09257; font-size: 9.5px; }
.balloon-x { color: #7A6A2E; font-size: 13px; line-height: 1; padding: 0 3px; }
.balloon-x:hover { color: #C42B1C; }
.balloon-body {
  font-size: 11.5px; padding: 5px 7px; min-height: 30px;
  outline: none; user-select: text; color: #4A3F1C;
}

/* watermark & page border rendered via pseudo layers */
.page::before {
  content: attr(data-wm);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-35deg);
  font-size: 92px; font-weight: 700; color: rgba(160,160,160,.28);
  pointer-events: none; letter-spacing: 6px;
  z-index: 0;
}
.page::after {
  content: '';
  position: absolute; inset: 8px;
  border: none;
  pointer-events: none; z-index: 0;
}
.page[data-border='box']::after { border: 3px double #2B579A; }
.page[data-border='shadow']::after { border: 3px solid #2B579A; box-shadow: 3px 3px 0 rgba(43,87,154,.4); }

/* gridlines */
.page .gridlines-layer {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}