@page {
  margin: var(--kpress-print-page-margin);

  @bottom-left {
    color: oklch(44.95% 0 0);
    content: var(--kpress-print-footer);
    font-family: var(--kpress-font-sans);
    font-size: var(--kpress-font-size-small);
  }

  @bottom-right {
    color: oklch(17.76% 0 0);
    content: counter(page);
    font-family: var(--kpress-font-prose);
    font-size: var(--kpress-font-size-small);
  }
}

@media print {
  :root,
  .kpress {
    color-scheme: light;
    /* Re-root the whole type ramp at the print size: every size derives from
       the base (see style-tokens.css SIZING POLICY), so headings, code, and
       bullets keep their designed ratios to the 11pt body on paper. Without
       this re-rooting, rem-derived sizes would track the 16px screen root
       while the body stays pinned, printing h1/body at ~1.85 instead of the
       designed 1.7. */
    --kpress-font-size-base: var(--kpress-print-font-size);
    --kpress-doc-bg: oklch(100.00% 0 0);
    --kpress-doc-text: oklch(17.76% 0 0);
    --kpress-doc-muted: oklch(38.67% 0 0);
    --kpress-doc-border: oklch(78.26% 0 0);
    --kpress-doc-link: oklch(0.00% 0 0);
  }

  body {
    background: oklch(100.00% 0 0);
  }

  /* The document viewport is a 100dvh scroll container on screen; for print it
     must release its height and overflow (and drop containment) so the whole
     document flows across pages instead of clipping to one screen. The frame's
     transform layer must go too: a transformed ancestor breaks print
     fragmentation. (The viewport keeps `transform: none` defensively.) */
  .kpress-viewport {
    block-size: auto;
    container-type: normal;
    overflow: visible;
    transform: none;
  }

  .kpress-frame {
    transform: none;
  }

  .kpress {
    background: oklch(100.00% 0 0);
    color: oklch(17.76% 0 0);
    font-size: var(--kpress-print-font-size);
    line-height: 1.4;
  }

  .kpress-no-print,
  .kpress button,
  .kpress-site-footer,
  .kpress-site-header,
  .kpress-tooltip,
  .kpress-toc,
  .kpress-toc-backdrop,
  .kpress-video-backdrop,
  .kpress-video-popover {
    display: none;
  }

  .kpress-print-only {
    display: block;
  }

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

  .kpress p,
  .kpress li,
  .kpress blockquote {
    hyphens: auto;
    orphans: 3;
    text-align: justify;
    widows: 3;
  }

  .kpress p {
    margin-block: 0.65rem;
  }

  .kpress li {
    margin-block-start: 0.6rem;
  }

  .kpress li > p:first-child {
    margin-block-start: 0;
  }

  .kpress li > p:last-child {
    margin-block-end: 0;
  }

  .kpress-long-text {
    /* Card chrome (data-kpress-card) never prints: paper is the sheet. */
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* The @page margin is the reading margin on paper: the margin boxes
     (@bottom-left footer, @bottom-right page number) sit exactly at it, so
     the shells drop their screen-side inline gutters to align the text
     column with them. Without this the text sits 1rem (embedded) to 3rem
     (standalone) inside the margin boxes. */
  .kpress-doc,
  .kpress-page-main {
    padding-inline: 0;
  }

  .kpress blockquote,
  .kpress pre,
  .kpress table,
  .kpress figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .kpress tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .kpress thead {
    display: table-header-group;
  }

  .kpress sup {
    font-size: 110%;
  }

  .kpress details.metadata {
    display: none;
  }

  .kpress-tabs [role="tablist"] {
    display: none;
  }

  .kpress-tab-panel,
  .kpress-tab-panel[hidden] {
    break-inside: avoid;
    display: block;
    max-block-size: none;
    overflow: visible;
    page-break-inside: avoid;
    padding-block: 0.75rem;
    visibility: visible;
  }

  .kpress-tab-panel::before {
    color: oklch(17.76% 0 0);
    content: attr(data-kpress-tab-title);
    display: block;
    font-family: var(--kpress-font-sans);
    font-feature-settings: var(--kpress-font-features-sans);
    font-size: calc(var(--kpress-font-size-base) * var(--kpress-caps-heading-size-multiplier));
    font-variant-caps: var(--kpress-caps-variant);
    font-weight: var(--kpress-font-weight-sans-medium);
    letter-spacing: var(--kpress-caps-spacing);
    line-height: var(--kpress-caps-heading-line-height);
    margin-block: 0 0.5rem;
    text-transform: var(--kpress-caps-transform);
  }

  .kpress-table-wrap {
    margin-inline: 0;
    overflow: visible;
  }

  .kpress-code {
    background-color: transparent;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .kpress-math,
  .kpress-math math {
    color: oklch(17.76% 0 0);
  }

  .kpress-math-display {
    break-inside: avoid;
    overflow: visible;
    page-break-inside: avoid;
  }

  .kpress-math[data-kpress-math-error="true"] {
    background: transparent;
    border-color: oklch(17.76% 0 0);
    color: oklch(17.76% 0 0);
  }

  .kpress-diagram,
  .kpress-diagram svg {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .kpress-diagram {
    border-color: oklch(17.76% 0 0);
  }

  .kpress-diagram-source {
    overflow: visible;
    white-space: pre-wrap;
  }

  .kpress-diagram-rendered {
    overflow: visible;
  }

  .kpress ol {
    counter-reset: kpress-print-list-item;
    list-style: none;
    margin-left: 1rem;
    padding-left: 0;
  }

  .kpress ol > li {
    align-items: baseline;
    break-inside: avoid;
    counter-increment: kpress-print-list-item;
    display: grid;
    gap: 0 0.5rem;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    margin-block: 0 0.5rem;
    padding-left: 0;
    page-break-inside: avoid;
    position: static;
  }

  .kpress ol > li::before {
    content: counter(kpress-print-list-item) ".";
    font-family: var(--kpress-font-prose);
    grid-column: 1;
    text-align: right;
  }

  .kpress ol > li > * {
    grid-column: 2;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .kpress ol > li p,
  .kpress ol > li blockquote {
    text-align: left;
    text-justify: none;
  }

  .kpress ol ol,
  .kpress ol ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
  }

  .kpress ol ol {
    counter-reset: none;
    list-style: decimal outside;
  }

  .kpress ol ul {
    list-style: none;
  }

  .kpress ol ol > li,
  .kpress ol ul > li {
    display: list-item;
    margin-top: 0.4rem;
    padding-left: 0.25rem;
    text-align: left;
    text-justify: none;
  }

  .kpress ol ol > li::before {
    content: none;
  }

  .kpress ol ul > li::before {
    content: "\25AA\FE0E";
    font-size: calc(var(--kpress-font-size-base) * 0.7);
    left: calc(var(--kpress-font-size-base) * -0.85);
    position: absolute;
    top: calc(var(--kpress-font-size-base) * 0.1);
  }

  .kpress .kpress-long-list,
  .kpress .kpress-long-list > li {
    break-inside: auto;
    page-break-inside: auto;
  }

  .kpress-footnote-ref a,
  .kpress-footnote-backref,
  .footnote-ref a,
  .footnote {
    background-color: transparent;
    color: oklch(17.76% 0 0);
    font-family: var(--kpress-font-prose);
    font-feature-settings: normal;
    font-variant-caps: all-small-caps;
    font-weight: 400;
    padding: 0 0.05rem;
  }

  .kpress-footnote-backref,
  a[href^="#fnref"],
  .reversefootnote {
    display: none;
  }

  .kpress .concepts {
    column-count: 2;
  }

  .kpress .video-gallery {
    display: block;
  }

  .kpress .kpress-video-placeholder {
    aspect-ratio: auto;
    background: transparent;
    border: 1px solid oklch(68.30% 0 0);
    color: oklch(17.76% 0 0);
    min-height: 0;
    padding: 0.75rem;
  }

  .kpress .kpress-video-placeholder-action {
    display: none;
  }

  .kpress .video-item,
  .kpress .boxed-text,
  .kpress .frame-capture,
  .kpress .key-claims,
  .kpress .summary,
  .kpress .concepts {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}