/* COMPD · shared consistency layer (2026-10-13)
   Loaded last on every page. Aligns every page to one frame, boxes loose text blocks,
   and gives all pages the same footer. Colours/fonts come from compd-system.css. */

html, body { overflow-x: clip; }
:root { --frame: min(1380px, calc(100% - var(--page-gutter) - var(--page-gutter))); --box-bg: linear-gradient(145deg, rgba(25, 26, 23, .9), rgba(14, 15, 13, .92)); }

/* Quick cross-page fade where the browser supports it (Chrome/Edge). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- one shared frame: left/right edges line up on every page ---------- */
.flow-page > .surface, .flow-rules, .flow-closing { width: var(--frame); margin-right: auto; margin-left: auto; box-sizing: border-box; }
.flow-page > .surface { margin-top: 24px; }
.architecture { max-width: none; }

/* ---------- loose text → boxes ---------- */
/* Flow: the two step explanations under each diagram */
.flow-steps { gap: 14px; }
.flow-steps li { padding: 20px 22px 20px 62px; border: 1px solid var(--line-soft); background: var(--box-bg); }
.flow-steps li::before { top: 22px; left: 22px; }

/* Flow: buyback policy figures as individual tiles, footnote as a note */
.flow-rules { padding: 64px 0 0; }
.flow-policy { gap: 10px; border: 0; }
.flow-policy > div, .flow-policy > div:nth-child(n) { border: 1px solid var(--line-soft); background: var(--box-bg); padding: 18px 20px; }
.flow-footnote { max-width: none; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line-soft); border-left: 1px solid var(--gold); background: rgba(12, 12, 10, .6); }

/* Flow: closing statement as one framed panel */
.flow-closing { margin-top: 56px; padding: 64px clamp(20px, 4vw, 48px) 68px; border: 1px solid var(--line-soft); background: radial-gradient(ellipse 52% 76% at 50% 0%, rgba(116, 69, 30, .12), transparent 78%), var(--box-bg); }

/* Read-only data panels (Treasury / Agent / Flow / Protocol): sub-lists and status lines get their own box */
.protocol-observation > p[role="status"] { display: inline-block; margin: 0 0 14px; padding: 6px 11px; border: 1px solid var(--line-soft); background: rgba(12, 13, 12, .64); font-size: 13px; }
.protocol-observation h3 { margin: 24px 0 10px; font-size: 15px; font-weight: 500; }
.protocol-observation h3 + div:not([class]), .protocol-observation h3 + div[class=""], .protocol-observation h3 + p.protocol-note, .protocol-observation .execution-empty,
.protocol-observation div[data-compd-holders], .protocol-observation div[data-compd-payouts], .protocol-observation div[data-compd-contracts], .protocol-observation div[data-compd-recovery], .protocol-observation div[data-compd-recoverable-vaults],
.protocol-observation div[data-compd-burns], .protocol-observation div[data-compd-jobs], .protocol-observation div[data-compd-evaluations], .protocol-observation div[data-compd-routes], .protocol-observation div[data-compd-prices], .protocol-observation div[data-compd-blockers], .protocol-observation div[data-compd-positions], .protocol-observation div[data-compd-observation-history] {
  display: block; max-width: none; margin: 0 0 10px; padding: 13px 16px; border: 1px solid var(--line-soft); background: rgba(12, 13, 12, .64); color: #c9c1b4; font-size: 14px; line-height: 1.65; }
.protocol-observation details > p { padding: 13px 16px; border: 1px solid var(--line-soft); border-left: 1px solid var(--gold); background: rgba(12, 12, 10, .6); }

/* ---------- footer: same layout on every page ---------- */
.site-footer { position: relative; z-index: 1; width: var(--frame); margin: 72px auto 0; padding: 40px 0 30px; border-top: 1px solid var(--line-soft); box-sizing: border-box; }
/* solid backdrop so particles never sit behind footer text */
.site-footer::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(180deg, rgba(10, 10, 9, .9), #090908 40%); content: ''; }
.app-wrap > .site-footer { margin-top: 56px; padding-top: 40px; }
.site-footer .footer-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 32px 64px; padding-bottom: 30px; }
.site-footer .footer-identity p { margin: 8px 0 0 37px; }
.footer-note { display: block; max-width: 38ch; margin: 16px 0 0 37px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(150px, auto)); gap: 0 64px; }
.footer-col { display: grid; align-content: start; gap: 11px; }
.footer-col b { margin-bottom: 3px; color: var(--subtle); font: 400 11px/1.4 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer-col a { width: fit-content; color: #c9c1b4; font-size: 14px; transition: color .18s ease; }
.footer-col a:hover, .footer-col a:focus-visible, .footer-top:hover, .footer-top:focus-visible { color: var(--amber); }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.footer-bottom .footer-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-top { color: #c9c1b4; font: 11px/1 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; transition: color .18s ease; }

@media (max-width: 760px) {
  .site-footer { margin-top: 52px; padding-top: 32px; }
  .site-footer .footer-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .footer-note { margin-left: 0; }
  .site-footer .footer-bottom { align-items: flex-start; flex-direction: column; }
  .flow-steps li { padding: 18px 18px 18px 54px; }
  .flow-steps li::before { left: 18px; top: 20px; }
  .flow-closing { padding: 44px 18px 48px; }
}

.arrow-mark { display: inline-block; width: .85em; height: .85em; flex: 0 0 auto; margin-left: .16em; color: currentColor; vertical-align: -.1em; }