/* ─── PRINT STYLESHEET ───────────────────────────────────── */
@media print {
  /* Width media queries resolve against the page box, which at Chrome's
     default margins is ~717px on A4 and ~739px on Letter — so every max-width
     breakpoint in main.css is live on paper, and a mobile-only control inside
     one of these would print. Besides the rails and the bar, this hides the
     screen-only affordances that print as dead chrome: the code block's copy
     and expand buttons, the anchor a heading reveals on hover, the reply form,
     and the Page actions menu, whose four rows are a clipboard write and three
     URLs. */
  #topnav,
  #doku-sidebar,
  #aside,
  #sidebar-overlay,
  .doc-actions-wrap,
  .heading-anchor,
  .code-copy,
  .code-expand,
  #respond,
  .comment-reply-link,
  .doc-tags,
  .doku-helpfulness,
  .doc-pagination { display: none !important; }

  #doku-app { display: block; }
  #content-wrap { display: block; }
  #content {
    padding: 0;
    max-width: 100%;
  }

  /* Prints an accordion's body whether or not the reader left it open — there
     is no CSS way to set the `open` attribute. A closed <details> hides its
     body twice over: the display: none an older engine puts on the children,
     and the content-visibility: hidden Chrome puts on ::details-content, which
     no rule on a child can reach. Both have to be answered, and the chevron
     pinned to the open position to match. The inset and divider sit where
     main.css puts them: on ::details-content where it exists. */
  .wp-block-details > *:not(summary) { display: block !important; }
  @supports not selector(::details-content) {
    .wp-block-details { padding-bottom: 16px; }
    .wp-block-details > summary {
      margin-bottom: 16px;
      border-bottom: 1px solid #ccc;
    }
  }
  @supports selector(::details-content) {
    .wp-block-details::details-content {
      content-visibility: visible;
      block-size: auto;
      padding-block: 16px;
      border-top: 1px solid #ccc;
    }
  }
  .wp-block-details > summary::after { transform: rotate(0deg); }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10px;
    color: #666;
    overflow-wrap: anywhere;
  }
  /* An image link's address is mostly the image file itself, and a gallery's
     row of them ran past the edge of the page. */
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  a[href]:has(> img)::after { content: ''; }

  * { color: #000 !important; background: #fff !important; }

  /* Everything below either restates a value the reset flattens, or overrides
     an !important declaration in main.css / blocks.css / dark.css — which the
     * above cannot reach, since it loses to any selector at all on
     specificity. */

  /* Icons are masks painted over background-color, which the reset above turns
     white — restated here, and marked exact so print does not drop it as a
     background graphic. Only the breadcrumb separators, the doc-card icons and
     the expanded accordion chevron reach print; nav, pagers and the rating
     widget are hidden above. */
  .doku-icon,
  .breadcrumb li + li::before,
  .wp-block-details > summary::after {
    background-color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The reset flattens every callout tint to white and every title to black,
     which leaves the five variants separated by a 3px rule at .25 alpha — and
     in dark mode by one at .3 on white paper, which is nothing at all. The
     title is the label a reader's eye lands on, so it keeps its variant color
     and the rule beside it goes to full strength. The tint itself stays white:
     .06 alpha is invisible on paper and only costs ink.

     Literals, for the reason the diff colors are literals. Print is one medium
     — white paper — so the light/dark pair these tokens carry means nothing
     here, and "danger is red" is a convention the reader brings. The values are
     the light --color-*-text set, already contrast-checked against a near-white
     background. print-color-adjust is inherited, so .callout covers its title. */
  .callout {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .callout.note    { border-left-color: var(--color-accent) !important; }
  .callout.tip     { border-left-color: #047857 !important; }
  .callout.warning { border-left-color: #8f5a00 !important; }
  .callout.danger  { border-left-color: #cc2929 !important; }
  .callout.info    { border-left-color: #4f46e5 !important; }

  .callout.note .callout-title    { color: var(--color-accent) !important; }
  .callout.tip .callout-title     { color: #047857 !important; }
  .callout.warning .callout-title { color: #8f5a00 !important; }
  .callout.danger .callout-title  { color: #cc2929 !important; }
  .callout.info .callout-title    { color: #4f46e5 !important; }

  /* Note is the branded one and follows the buyer's accent, which is the right
     answer on paper too — except from dark mode, which prints from this same
     sheet with an accent tuned for a near-black page: the shipped one is 1.9:1
     on white. The light default is the only value print can know. */
  :root[data-theme="dark"] .callout.note { border-left-color: #0f7a4a !important; }
  :root[data-theme="dark"] .callout.note .callout-title { color: #0f7a4a !important; }
  /* The theme.json palette reads the tokens, and core prints each color class
     with !important, past the reset. Of the ones used as text, only Accent
     keeps a screen value from dark mode; the rest are restated in ink below. */
  :root[data-theme="dark"] .has-accent-color { color: #0f7a4a !important; }

  /* Dark mode prints from this same sheet, and the reset only covers `color`
     and `background`. Anything drawn with border-color, fill or stroke keeps
     its screen value, so the tokens those properties read are restated here in
     ink — which is what puts a baked Mermaid diagram on paper as line art
     rather than as dark boxes. Every other reader of these is either
     flattened by the reset or a theme.json palette class, which wants ink on
     paper too. */
  :root[data-theme="dark"] {
    --color-text: #000;
    --color-text-muted: #666;
    --color-bg: #fff;
    --color-bg-secondary: #fff;
    --color-bg-code: #fff;
    --color-border: #ccc;
    --color-border-subtle: #ccc;
  }

  /* A .code-block is one rounded box, and its overflow: hidden is what clips
     the square-cornered <pre> inside it to that radius — so only the <pre> may
     be opened up here. The border belongs to whichever element is the outer
     box for the same reason: given to both, the pre draws a second, square rule
     1px inside the first and the rounding disappears behind it. A bare <pre>
     (core/code, core/preformatted) is its own outer box and keeps one. */
  pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow: visible;
    box-shadow: none;
    border: 1px solid #ccc;
    background: #fff !important;
    page-break-inside: avoid;
  }
  .code-block {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
  .code-block pre { border: none; }
  /* Mermaid renders into a <pre> of its own, and a diagram is not a code
     sample — it takes no outline. */
  .doku-mermaid .mermaid { border: none; }
  /* The chrome the block is assembled from, on the same rule as its outline. */
  .code-header,
  .doku-tab-bar,
  .doku-tab-panel,
  .doku-tab-panel-label { border-color: #ccc; }

  /* The collapsible cap is (0,2,1), so the pre rule above cannot reach it and a
     long sample would print one screenful with the remainder spilling over the
     text beneath it. */
  .code-block.collapsible pre { max-height: none; overflow: visible; }

  /* Shiki bakes both themes into the markup and dark.css swaps to the dark one
     with !important. The light set lives in an inline style attribute, which no
     rule can restore once an !important declaration has outranked it — so from
     dark mode code prints in plain ink rather than in its light palette. */
  [data-theme="dark"] .shiki { background: #fff !important; }
  [data-theme="dark"] .shiki span,
  [data-theme="dark"] .shiki span[style*="--shiki-dark:#6A737D" i] { color: #000 !important; }

  .wp-block-code { background: #fff !important; border-color: #ccc; }

  /* A Button's label is set with !important, so the reset whitens the fill and
     leaves --color-on-accent white text on white paper. Both variants print as
     an outlined label; the border needs !important of its own to clear core's
     per-variation sheet, which loads after the theme's. The outline variant's
     accent label is (0,3,0) in blocks.css, so it is named too: from dark mode
     it printed 1.9:1 on white. */
  .wp-block-button__link,
  .wp-block-button.is-style-outline .wp-block-button__link {
    color: #000 !important;
    border: 2px solid #ccc !important;
  }

  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  img { max-width: 100%; height: auto; }
}