/* ============================================================================
 * BOX BOX - public/docview.css
 * ----------------------------------------------------------------------------
 * The document as a page rather than as output.
 *
 * Three moves, and the third is the one that does the work:
 *
 *   1. The document sits on a CARD. A dossier used to run edge to edge in the
 *      reader pane, which is what a log looks like. On a card with air around
 *      it, the same words read as something that was made.
 *   2. The headings are the reading serif the body already uses.
 *   3. Every labelled field carries a glyph in the margin, and every section
 *      folds. See public/docview.js for why the glyph is chosen by concept.
 * ==========================================================================*/

/* -- the card ------------------------------------------------------------- */

/* THE CARD IS NOT THE TEXT COLUMN. This is the whole of the "it is
   extremely skinny" complaint: #doc-body IS the .md element, .md carries
   `max-width: var(--measure)`, and so the card was exactly as wide as one
   line of prose - about 570px inside a 920px pane, with the rest empty.

   In the mockup the card runs 632..1596 (964px) and the prose inside it is
   still set to a readable ~570px column. Two different widths doing two
   different jobs: the card is the page, the measure is the reading line. */
.doc-scroll > .md,
.doc-scroll > #doc-body {
  background: var(--card);
  border: 1px solid var(--line-3, var(--line));
  border-radius: 18px;
  padding: 40px 56px 48px;
  box-shadow: 0 1px 2px rgba(31, 25, 17, .04);
  max-width: var(--doc-col);
  width: 100%;
  margin: 0 auto;
}

/* ...and the reading line is put back on the blocks themselves. Anything
   that is not prose - a table, a figure, a code block - is free to use the
   whole card, which it never could before. */
.doc-scroll > #doc-body > p,
.doc-scroll > #doc-body > ul,
.doc-scroll > #doc-body > ol,
.doc-scroll > #doc-body > blockquote,
.doc-scroll > #doc-body > h1,
.doc-scroll > #doc-body > h3,
.doc-scroll > #doc-body > h4,
.md-sec > .md-sec-head,
.md-sec-body > p,
.md-sec-body > ul,
.md-sec-body > ol,
.md-sec-body > blockquote,
.md-sec-body > h3,
.md-sec-body > h4 { max-width: var(--measure); }

.doc-scroll { background: var(--card-ground); }

#doc-body:empty { display: none; }

@media (max-width: 720px) {
  .doc-scroll > #doc-body { padding: 22px 20px 28px; border-radius: 14px; }
}

/* -- headings ------------------------------------------------------------- */

.md h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.md h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-hi);
  margin: 0;
}

/* -- a section ------------------------------------------------------------ */

.md-sec {
  border-top: 1px solid var(--line);
  padding-top: 4px;
  margin-top: 26px;
}

.md-sec:first-of-type { border-top: 0; margin-top: 18px; }

.md-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  padding: 12px 0 10px;
  min-height: var(--tap);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.md-sec-head:hover .md-sec-chev { color: var(--accent-text); }

/* THE SECTION TITLE IS A TITLE, NOT A LABEL.

   .md h2 in style.css is a mono micro-label at .715em - about 11px, upper
   case, tracked out - which is right for a heading inside flowing prose and
   wrong for the one thing she navigates the document by. Ethan: "why is that
   section area so small? It needs to be bigger, so you know what section
   you're in."

   So inside a section head it goes back to being a heading: the reading
   serif, sentence case, at a size you can pick out while scrolling. The
   hairline that .md h2 trails belongs to text that flows - here the row has
   its own rule underneath. */
.md-sec-head > h2 {
  flex: 1 1 auto;
  font-family: var(--serif);
  font-size: 1.28em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
  text-transform: none;
  color: var(--text-hi);
  margin: 0;
}
.md-sec-head > h2::after { display: none; }

/* The number in a circle. Ten triggers are a list you pick from, and a list
   you pick from wants its item numbers to be objects rather than punctuation. */
.md-sec-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 11px/22px var(--mono);
  text-align: center;
}

.md-sec-chev {
  flex: none;
  color: var(--faint);
  display: flex;
  transition: transform .18s ease, color .18s ease;
}

[data-motion="off"] .md-sec-chev { transition: none; }

.md-sec.is-shut .md-sec-chev { transform: rotate(-90deg); }
.md-sec.is-shut .md-sec-body { display: none; }

/* Closed, the document is a stack of rows, so the rows need to look like
   rows: a hairline between them and no collapsing margins to make some of
   them taller than others. Open, the rule reads as the heading underline it
   would have had anyway. */
.md-sec { border-bottom: 1px solid var(--line); }
.md-sec:last-child { border-bottom: 0; }
.md-sec-head { padding: 15px 0 13px; }
.md-sec.is-shut > .md-sec-head { padding: 13px 0; }
.md-sec-body { padding-bottom: 8px; }

.md-sec-body > *:first-child { margin-top: 0; }

/* -- a labelled field ----------------------------------------------------- */

/* The glyph hangs in a gutter. NOT a grid, and that is the whole note.

   A grid here is the obvious answer and it is wrong twice over. First, every
   child becomes a grid item, and reader.js has already split a multi-line
   field into block-level .md-seg spans - each one landed in the 20px column
   and wrapped at one character per line. Second, `display: grid` outranks
   `.md [data-noise] { display: none }`, so it dragged every hidden engine
   note back on screen.

   Padding plus an absolutely positioned icon has neither problem: the
   paragraph stays an ordinary block, everything inside it flows the way it
   always did, and nothing touches `display` at all. */
.md p[data-lead="key"],
.md p[data-lead="label"] {
  position: relative;
  padding-left: 30px;
  margin: 0 0 .55em;
}

.md-ico {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 20px;
  height: 1.55em;          /* one line of --read, so it sits on the first one */
  color: var(--accent-text);
  opacity: .85;
}

.md-ico .ico {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* An upper-case stage direction is machinery, so its glyph is quiet. */
.md p[data-lead="label"] .md-ico { color: var(--faint); opacity: .7; }

.md p[data-lead="key"] > strong,
.md p[data-lead="label"] > strong { color: var(--accent-text); }

/* The engine notes, when she has asked to see them, keep their rule - but the
   grid would otherwise put the rule between the icon and the text. */
.md.show-all [data-noise].md-sec { padding-left: 12px; margin-left: -14px; }

/* -- the document heading block ------------------------------------------- */

/* The dossier's own H1 gets the chequer, so the page has the same mark on it
   as the app. Not decoration: it says this document came from here. */
.md h1::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  vertical-align: -2px;
  background-image:
    linear-gradient(45deg, var(--accent) 25%, transparent 25%, transparent 75%, var(--accent) 75%),
    linear-gradient(45deg, var(--accent) 25%, transparent 25%, transparent 75%, var(--accent) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  opacity: .55;
}

/* -- a drop-down aside ---------------------------------------------------- */

/* A bold label with a list under it - "What they'll type" and its three sample
   comments. Worth having, not worth reading every time, and eight of them
   stacked is most of why a page of hooks reads as a dump. Shut to start. */
.md-fold {
  margin: 4px 0 14px;
  max-width: var(--measure);
}

.md-fold-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

.md-fold-head:hover { color: var(--text); }

.md-fold-chev {
  display: flex;
  color: var(--faint);
  transition: transform .16s ease;
}

[data-motion="off"] .md-fold-chev { transition: none; }

.md-fold-chev .ico {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.md-fold.is-shut .md-fold-chev { transform: rotate(-90deg); }
.md-fold.is-shut > ul,
.md-fold.is-shut > ol { display: none; }

.md-fold-label { font-weight: 600; }

/* The count is the reason to open it. */
.md-fold-count {
  font-size: 10.5px;
  color: var(--faint);
  border: 1px solid var(--line-3);
  border-radius: 999px;
  padding: 1px 7px;
}

.md-fold > ul,
.md-fold > ol { margin: 6px 0 0; }