/* /trust (worker/pages/trust.ts) and the home page's trust band (src/index.html #trust): how the record is kept.
   Phone first. The site's tokens (styles.css): a white page with black sheet panels, Schibsted Grotesk and Martian
   Mono. The place pages' and notice pages' classes (place.css, notice.css) carry the layout; this file adds the
   fingerprint card, the release chain and the two-column "shows / does not". */
.tr .nt-intro { max-width: 44em; }

/* The fingerprint card: one real file, black, with its 64 characters in four rows of sixteen. */
.tr-card { position: relative; isolation: isolate; overflow: hidden; margin: 14px 0 0; padding: 18px 16px 6px; border-radius: 4px; background: var(--core); color: var(--on-core); }
.tr-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 1.02rem/1.3 var(--sans); letter-spacing: -.01em; }
.tr-card-h span { color: var(--on-core-2); font-weight: 400; }
.tr-card-l { margin: 16px 0 8px !important; font: 500 .75rem/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.tr-sha { display: grid; gap: 2px; padding: 0; background: none; color: var(--on-core); font: 500 clamp(1.02rem, 5.2vw, 1.5rem)/1.35 var(--mono); letter-spacing: .04em; user-select: all; }
.tr-sha span { display: block; white-space: nowrap; }
.tr-sha span:nth-child(even) { color: color-mix(in srgb, var(--on-core) 72%, var(--accent)); }
.tr-trail { list-style: none; margin: 18px 0 0; padding: 0; }
.tr-trail li { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--on-core) 16%, transparent); font-size: .95rem; line-height: 1.45; }
.tr-k { font: 500 .75rem/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--on-core-2); }
.tr-v a { color: var(--on-core); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tr-v b { font-weight: 650; }
.tr-check { max-width: none; }

/* The release chain: each release a row on a line, newest first, with its fingerprint in full. */
.tr-chain-h { margin: 18px 0 8px !important; font: 500 .75rem/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.tr-chain { list-style: none; margin: 0 0 6px; padding: 0 0 0 18px; border-left: 2px solid var(--ink); }
.tr-chain li { position: relative; padding: 0 0 16px; }
.tr-chain li:last-child { padding-bottom: 2px; }
.tr-chain li::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; background: var(--bg); border: 2px solid var(--ink); }
.tr-chain li.is-live::before { background: var(--accent); border-color: var(--ink); }
.tr-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tr-rel b { font: 600 .92rem/1.3 var(--mono); letter-spacing: -.01em; }
.tr-rel span { font-size: .84rem; color: var(--ink-3); }
.tr-rel-n { margin-top: 2px !important; font-size: .88rem; color: var(--ink-2); }
.tr-rel-s { margin-top: 4px !important; font: 400 .75rem/1.55 var(--mono); color: var(--ink-3); }
.tr-rel-s span { text-transform: uppercase; letter-spacing: .04em; }
.tr-rel-s code { padding: 0; background: none; font: inherit; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.tr-rel-x { margin-top: 4px !important; font-size: .8rem; color: var(--ink-3); }

/* Shows / does not. */
.tr-two { display: grid; gap: 14px; margin-top: 12px; }
.tr-two > div { padding: 14px 16px 12px; border-radius: 4px; }
.tr-yes { background: var(--core); color: var(--on-core); }
.tr-no { border: 1px solid var(--ink); background: var(--surface); }
.tr-two-h { margin: 0 0 8px !important; font: 500 .75rem/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.tr-yes .tr-two-h { color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.tr-no .tr-two-h { color: var(--ink-2); }
.tr-two ul { list-style: none; margin: 0; padding: 0; }
.tr-two li { padding: 9px 0; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-size: .95rem; line-height: 1.45; }
.tr-two li:first-child { border-top: 0; padding-top: 2px; }
.tr-exc li { grid-template-columns: minmax(0, 1fr); }

/* The independence statements (section 04): a black sheet, two sentences set larger than the page's text. */
.tr-pledge { position: relative; isolation: isolate; overflow: hidden; margin: 12px 0 0; padding: 16px 16px 14px; border-radius: 4px; background: var(--core); color: var(--on-core); }
.tr-pledge-h { margin: 0 0 4px !important; font: 500 .75rem/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.tr-pledge p:not(.tr-pledge-h) { margin: 0 !important; padding: 12px 0; max-width: 38em; font: 560 1.08rem/1.42 var(--sans); letter-spacing: -.012em; color: var(--on-core); text-wrap: pretty; }
.tr-pledge p + p:not(.tr-pledge-h) { border-top: 1px solid color-mix(in srgb, var(--on-core) 16%, transparent); }
.tr-pledge p:last-child { padding-bottom: 2px; }
.tr-exc li span { text-align: left; font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .03em; }

@media (min-width: 720px) {
  .tr-card { padding: 22px 24px 10px; }
  .tr-pledge { padding: 22px 24px 18px; }
  .tr-pledge p:not(.tr-pledge-h) { font-size: 1.22rem; }
  .tr-sha { grid-template-columns: repeat(2, max-content); column-gap: .9em; font-size: clamp(1.05rem, 2.1vw, 1.45rem); }
  .tr-trail li { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .tr-exc li { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-exc li span { text-align: right; white-space: nowrap; }
}

/* Shows / does not sit side by side only where each keeps a readable line (the guard, DESIGN.md). */
@media (min-width: 980px) { .tr-two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* ── The home page's band (#trust): a black sheet, the same card, three lines and the way in. ───────────────────── */
main > section.trust { max-width: none; margin: var(--space) 0 0; padding: 0; }
main > section.trust::before { display: none; }
.trust { position: relative; isolation: isolate; overflow: hidden; background: var(--core); color: var(--on-core); }
.trust::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--on-core) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-core) 5%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.trust-in { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 9vh, 104px) var(--gutter); display: grid; gap: 24px; }
.trust-in > * { min-width: 0; }
.trust .kicker { color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.trust h2 { margin: 0; color: var(--on-core); text-wrap: balance; }
.trust-lede { margin: 12px 0 0; max-width: 34em; font-size: 1.04rem; line-height: 1.5; color: var(--on-core-2); }
.trust-lines { list-style: none; margin: 16px 0 0; padding: 0; }
.trust-lines li { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--on-core) 16%, transparent); font-size: .98rem; line-height: 1.45; color: var(--on-core-2); }
.trust-lines b { display: block; color: var(--on-core); font-weight: 620; letter-spacing: -.01em; }
.trust-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.trust-cta .btn { background: var(--on-core); color: var(--core); border-color: var(--on-core); }
.trust-cta .link-arrow { color: var(--on-core); }
.trust-indep { margin: 20px 0 0; padding: 12px 0 0; max-width: 36em; border-top: 1px solid color-mix(in srgb, var(--on-core) 28%, transparent); font-size: .98rem; line-height: 1.45; color: var(--on-core-2); }
.trust-indep b { color: var(--on-core); font-weight: 620; letter-spacing: -.01em; }
.trust-indep a { color: var(--on-core); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.trust-fine { margin: 16px 0 0; max-width: 36em; font-size: .84rem; line-height: 1.45; color: var(--on-core-2); }
.trust-card { margin: 0; padding: 18px 16px 16px; border: 1px solid color-mix(in srgb, var(--on-core) 28%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--on-core) 4%, var(--core)); }
.trust-card .tr-card-h { font-size: .98rem; }
.trust-card .tr-sha { grid-template-columns: none; font-size: clamp(1rem, 5vw, 1.4rem); }
/* On a phone the card is the fingerprint alone: the steps are one tap away, on /trust (short phone pages). */
.trust-steps { display: none; list-style: none; margin: 16px 0 0; padding: 0; counter-reset: ts; }
.trust-steps li { counter-increment: ts; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--on-core) 16%, transparent); font-size: .9rem; line-height: 1.45; color: var(--on-core-2); }
.trust-steps li::before { content: counter(ts, decimal-leading-zero); font: 500 .75rem/1.9 var(--mono); color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.trust-steps a { color: var(--on-core); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.trust-steps code { padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--on-core) 12%, transparent); color: var(--on-core); font: 400 .78rem var(--mono); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .trust-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .trust-card { padding: 24px 24px 18px; }
  .trust-card .tr-sha { grid-template-columns: none; font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.3; }
  .trust-steps { display: block; }
}