/* semgit — the sheet: the page, its pages, the front matter, the pagefoot,
   the editing notice, the type rules, and the sheet's print rules (section 4,
   #70; the paper of the UI pass, #73). Linked after desk.css. */

/* width, not max-width, and flex:none so a flex parent cannot shrink it either.
   See the invariant on --sheet-w.

   Nothing on the paper that a printer would not put there: a sha in the top
   corner is the application talking on a surface that belongs to the
   manuscript. Chrome goes on the desk; the sheet carries the document and only
   the document — and, since the UI pass (#73), the document's own front matter,
   drawn by the shell into the room the title's margins leave. */
/* --zoom scales the page. It does not resize it: at any zoom the sheet is still
   210mm of paper and the line breaks are where they were. `zoom` rather than a
   transform because it participates in layout, so the desk's scrollbars and the
   annotation positions follow it without being told. */
.sheet {
  /* The measure: 576px of text inside the 210mm sheet, the side padding being
     what is left. One padding for the strip, for every .page and so for the
     editor's content box inside the sheet: a padding that differed between
     Read and Edit would move every word (tools/ui_drift.py). */
  --page-x: calc((var(--sheet-w) - 576px) / 2);
  --page-pad: 96px var(--page-x) 80px;
  /* The room under the title, in Read and in Edit alike. Read draws the meta
     line into it. */
  --title-gap: 56px;
  /* The paper: white, no border, a soft shadow (--e3, tokens.css), 4px
     corners. */
  --paper-shadow: var(--e3);
  zoom: var(--zoom, 1);
  /* The sentence markers are drawn into the page's own margin, positioned
     against this. */
  position: relative;
  width: var(--sheet-w);
  flex: none;
  margin: 0 auto;
  padding: var(--page-pad);
  background: var(--surface);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--paper-shadow);
}

/* The manuscript as pages (pages.js): the sheet becomes a transparent stack
   and each .page is what the sheet used to be — 210mm by 297mm of paper with
   the same padding, corners and shadow. A block that will not cut and is
   taller than a page gets `height: auto` from the script, so nothing is ever
   clipped. */
.sheet.is-paged {
  display: grid;
  row-gap: var(--s5);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.sheet.is-paged > .page {
  box-sizing: border-box;
  height: 297mm;
  padding: var(--page-pad);
  overflow: hidden;
  background: var(--surface);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--paper-shadow);
}
/* A paragraph continued from the previous page starts at the page's top. */
.sheet.is-paged > .page > [data-cont] { margin-top: 0; }

/* The front matter (#73): the shell's kicker row above the document's own
   first H1 and its meta line below it, wrapped by _front.html as one block —
   pages.js never cuts it and keeps it off the foot of a page like a heading.

   Neither line is text. The words are CSS generated content from the
   elements' data attributes, and the elements have no height: the kicker is
   drawn upward into the page's top padding, the meta line downward into the
   title's bottom margin, which is --title-gap in Read and in Edit alike (the
   meta's own margins cancel the title's and restore it, so the next block
   sits where it sits without the meta). The block takes no room of its own,
   the manuscript's words are the only text nodes on the sheet, and Read sets
   them where Edit does. */
.front { margin: 0; padding: 0; border: 0; }
/* The interface's face, not the manuscript's: the kicker and the meta are
   Writ talking about the document (UI-BRIEF §2.2). */
.front-kicker, .front-meta {
  height: 0;
  overflow: visible;
  position: relative;
  font-family: var(--ui);
  color: var(--ink-3);
  white-space: nowrap;
}
.front-kicker {
  display: flex;
  align-items: baseline;
  top: -44px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.front-kicker::before { content: attr(data-left); }
/* On a branch under review: whose change this is, in amber, at the right. */
.front-kicker[data-right]::after {
  content: attr(data-right);
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--warn);
}
.front-meta {
  top: 12px;
  margin: calc(-1 * var(--title-gap)) 0 var(--title-gap);
  font-size: 13px;
  line-height: 1.5;
}
.front-meta::before { content: attr(data-text); }

/* Everything the application knows about the document, on the desk beneath it
   rather than printed onto it: the sha it is showing, who has touched it. */
.pagefoot {
  display: flex; align-items: center; gap: var(--s3);
  max-width: var(--sheet-w);
  margin: var(--s3) auto 0;
  padding: 0 var(--s1);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.pagefoot .avatar { width: 16px; height: 16px; font-size: 8px; }

/* Why the editor is in exact source mode, when it is. On the desk, above the
   page: the sheet carries the document and only the document. */
.editing-notice {
  max-width: var(--sheet-w);
  margin: calc(-1 * var(--s2)) auto var(--s3);
  padding: var(--s1) var(--s3);
  font-size: var(--t-xs);
  color: var(--ink-2);
  background: var(--accent-wash);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

/* The editor's content box is the page. editor.css gives it a serif and a
   minimum height for the harness; on the sheet the page's own type rules
   apply, so Read and Edit set the same words in the same places. */
.sheet [data-editor-host] .semgit-editor-content {
  min-height: 0;
  color: var(--ink);
  font: 17px/1.6 var(--prose);
  /* Above the marks layer, so the bars notes.js draws for the anchored
     sentences sit under the text like a highlight, not over it. */
  position: relative;
  z-index: 1;
}

/* The manuscript as the server sent it. Nothing here is the shell's; this is
   markdown-it's output, given a measure and a rhythm. Sizes are absolute, not
   relative to the UI type, because this is the page and the UI is around it.
   The prose is a serif (--prose; UI-BRIEF §2.2: the user's prose is a serif,
   the interface a grotesque), so the mock's rhythm (docs/ui-pass.md §1) is
   retuned for it: body 17 on 1.6, a 14px paragraph gap, H2 19 bold, the
   title 30 on 1.15; the 576px measure stays. */
/* One set of type rules whether the page is rendered or being edited: the
   rules nest under the sheet, under each of its pages, and under the editor's
   content box inside it. Switching Read and Edit must not move a word (#58).
   The title is the document's own first H1, in Read inside the front-matter
   block (_front.html), so both places are named. */
.sheet, .sheet > .page, .sheet .semgit-editor-content {
  & > h1, & > h2, & > h3, & > p, & > ul, & > ol, & > blockquote, & > pre, & > table,
  & > .front > h1 {
    font-family: var(--prose);
    color: var(--ink);
  }
  & > h1, & > .front > h1 { font-size: 30px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 var(--title-gap); }
  & > h2 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: var(--s6) 0 var(--s4); }
  & > h3 { font-size: 17px; font-weight: 600; line-height: 1.35; margin: var(--s5) 0 var(--s2); }
  & > p, & > ul, & > ol, & > blockquote { font-size: 17px; line-height: 1.6; margin: 0 0 var(--s4); }
  & > blockquote { padding-left: var(--s4); border-left: 2px solid var(--line); color: var(--ink-2); }
  & > pre { font-family: var(--mono); font-size: 13px; line-height: 1.55; padding: var(--s3) var(--s4); background: var(--sunken); overflow-x: auto; margin: 0 0 var(--s4); }
  & > table { border-collapse: collapse; font-size: 14px; margin: 0 0 var(--s4); }
  & > table th, & > table td { padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line); text-align: left; }
}
.sheet .prose { font-family: var(--prose); color: var(--ink); }
.sheet code { font-family: var(--mono); font-size: .92em; }
.sheet a { text-decoration: underline; text-underline-offset: 2px; }
/* Raw view: the source, as a page. */
.sheet > .raw { white-space: pre-wrap; }

/* The sheet's share of the print rules; the base is in tokens.css. */
@media print {
  .sheet {
    zoom: 1;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* The browser paginates for print; the script's pages become its pages. */
  .sheet.is-paged { display: block; }
  .sheet.is-paged > .page { height: auto; border: 0; border-radius: 0; box-shadow: none; break-after: page; }
}