/*
 * Print / PDF export styles, loaded with `media="print"` — everything in this
 * file applies to printed output only.
 *
 * The running header and footer are CSS paged-media margin boxes. Their static
 * styling lives here; the per-article strings (title, date, address) are
 * emitted per page by `_includes/print-page-styles.html`, because `string-set`
 * / `running()` are not implemented in any browser and custom properties do not
 * resolve inside `@page`.
 *
 * Margin boxes need Chrome/Edge 131+ or Safari 18.2+. Firefox ignores them and
 * prints the article without the running header and footer; everything else in
 * this file still applies. Verified against Chromium 153 via `--print-to-pdf`.
 *
 * Browsers add their own header/footer on top of this when "Headers and
 * footers" is ticked in the print dialog — see README § "Printing & PDF export".
 */

/* ---------------------------------------------------------------- page box */

@page {
  size: A4;
  /* Top and bottom margins carry the running header/footer margin boxes. */
  margin: 30mm 16mm 22mm;

  /*
   * Two boxes per row, widths adding up to 100%, which keeps the rules
   * continuous across the text column on any paper size.
   *
   * A margin box renders its whole content in one style, so the two stacked
   * header lines share one muted tone: giving the name and the address
   * separate tones needs separate boxes, and boxes in a row sit side by side.
   * Stacking them as two full-width boxes works, but collapses the logo box to
   * zero width. The alternatives to margin boxes don't survive printing at all:
   * a `position: fixed` block is dropped once it reaches the margin, and
   * `display: table-header-group` loses its header on some pages and leaves the
   * footer floating mid-page on the last one.
   *
   * The wordmark is generated content rather than a background image: Chrome
   * prints backgrounds only when "Background graphics" is ticked in the print
   * dialog, and the running header has to be there either way. A margin box
   * draws `content: url()` at the file's intrinsic size, which is why this
   * points at the print-sized copy of the asset.
   */
  @top-left {
    width: 24%;
    height: 11mm;
    margin-bottom: 6mm;
    padding-top: 1mm;
    vertical-align: top;
    text-align: left;
    content: url("mt-wordmark-print.svg");
    border-bottom: 0.5pt solid #d1d5db;
  }

  /* `\A ` — with the terminating space — is the line break between the blog
     name and the article's address. */
  @top-right {
    width: 76%;
    height: 11mm;
    margin-bottom: 6mm;
    padding-top: 0.5mm;
    white-space: pre-line;
    vertical-align: top;
    text-align: right;
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 7.5pt;
    line-height: 1.55;
    color: #6b7280;
    border-bottom: 0.5pt solid #d1d5db;
  }

  @bottom-left {
    width: 58%;
    height: 12mm;
    padding-top: 2.5mm;
    vertical-align: top;
    text-align: left;
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 8pt;
    font-weight: 700;
    color: #111827;
    border-top: 0.5pt solid #d1d5db;
  }

  /* The date and the page count share the muted tone, so they share a box. */
  @bottom-right {
    width: 42%;
    height: 12mm;
    padding-top: 2.5mm;
    vertical-align: top;
    text-align: right;
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 8pt;
    color: #6b7280;
    border-top: 0.5pt solid #d1d5db;
  }
}

/* --------------------------------------------------------------- page setup */

/*
 * Pico scales its whole rem-based type and spacing scale off `--pico-font-size`
 * and bumps it per viewport breakpoint. The print viewport is the paper width,
 * so pin it to one value: 87.5% of 16px = 10.5pt body text.
 */
:host,
:root {
  --pico-font-size: 87.5%;
}

body {
  background: #fff;
  color: #111827;
  line-height: 1.55;
}

/* Site navigation and the link/feed footer are screen furniture — the running
   header and footer replace them. */
body > header.container,
body > footer.container {
  display: none;
}

/* The text column is the page box; drop Pico's centred, capped container. */
main.container {
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------- page breaks */

h1,
h2,
h3,
h4,
h5,
h6,
hgroup {
  break-after: avoid;
  break-inside: avoid;
}

p,
li,
blockquote {
  orphans: 3;
  widows: 3;
}

img,
figure,
table {
  max-width: 100%;
  break-inside: avoid;
}

.openapi-endpoint,
.post-listing,
.related {
  break-inside: avoid;
}

/* A long snippet may span pages — holding it together costs half an empty page
   for anything longer than a screenful. */
pre,
.highlight {
  break-inside: auto;
  orphans: 4;
  widows: 4;
}

/* Repeat table headers when a table spans pages. */
thead {
  display: table-header-group;
}

/* --------------------------------------------------------------- typography */

/* Give the article title room above the section headings it shares a level
   with — on screen the nav chrome separates them, on paper nothing does. */
main > hgroup > h2 {
  --pico-font-size: 2.1rem;

  margin-bottom: 0.4rem;
}

.content h2 {
  --pico-font-size: 1.45rem;
}

.content h3 {
  --pico-font-size: 1.2rem;
}

code,
kbd,
samp {
  font-size: 0.85em;
}

pre,
.highlight {
  border: 0.5pt solid #e5e7eb;
  border-radius: 3px;
  print-color-adjust: exact;
}

/* Wrap rather than clip: printed output has no horizontal scrollbar. */
pre code {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
}

/* ------------------------------------------------------------------- links */

a {
  color: #1d4ed8;
}

/*
 * Link addresses print as numbered endnotes: `_plugins/print_link_references.rb`
 * numbers every content link and appends the matching list.
 *
 * Endpoint and help-center links carry a `data-tooltip`, which Pico renders
 * through `::before` as an absolutely positioned bubble — undo it, or it prints
 * as a stray transparent box.
 */
[data-tooltip]::before {
  content: none;
}

sup.print-reference {
  display: inline;
  padding-left: 0.1em;
  color: #6b7280;
  font-size: 0.7em;
  font-weight: 600;
}

.print-references {
  display: block;
  margin-top: 1.5rem;
  padding-top: 0.5rem;
  border-top: 0.5pt solid #d1d5db;
  break-inside: auto;
}

.print-references h4 {
  --pico-font-size: 1rem;

  margin-bottom: 0.5rem;
}

/* The indent has to hold the widest marker: markers sit outside the list's
   content box, and anything wider than the indent is drawn past the page
   margin, where the print engine clips it. */
.print-references ol {
  margin: 0;
  padding-left: 2.6em;
  color: #4b5563;
  font-size: 0.8rem;
  line-height: 1.5;
}

.print-references li {
  padding-left: 0.2em;
  word-break: break-all;
}

/* Clickable in the PDF, but set as list text rather than as 34 blue links. */
.print-references a {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------- article furniture */

/* The breadcrumb's site-title entry duplicates the running header; what is
   worth keeping is the category, which prints as a kicker above the title. */
nav[aria-label="breadcrumb"] {
  margin-bottom: 0.25rem;
}

nav[aria-label="breadcrumb"] ul {
  margin: 0;
  padding: 0;
}

nav[aria-label="breadcrumb"] li:first-child {
  display: none;
}

nav[aria-label="breadcrumb"] li {
  margin-inline-start: 0;
  padding: 0;
}

nav[aria-label="breadcrumb"] li::before {
  content: none;
}

nav[aria-label="breadcrumb"] a {
  margin-inline: 0;
  padding: 0;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pico-primary);
}

/* Date and status pills lose their fills — outlined type reads better in print
   and costs no ink. */
span.date {
  padding: 0;
  background: none;
  color: #6b7280;
  font-size: 8pt;
  letter-spacing: 0.06em;
}

span.date.due {
  color: #c52f21;
}

span.tag {
  padding: 0.3mm 1.5mm;
  border: 0.5pt solid currentcolor;
  font-size: 7.5pt;
}

span.tag.completed {
  background: none;
  color: #198754;
}

span.tag.pending {
  background: none;
  color: #8a6100;
}

/* The deprecation notice is the one callout that must survive a skim of the
   printout, so it keeps a tinted background. */
blockquote.deprecation-notice {
  border-left: 2pt solid #c52f21;
  background: #fef4f2;
  print-color-adjust: exact;
}

/* -------------------------------------------------------- endpoint linkouts */

.openapi-endpoint {
  border-color: #d1d5db;
  padding: 0;
}

.openapi-endpoint a {
  padding: 2.5mm 3mm;
  background: none;
  color: #111827;
}

.openapi-endpoint .request-method {
  padding: 0;
  background: none;
  color: var(--pico-primary);
}

.openapi-endpoint .name {
  font-weight: 600;
}

/* The card is the one place where the address gets its own line instead of
   trailing the link text. */
.openapi-endpoint a[href]::after {
  content: attr(href);
  display: block;
  position: static;
  transform: none;
  border: 0;
  opacity: 1;
  background: none;
  white-space: normal;
  margin-top: 1.5mm;
  font-size: 7.5pt;
  color: #6b7280;
  word-break: break-all;
}

/* --------------------------------------------------------- listing pages */

/* The hero title is screen-only gradient text clipped to the glyphs, which
   prints as nothing. */
main .hero {
  padding: 0 0 1rem;
  text-align: left;
}

main .hero h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #111827;
  -webkit-text-fill-color: #111827;
}

main .hero p {
  margin: 0;
  max-width: none;
}

/* Screen-only column alignment that leaves a hole in the printed page. */
.home-content-section hgroup {
  min-height: 0;
}

.post-listing {
  margin-bottom: 0.75rem;
}

.related {
  padding-top: 0.5rem;
  border-top: 0.5pt solid #d1d5db;
}