/*
 * Notes: the long-form pages of the public site (/proof, /trust), set like
 * a printed research note. One measure for reading, figures and tables a
 * little wider, Timeless Sans for the text and Timeless Serif roman for
 * the title alone. Window tokens (window.css) throughout: paper and cobalt,
 * coral only for what got through. Monospace is for real code and IDs.
 */

@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.nt-page { --nt-measure: 40rem; --nt-wide: 47.5rem; --nt-code: "IBM Plex Mono", var(--w-mono); }

.nt { padding: clamp(64px, 9vw, 136px) var(--w-g) clamp(80px, 9vw, 140px); color: var(--w-ink); font: 400 17px/1.65 var(--w-sans); letter-spacing: -0.003em; font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums; }
.nt > * { max-width: var(--nt-measure); margin-inline: auto; }
.nt > section { margin-top: clamp(56px, 6vw, 80px); }
.nt p { margin: 0 0 1.05em; text-wrap: pretty; hyphens: manual; }
.nt a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--w-line-2); text-underline-offset: 0.2em; }
.nt a:hover { text-decoration-color: currentColor; }
.nt b { font-weight: 500; }

/* head */
.nt-kind { margin: 0 0 22px !important; font-size: 13px; line-height: 1.3; color: var(--w-mut); letter-spacing: 0; }
.nt-title { margin: 0; font: 400 64px/1 var(--w-serif); letter-spacing: -0.025em; text-wrap: balance; }
.nt-dek { margin: 28px 0 0 !important; font: 300 22px/1.45 var(--w-sans); color: var(--w-ink-2); letter-spacing: -0.005em; }
.nt-by { margin: 32px 0 0 !important; display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; line-height: 1.4; color: var(--w-ink-2); }
.nt-by span + span { color: var(--w-mut); }

/* The round 9 system (footer audit, founder, 8 Oct 2026): every note opens on Every-black under the dark nav,
   as /trust and /pricing do, and the text below stays on paper at the reading measure (site-layout.js notePage). */
.nt-band { padding: clamp(72px, 9vw, 136px) var(--w-g) clamp(64px, 7vw, 104px); background: var(--eb-0); color: var(--eb-on); }
.nt-band .nt-head { max-width: var(--nt-measure); margin-inline: auto; }
.nt-band .nt-kind { color: var(--eb-on-3); }
.nt-band .nt-title { color: var(--eb-on); }
.nt-band :is(.nt-dek, .nt-by) { color: var(--eb-on-2); }
.nt-band .nt-by span + span { color: var(--eb-on-3); }
.nt-band + .nt { padding-top: clamp(56px, 7vw, 96px); }
.nt > :first-child { margin-top: 0; }

/* a Markdown document as a note (the legal pages, the changelog) */
.nt.nt-doc > * { margin-inline: auto; }
.nt-doc .anchor { margin-left: 10px; color: var(--w-mut); text-decoration: none; opacity: 0; transition: opacity 120ms; }
.nt-doc :is(h2, h3):hover .anchor, .nt-doc .anchor:focus-visible { opacity: 1; }
.nt-doc h2 { margin-top: clamp(48px, 5vw, 64px); font-size: 32px; }
.nt-doc > h2:first-child { margin-top: 0; }
.nt-doc :is(ul, ol) { margin: 0 0 1.05em; padding-left: 1.25em; }
.nt-doc li { margin-bottom: 0.45em; }
.nt-doc li::marker { color: var(--w-mut); }
.nt-doc em { font-style: normal; color: var(--w-mut); }
.nt-doc table { width: 100%; margin: 24px 0 36px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.nt-doc :is(th, td) { padding: 10px 16px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--w-line); }
.nt-doc thead th { font-size: 13px; font-weight: 500; color: var(--w-mut); border-bottom-color: var(--w-ink); }
.nt-doc tbody tr:last-child > * { border-bottom-color: var(--w-ink); }
.nt-doc hr { margin: 48px auto; border: 0; border-top: 1px solid var(--w-line); }
/* the status strip while it is young: in the text column, bars at their own width, never stretched */
.nt > section > .nt-fig.is-young { max-width: var(--nt-measure); margin-inline: auto; }
.nt-up.is-young .nt-svg { max-width: 100%; }

/* the lead is a short block: balanced, so it never ends on a stranded phrase */
.nt .nt-dek { text-wrap: balance; }

/* after the byline, the first block sits one step down, not a section's worth */
.nt > header + section, .nt-notice + section { margin-top: 44px; }

/* the plain statement that none of this is a customer */
.nt-notice { margin-top: 40px; padding: 2px 0 2px 18px; border-left: 3px solid var(--w-cobalt); }
.nt-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0 0 12px; border-radius: 999px; background: var(--sky); color: var(--w-ink); font: 500 13px/1 var(--w-sans); }
.nt-notice p { font-size: 17px; line-height: 1.6; color: var(--w-ink-2); }
.nt-notice b { color: var(--w-ink); }

/* headings */
.nt h2 { margin: 0 0 20px; font: 400 40px/1.05 var(--w-serif); letter-spacing: -0.015em; text-wrap: balance; }
.nt h2 span { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0; color: var(--w-mut); }
.nt h3 { margin: 36px 0 10px; font: 500 17px/1.4 var(--w-sans); letter-spacing: -0.006em; }
.nt h2 + h3 { margin-top: 0; }
.nt-abstract { padding-top: 0; }
.nt-abstract h2 { font-family: var(--w-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; margin-bottom: 10px; }
.nt-abstract p { font-size: 17px; line-height: 1.65; color: var(--w-ink-2); }

/* citations */
.nt-cite { font-size: 12px; line-height: 0; margin-left: 1px; font-variant-numeric: lining-nums; }
.nt-cite a { text-decoration: none; color: var(--w-cobalt); padding: 0 1px; }
.nt-cite a:hover { text-decoration: underline; }

/* figures: two drawings, one for a column and one for a phone */
.nt-fig { margin: 40px auto 44px; max-width: var(--nt-wide); }
.nt > section > .nt-fig, .nt > section > .nt-table { margin-inline: calc((var(--nt-measure) - var(--nt-wide)) / 2); }
.nt-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--w-sans); font-size: var(--fs); font-variant-numeric: lining-nums; }
.nt-svg.is-narrow { display: none; }
.nt-svg .g { stroke: var(--w-line); stroke-width: 1; }
.nt-svg .t { fill: var(--w-mut); font-size: 13px; }
.nt-svg .l { fill: var(--w-ink); }
.nt-svg .d { fill: var(--w-mut); }
.nt-svg .d, .nt-svg .l { paint-order: stroke; stroke: var(--w-paper); stroke-width: 5px; stroke-linejoin: round; }
.nt-svg tspan { stroke: inherit; }
.nt-svg .v { fill: var(--w-ink); font-weight: 500; }
.nt-svg .m { fill: #C23E1E; font-weight: 500; }
.nt-svg .s { fill: var(--w-cobalt); }
.nt-svg .o { fill: var(--w-coral); }
.nt-svg .r { fill: #7F8DBE; }
.nt-svg .h { fill: #C5CEE6; }
.nt figcaption, .nt caption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--w-ink-2); text-align: left; text-wrap: pretty; }
.nt figcaption b, .nt caption b { font-weight: 500; color: var(--w-ink); }

/* tables: captions above, hairlines, figures right-aligned in lining numerals */
.nt-table { margin: 36px auto 44px; max-width: var(--nt-wide); }
.nt-table.is-narrow { max-width: var(--nt-measure); }
.nt > section > .nt-table.is-narrow { margin-inline: auto; }
.nt-table { overflow-x: auto; }
.nt-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.nt-table caption { caption-side: top; margin: 0 0 12px; }
.nt-table th, .nt-table td { padding: 10px 16px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--w-line); }
.nt-table th:last-child, .nt-table td:last-child { padding-right: 0; }
.nt-table thead th { padding-top: 0; font-size: 13px; font-weight: 500; color: var(--w-mut); border-bottom-color: var(--w-ink); }
.nt-table tbody th { font-weight: 400; }
.nt-table tbody tr:last-child > * { border-bottom-color: var(--w-ink); }
.nt-table .num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.nt-table thead .num { white-space: normal; }
.nt-table .m { color: #C23E1E; }
.nt-table small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--w-mut); }

.nt-inc table { font-size: 15px; }
.nt-out { display: inline-flex; align-items: baseline; gap: 8px; }
.nt-out::before { content: ""; flex: none; width: 7px; height: 7px; transform: translateY(-1px); }
.nt-out.ok::before { background: var(--w-cobalt); }
.nt-out.miss::before { background: var(--w-coral); }

/* the incident appendix opens on request */
.nt-more > summary { cursor: pointer; width: fit-content; font-size: 15px; color: var(--w-ink); text-decoration: underline; text-decoration-color: var(--w-line-2); text-underline-offset: 0.2em; }
.nt-more > summary:hover { text-decoration-color: currentColor; }
.nt-more[open] > summary { margin-bottom: 8px; }

/* reproduce */
.nt code { font: 400 15px/1.5 var(--nt-code); letter-spacing: 0; overflow-wrap: anywhere; }
.nt-repro { margin: 24px 0 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); border-top: 1px solid var(--w-ink); }
.nt-repro dt, .nt-repro dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--w-line); font-size: 15px; }
.nt-repro dt { color: var(--w-mut); }
.nt-repro dd code { font-size: 13px; }

/* sources and appendices */
.nt-refs, .nt-app { font-size: 15px; line-height: 1.6; }
.nt-src, .nt-assume { margin: 0; padding: 0; list-style: none; counter-reset: a; color: var(--w-ink-2); }
.nt-src li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); margin-bottom: 12px; scroll-margin-top: 96px; }
.nt-src li:target { color: var(--w-ink); }
.nt-src .n { color: var(--w-mut); font-variant-numeric: lining-nums; }
.nt-src i { font-style: normal; }
.nt-assume li { counter-increment: a; display: grid; grid-template-columns: 2rem minmax(0, 1fr); margin-bottom: 10px; }
.nt-assume li::before { content: counter(a) "."; color: var(--w-mut); font-variant-numeric: lining-nums; }
.nt-app p { color: var(--w-ink-2); }

/* the end */
.nt-end { margin-top: clamp(64px, 7vw, 96px); padding-top: 24px; border-top: 1px solid var(--w-line); }
.nt-end p { font-size: 17px; color: var(--w-ink-2); }
.nt-sign { margin-top: 20px !important; font: 400 20px/1.3 var(--w-serif) !important; color: var(--w-ink) !important; }

@media (max-width: 860px) {
  .nt > section > .nt-fig, .nt > section > .nt-table { margin-inline: auto; }
}

@media (max-width: 600px) {
  .nt { padding: 48px 16px 72px; font-size: 16px; line-height: 1.62; }
  .nt-band { padding: 56px 16px 48px; }
  .nt-band + .nt { padding-top: 40px; }
  .nt-doc h2 { font-size: 26px; }
  .nt-doc table { display: block; overflow-x: auto; }
  .nt-kind { margin-bottom: 16px !important; }
  .nt-abstract p, .nt-end p { font-size: 16px; }
  .nt-sign { font-size: 18px !important; }
  .nt-title { font-size: 36px; line-height: 1.05; }
  .nt-dek { font-size: 18px; }
  .nt-by { font-size: 15px; }
  .nt h2 { font-size: 28px; }
  .nt h3 { font-size: 16px; }
  .nt-svg.is-wide { display: none; }
  .nt-svg.is-narrow { display: block; }
  .nt-table table { font-size: 13px; }
  .nt-table th, .nt-table td { padding-right: 10px; }
  .nt-table thead th { font-size: 13px; }
  .nt-table .opt { display: none; }
  .nt-repro { grid-template-columns: minmax(0, 1fr); }
  .nt-repro dt { padding-bottom: 0; border-bottom: 0; font-size: 13px; }
  .nt-repro dd { padding-top: 2px; }
  .nt-src li, .nt-assume li { grid-template-columns: 1.6rem minmax(0, 1fr); }
  /* the incident appendix reads as a list of cases on a phone */
  .nt-inc thead { display: none; }
  .nt-inc table, .nt-inc caption, .nt-inc tbody, .nt-inc tr, .nt-inc td { display: block; }
  .nt-inc tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k a" "w w" "e o"; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--w-line); }
  .nt-inc td { padding: 0; border: 0; }
  .nt-inc .k { grid-area: k; font-size: 13px; color: var(--w-mut); }
  .nt-inc .a { grid-area: a; font-weight: 500; }
  .nt-inc .w { grid-area: w; }
  .nt-inc .e { grid-area: e; font-size: 13px; color: var(--w-ink-2); }
  .nt-inc .o { grid-area: o; font-size: 13px; text-align: right; }
}

@media print {
  .w-head, .w-foot, .announce { display: none !important; }
  body.wx { background: #fff; }
  .nt { padding: 0; font-size: 11pt; }
  .nt-svg.is-narrow { display: none !important; }
  .nt-svg.is-wide { display: block !important; }
  .nt-fig, .nt-table tr { break-inside: avoid; }
  .nt h2, .nt h3 { break-after: avoid; }
}
@media (min-width: 861px) {
  .nt-more .nt-inc { margin-inline: calc((var(--nt-measure) - var(--nt-wide)) / 2); }
}

/* The incidents disclosure uses the FAQ's plus and minus control, not the browser's triangle (round 9 judges). */
.nt-more > summary { list-style: none; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nt-more > summary::-webkit-details-marker { display: none; }
.nt-more > summary::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 2px; background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat; box-shadow: inset 0 0 0 1px var(--w-line-2); }
.nt-more[open] > summary::before { background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat; }
.nt-more > summary:hover { text-decoration: underline; text-decoration-color: var(--w-line-2); }