/* ==========================================================================
   CONTENT — the manuscript in the centre column
   --------------------------------------------------------------------------
   One sub-page is visible at a time and it always fits: three abstracts, a
   heading block, and sometimes a plate floating in the text. Nothing here
   scrolls, so the copy is written to length rather than trusted to overflow.

   CONTENTS
     01  the page
     02  page heading
     03  abstracts
     04  plates
   ========================================================================== */


/* ==========================================================================
   01  THE PAGE
   ========================================================================== */

.content { background: var(--paper); }

.pane {
  height: 100%;
  flex-direction: column;
  padding: 22px 34px 18px;
}


/* ==========================================================================
   02  PAGE HEADING
   ========================================================================== */

.pg-head {
  flex: none;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.kicker {
  font-size: var(--f-sm);
  line-height: 16px;
  letter-spacing: 2px;
  color: var(--ink-dim);
}

.pg-title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--f-title);
  line-height: 30px;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin: 6px 0 4px;
}

.dek { color: var(--ink-dim); }


/* ==========================================================================
   03  ABSTRACTS
   A block formatting context, so a floated plate is contained here instead of
   leaking into the status bar.

   IT SCROLLS, BUT SILENTLY. Pages are written to fit and normally do, yet a
   larger type size or a shorter window can push the last lines past the
   bottom, and clipped text with no way to reach it is the one failure worth
   ruling out. So the reading area always scrolls when it has to — and shows
   no bar for it. The chrome is what would break the look, not the ability.

   Reading scrollbar, under Screen, shows or hides the bar. It is on at the
   moment so the bar can be looked at; the option is what it always was. The
   horizontal axis stays clipped: nothing here is ever meant to be wider than
   the column.
   ========================================================================== */

.abstracts {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  /* The bar belongs to the pane, not to the paragraph. .pane insets its
     contents by 34px, so a scroll container sitting inside that inset put the
     bar 34px in from the edge, floating in the margin beside the text. The
     negative margin pushes this box back out to the pane's own edge — where
     the scrollbar is drawn — and the matching padding holds the text exactly
     where it was. Nothing moves except the bar, which now rides the right
     edge of the centre pane against the rule between panes. */
  margin-right: -34px;
  padding-right: 34px;
  /* And the same vertically, so the bar runs from the rule under the page
     heading down to the foot of the pane rather than floating between them.

     -18px at the top is the 16px gap plus the heading's own 2px rule, which
     puts the bar's top edge exactly ON that rule rather than below it — the
     two lines coincide instead of stacking into one thick band. At the foot
     it is the pane's 18px padding. Both are given straight back as padding,
     so the text does not move; only the bar reaches further. */
  margin-top: -18px;
  padding-top: 18px;
  margin-bottom: -18px;
  padding-bottom: 18px;
}

/* WHOLE PAGE, HEADING AND ALL — Scroll whole page, under Screen.

   With only the abstracts scrolling, the heading stays put and the bar can
   only ever be as tall as the part below it. Moving the scroll up to .pane
   puts it on the element that already spans the full height of the centre
   column, so the bar runs the entire side and the heading travels with the
   text it belongs to.

   .abstracts gives up its own scrolling and its edge trick when this is on:
   flex:none so it takes its natural height and pushes .pane past its bounds,
   and the margin cancelled because .pane's own padding now does that job. */
body:has(#scroll-all:checked) .pane {
  overflow: hidden auto;
  overscroll-behavior: contain;
}
body:has(#scroll-all:checked) .abstracts {
  flex: none;
  overflow: visible;
  margin-right: 0;
  padding-right: 0;
}

.ab { padding-bottom: 14px; margin-bottom: 14px; }
.ab + .ab {
  border-top: 1px solid var(--hair);
  padding-top: 14px;
}
.ab:last-child { padding-bottom: 0; margin-bottom: 0; }

.ab-h {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--f-sub);
  line-height: 20px;
  color: var(--link);
  margin-bottom: 8px;
}
.ab-h span { color: var(--ink-dim); }

.ab p + p { margin-top: 12px; }
.ab b { font-weight: 400; color: var(--link); }

/* emphasis as a highlight block, in keeping with everything else being
   rectangular */
.ab em {
  font-style: normal;
  color: var(--ink);
  background: color-mix(in srgb, var(--sel) 34%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sel) 34%, transparent);
}


/* ==========================================================================
   04  PLATES
   Pixel illustrations that float in the text. Source copies live in images/.
   ========================================================================== */

.plate {
  float: right;
  width: 146px;
  margin: 2px 0 10px 18px;
  padding: 9px 9px 0;
  background: var(--face);
  border: 2px solid var(--ink);
  box-shadow: var(--drop-md);
}

.plate svg {
  display: block;
  width: 124px; height: 124px;
  color: var(--ink);
  shape-rendering: crispEdges;
}
.plate .fill-pop  { fill: var(--pop); }
.plate .fill-deep { fill: var(--link); }
.plate .fill-face { fill: var(--face); }

.plate figcaption {
  font-size: var(--f-sm);
  line-height: 16px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--ink-dim);
  padding: 7px 0 6px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}


/* --------------------------------------------------------------------------
   KEY LISTS
   A reference table rather than prose: the key on the left at a fixed width
   so every description starts on the same vertical, and a hairline between
   rows so the pairs read across. The key itself is drawn as a key — the same
   sunken cell the status bar uses, at the smallest size that still holds a
   two-character label.
   -------------------------------------------------------------------------- */

.keylist {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.keylist li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--hair);
}
.keylist li:first-child { border-top: 0; }

.kbd {
  flex: none;
  min-width: 46px;
  padding: 1px 0;
  text-align: center;
  font-weight: 400;
  color: var(--ink);
  background: var(--face);
  border: 1px solid var(--line);
  box-shadow: var(--bevel-up);
}