/* ============================================================
   The text every page of the site shares with the explainer.

   One file, inlined by the explainer's shell (`render_n11_lower_bounds_explainer`) and by every kpress page
   (`render_overview.page_assets`), right after KPress's own stylesheets so these values
   win over KPress's defaults at the same scopes. The values are the explainer's; the
   typography entry of paper-design.md beside this file is where they are written down
   and why. Change them there first, then here, and never per page.
   ============================================================ */

/* The type base. KPress derives every size from this one token -- prose, headings,
   tables, code, math -- so a page reads at the explainer's size with nothing
   restyled. */
:root {
  --kpress-host-font-size-base: 18px;
}

/* Shared screen scrollbars: quiet theme-aware thumbs without an opaque track.
   The standard properties cover Firefox and current Chromium; the pseudo-elements
   retain the same treatment on WebKit surfaces. */
:root {
  --paper-scrollbar-size: 6px;
  --paper-scrollbar-strength: 55%;
}
@media screen {
  :where(*) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(
        in srgb,
        var(--kpress-doc-muted, currentColor) var(--paper-scrollbar-strength),
        transparent
      )
      transparent;
  }
  ::-webkit-scrollbar {
    width: var(--paper-scrollbar-size);
    height: var(--paper-scrollbar-size);
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: color-mix(
      in srgb,
      var(--kpress-doc-muted, currentColor) var(--paper-scrollbar-strength),
      transparent
    );
    border-radius: 999px;
  }
}
@media screen and (forced-colors: active) {
  :where(*) {
    scrollbar-color: auto;
  }
}

/* Badge explanations share KPress's tooltip surface, including over top-layer panels.
   Explicit surface properties also support shells that carry only the shared type CSS. */
.kpress-tooltip.site-rating-tooltip {
  background: var(--color-bg-meta-solid);
  border: 1px solid var(--color-hint-gentle);
  border-inline-start: 2px solid var(--kpress-doc-link);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--kpress-doc-text);
  cursor: default;
  font-family: var(--kpress-font-sans);
  font-size: var(--kpress-font-size-small);
  font-weight: var(--kpress-font-weight-sans-regular);
  inset: auto;
  line-height: var(--paper-support-leading, 1.4);
  margin: 0;
  max-block-size: calc(100dvh - 2rem);
  max-inline-size: min(20rem, calc(100vw - 2rem));
  min-inline-size: 0;
  opacity: 0;
  overflow: auto;
  overflow-wrap: break-word;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
  position: absolute;
  text-transform: none;
  transition:
    opacity var(--site-hover-duration) var(--site-hover-easing),
    visibility var(--site-hover-duration) var(--site-hover-easing);
  visibility: hidden;
  white-space: normal;
  width: max-content;
}
.kpress-tooltip.site-rating-tooltip.kpress-tooltip-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.kpress-tooltip.site-rating-tooltip.kpress-tooltip-mobile-bottom {
  position: fixed;
}
[data-site-tooltip]:focus-visible {
  outline: 2px solid var(--kpress-doc-link);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kpress-tooltip.site-rating-tooltip {
    transition: none;
  }
}
@media print {
  .site-rating-tooltip {
    display: none;
  }
}

/* The reading measure: forty of the base, which at 18px is the same 720px KPress's
   default of forty-five gives at 16px, so the larger type keeps the column's width.
   Declared on the scopes KPress declares its own on, so it wins there. */
:root,
.kpress,
.kpress-page-main {
  --kpress-measure: calc(var(--kpress-font-size-base) * 40);
}

/* Section headings at 1.2 of the prose at every width. KPress steps its h2 up to 1.4
   from a 64rem pane; the paper keeps one size, and h3 and h4 keep KPress's steps. */
.kpress {
  --kpress-font-size-h2: calc(var(--kpress-font-size-base) * 1.2);
}

/* The space around a section heading (`h2`), on every page: 2.7 of the base above it on
   screen and 1.7rem below it, to the section's first block. Print keeps the paper's 2.8
   above and 1.3rem below, so the explainer's PDF paginates as before. */
.kpress {
  --paper-section-space: calc(var(--kpress-font-size-base) * 2.7);
  --paper-section-space-below: 1.7rem;
}
@media print {
  .kpress {
    --paper-section-space: calc(var(--kpress-font-size-base) * 2.8);
    --paper-section-space-below: 1.3rem;
  }
}

/* The leading of every heading, on every page: 1.15 on screen, tighter than KPress's 1.2,
   so a heading that wraps reads as one block. A card's headline, a popover's and a page's
   subtitle read the same token (site.css). The explainer's hero title keeps KPress's own
   1.05. Print keeps KPress's leading, so the explainer's PDF paginates as before. */
:root {
  --paper-heading-leading: 1.15;
}
@media screen {
  .kpress-prose :is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--paper-heading-leading);
  }
}

/* The paper's roles: a 19/18 sans base against the prose, three sans weights, and the
   scales of the title, subtitle, supporting text and notes. The explainer reads them as
   `--cert-*` and `--paper-*`, the site pages as `--site-*`; both alias these. */
:root {
  --paper-font-scale-sans: calc(19 / 18);
  --paper-font-weight-sans-medium: 550;
  --paper-font-weight-sans-bold: 680;
  --paper-title-scale: 1.5;
  --paper-subtitle-scale: 1.25;
  --paper-support-scale: 0.95;
  --paper-note-scale: 0.92;
  --paper-colophon-scale: 0.85;
  --paper-note-inset: 1.4rem;
  --paper-support-leading: 1.4;
  --paper-button-label-case: uppercase;
  --paper-button-label-scale: 0.9;
  --paper-popover-title-scale: 1.25;
  --paper-popover-section-scale: 1.1;
}

/* Button labels share one case across site, paper and application controls. A preview
   card is a reading surface; its prose keeps the article's capitalization. Math keeps
   its symbols even when it appears in a button label. */
button:not(.site-card),
a.site-action,
a.site-popover-action,
.site-tabs a {
  text-transform: var(--paper-button-label-case);
}
:is(button, a.site-action, a.site-popover-action, .site-tabs a)
  :is(.kpress-math, .katex, .tex, math) {
  text-transform: none;
}
@media print {
  /* Keep small sans text compact as its letter size increases. */
  :root {
    --paper-support-leading: 1.32;
  }
}

/* The faces are the site's own, whoever frames the page. KPress leads each family token
   with a host hook (`--kpress-host-font-sans` and its siblings) so an application that
   embeds a KPress fragment can supply its own face; a viewer that injects that hook into
   one of these pages would otherwise swap Source Sans 3 or PT Serif for a face the page
   does not ship. `initial` makes each hook the guaranteed-invalid value, so KPress's own
   stack -- the faces inlined in this page -- applies. The reader's own choice of system
   fonts is untouched: KPress's `data-kpress-font-set="system"` sets the family tokens
   themselves, not the hooks. Important, because a viewer's injected rule may come later
   in the cascade at the same specificity; that is the one case this rule exists for. */
/* biome-ignore-start lint/complexity/noImportantStyles: the pin must outrank an injected hook */
:root,
.kpress,
.kpress-page-main,
.kpress-tooltip {
  --kpress-host-font-body: initial !important;
  --kpress-host-font-prose: initial !important;
  --kpress-host-font-prose-sans: initial !important;
  --kpress-host-font-sans: initial !important;
  --kpress-host-font-mono: initial !important;
  --kpress-host-font-footnote: initial !important;
  --kpress-host-font-table: initial !important;
}
/* biome-ignore-end lint/complexity/noImportantStyles: the pin must outrank an injected hook */

/* Source Sans 3 can arrive after the first layout even with its preload, and the text it
   holds invisible is laid out in the next face of the stack. On the Linux runner that is
   DejaVu Sans, about a quarter wider: at 390px a navigation link wrapped to the bar's
   second line and the hero's summary took two more lines, and their return when the face
   arrived was a CLS of 0.251 (paper-design.md, Shared Assets). Arial, which Linux answers
   with its metric twin Liberation Sans, scaled toward Source Sans 3's advances and given
   its ascent and descent, holds both in place instead: regular for the 410 text, bold for
   550 and heavier. One factor per face makes the widths approximate. Rendered in Chromium
   on 2026-10-09 against Source Sans 3, the alias set prose 1.5% wider at 410, 1.4% wider
   at 550 and 1.3% narrower at 680, the navigation 2.7% wider at 550, and the uppercase
   site name 5.6% wider at 680, with line heights equal; the navigation test holds every
   link on its line at 390px within that. The aliases transfer no bytes and take only
   Source Sans 3's declared range, so once it loads they draw nothing the shipped face
   covers. Its latin subset lacks 96 printable code points of that range, mostly spaces
   and general punctuation, and the alias still draws those Liberation Sans has.
   Screen only: print keeps KPress's print sans. */
@font-face {
  font-family: "Site Sans Arial";
  src: local("Arial"), local("Liberation Sans");
  font-style: normal;
  font-weight: 400;
  size-adjust: 93%;
  ascent-override: 110.1%;
  descent-override: 43%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Site Sans Arial";
  src: local("Arial Bold"), local("Liberation Sans Bold");
  font-style: normal;
  font-weight: 700;
  size-adjust: 89.5%;
  ascent-override: 114.4%;
  descent-override: 44.7%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@media screen {
  :root,
  .kpress,
  .kpress-page-main,
  .kpress-tooltip {
    --kpress-font-body:
      "Source Sans 3 Variable", "Site Sans Arial", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    --kpress-font-sans:
      "Source Sans 3 Variable", "Site Sans Arial", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
  }
}