/* ==========================================================================
   NEGUSTOLONOW — site/css/step.css
   step.html only. Everything here is scoped to body[data-page="step"].

   The figure's band (28svh while nothing has been picked up, 76svh after) and
   the ruled controls, the code's perforated head and the burn pair live in
   negusto.css §13c/§13d, because they are the pocket's furniture and the pocket
   is the same in every world. This file holds what belongs to this page alone:
   the surface's spacing, the docket's own setting, and the printed slip.

   THE SLIP. The one real thing the site gives away, printed on the visitor's
   own printer at 74 × 105 mm, the size of a slip pocket (plan §6.9). Page one:
   the code at the head, the figure in greys, the docket. Page two: the address
   and the ids, so a slip in a pocket restores a docket. @page lives here and
   nowhere else (CONTRACT §1).

   No new hex: every colour is a token from negusto.css §1.
   ========================================================================== */

/* 1. THE SURFACE ------------------------------------------------------------ */

/* the surface hands over to the docket one room down, not a screen down */
body[data-page="step"] .step-open { padding-bottom: var(--s-7); }
body[data-page="step"] .step__figure { margin-bottom: var(--s-5); }
body[data-page="step"] .step__name { margin-top: var(--s-6); }
/* the house's line, and only while the step is bare */
body[data-page="step"] .step__house { max-width: var(--measure); margin-top: var(--s-4); color: var(--ink-soft); }

/* 2. THE DOCKET ------------------------------------------------------------- */

/* the even hand's own indent: the entries stand in from the four words that
   hold them (RECEIVED, ENTERED AGAINST SAME, RETURNED, Balance) */
body[data-page="step"] .step__doc-in { padding-left: 2ch; }
body[data-page="step"] .step__doc-head { letter-spacing: 0.02em; }

/* the printed line under the controls, and what is said back by one of them */
body[data-page="step"] .step__slip { margin-top: var(--s-4); color: var(--ink-faint); }
body[data-page="step"][data-state="nothing"] .step__slip { display: none; }
body[data-page="step"] .step__said { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* 3. THE FOLDS -------------------------------------------------------------- */

body[data-page="step"] .step__kept-line { max-width: var(--measure); }
body[data-page="step"] .step__kept { margin-top: var(--s-5); }
body[data-page="step"] .step__keepers { margin-top: 0; }

/* 4. THE SLIP, WHICH IS NOT ON THE SCREEN ----------------------------------- */

body[data-page="step"] .step__print { display: none; }

@media (max-width: 47.99rem) {
  /* §11.9: the docket keeps a margin of its own on a phone */
  body[data-page="step"] .step__docket .doc { padding-inline: var(--s-4); }
}

/* 5. PRINT: TWO PAGES, 74 × 105 MM ------------------------------------------ */

@media print {
  @page { size: 74mm 105mm; margin: 4mm; }

  body[data-page="step"] { font-size: 6pt; }

  /* everything that is the site and not the slip */
  body[data-page="step"] [data-shell="header"],
  body[data-page="step"] [data-shell="footer"],
  body[data-page="step"] .shell-footer,
  body[data-page="step"] [data-shell="walk"],
  body[data-page="step"] .step__name,
  body[data-page="step"] .surface__line,
  body[data-page="step"] .step__house,
  body[data-page="step"] .door,
  body[data-page="step"] .caption,
  body[data-page="step"] .step__controls,
  body[data-page="step"] .step__slip,
  body[data-page="step"] .fold,
  body[data-page="step"] noscript { display: none !important; }

  body[data-page="step"] .room { padding-block: 0 !important; }
  body[data-page="step"] .wrap { padding-inline: 0; max-width: none; }
  body[data-page="step"] .step__figure { margin: 0 auto 1.5mm; }

  /* the figure, above the docket, at the width of the slip's column */
  body[data-page="step"] .step__figure .plate__frame { width: 22mm; height: auto; max-height: none; margin-inline: auto; background: none; }
  body[data-page="step"][data-state="nothing"] .step__figure .plate__frame { height: 16mm; }

  /* the code at the perforated head, then the docket in mono on buff */
  body[data-page="step"] .step__docket { margin-top: 0; }
  body[data-page="step"] .step__code { margin-bottom: 1.2mm; padding-bottom: 1mm; font-size: 5pt; letter-spacing: 0.18em; color: var(--ink); }
  body[data-page="step"] .step__docket .doc { max-width: none; padding: 1.6mm; border-width: 0.2mm; font-size: 5pt; line-height: 1.28; background: var(--buff); print-color-adjust: exact; -webkit-print-color-adjust: exact; break-inside: auto; }
  body[data-page="step"] .step__docket .doc--typed > p + p { margin-top: 0.1em; padding-top: 0.1em; border-top: 0; }
  body[data-page="step"] .step__docket .doc__last { margin-top: 0.7em !important; letter-spacing: 0.3em; }
  body[data-page="step"] .step__doc-in { padding-left: 1.6ch; }

  /* page two: the address slip. A bare step has no address to print. */
  body[data-page="step"] .step__print { display: block; break-before: page; page-break-before: always; }
  body[data-page="step"][data-state="nothing"] .step__print { display: none; }
  body[data-page="step"] .step__print-head { font-family: var(--f-mono); font-size: 5pt; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
  body[data-page="step"] .step__print-addr { margin-top: 1.5mm; font-family: var(--f-mono); font-size: 6pt; line-height: 1.4; word-break: break-all; }
  body[data-page="step"] .step__print-ids { margin-top: 3mm; padding-top: 1.5mm; border-top: 0.2mm solid var(--hair); list-style: none; font-family: var(--f-mono); font-size: 6pt; line-height: 1.35; }
}