/* Print rules shared by the browser (Ctrl+P) and the downloadable PDF, which
   Scripts/export_manual_pdfs.mjs makes from the page in print mode and then styles
   further with Scripts/pdf-export.css. Changing this file invalidates every cached
   PDF (Scripts/pdf_cache.py), so all PDFs regenerate on the next production build. */

@media print {
  /* Content tabs (e.g. "Protegus app | TrikdisConfig"): print each tool's block under
     its own label. On screen these are a pill-style switcher (base.user.v2.css), and
     that styling also overrides Material's print layout, which would otherwise interleave
     label and block.

     Preferred: docs/javascripts/tool-switcher.js copies each tab's label onto its block
     (data-label), so the sets print as ordinary blocks with the label in ::before. Plain
     block layout matters: Chrome splits content badly across pages inside flex
     containers (it left slivers of screenshots at page bottoms). */
  .md-typeset .tabbed-set.tabbed-alternate:has(> .tabbed-content > .tabbed-block[data-label]) {
    display: block !important;
  }

  .md-typeset .tabbed-set.tabbed-alternate:has(> .tabbed-content > .tabbed-block[data-label]) > .tabbed-labels {
    display: none !important;
  }

  .md-typeset .tabbed-set.tabbed-alternate:has(> .tabbed-content > .tabbed-block[data-label]) > .tabbed-content {
    display: block !important;
  }

  .md-typeset .tabbed-set.tabbed-alternate > .tabbed-content > .tabbed-block[data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 0.9em 0 0.3em;
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    break-after: avoid;
  }

  /* Fallback when the script didn't run: flex column with each label moved above its
     block by Material's print `order` rules. */
  .md-typeset .tabbed-set.tabbed-alternate:not(:has(> .tabbed-content > .tabbed-block[data-label])) {
    display: flex;
    flex-direction: column;
  }

  .md-typeset .tabbed-set.tabbed-alternate:not(:has(> .tabbed-content > .tabbed-block[data-label])) > .tabbed-labels,
  .md-typeset .tabbed-set.tabbed-alternate:not(:has(> .tabbed-content > .tabbed-block[data-label])) > .tabbed-content {
    display: contents !important;
  }

  /* Classes repeated on purpose: must outrank the on-screen active-label rule in
     base.user.v2.css (input:nth-child(n):checked ~ … label:nth-child(n)). */
  .md-typeset.md-typeset.md-typeset .tabbed-set.tabbed-set.tabbed-alternate.tabbed-alternate > .tabbed-labels.tabbed-labels > label {
    display: block;
    flex: none;
    margin: 0.9em 0 0.3em;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: #1a1a1a !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
  }

  .md-typeset .tabbed-set.tabbed-alternate > .tabbed-content > .tabbed-block {
    display: block !important;
  }

  /* Phone screenshots (.trik-mob-img): print at phone size, not full page width.
     The generic image rule in Scripts/pdf-export.css (max-width: 100% !important)
     would otherwise blow them up to a page each. Pairs (.trik-mob-pair) print side by side.
     No drop shadow: Chrome prints it as a flat grey frame reaching above the image,
     and when the image moved to the next page that part stayed behind as a grey strip
     at the bottom of the previous one. A hairline border keeps the outline instead. */
  .md-typeset img.trik-mob-img {
    width: auto !important;
    max-width: 60mm !important;
    margin: 3mm auto !important;
    box-shadow: none !important;
    border: 0.25mm solid #d0d0d0;
  }

  .md-typeset .trik-mob-pair {
    display: flex !important;
    justify-content: center;
    gap: 8mm;
    break-inside: avoid;
  }

  .md-typeset .trik-mob-pair__item {
    flex: 0 1 60mm;
    margin: 2mm 0 !important;
  }

  .md-typeset .trik-mob-pair img.trik-mob-img {
    max-width: 100% !important;
    margin: 0 auto 1.5mm !important;
  }

  /* Keep the paragraph that wraps a phone screenshot in one piece; otherwise
     Chrome can leave a sliver of the image at the bottom of the previous page. */
  .md-typeset p:has(> img.trik-mob-img) {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Wiring diagrams, one per image (Scripts/split_wiring_diagrams.py): two to a page, as
     in the PDF, each kept with its heading. The PDF export sets the same size with its
     own class and !important rules in Scripts/pdf-export.css, which win there. */
  .md-typeset img.wiring-diagram {
    display: block;
    width: auto;
    height: auto;
    max-width: 88%;
    max-height: 110mm;
    margin: 0 auto 12px;
  }

  .md-typeset h4:has(+ p > img.wiring-diagram) {
    break-after: avoid;
    page-break-after: avoid;
  }
}