/*
  ── Paper ────────────────────────────────────────────────────────────────────
  The palette every public document shares: the guides, the privacy notice, the
  terms, the deletion page, the Excel pane, the calculator pages, and — through
  `blueprint.css` — the developer guide, the configurator and the white-label
  page.

  **The 2026-09-23 canvas, Nocturne** (project `caf59318`,
  `design/redesign-2026-09-23/`). It reverses the 2026-09-14 rule that these
  pages are light and only light: every document view in the canvas is dark by
  default with a worded light/dark switch in its bar, exactly as the app is.
  `/theme.js` sets the attribute before the page paints — the reader's stored
  choice, or their system's — and the `prefers-color-scheme` block below is
  what a page does with JavaScript off.

  The values are the canvas's own (`valnivo-theme.css` over Nocturne), under
  `--p-*` names so a page can never confuse them with the app's.

  Served **no-cache** (firebase.json) and referenced by its content hash, which
  `tools/stamp-assets.mjs` writes.
  ───────────────────────────────────────────────────────────────────────────*/

/*
  The face, self-hosted. The design system asks for Inter from Google Fonts;
  doing that would put a third-party request on every page a stranger opens,
  which the privacy notice says does not happen — and this file is linked *by*
  that notice.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}

:root {
  /* How wide the page's chrome and its wide sections run: `--public-max` in
     `src/styles/tokens.css` is the same number. The canvas itself is
     full-bleed on a gutter; this caps it on a very wide screen. */
  --p-shell: 1280px;
  --p-gutter: clamp(20px, 5vw, 72px);

  color-scheme: dark;

  --p-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --p-page: #161826;
  --p-page-glow: radial-gradient(1200px 720px at 82% -160px, rgba(43, 39, 65, 0.75), transparent 60%);
  --p-surface: #232532;
  --p-surface-2: #292b31;
  --p-surface-head: #292b31;

  --p-ink: #e9e9ed;
  --p-ink-2: #e4e7f5;
  --p-ink-3: #cfd3e5;
  --p-ink-4: #b2b6ca;
  --p-ink-5: #9397ab;

  --p-rule: #3f424d;
  --p-hair: rgba(233, 233, 237, 0.16);
  --p-border-2: #595d6c;

  --p-accent: #9184d9;
  --p-accent-hi: #e7e5fe;
  --p-accent-2: #d2cefd;
  --p-accent-600: #796cbf;
  --p-accent-700: #5d5294;
  --p-accent-800: #423a6a;
  --p-accent-100: #f5f4ff;
  --p-accent-band: #2b2741;
  --p-section: #262a60;
  --p-section-glow: #353b80;
  --p-neutral-800: #3f424d;
  --p-neutral-900: #292b31;
  --p-neutral-100: #f3f5fe;
  --p-lift: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* Light: Nocturne's ramps reversed onto a pale ground — the canvas's own
   `valnivo-theme.css`. Stated twice on purpose: once for the reader's stored
   choice, once for a page with no script that follows the system. */
:root[data-theme='light'] {
  color-scheme: light;
  --p-page: #f3f5fe;
  --p-page-glow: radial-gradient(1200px 720px at 82% -160px, rgba(239, 237, 255, 0.75), transparent 60%);
  --p-surface: #fbfbff;
  --p-surface-2: #eceef9;
  --p-surface-head: #eceef9;
  --p-ink: #1f2130;
  --p-ink-2: #3f424d;
  --p-ink-3: #595d6c;
  --p-ink-4: #595d6c;
  --p-ink-5: #676b7e;
  --p-rule: #dfe2f0;
  --p-hair: rgba(31, 33, 48, 0.14);
  --p-border-2: #cfd3e5;
  --p-accent: #6f62bd;
  --p-accent-hi: #423a6a;
  --p-accent-2: #5d5294;
  --p-accent-600: #b5abfc;
  --p-accent-700: #d2cefd;
  --p-accent-800: #e7e5fe;
  --p-accent-100: #2b2741;
  --p-accent-band: #efedff;
  --p-section: #e7e5fe;
  --p-section-glow: #d2cefd;
  --p-neutral-800: #e4e7f5;
  --p-neutral-900: #eceef9;
  --p-neutral-100: #292b31;
  --p-lift: 0 0 0 1px #d4d8ea, 0 6px 18px rgba(31, 33, 48, 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --p-page: #f3f5fe;
    --p-page-glow: radial-gradient(1200px 720px at 82% -160px, rgba(239, 237, 255, 0.75), transparent 60%);
    --p-surface: #fbfbff;
    --p-surface-2: #eceef9;
    --p-surface-head: #eceef9;
    --p-ink: #1f2130;
    --p-ink-2: #3f424d;
    --p-ink-3: #595d6c;
    --p-ink-4: #595d6c;
    --p-ink-5: #676b7e;
    --p-rule: #dfe2f0;
    --p-hair: rgba(31, 33, 48, 0.14);
    --p-border-2: #cfd3e5;
    --p-accent: #6f62bd;
    --p-accent-hi: #423a6a;
    --p-accent-2: #5d5294;
    --p-accent-600: #b5abfc;
    --p-accent-700: #d2cefd;
    --p-accent-800: #e7e5fe;
    --p-accent-100: #2b2741;
    --p-accent-band: #efedff;
    --p-section: #e7e5fe;
    --p-section-glow: #d2cefd;
    --p-neutral-800: #e4e7f5;
    --p-neutral-900: #eceef9;
    --p-neutral-100: #292b31;
    --p-lift: 0 0 0 1px #d4d8ea, 0 6px 18px rgba(31, 33, 48, 0.08);
  }
}

/* The switch's two words: the one for the mode it switches to is shown. */
:root[data-theme='light'] [data-show='dark'],
:root:not([data-theme='light']) [data-show='light'] {
  display: none;
}

/* ── The document ────────────────────────────────────────────────────────────
   One shape on every document view the canvas draws — Guides, Developers,
   White label, Legal: the bar, a row of document tabs under a divider, then a
   contents column beside the article, then a quiet footer. Full-bleed on the
   canvas's gutter rather than a centred column.
   ───────────────────────────────────────────────────────────────────────────*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* **Every page asks for `viewport-fit=cover`**, so on an iPhone — and inside
     the iPhone app, which draws under the notch on purpose — the page reaches
     under the status bar, the notch and the home indicator. The header clears
     the top (`.pg-nav`); these clear the notch's sides in landscape and the
     home indicator, and are zero everywhere else (owner, 2026-09-25: the
     header sat "behind the face id notch and the notification section"). */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--p-page-glow), var(--p-page);
  color: var(--p-ink-3);
  font: 15px/1.55 var(--p-font);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* Nocturne's `.nav`: the brand, the links, the switch and "Open Valnivo". */
.pg-band {
  position: relative;
  z-index: 20;
}

.pg-band-inner {
  padding: 0;
}

.pg-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  padding: calc(8.4px + env(safe-area-inset-top)) var(--p-gutter) 8.4px;
}

.pg-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--p-ink);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.pg-beta {
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--p-accent-800);
  color: var(--p-accent-100);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.pg-links {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}

.pg-links a {
  flex: none;
  color: var(--p-ink);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}

.pg-links a:hover,
.pg-links a[aria-current='page'] {
  color: var(--p-accent);
}

/*
  The Guides menu, built by `/paper.js` from its one list of guides. The toggle
  reads as the links beside it; the panel is a card under the bar, grouped, and
  a full-width sheet on a phone.
*/
.pg-menu-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--p-ink);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.pg-menu-toggle:hover,
.pg-menu-toggle[aria-current='page'],
.pg-menu-toggle[aria-expanded='true'] {
  color: var(--p-accent);
}

.pg-caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}

.pg-menu-toggle[aria-expanded='true'] .pg-caret {
  transform: translateY(1px) rotate(225deg);
}

.pg-menu {
  position: absolute;
  top: calc(100% - 4px);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 8px 36px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--p-surface);
  box-shadow: var(--p-lift);
}

.pg-menu[hidden] {
  display: none;
}

.pg-menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pg-menu-head {
  margin: 0 0 6px;
  color: var(--p-ink-4);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pg-menu a {
  padding: 5px 0;
  color: var(--p-ink);
  font-size: 14px;
  text-decoration: none;
}

.pg-menu a:hover,
.pg-menu a[aria-current='page'] {
  color: var(--p-accent);
}

@media (max-width: 760px) {
  .pg-menu {
    left: 12px !important;
    right: 12px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* The worded light/dark switch, built into the bar by `/paper.js`. */
.pg-theme {
  flex: none;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--p-border-2);
  border-radius: 8px;
  background: transparent;
  color: var(--p-ink-3);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.pg-theme:hover {
  color: var(--p-ink);
  border-color: var(--p-accent);
}

/* The page in another language (paper.js): the theme switch's outline, a
   native select underneath so each platform draws its own list. */
.pg-lang {
  flex: none;
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--p-border-2);
  border-radius: 8px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E")
    no-repeat right 9px center;
  color: var(--p-ink-3);
  font: inherit;
  font-size: 13px;
  appearance: none;
  cursor: pointer;
}

.pg-lang:hover,
.pg-lang:focus-visible {
  color: var(--p-ink);
  border-color: var(--p-accent);
}

/* The one action in the bar: Nocturne's primary button, an accent outline. */
.pg-open,
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5.6px 10.08px;
  border: 1px solid var(--p-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--p-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.pg-open:hover,
.cta:hover {
  background: color-mix(in srgb, var(--p-accent) 12%, transparent);
  color: var(--p-accent);
}

/* The document tabs: a row under a divider, the current one underlined. */
.pg-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex-basis: calc(100% + 2 * var(--p-gutter));
  order: 9;
  margin: 8.4px calc(-1 * var(--p-gutter)) -8.4px;
  padding: 0 var(--p-gutter);
  border-bottom: 1px solid var(--p-hair);
}

/*
  The guides' row names all ten, which is more than a line on a phone, so it
  scrolls on its own rather than wrapping into a block of tabs.
*/
.pg-sub[aria-label='Guides'] {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* The fade `.pg-links` uses, so a row cut at the edge reads as one that goes on. */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
}

.pg-sub a {
  flex: none;
  padding: 14px 0;
  color: var(--p-ink-4);
  font-size: 14px;
  text-decoration: none;
}

.pg-sub a:hover {
  color: var(--p-ink);
}

.pg-sub a[aria-current='page'] {
  color: var(--p-ink);
  box-shadow: inset 0 -2px 0 var(--p-accent);
}

.pg-wordmark {
  display: inline;
}

/* The article and its contents column. `minmax(0, …)` and never a bare `1fr`:
   these pages are full of long code lines, and a grid item's automatic
   minimum is the widest of them. */
.pg-doc {
  display: grid;
  grid-template-columns: 220px minmax(0, 740px);
  gap: 0 clamp(32px, 5vw, 80px);
  justify-content: start;
  padding: 0 var(--p-gutter);
}

.pg-doc > main,
.pg-doc > article {
  min-width: 0;
  padding: clamp(28px, 6vw, 64px) 0 96px;
}

/* A page with too few headings for a contents column. */
.pg-solo {
  max-width: calc(760px + 2 * var(--p-gutter));
  padding: clamp(28px, 6vw, 64px) var(--p-gutter) 80px;
}

.pg-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 64px;
  font-size: 14px;
  line-height: 20px;
}

.pg-toc-label {
  margin: 0 0 8px;
  color: var(--p-ink-5);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg-toc a {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  color: var(--p-ink-3);
  text-decoration: none;
}

.pg-toc a:hover {
  color: var(--p-ink);
}

.pg-toc a .n {
  width: 20px;
  flex: none;
  color: var(--p-accent);
  font-feature-settings: 'tnum' 1;
}

h1,
h2,
h3,
h4 {
  color: var(--p-ink);
  font-family: var(--p-font);
  font-weight: 500;
}

h1 {
  margin: 20px 0 0;
  font-size: clamp(38px, 4.8vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h2 {
  display: flex;
  gap: 12px;
  margin: 48px 0 20px;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.012em;
}

/* A numbered heading's number, split out by `/paper.js`, in the accent. */
h2 .n {
  flex: none;
  color: var(--p-accent);
}

h3 {
  margin: 28px 0 10px;
  font-size: 20px;
  line-height: 28px;
}

p {
  margin: 20px 0 0;
  color: var(--p-ink-2);
  font-size: 17px;
  line-height: 29px;
}

ul,
ol {
  margin: 20px 0 0;
  padding-left: 20px;
}

li {
  margin-top: 12px;
  color: var(--p-ink-3);
  font-size: 16px;
  line-height: 27px;
}

a {
  color: var(--p-accent-2);
  text-decoration-color: color-mix(in srgb, var(--p-accent) 50%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--p-accent-hi);
  text-decoration-color: var(--p-accent);
}

strong {
  color: var(--p-ink);
  font-weight: 500;
}

.lede {
  margin: 20px 0 0;
  color: var(--p-accent-2);
  font-size: 20px;
  line-height: 31px;
}

/* The category line above a heading — GUIDE, LEGAL, DOCS. */
.stamp {
  margin: 0;
  color: var(--p-accent);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta {
  margin: 18px 0 0;
  color: var(--p-ink-5);
  font-size: 13px;
  line-height: 20px;
}

.note {
  color: var(--p-ink-5);
  font-size: 13px;
  line-height: 20px;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
  font-size: 0.92em;
  color: var(--p-accent-hi);
}

pre {
  margin: 20px 0 0;
  overflow-x: auto;
  padding: 18px 20px;
  border-radius: 8px;
  background: var(--p-neutral-900);
  box-shadow: 0 0 0 1px var(--p-rule);
  color: var(--p-ink-2);
  font-size: 13.5px;
  line-height: 22px;
}

pre code {
  color: inherit;
  font-size: inherit;
}

/* Nocturne's card: the surface and a hairline ring, 14px corners. */
.card {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--p-surface);
  box-shadow: 0 0 0 1px var(--p-rule);
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

/* Nocturne's `.table`: small uppercase headings, row rules that fade out at
   both ends. */
table {
  width: 100%;
  margin: 20px 0 0;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  padding: 5.6px;
  color: color-mix(in srgb, var(--p-ink) 60%, transparent);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
}

td {
  padding: 5.6px;
  color: var(--p-ink-3);
  line-height: 22px;
  text-align: left;
  vertical-align: top;
}

thead tr {
  background: linear-gradient(to right, transparent, var(--p-hair) 48px, var(--p-hair) calc(100% - 48px), transparent)
    no-repeat bottom / 100% 1px;
}

tbody tr {
  background: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--p-ink) 8%, transparent) 48px,
      color-mix(in srgb, var(--p-ink) 8%, transparent) calc(100% - 48px),
      transparent
    )
    no-repeat bottom / 100% 1px;
}

td.fig,
th.fig {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wrap {
  overflow-x: auto;
}

/* The legal documents are set a step smaller than a guide: 24px headings and
   16px body, as the canvas's Legal page draws them. */
.pg-legal h2 {
  margin-top: 48px;
  font-size: 24px;
  line-height: 32px;
}

.pg-legal p,
.pg-legal li {
  font-size: 16px;
  line-height: 27px;
}

.pg-legal h1 {
  font-size: clamp(38px, 4.6vw, 58px);
}

/* The closing call to action on a guide: the canvas's one saturated field. */
.pg-callout {
  margin: 56px 0 0;
  padding: 28px;
  border-radius: 14px;
  background: radial-gradient(600px 240px at 90% -40%, color-mix(in srgb, var(--p-section-glow) 70%, transparent), transparent 64%),
    var(--p-section);
}

.pg-callout h2 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}

.pg-callout p {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 26px;
}

.pg-callout .cta {
  margin-top: 16px;
}

/* "More guides": cards, as the canvas draws them. */
.pg-more {
  margin: 56px 0 0;
}

.pg-more-label {
  margin: 0;
  color: var(--p-ink-5);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pg-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin-top: 16px;
}

.pg-more-grid a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: var(--p-surface);
  box-shadow: 0 0 0 1px var(--p-rule);
  color: var(--p-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  text-decoration: none;
}

.pg-more-grid a:hover {
  box-shadow: 0 0 0 1px var(--p-accent-600);
  color: var(--p-ink);
}

/* A page's own footer: the small print, under a divider. */
footer {
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--p-hair);
  color: var(--p-ink-5);
  font-size: 13px;
  line-height: 20px;
}

footer a {
  display: inline-block;
  margin: 0 14px 6px 0;
}

footer p {
  font-size: 13px;
  line-height: 20px;
}

@media (max-width: 760px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .pg-doc {
    grid-template-columns: minmax(0, 1fr);
  }
  /* On a narrow screen the contents list becomes a strip of tappable section
     names that stays pinned to the top — `/paper.js` gives it the class. */
  .pg-toc {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-direction: row;
    gap: 8px;
    margin: 0 calc(-1 * var(--p-gutter));
    padding: 10px var(--p-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--p-page) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--p-hair);
  }
  .pg-toc-label {
    display: none;
  }
  .pg-toc a {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--p-rule);
    background: var(--p-page);
    color: var(--p-ink-2);
    font-size: 13px;
    white-space: nowrap;
  }
  .pg-toc a .n {
    width: auto;
    margin-right: -4px;
  }
  .pg-doc > main,
  .pg-doc > article {
    padding-top: 28px;
  }
}

/* The site footer, built by `/paper.js` from one copy of each string. */
.pg-foot {
  padding: 28px var(--p-gutter) 48px;
  border-top: 1px solid var(--p-hair);
  font-size: 13px;
}

.pg-foot-inner {
  max-width: none;
}

.pg-foot p {
  max-width: 72ch;
  margin: 0 0 12px;
  color: var(--p-ink-5);
  font-size: 13px;
  line-height: 20px;
}

.pg-foot strong {
  color: var(--p-ink-3);
}

.pg-foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 6px;
  color: var(--p-ink-5);
}

.pg-foot-row a {
  color: var(--p-accent-2);
}

.pg-foot-row a:hover {
  color: var(--p-accent-hi);
}

/* ── a day of changes, folded ───────────────────────────────────────────────
 *
 * The changelog is one long page and its newest day is the one anybody came
 * for, so each day is a `<details>` and only the first is `open`. Native
 * rather than scripted: it folds with JavaScript off, the keyboard already
 * works, and a screen reader is told it is expandable without a word of ARIA
 * from us.
 *
 * The heading stays **inside** the summary rather than being replaced by it.
 * The page's outline is a list of days and losing it would make the changelog a
 * wall with no structure — and the guard in `tests/changelog.test.ts` reads the
 * dates out of those same `<h3>`s, which is what keeps this page honest about
 * which days it covers.
 */
.day {
  border-bottom: 1px solid var(--p-hair);
}

.day summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0 14px;
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle through `::-webkit-details-marker`, which
   `list-style: none` alone does not remove. */
.day summary::-webkit-details-marker {
  display: none;
}

/* Our own marker, so it can point where the state says. The heading keeps its
   weight and size; only its margins go, because the summary owns the spacing
   now. */
.day summary::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid var(--p-ink-4);
  border-bottom: 2px solid var(--p-ink-4);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.day[open] summary::before {
  transform: rotate(45deg);
}

.day summary h3 {
  margin: 0;
  display: inline;
}

/* What a folded day is worth opening for. Without it a closed page is six bare
   dates, which is tidier than the wall and less useful than it. */
.day-count {
  margin-left: auto;
  color: var(--p-ink-4);
  font-size: 13px;
  font-weight: 500;
}

.day summary:hover h3,
.day summary:focus-visible h3 {
  color: var(--p-accent);
}

.day > ul {
  margin-top: 0;
  padding-bottom: 8px;
}

/* ── a month of days, folded (owner, 2026-09-30) ─────────────────────────────
 *
 * The days are grouped by month and each month folds too, newest open. The
 * month's <h2> stays inside its summary for the same reason the day's <h3>
 * does: the outline, and `tests/changelog.test.ts`, which reads a day's year off
 * the <h2> it sits under. Same marker as a day, one size up. */
.month {
  margin-top: 24px;
}

.month > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0 12px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--p-hair);
  margin-bottom: 12px;
}

.month > summary::-webkit-details-marker {
  display: none;
}

.month > summary::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--p-ink-3, var(--p-ink-4));
  border-bottom: 2px solid var(--p-ink-3, var(--p-ink-4));
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.month[open] > summary::before {
  transform: rotate(45deg);
}

.month > summary h2 {
  margin: 0;
  display: inline;
}

.month > summary:hover h2,
.month > summary:focus-visible h2 {
  color: var(--p-accent);
}

.month > .day {
  margin-left: 20px;
}

/* ── the way back, inside the Android and iPhone app ──────────────────────
   Drawn only by `paper.js`, and only in an app shell (owner, 2026-09-25): a
   WebView has no address bar and an iPhone no back button. An icon alone, on
   the same line as the title and smaller than it — part of the page, never a
   bar over the top of the screen. 36px drawn; the 44px a thumb needs is made
   up by an invisible margin round it. */
.pg-title-row {
  display: flex;
  /* The first line, not the middle of a title that wraps to four. */
  align-items: flex-start;
  gap: 12px;
  /* The title's own space above, carried by the row it now sits in. */
  margin-top: 20px;
}

.pg-title-row h1 {
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
}

.pg-app-back {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* Centred on the title's first line: its line box less the button, halved. */
  margin-top: max(0px, calc((clamp(38px, 4.8vw, 62px) * 1.06 - 36px) / 2));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--p-rule);
  color: var(--p-accent);
  cursor: pointer;
}

.pg-app-back::after {
  content: '';
  position: absolute;
  inset: -4px;
}

.pg-app-back svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pg-app-back:hover,
.pg-app-back:active {
  background: var(--p-accent-band);
}

/* Inside the Android or iPhone app (`paper.js` marks the page): what the
   app's landing page hides, hidden here too (owner, 2026-09-25). The light/dark
   switch is moved beside Open Valnivo by the script, so hiding the links does
   not hide it. */
.pg-in-app .pg-links,
.pg-in-app .pg-sub[aria-label='Guides'],
.pg-in-app .pg-more {
  display: none;
}

.pg-in-app .pg-nav .pg-theme {
  margin-left: auto;
}

/* Inside the Android or iPhone app the header stays at the top while the page
   scrolls, as the app's own does (owner, 2026-09-25). Solid, so the page does
   not show through; a hairline where it ends; and an in-page link lands below
   it rather than under it. */
.pg-in-app .pg-band {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--p-page);
  border-bottom: 1px solid var(--p-hair);
}

html.pg-in-app {
  scroll-padding-top: calc(72px + env(safe-area-inset-top));
}

/* Pinned, the header must stay short: the legal tabs wrap to two lines on a
   phone and made it 172px, a fifth of the screen held for ever. Inside an app
   they scroll on one line instead, as the guides' row always has. */
.pg-in-app .pg-sub {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.pg-in-app .pg-sub::-webkit-scrollbar {
  display: none;
}