/* ==========================================================================
   AXI-x Book v0.1 — the commonplace book, set.         (extension; not SNX core)
   Study: /explorations/014-commonplace/   Engine: SNX v0.1.4
   Kin: Sky v0.1 (the register and its instrument; this file only adds to it),
   Manifest v0.1 (what the sky is between), Metric v0.1 (counts in tabular figures).

   A commonplace book is extracts under heads with the reader's gloss beside
   them. The book is kept open in the repository (axi/commonplace/*.md) and this
   is how it is set on the site. Laws:
     1. The published book is a render of the open book. axi/book-build.js
        reads the markdown and writes the entries, the heads and the pool into
        the study page between markers; nothing is written twice by hand, and
        the page fetches nothing — the book travels with it as static HTML and
        one block of JSON.
     2. The book is set in the sky (AXI-013): the baseline unit is half a row,
        the measure is whole columns, every block is trimmed onto a unit line.
        An entry's vertical budget is whole units: two of air above it, one
        between its parts, two before the gloss, two before its plate.
     3. The extract is a block; the gloss is sky. Someone else's words are
        bounded — a chalk block on the paper whose edges are unit lines and
        whose text is inset a microcolumn, as a block's padding is — and the
        studio's words are the unbounded register between. The eye tells whose
        words are whose before it reads them.
     4. The heads are the way in. The index is a hand-placed stage of text
        blocks, one per head, scored per edition (2·2·3 columns of 7, 2·3 of 5,
        3 of 3; two rows each), filled left to right in the book's order of
        first appearance, the last block of a row widened to the edge so no
        cell is empty. No signal at rest: the chosen head is the one lit block
        and the entries not under it are hidden; the page's hash carries the
        choice, since the book persists nothing.
     5. Everything is dated and sourced. Every gloss carries its date and
        author; every extract carries its source with the URL and the date it
        was read; a quotation taken at second hand says so in the entry.
     6. Plates are the manifests the sky is between: after every entry, the
        engine's own composition seeded by the entry's number, one row tall,
        its edges on unit lines. The book's illustrations are the system's.
     7. The book joins the draw at forty entries as the FIFTH sentence: the
        first four picks stay the archive's for every date ever drawn, and the
        book's share is fixed by place — one in five — however large it grows.
        Extracts and musings join; glosses never. (draw.js; rule of the book 5.)
     8. Feed/score: book.js writes numbers (data-* on the stage, the sky and
        the instrument) and places the heads; this file draws everything.
   Opt-in: .sky.bk around rendered .bk-entry articles; .bk-stage for the heads;
   [data-book-draw] for the instrument.
   ========================================================================== */

/* ---------- law 2, 3: the entry in the sky ---------- */
.sky .bk-entry{grid-column:var(--sky-cols);padding-inline:0;margin-top:calc(2*var(--sky-unit));min-width:0}
.sky .bk-entry[hidden]{display:none}
.sky .bk-entry > *{padding-inline:var(--sky-inset)}
.sky .bk-entry > .eyebrow{margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-capm)*var(--sky-meta))}
.sky .bk-entry > .eyebrow .bk-no{color:var(--snx-ink);font-weight:600}
.sky .bk-entry > .eyebrow + h3{margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-sub))}
/* the small lines: heads and source, at the note size, trimmed by their own cap */
.sky .bk-heads,.sky .bk-src{font-size:var(--sky-note);line-height:var(--sky-unit);color:var(--snx-ink-60);margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-note));text-indent:0;hyphens:manual}
.sky .bk-heads a{color:var(--snx-navy)}
.sky .bk-heads a:hover,.sky .bk-heads a[aria-current="true"]{color:var(--snx-ink);background:var(--snx-signal);text-decoration:none}
.sky .bk-sep{color:var(--snx-ink-40)}
.sky .bk-src a{overflow-wrap:anywhere}
/* run-in labels: mono, small, line-height 0 so they can never grow a line */
.sky .bk-heads b,.sky .bk-src b,.sky .bk-glabel{font-family:var(--snx-mono);font-size:.78em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--snx-ai-deep);line-height:0;margin-right:.5em}
/* the extract: a block (law 3). Top padding a unit less a cap, so its first baseline is one unit
   below its top edge; bottom padding a unit, so its bottom edge is one unit below its last
   baseline; the outline is drawn inside with a shadow so the box stays whole units tall. */
.sky .bk-x{
  margin-top:var(--sky-unit);
  padding:calc(var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body)) var(--sky-inset) var(--sky-unit);
  background:var(--snx-chalk);box-shadow:inset 0 0 0 1px var(--snx-ink);
  position:relative;z-index:2;
}
.sky .bk-x > p{margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body));padding-inline:0;text-indent:0;hanging-punctuation:first}
.sky .bk-x > p:first-child{margin-top:0}
.sky .bk-x > p + p{margin-top:calc(2*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body))}
.sky[data-para="indent"] .bk-x > p + p{text-indent:0}
/* in indent mode only a gloss paragraph after a gloss paragraph is indented; leads, heads and source lines never are */
.sky[data-para="indent"] .bk-entry > p + p{text-indent:0}
.sky[data-para="indent"] .bk-entry > .bk-g + .bk-g{text-indent:var(--sky-unit)}
/* the lead into a block, and the musing (an entry with no extract) */
.sky .bk-lead{color:var(--snx-ink-60)}
.sky .bk-mus{font-style:italic}
/* the gloss: sky, two units after the source line */
.sky .bk-src + .bk-g,.sky .bk-x + .bk-g,.sky .bk-mus + .bk-g{margin-top:calc(2*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body))}
.sky .bk-g strong{font-weight:700}
.sky .bk-g em{font-style:italic}
.sky .bk-g code,.sky .bk-x code{font-family:var(--snx-mono);font-size:.86em;line-height:0}

/* ---------- law 6: the plate ---------- */
.sky .bk-plate{margin-top:calc(2*var(--sky-unit));padding-inline:0}
.sky .bk-plate .snx-stage{height:var(--snx-row);min-height:0;border:0;box-shadow:inset 0 0 0 1px var(--snx-ink);grid-auto-rows:var(--snx-row)}
/* a one-row stage: the engine's breakouts default to two or three rows; on a plate they take the one */
.sky .bk-plate .snx-stage .snx-o{--rs:1!important}
.sky .bk-plate figcaption{padding-inline:var(--sky-inset)}

/* ---------- law 4: the heads stage ---------- */
.bk-stage{margin-top:14px}
.bk-head{
  display:block;text-decoration:none;color:var(--snx-ink);background:var(--bg,var(--snx-chalk));
  box-shadow:inset 0 0 0 1px var(--snx-ink-18);
  transition:background-color var(--snx-t-fast) ease;
}
.bk-head .snx-pad{padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;height:100%;box-sizing:border-box}
.bk-head b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;text-wrap:balance;display:block}
.bk-head .bk-count{font-family:var(--snx-mono);font-size:11px;letter-spacing:.06em;color:var(--snx-ink-60);font-variant-numeric:tabular-nums;display:block;margin-top:8px}
.bk-head:hover{background:var(--snx-mint);color:var(--snx-ink)}
.bk-head[aria-current="true"]{background:var(--snx-signal);box-shadow:inset 0 0 0 1px var(--snx-ink)}
.bk-head[aria-current="true"] .bk-count{color:var(--snx-ink)}
.bk-head:focus-visible{outline:2px solid var(--snx-ai);outline-offset:-2px}
@media (max-width:639px){.bk-head b{font-size:14px}}

/* ---------- law 7: the instrument ---------- */
.bk-draw ol{list-style:none;margin:0;padding:0}
.bk-draw li{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:10px 18px;border-bottom:1px solid var(--snx-ink-18);font-size:14.5px;align-items:baseline}
.bk-draw li:last-child{border-bottom:0}
.bk-draw li b{font-family:var(--snx-mono);font-size:11px;letter-spacing:.1em;color:var(--snx-ink-40);font-weight:600;font-variant-numeric:tabular-nums}
.bk-draw li.book{background:var(--snx-butter)}
.bk-draw li.book b{color:var(--snx-ai-deep)}
.bk-draw li small{display:block;font-family:var(--snx-mono);font-size:10.5px;letter-spacing:.04em;color:var(--snx-ink-60);margin-top:4px;font-variant-numeric:tabular-nums}
.bk-draw q{quotes:'“' '”'}
.bk-census{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.bk-head{transition:none}}