/*
 * The page on paper.
 *
 * A second file rather than a block at the foot of the other one, because it is
 * read in a different situation and almost every rule in it is an undoing: what
 * a screen wants -- a form to type in, a box that scrolls sideways, a colour
 * that reads on a dark background -- is either useless on paper or actively
 * wrong there.
 *
 * `media="print"` on the link, so nothing here can reach a screen.
 *
 * This file is downloaded by whoever opens the page, comments included.
 */

/* The margin is the page's, so the body gives up its own padding below. */
@page { margin: 14mm; }

body {
  padding: 0;
  background: #fff;
}

/*
 * Smaller, through the scale the rest of the page is written in rather than by
 * a number picked here. A paper page is about 180mm of usable width against the
 * 1600px this is laid out for, and every table on it has between six and nine
 * columns.
 */
:root {
  --text-caption: 0.62rem;
  --text-small: 0.7rem;
  --text-body: 0.78rem;
  --text-lead: 0.92rem;
  --text-title: 1.2rem;
}

/*
 * **The form does not print, and the reason is the key box.**
 *
 * A printed AES key is a key on somebody's desk, and this page promises the key
 * is used for the request that carried it and then gone. Paper is the one place
 * that promise cannot reach, so the form is not offered to the printer at all.
 *
 * Nothing is lost with it: the picture below names every byte that was pasted.
 */
#form,
.exports,
.tip,
.lede,
[data-role="reading"] { display: none !important; }

/* What is left of the masthead is a title, which a printed page wants. */
.masthead h1 { font-size: var(--text-title); margin: 0 0 var(--gap-l); }

/*
 * **A box that scrolls sideways prints what fits and drops the rest**, with
 * nothing to say it did. Anything hidden by an overflow box has to be given
 * back before the page is measured for paper.
 */
.scroll,
.telegram > .telegram-figure { overflow: visible !important; }

/*
 * **A cell pinned to one line is what makes a table wider than the paper.**
 *
 * On a screen the width has somewhere to go: the box scrolls sideways and the
 * reader drags it. Take the scrolling away, as the rule above does, and the
 * page is what clips the table -- so a column falls off the right-hand edge
 * with nothing to say it did. Wrapping a cell is the smaller loss of the two.
 *
 * The two runs that must not wrap are spared. A timestamp broken across two
 * lines reads as two things, which is the reason it was pinned in the first
 * place.
 */
td.mono { white-space: normal; }
td.nowrap, td.when { white-space: nowrap; }

/*
 * **And a step smaller again for the tables**, which is what actually makes
 * them fit. The records table is eleven columns, four of them hex, and at the
 * body size it asked for 691px of a 658px page -- five per cent over, and five
 * per cent is a step of the scale.
 *
 * `overflow-wrap: anywhere` was tried first and is the wrong tool. It does make
 * the table fit, by letting a column be measured as one character wide: the
 * layout then gave `Quantity` 131px and `Data` 56, and `78af5901` came out over
 * two lines. Measured. A hex value is one thing and reads as one line.
 */
table { font-size: var(--text-caption); }

/*
 * **The colours are the report and not decoration.** Every byte in the picture
 * carries the colour of the field that claimed it, and a legend underneath says
 * what each one means -- so a printer dropping backgrounds prints a legend
 * against eight identical grey cells. Browsers drop them by default.
 */
.byte,
.swatch,
.summary,
.card,
.telegram,
.telegram::before,
details.folded > summary,
tr.selectable,
.reset-value {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/*
 * Where a page may break, and where it may not.
 *
 * **Only the boxes that could fit on a page ask not to be broken.** A telegram
 * is taller than a page nearly always, so asking is not refused -- it is obeyed
 * as far as it goes, which means starting the card on a fresh page and breaking
 * it anyway. Measured on 2026-09-03: with `.card` and `.telegram` in this list,
 * two telegrams printed on ten pages against seven, and the white was the
 * bottom two-thirds of the first two.
 *
 * What is left is a picture cut in half, a heading at the foot of one page with
 * its table on the next, and a row split down the middle. Those are worth
 * asking about and each of them fits.
 */
.summary, .region { break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
tr { break-inside: avoid; }

/*
 * The index is a table of contents on paper, and its links go nowhere there.
 * Kept, in ink rather than in the accent: it says which telegram is which, and
 * that is worth as much on a page as on a screen.
 */
a { color: inherit; text-decoration: none; }

/* Borders drawn for a screen at 1px of a light grey come out faint. The card
   edges are what separate one telegram from the next once the background is
   white on white. */
.card, .telegram, .summary, .telegram::before { border-color: #b9bec6; }