/* Website emergency guide, print. Linked with media="print", so every rule
   here is already print only and none of it needs a media block.

   Three renderings come out of this file. Two are deliberate: a scenario card
   and the whole-guide card, each one page, each triggered by a button that
   puts a class on the body and calls print. The third is the browser's own
   print of whatever view is on screen, which has to come out clean without
   anyone asking, so the site chrome and every control are hidden first and
   the two card renderings are additions on top of that.

   The cards are the half of this product that lives in a drawer by the
   register until the bad day. They are black on white with real margins and
   step numbers big enough to find at arm's length.

   The type was sized against the measurement rather than by eye. Wrapped text
   in a fixed column grows with roughly the square of the font size, so the
   tallest card at 496pt of the 920 available took a factor of 1.25, not the
   1.85 that filling the page would suggest. All eleven cards were re-measured
   after, and the whole-guide card's rows were then pulled back on their own:
   ten wrapping rows are the most size-sensitive block on either card, and at
   the shared step size that card reached 858 of 920 with no room to spare for
   a different print engine or a substituted font. */

@page {
  size: letter;
  margin: 18mm;
}

html,
body {
  background: #FFFFFF;
  color: #000000;
}

/* Site chrome and every control. A printed page has no navigation.

   The two script-only controls have to be matched at the specificity that
   revealed them. guide.css shows them with [data-enhanced] .eg-print and
   [data-enhanced] .eg-back, which is one attribute selector more specific
   than a bare class, so a bare class here loses and the print buttons print.
   They did, until this was measured. */
.skip-link,
.c-header,
.c-footer,
.eg-nav,
.eg-print,
.eg-printLine,
.c-quiet,
.eg-privacy,
.u-hidden-visually,
[data-enhanced] .eg-print,
[data-enhanced] .eg-back {
  display: none;
}

.eg {
  padding: 0;
  max-width: none;
}

/* Everything inside the column goes black, rather than a list of the
   elements somebody remembered. The chooser card titles are --text-1, which
   is very nearly white, and a list that missed them printed them invisibly on
   white paper. .eg-step p is repeated because guide.css sets it at one higher
   specificity than a bare class. */
.eg,
.eg *,
.eg-step p {
  color: #000000;
}

a {
  color: #000000;
  text-decoration: none;
}

.eg-close {
  background: transparent;
  border-inline-start: 2px solid #000000;
}

.eg-option,
.eg-jump,
.eg-choices li {
  background: transparent;
  border: 1px solid #666666;
}

.eg-step::before {
  background: transparent;
  color: #000000;
  border: 1.5px solid #000000;
}

.eg-step,
.eg-faq__item,
.eg-jump {
  break-inside: avoid;
}

/* ------------------------------------------------------------ the cards */

.eg-card {
  display: none;
  break-inside: avoid;
  color: #000000;
}

.eg-card__title {
  margin: 0 0 6mm;
  font-size: 30pt;
  font-weight: 650;
  line-height: 1.15;
}

.eg-card__sub {
  margin: 0 0 6mm;
  font-size: 12pt;
  line-height: 1.4;
  max-width: none;
}

.eg-card__steps {
  margin: 0 0 6mm;
  padding: 0;
  list-style: none;
  counter-reset: eg-card-step;
}

.eg-card__steps li {
  position: relative;
  counter-increment: eg-card-step;
  padding-inline-start: 17mm;
  margin-block-end: 5mm;
  font-size: 15pt;
  line-height: 1.35;
  break-inside: avoid;
}

.eg-card__steps li::before {
  content: counter(eg-card-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -1.5mm;
  font-size: 28pt;
  font-weight: 700;
  line-height: 1;
}

.eg-card__rows {
  margin: 0 0 5mm;
  padding-inline-start: 6mm;
}

.eg-card__rows li {
  margin-block-end: 3mm;
  font-size: 11.5pt;
  line-height: 1.35;
  break-inside: avoid;
}

.eg-card__line {
  margin: 0 0 4mm;
  font-size: 13pt;
  line-height: 1.4;
  max-width: none;
}

.eg-card__footer {
  margin: 6mm 0 0;
  padding-block-start: 3mm;
  border-block-start: 1px solid #000000;
  font-size: 13.5pt;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* The two card modes. In both, everything a reader was looking at goes and
   only the card prints.

   The active view needs three classes' worth of specificity to hide, because
   guide.css shows it with [data-enhanced] .eg-view.is-active. A rule of
   body.eg-print-general .eg-chooser measures lower and lost, which printed
   the whole chooser instead of the whole-guide card. Only looking at the
   preview found it: every visibility assertion in the harness had been
   written against the elements that were already correct. */
body.eg-print-card .eg-view.is-active,
body.eg-print-general .eg-view.is-active,
body.eg-print-card .eg > h1,
body.eg-print-general .eg > h1,
body.eg-print-general .eg-scenarios {
  display: none;
}

/* The scenario heading is a child of the section, not a view, so the rule
   above does not reach it and it printed above the card. */
body.eg-print-card .eg-scenario.is-active > *:not(.eg-card) {
  display: none;
}

body.eg-print-card .eg-scenario.is-active .eg-card {
  display: block;
}

body.eg-print-general #card-general {
  display: block;
}