/* Doc's own surface: the paper, the caret layer, the text pipe and the find
 * bar. The chrome around it belongs to the shell. */

.doc-wrap {
  position: absolute; inset: 0;
  background: #EDE9E1;
  overflow: hidden;
}

/* The scroller holds two things: a spacer as tall as the whole document, and
 * a STICKY box pinned to the top that the canvases live in. That way the
 * canvas is only ever the size of the window - a continuous canvas for a
 * hundred-page document would be tens of thousands of pixels tall and no
 * browser will allocate it. */
.doc-scroll {
  position: absolute; inset: 0;
  overflow: auto;
  outline: none;
}
.doc-stick {
  position: sticky; top: 0; left: 0;
  height: 0; z-index: 2;
}
.doc-canvas, .doc-caret {
  position: absolute; top: 0; left: 0;
  display: block;
}
.doc-caret { pointer-events: none; }
.doc-spacer { margin: 0 auto; }

/* The text pipe. It must be focusable and it must sit under the pointer, so
 * it is one transparent pixel rather than display:none - a hidden element
 * cannot receive an IME composition or raise a phone keyboard. */
.doc-input {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0; outline: none; resize: none;
  opacity: 0; z-index: 3;
  color: transparent; background: transparent;
  font-size: 16px;               /* iOS zooms the page for anything smaller */
}

.doc-find {
  position: absolute; top: .5rem; right: .9rem; z-index: 6;
  display: none; align-items: center; gap: .35rem;
  background: #FFFDF8; border: 1px solid #CFCAC1; border-radius: 4px;
  padding: .35rem .4rem;
  box-shadow: 0 6px 20px rgba(33, 28, 22, .14);
}
.doc-find.on { display: flex; }
.doc-find input {
  font: inherit; font-size: .82rem;
  border: 1px solid #E3E0DA; border-radius: 3px;
  padding: .22rem .4rem; width: 9rem; outline: none; background: #fff;
}
.doc-find input:focus { border-color: #9A3B1B; }
.doc-find button {
  font: inherit; font-size: .75rem; cursor: pointer;
  border: 1px solid #CFCAC1; border-radius: 3px;
  background: #F7F5F1; color: #4A4338; padding: .24rem .5rem;
}
.doc-find button:hover { border-color: #9A3B1B; color: #9A3B1B; }
.doc-find .x { border: none; background: none; color: #6C6356; padding: .2rem .3rem; }

.doc-pagechip {
  font-style: normal; font-size: .72rem; color: #6C6356;
  margin-left: .55rem;
}

/* The style / font chooser. Same shell as the colour picker, list instead of
 * a grid, because a style has a name and a colour does not. */
.doc-choices { display: flex; flex-direction: column; gap: 1px; min-width: 10rem; }
.doc-choice {
  font: inherit; font-size: .82rem; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid transparent; border-radius: 3px;
  padding: .3rem .5rem; color: #211C16;
}
.doc-choice:hover { background: #F3E7DF; border-color: #E0C4B5; color: #7E2F14; }