/* ==========================================================================
   Kafel User Guide — print stylesheet for the web edition.

   Loaded with media="print", so it only ever applies when the reader prints
   the page or exports it with the browser's "Save as PDF". It turns the
   responsive document into a clean single-column paper layout.

   For the typeset, paginated edition see Kafel_User_Guide_EN.pdf, built from
   guide-en/print/. This stylesheet is for readers who print the web page.
   ========================================================================== */

@page {
  size: A4;
  margin: 16mm 15mm 18mm;
}

/* Chrome honours colour-adjust for the brand panels; without it the dark
   cards and tinted callouts would print as empty white boxes. */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

html {
  font-size: 10.5pt;
  scroll-padding-top: 0;
}

body { background: #fff; }

/* --- chrome that has no meaning on paper ---------------------------------- */

.skip,
.masthead,
.toc__sum,
.masthead__pdf,
.totop,
dialog.viewer,
a.shot::after { display: none !important; }

/* --- one column ----------------------------------------------------------- */

.shell {
  display: block;
  max-width: none;
  padding: 0;
}
.wrap { max-width: none; padding: 0; }
main { padding: 0; }

.toc {
  position: static;
  max-height: none;
  overflow: visible;
  border-right: 0;
  padding: 0;
  margin: 0 0 10mm;
  break-after: page;
}
.toc__body { display: block !important; columns: 2; column-gap: 10mm; }
.toc a { color: #13201A; border-left: 0; padding: 2px 0; }
.toc a[aria-current="true"] { background: none; font-weight: 400; color: #13201A; }

/* --- the hero becomes a title page ---------------------------------------- */

.hero {
  padding: 26mm 0 20mm;
  break-after: page;
  background: #0E1B10;
}
.hero::after { display: none; }

/* --- flow of the document ------------------------------------------------- */

.section {
  break-inside: auto;
  padding: 6mm 0;
  border-top: 1px solid #E3EADD;
}
.part { break-before: page; }

h1, h2, h3, h4 { break-after: avoid-page; }
figure, .card, .note, .flow, .cmp table { break-inside: avoid; }
.steps > li { break-inside: avoid; }

/* --- images --------------------------------------------------------------- */

.shot { max-width: 62mm; border-color: #D7E1CF; }
.shot--detail { max-width: 110mm; }
.shot--wide { max-width: 100%; }
.shots { grid-template-columns: repeat(auto-fit, minmax(45mm, 1fr)); gap: 6mm; }
.split { grid-template-columns: 62mm minmax(0, 1fr); gap: 8mm; }
.split--wide { grid-template-columns: minmax(0, 1fr) 62mm; }

figcaption { font-size: 8.5pt; }

/* --- links: print the destination so a paper copy stays useful ------------- */

main a[href^="http"]::after,
.foot a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-family: "IBM Plex Mono", monospace;
  font-size: .78em;
  font-weight: 450;
  word-break: break-all;
  color: #5F6D64;
}
/* Not for the link lists — they already show their own URL as the link text. */
.links a::after { content: none !important; }

a { text-decoration: none; color: #13201A; }
.links a { color: #4A7D15; }

/* --- footer --------------------------------------------------------------- */

.foot { margin-top: 8mm; padding: 6mm 0 0; background: #fff; color: #37473D; border-top: 1px solid #E3EADD; }
.foot a { color: #4A7D15; }
.foot strong { color: #4A7D15; }
.foot__rule { background: #E3EADD; }