.topnav { border-bottom: 1px solid var(--line); background: #fff;
            margin: -2em -1em 1.5em; padding: 0;
            position: sticky; top: 0; z-index: 50;
            backdrop-filter: saturate(140%) blur(8px);
            -webkit-backdrop-filter: saturate(140%) blur(8px); }
  .topnav-inner { max-width: var(--content-w, 1040px); margin: 0 auto;
                  padding: 0.55em 1.25em; display: flex;
                  align-items: center; justify-content: space-between;
                  flex-wrap: wrap; gap: 0.4em; }
  .topnav .brand { font-weight: 700; color: var(--ink);
                   text-decoration: none; font-size: 1.05em;
                   letter-spacing: -0.01em;
                   display: inline-flex; align-items: center; }
  .topnav .brand .brand-mark { height: 1.18em; width: auto;
                   flex: 0 0 auto; margin-right: .5em;
                   filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
  .topnav ul { list-style: none; margin: 0; padding: 0;
               display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; }
  .topnav ul li { white-space: nowrap; }
  /* Base nav layer mirrors the apex bar (the body .topnav dark
     overrides above are the winning layer; these keep the base
     consistent). Active = ink + signal underline, account link =
     filled CTA. */
  .topnav ul a { color: rgba(233,237,243,0.62); text-decoration: none;
                 font-size: 0.9rem; font-weight: 460; padding: 0.3em 0;
                 transition: color 0.15s ease; }
  .topnav ul a:hover { color: var(--ink); }
  .topnav ul a.active { color: var(--ink); border-bottom: 2px solid var(--accent); }
  .topnav .nav-account { color: #04121f; background: var(--accent);
                 font-weight: 620; border-radius: 6px; padding: 0.45em 0.95em; }
  .topnav .nav-account:hover { background: #73c2ff; color: #04121f; }
  @media (max-width: 600px) {
    .topnav ul { gap: 0.5em 0.9em; font-size: 0.95em; }
    /* 44px min tap target (WCAG 2.5.5 / Apple HIG) so the ~8 links
       don't render as ~20px-tall cramped rows on mobile. */
    .topnav ul a { display: inline-flex; align-items: center;
                   min-height: 44px; padding: 0 0.15em; }
  }
  @media print { .topnav { display: none; position: static; } }

  /* No hamburger nav: a display:contents <details> wrapper collapses
     the <ul> flex item to width:0 on desktop, so the nav stays a bare
     <ul> (known-good single-row desktop); the base .topnav rules above
     need no collapse/toggle rules. */

  /* Accessibility baseline: visible keyboard focus + skip-to-content
     link. Section 508 / EAA / WCAG 2.4.7 + 2.4.1. The CSS lives next
     to the shared nav so every server-rendered page that includes
     _NAV_CSS gets it for free. The corresponding <a class="skip-link">
     element is emitted by _nav() below. */
  :focus-visible { outline: 3px solid var(--accent);
                   outline-offset: 2px; border-radius: 3px; }
  .skip-link { position: absolute; left: -9999px; top: 0;
               background: var(--ink); color: #fff;
               padding: 0.6em 1em; text-decoration: none;
               z-index: 100; font-weight: 600; }
  .skip-link:focus { left: 0.5em; top: 0.5em; }

  /* ============================================================
     Proof-page ledger. Theme-preserving (dark gunmetal, single
     signal-blue accent + existing semantic greens/oranges,
     Inter/JetBrains Mono). Turns the technical detail into an
     instrument-grade hairline ledger, reserves the green verdict
     for the page title, neutralises attribute chips (facts, not
     verdicts), and glues a copy affordance to every hash. The
     ledger rules are SCOPED to .technical-proof-details so the
     index demo-preview grid is untouched.
     ============================================================ */

  /* Verdict promoted to the page title row (read state first). */
  .proof-title { display: flex; align-items: center; flex-wrap: wrap;
                 gap: 0.55em; }
  .title-verdict {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-family: var(--sans); font-weight: 700; font-size: 0.8rem;
    letter-spacing: 0.01em; padding: 0.3em 0.8em; border-radius: 999px;
    background: rgba(70,208,138,.13); color: var(--verified);
    border: 1px solid #1f5a42; white-space: nowrap;
  }
  .title-verdict::before { content: "\2713"; }
  .title-verdict.warn {
    background: rgba(242,180,90,.16); color: var(--limitation);
    border-color: #5a4a1f;
  }
  .title-verdict.warn::before { content: "\21\fe0e"; }
  /* Phase 3b: terminal broadcast failure (anchor_state "failed"). */
  .title-verdict.fail {
    background: rgba(255,106,106,.13); color: var(--bad);
    border-color: #5a1f1f;
  }
  .title-verdict.fail::before { content: "\2715"; }
  /* Phase 3b: secondary confirmations detail beside the verdict pill
     (rendered only for anchor_state "broadcast"). */
  .verdict-sub { font-family: var(--sans); font-weight: 400;
                 font-size: 0.8rem; color: var(--muted);
                 white-space: nowrap; }

  /* Attribute chips are facts, not verdicts → neutral, no check. */
  .badges .pill {
    background: var(--surface-3); color: var(--ink-dim);
    border-color: var(--line);
  }
  .badges .pill::before { content: none; }

  /* Technical detail → flat hairline ledger (scoped; demo-preview
     keeps its own pill look). */
  .technical-proof-details .proof-grid {
    grid-template-columns: max-content 1fr; gap: 0; margin: 0.5em 0 0;
  }
  .technical-proof-details .proof-grid dt {
    font-family: var(--sans); text-transform: uppercase;
    letter-spacing: 0.06em; font-size: 0.72em; font-weight: 600;
    color: var(--muted); align-self: start;
    padding: 0.85em 1.6em 0.85em 0;
    border-bottom: 1px solid var(--line);
  }
  .technical-proof-details .proof-grid dd {
    padding: 0.85em 0; margin: 0; border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
  }
  /* Hashes = flat mono ground-truth, not a boxy pill. */
  .technical-proof-details .proof-grid dd code {
    background: none; padding: 0; color: var(--ink);
    font-family: var(--mono); font-size: 0.86em;
    letter-spacing: -0.01em; word-break: break-all; line-height: 1.5;
  }
  /* Blue = clickable / on-chain only. */
  .technical-proof-details .proof-grid dd a code { color: var(--anchor); }
  .technical-proof-details .proof-grid dd .meta {
    display: block; margin-top: 0.3em; color: var(--muted);
    font-size: 0.82em; word-break: normal;
  }
  .technical-proof-details .proof-grid dt .dt-plain {
    text-transform: none; letter-spacing: 0;
  }

  /* Dim unit suffix so figures read on magnitude, not noise. */
  .unit { color: var(--muted); font-size: 0.82em; margin-left: 0.35em;
          font-family: var(--sans); }

  /* Inline copy affordance glued to a hash value. Reuses
     copy-buttons.js (.copy-btn[data-copy]); copy-glyph just restyles
     it from a bordered button into a quiet inline glyph. */
  .copy-glyph {
    background: none; border: 0; cursor: pointer; padding: 0 0.2em;
    margin-left: 0.4em; color: var(--muted);
    font-family: var(--sans); font-size: 0.72em; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    vertical-align: baseline; line-height: 1; border-radius: 3px;
  }
  .copy-glyph:hover { background: none; color: var(--accent); }
  .copy-glyph.copied { background: none; color: var(--ok); border: 0; }