/* The "Before you print" notice (share/_print_notice).

   Two formats need a printer setting the browser dialog buries: the fold-out
   only folds correctly when the printer flips on the short edge, and the
   classic pages are drawn at the size of the paper, so a margin shrinks them.
   We say it once, in our own words, before the dialog opens (owner,
   2026-08-15 and 2026-08-16).

   Its own component sheet because the notice now appears in two places: on the
   print routes, where the sheet renders it, and on the Share modal, where the
   picker prints into an offscreen iframe and has to raise it out here. Both
   layouts link this file. */

/* A modal <dialog> centres itself with `inset: 0; margin: auto`, and print.css
   opens with `* { margin: 0 }`, which takes that away and pins the notice to
   the corner (owner, 2026-08-15). Put it back explicitly. */
.print-notice {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(460px, 92vw);
  padding: 26px 28px 22px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-dark);
  box-shadow: 0 18px 50px rgba(19, 19, 19, 0.22);
}

.print-notice::backdrop { background: rgba(19, 19, 19, 0.5); }

.print-notice__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 21px;
  color: var(--navy-primary);
}

.print-notice__body {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dark);
}

.print-notice__actions { display: flex; gap: 10px; }

.print-notice__btn {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12.5px;
  padding: 10px 18px;
  border: 1px solid var(--teal-accent);
  background: var(--teal-accent);
  color: #fff;
  cursor: pointer;
}

.print-notice__btn--quiet {
  background: none;
  color: var(--teal-ink);
}

@media print { .print-notice { display: none; } }

/* The drawn setting inside the notice. Chrome's own type colours, so it reads
   as a picture of their dialog rather than as our UI. */
.print-notice__figure {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.print-fig-label,
.print-fig-text {
  font-family: var(--font-body);
  font-size: 15px;
  fill: #202124;
}

.print-fig-label { fill: #3c4043; }


/* The drawing scales with the notice. Sized here rather than with width/height
   attributes: height="auto" is not a valid SVG length and Chrome logs it. */
.print-notice__figure svg {
  display: block;
  width: 100%;
  height: auto;
}