/* Shared POSY navigation and field pages. */
.topbar { position: sticky; top: 0; z-index: 80; height: 64px; background: var(--surface); border-bottom: 1px solid var(--shadow); }
.topbar nav.container { width: 100%; max-width: none; height: 64px; min-height: 64px; padding: 0 16px; display: flex; flex-wrap: nowrap; gap: 12px; }
.topbar .wordmark { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; flex-shrink: 0; min-height: 44px; }
.wordmark img { flex: 0 0 28px; }
.topbar .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 0 auto; width: auto; min-width: 0; flex: 1; }
.nav-pages { display: flex; position: relative; align-items: center; gap: 8px; }
.topbar .nav-pages a { font-size: 13px; min-height: 44px; min-width: 44px; padding: 0 3px; display: inline-flex; justify-content: center; text-decoration: none; white-space: nowrap; }
.topbar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-underline { position: absolute; bottom: 2px; left: 0; width: 1px; height: 2px; background: var(--jade-text); transform-origin: left; transform: scaleX(0); transition: transform 220ms cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.nav-pills { display: flex; align-items: center; gap: 6px; }
.topbar .nav-pill, .topbar .nav-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--shadow); border-radius: 999px; font-size: 11px; line-height: 1.25; text-decoration: none; }
.topbar .settle-pill { max-width: 150px; background: var(--ground); }
.topbar .ca-pill { white-space: nowrap; }
.topbar .nav-primary { background: var(--jade); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; border-color: transparent; }
.topbar .wallet-wrap { margin: 0; flex-shrink: 1; gap: 0; max-width: 182px; grid-template-columns: auto minmax(0,1fr); }
.topbar #navConnect { min-height: 44px; padding: 0 8px; font-size: 12px; border-radius: 999px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
.topbar #navWalletIcon img, .topbar #navWalletIcon .wallet-glyph { width: 20px; height: 20px; }
.topbar #walletBalance { font-size: 10px; line-height: 12px; margin: 0; white-space: nowrap; }
.topbar .nav-burger { display: none; min-width: 44px; min-height: 44px; }
:focus-visible { outline: 3px solid var(--jade-text); outline-offset: 3px; }
a[href], button, input, summary { min-height: 44px; }
a[href] { display: inline-flex; align-items: center; }
[hidden] { display: none !important; }
body.nav-open { overflow: hidden; }
.page-link { gap: 12px; margin-top: 24px; min-height: 44px; text-underline-offset: 6px; }
.section > .page-link { align-self: end; }
.diamond-band > .page-link { color: var(--diamond); margin-inline: 40px; }
.field-pages { padding-bottom: 80px; }
.page-intro { padding: 80px 0 32px; max-width: 60ch; }
.page-intro h1 { font-size: clamp(56px,7vw,100px); margin-top: 20px; }
.page-intro p { color: var(--muted); }
.page-section { max-width: 100%; padding-block: 48px; border-top: 1px solid var(--shadow); }
.page-section > .icon-plate { margin-bottom: 24px; }
.page-section h2 { margin-bottom: 24px; }
.page-section p { max-width: 60ch; }
.page-card { background: var(--surface); border-radius: 20px; padding: 32px; box-shadow: 0 1px 2px var(--shadow), 0 24px 48px var(--shadow); border: 1px solid var(--shadow); }
.clock-card { display: grid; grid-template-columns: minmax(180px,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.grip-clock { position: relative; width: min(100%,300px); aspect-ratio: 1; margin: auto; }
.grip-clock svg { width: 100%; transform: rotate(-90deg); }
.grip-clock circle { fill: none; stroke-width: 5px; }
.clock-track { stroke: var(--ground); }
.clock-fill { stroke: var(--jade-text); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 220ms cubic-bezier(0.22,1,0.36,1); }
.grip-clock output { position: absolute; inset: 24%; display: grid; place-items: center; text-align: center; }
.clock-card label, .clock-card input { display: block; width: 100%; }
.clock-card button { margin-top: 20px; }
.reading-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.reading-grid div { border-bottom: 1px solid var(--shadow); padding: 16px 0; }
.reading-grid dd { margin: 12px 0 0; overflow-wrap: anywhere; }
.rule-lines { list-style: none; padding: 0; line-height: 2; }
.step-grid { counter-reset: step; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; }
.step-grid li { counter-increment: step; }
.step-grid li::before { content: counter(step,decimal-leading-zero); display: block; color: var(--muted); margin-bottom: 24px; }
.step-grid .icon-plate { margin-bottom: 24px; }
.step-grid h3 { margin-bottom: 16px; }
.page-section .settle-diagram { max-width: 820px; margin-bottom: 32px; }
.receipt { margin-top: 24px; }
.receipt summary { cursor: pointer; padding-block: 8px; }
.receipt-summary { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 18px; }
.receipt table { width: 100%; text-align: left; border-collapse: collapse; }
.receipt th, .receipt td { padding: 16px 12px; border-bottom: 1px solid var(--ground); overflow-wrap: anywhere; }
.receipt-scroll { overflow-x: auto; }
.address-list > div { padding-block: 20px; border-bottom: 1px solid var(--shadow); }
.address-list dd { margin: 12px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.address-list code { overflow-wrap: anywhere; }
.verification-line, #copyStatus { display: block; margin-top: 24px; }
.publication-list { list-style: none; padding: 0; }
.publication-list li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--shadow); }
.publication-list time { font-size: 18px; color: var(--muted); }
.hub-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer .wordmark { gap: 8px; }
@media (min-width: 1280px) { .topbar nav.container { padding-inline: 24px; gap: 24px; } .topbar .nav-links { gap: 24px; } .nav-pages { gap: 12px; } .topbar .nav-pages a { font-size: 14px; } .topbar .nav-pill { font-size: 12px; } }
@media (max-width: 1023px) {
 .topbar nav.container { justify-content: space-between; }
 .topbar .nav-burger { display: flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 8px; }
 .nav-burger span { display: block; width: 20px; height: 2px; background: currentColor; }
 .topbar .nav-links { display: none; position: fixed; top: 64px; bottom: 0; left: 0; right: 0; height: calc(100dvh - 64px); overflow-y: auto; padding: 24px; background: var(--surface); margin: 0; width: 100%; align-items: stretch; justify-content: flex-start; }
 .topbar .nav-links.is-open { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 24px; }
 .nav-pages { flex-direction: column; align-items: stretch; gap: 0; }
 .topbar .nav-pages a { font-size: 22px; justify-content: flex-start; padding-block: 8px; }
 .nav-underline { display: none; }
 .topbar .nav-pages a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; }
 .nav-pills { flex-wrap: wrap; }
 .topbar .nav-pill, .topbar .nav-primary { font-size: 16px; }
 .topbar .settle-pill { max-width: none; }
 .topbar .wallet-wrap { max-width: 100%; align-self: flex-start; }
 .topbar #navConnect { font-size: 16px; padding-inline: 16px; }
 .topbar #walletBalance { font-size: 14px; line-height: 20px; }
 .step-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) { .clock-card, .reading-grid { grid-template-columns: minmax(0,1fr); } .publication-list li { grid-template-columns: 1fr; gap: 8px; } .page-intro { padding-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .nav-underline, .clock-fill { transition: none; } }

.hero > .page-link, .split > .page-link { grid-column: 1 / -1; }