/*
 * Printed sheets, on top of site.css: the Alerts day sheet (print.php),
 * printed wiki pages, and Beacon sheets all share this design, made from the
 * Alerts day sheet's (print_head.php and print_foot.php draw it).
 *
 * On paper: black on white, the logo and the printing part's title at the top, the
 * sheet's title, a QR code that opens it online, and a thin black phone cord
 * under the header. An alert keeps its own color on paper too (site.css asks
 * the browser to print it), so Code Blue stays blue.
 *
 * On screen, a page of its own (body.print-doc) shows a bar with Back and
 * Print, then the sheet drawn as a sheet of paper of the chosen size.
 *
 * Paper sizes use named pages (@page letter-portrait and the rest), which
 * Chrome, Edge, Firefox, and Safari understand. A browser that does not
 * prints on the paper chosen in its own print window instead.
 */

@page { margin: 14mm 12mm; }
@page letter-portrait { size: 8.5in 11in; }
@page letter-landscape { size: 11in 8.5in; }
@page legal-portrait { size: 8.5in 14in; }
@page legal-landscape { size: 14in 8.5in; }
@page tabloid-portrait { size: 11in 17in; }
@page tabloid-landscape { size: 17in 11in; }
@page a4-portrait { size: 210mm 297mm; }
@page a4-landscape { size: 297mm 210mm; }
@page a3-portrait { size: 297mm 420mm; }
@page a3-landscape { size: 420mm 297mm; }
.paper-letter.orient-portrait { page: letter-portrait; }
.paper-letter.orient-landscape { page: letter-landscape; }
.paper-legal.orient-portrait { page: legal-portrait; }
.paper-legal.orient-landscape { page: legal-landscape; }
.paper-tabloid.orient-portrait { page: tabloid-portrait; }
.paper-tabloid.orient-landscape { page: tabloid-landscape; }
.paper-a4.orient-portrait { page: a4-portrait; }
.paper-a4.orient-landscape { page: a4-landscape; }
.paper-a3.orient-portrait { page: a3-portrait; }
.paper-a3.orient-landscape { page: a3-landscape; }
/* Only a header inside a page printed whole (a relay from Operations): no paper of its own, so no page break after it. */
.print-only > .print-sheet { page: auto; }

/* ---------- The sheet's header (the Alerts day sheet's design) ---------- */
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; margin: 1.6rem 0 0; }
.print-head-main { min-width: 0; }
.print-brand { display: flex; align-items: center; gap: .8rem; margin: 0 0 .6rem; }
.print-logo { width: 64px; height: 64px; flex: none; display: block; }
.print-brand p { margin: 0; }
.print-brand-name { font-family: var(--display); font-weight: 700; line-height: 1.2; color: var(--brand-deep); }
/* The title in capitals (Chrome::wordmark), sized from the printed logo like the headers on screen
   (site.css: --title-size), so a printed sheet's header matches the site's. */
.print-brand { --logo: 64px; --title-size: calc(var(--logo) * .34); }
.print-brand-name .brand-word { color: inherit; }
.print-title-beside { margin: 0; font-size: inherit; color: var(--brand-deep); }
.print-title-beside .brand-word { color: inherit; }
.print-brand-name + .print-brand-line, .print-brand-name ~ .print-brand-line { margin-top: .3rem; }
.print-brand-line { font-size: .92rem; color: var(--ink-soft); }
.print-title { margin: .1em 0 .2em; }
.print-subtitle { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.print-head-side { display: flex; align-items: center; gap: .8rem; max-width: 18rem; flex: none; }
.print-head-side p { margin: 0 0 .25rem; }
/* Inside a page that already has the site's header (the Alerts day sheet),
   the logo and name would show twice on screen; they appear on paper only. */
@media screen { body:not(.print-doc) .print-brand { display: none; } }
/* The thin cord under the header, where the day sheet had a rule. */
.print-sheet > .cord { margin: .6rem 0 1rem; height: 14px; }
.cord-is-print .cord-main { height: 14px; }
/* The coils centred under the 64 pixel logo, which starts at the cord's left end (the coils' middle is 50 pixels into
   the drawing), as on a page printed from the browser (site.css). */
.cord-is-print .cord-path { stroke-width: 1.4; transform: translateX(-18px) translateY(-3px); }
@media (max-width: 560px) { .print-head { flex-direction: column; } }

/* ---------- The sheet's foot ---------- */
.print-foot-legal { margin-top: 1.4rem; padding-top: .7rem; border-top: 1px solid var(--line-strong); font-size: .88rem; color: var(--ink-soft); break-inside: avoid; }
.print-foot-legal p { margin: 0 0 .3rem; }
.print-foot-legal .cc-mark { display: flex; align-items: center; gap: .5em; }
.print-foot-legal .cc-icons svg { width: 18px; height: 18px; }
/* Print Today's Alerts shows its sheet inside the Alerts site, whose own footer already has the license and the
   emergency line on screen, so the sheet's foot appears only on paper there. */
@media screen { .page-print-day .print-foot-legal { display: none; } }

/* ---------- A page of its own: the bar and the sheet as paper ---------- */
.print-doc { background: var(--sunk); }
.print-bar { background: var(--card); border-bottom: 1px solid var(--line); padding: .6rem 16px; }
.print-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 8.5in; margin: 0 auto; }
.print-bar-row .field { margin: 0; }
.print-bar > p { max-width: 8.5in; margin: .4rem auto 0; }
.print-doc .print-sheet { display: block; background: var(--card); max-width: 8.5in; margin: 1.4rem auto 2.4rem; padding: .4in .5in .5in; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 14px rgba(27, 38, 38, .12); }
.print-doc .print-sheet > .print-head:first-child { margin-top: 0; }
.print-doc.orient-landscape .print-sheet, .print-doc.orient-landscape .print-bar-row, .print-doc.orient-landscape .print-bar > p { max-width: 11in; }
.print-doc.paper-legal.orient-landscape .print-sheet { max-width: 14in; }
.print-doc.paper-tabloid.orient-portrait .print-sheet { max-width: 11in; }
.print-doc.paper-tabloid.orient-landscape .print-sheet { max-width: 17in; }
.print-doc.paper-a4.orient-portrait .print-sheet { max-width: 210mm; }
.print-doc.paper-a4.orient-landscape .print-sheet { max-width: 297mm; }
.print-doc.paper-a3.orient-portrait .print-sheet { max-width: 297mm; }
.print-doc.paper-a3.orient-landscape .print-sheet { max-width: 420mm; }
@media (max-width: 640px) { .print-doc .print-sheet { margin: .8rem 8px 1.6rem; padding: 16px; } }

@media print {
  html, body, .print-doc { background: #fff !important; color: #000; }
  .print-bar, .no-print { display: none !important; }
  .print-doc .print-sheet { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
  .print-head { margin-top: 0; }
  .print-brand-name, .print-title-beside { color: #000; }
  .print-brand-line, .print-subtitle, .print-foot-legal { color: #222; }
  .print-sheet > .cord { color: #000; }
  .print-foot-legal { border-top-color: #000; }
  .print-head, .print-sheet > .cord { break-after: avoid; }
  /* The license line goes with whatever comes last on the sheet, never alone on a page of its own: the browser breaks the page earlier instead, and the line itself is kept short. */
  .print-foot-legal { break-before: avoid; page-break-before: avoid; margin-top: .8rem; padding-top: .45rem; }
}