:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:#0f1115; color:#e8eaf0; }
a { color:#8ab4ff; text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { display:flex; align-items:center; gap:20px; padding:14px 24px; background:#171a21; border-bottom:1px solid #2d3340; position:sticky; top:0; z-index:20; }
.site-header .brand { font-weight:800; font-size:20px; white-space:nowrap; }
.site-header .brand a { color:#fff; }
.nav-panel { display:flex; align-items:center; gap:16px; flex:1; min-width:0; }
nav { display:flex; gap:14px; flex:1; overflow-x:auto; white-space:nowrap; }
.nav-account { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.site-header form { margin:0; }
.nav-toggle { display:none; width:42px; height:38px; padding:8px; align-items:center; justify-content:center; flex-direction:column; gap:4px; background:#252b36; border:1px solid #3a4352; }
.nav-toggle-bar { display:block; width:21px; height:2px; border-radius:2px; background:#e8eaf0; transition:transform .16s ease, opacity .16s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.user-badge { white-space:nowrap; font-size:12px; font-weight:800; letter-spacing:.02em; padding:6px 9px; border-radius:999px; background:#242a35; border:1px solid #3a4352; color:#c9d3e4; }
.user-badge.viewer { background:#14243a; border-color:#31547e; color:#b8d8ff; }
button,.button-link { border:0; border-radius:7px; padding:9px 14px; cursor:pointer; background:#343b48; color:#fff; font-weight:600; display:inline-block; }
button:hover,.button-link:hover { filter:brightness(1.1); text-decoration:none; }
button.secondary { background:#252b36; }
main { padding:24px; max-width:1700px; margin:auto; }
h1,h2,h3 { color:#fff; }
h1 { margin-top:4px; }
.lede,.muted,.meta { color:#a9b0bf; }
.page-heading-row,.section-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.section-heading-row { align-items:flex-end; margin-top:16px; }
.live-status { white-space:nowrap; margin-top:8px; padding:7px 10px; border-radius:999px; border:1px solid #315a43; background:#14251b; color:#9fd3b0; font-size:13px; font-weight:700; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#5fca7a; margin-right:6px; box-shadow:0 0 0 3px rgba(95,202,122,.12); }
.live-status.live-error { border-color:#775b2e; background:#271f13; color:#e0bb78; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px; margin:20px 0 30px; }
.cards.compact-cards { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:22px; }
.card { background:#191d25; border:1px solid #2d3340; border-radius:12px; padding:17px; display:flex; flex-direction:column; gap:5px; min-height:110px; }
.card strong { font-size:30px; }.card span,.card small { color:#a9b0bf; }.card.attention { border-color:#d89b35; box-shadow:0 0 0 1px rgba(216,155,53,.15); }
.compact-cards .card { min-height:90px; }.compact-cards .card strong { font-size:20px; }
.panel { background:#171b23; border:1px solid #303744; border-radius:12px; padding:18px; margin:18px 0 28px; }
.panel.narrow { max-width:520px; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; background:#151922; margin-bottom:26px; }
th,td { text-align:left; vertical-align:top; border-bottom:1px solid #2b313d; padding:9px 10px; }
/* Keep table headers in their normal table flow. The old global sticky rule caused
   headers to float over data rows as the dashboard was scrolled. */
th { color:#b9c2d3; background:#1b202a; }
table.compact { max-width:1000px; }
.pre { white-space:pre-wrap; max-width:760px; line-height:1.35; overflow-wrap:anywhere; }
code { color:#b9d1ff; }
.approval { border:1px solid #303744; border-radius:12px; background:#171b23; padding:18px; margin:14px 0; }
.approval.pending { border-color:#d89b35; }
.decision-form { display:flex; gap:8px; margin-top:14px; align-items:center; }
.decision-form input { flex:1; margin:0; }
.stack-form { margin-top:14px; padding:12px; border:1px solid #6b5b31; border-radius:8px; background:#211e16; }
.approve { background:#2f8f55; color:white; }.reject { background:#9c3b3b; color:white; }
input,textarea,select { width:100%; padding:10px; margin:5px 0 14px; background:#0e1117; border:1px solid #343b48; color:white; border-radius:7px; font:inherit; }
textarea { resize:vertical; }
label { display:block; font-weight:650; margin-top:8px; }
.inline-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.inline-form label { flex:1; min-width:230px; }
.inline-form input { margin-bottom:0; }
.actions-row { margin:20px 0; }
.settings-section { margin:24px 0 34px; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px 18px; }
.setting-field { background:#171b23; border:1px solid #303744; border-radius:10px; padding:13px; margin:0; }
.setting-field input,.setting-field select { margin-bottom:7px; }
.setting-field small { display:block; color:#8f98a9; font-weight:400; line-height:1.35; }
.readonly-note { padding:10px 12px; border-radius:8px; border:1px solid #31547e; background:#14243a; color:#b8d8ff; margin:12px 0; }
.lineage { max-width:950px; margin:20px 0; }
.lineage-node { background:#171b23; border:1px solid #303744; border-radius:11px; padding:14px 16px; display:grid; gap:5px; }
.lineage-node small { color:#a9b0bf; }.lineage-type { color:#8ab4ff; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.08em; }
.lineage-arrow { padding:5px 0 5px 28px; color:#717b8d; font-size:20px; }
.login-card { max-width:420px; margin:10vh auto; padding:28px; background:#171b23; border:1px solid #303744; border-radius:14px; }
.error { color:#ff8f8f; margin-bottom:10px; }
.flash { margin:0 0 18px; padding:12px 14px; border-radius:8px; border:1px solid; }
.flash.success { border-color:#397b55; background:#14251b; }
.flash.error-box { border-color:#8d4343; background:#2a1717; }
.warning-banner { background:#271f13; border:1px solid #775b2e; border-radius:10px; padding:14px; margin:15px 0 22px; }
.legal-box { background:#11161d; border-left:4px solid #7091c8; margin-top:14px; padding:12px; }
.row-warning { background:#231f14; }.row-danger { background:#281616; }

/* --------------------------------------------------------------------------
   About / roadmap — deliberately visual and non-technical for operators/viewers.
   -------------------------------------------------------------------------- */
.about-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding:18px 0 10px; }
.about-hero > div:first-child { max-width:980px; }
.about-hero h1 { font-size:clamp(34px,5vw,62px); line-height:1.02; margin:8px 0 14px; letter-spacing:-.035em; }
.about-hero .lede { font-size:18px; line-height:1.6; max-width:900px; }
.eyebrow { display:inline-block; font-size:12px; letter-spacing:.16em; font-weight:900; color:#83b6ff; }
.about-tabs { display:flex; gap:6px; background:#171b23; border:1px solid #303744; border-radius:10px; padding:5px; white-space:nowrap; }
.about-tab { padding:9px 13px; border-radius:7px; color:#b8c4d8; font-weight:750; }
.about-tab:hover { background:#202631; text-decoration:none; }
.about-tab.active { background:#2d3747; color:#fff; }
.about-callout { display:flex; gap:12px; align-items:flex-start; padding:16px 18px; margin:22px 0 38px; border:1px solid #31547e; border-radius:12px; background:linear-gradient(135deg,#14243a,#151c28); line-height:1.55; }
.about-callout strong { flex:0 0 auto; color:#cfe4ff; }
.about-callout.subtle { margin:22px 0; border-color:#3a4352; background:#171b23; }
.about-section { max-width:1250px; margin:0 auto 54px; }
.about-section > h2 { font-size:30px; margin-bottom:10px; }
.about-section > p { max-width:1000px; line-height:1.68; color:#c6ccd7; }

.flow-diagram { max-width:1050px; margin:24px auto; padding:24px; border:1px solid #303744; border-radius:16px; background:radial-gradient(circle at top,#1b2230 0,#13171e 52%,#11141a 100%); }
.flow-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:950px; margin:0 auto; }
.flow-row.flow-sources { max-width:850px; }
.flow-node { max-width:700px; margin:0 auto; width:100%; border:1px solid #3a4352; border-radius:11px; padding:14px 16px; text-align:center; background:#1a1f29; }
.flow-node strong { display:block; font-size:16px; color:#fff; }
.flow-node small { display:block; margin-top:5px; color:#aeb8c8; line-height:1.35; }
.flow-node.source { background:#161d29; border-color:#2c4565; }
.flow-node.primary { background:#152337; border-color:#315b91; }
.flow-node.institutional { background:#1e1c29; border-color:#4f4568; }
.flow-node.gate { background:#211f17; border-color:#665b35; }
.flow-arrow { text-align:center; color:#7185a4; font-size:23px; line-height:1; padding:8px 0; }
.flow-arrow.split { letter-spacing:.1em; }
.flow-stop { max-width:720px; margin:0 auto; text-align:center; padding:15px; border-radius:11px; background:#28191a; border:1px solid #714044; }
.flow-stop strong,.flow-stop span { display:block; }
.flow-stop strong { color:#ffb4b8; margin-bottom:5px; }
.flow-stop span { color:#d8b5b7; font-size:13px; }

.role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:22px; }
.role-card { padding:18px; border:1px solid #303744; border-radius:12px; background:#171b23; }
.role-card h3 { margin:8px 0; }
.role-card p { color:#aeb6c4; line-height:1.55; margin-bottom:0; }
.role-kind { display:inline-block; font-size:10px; letter-spacing:.12em; font-weight:900; border:1px solid; border-radius:999px; padding:4px 7px; }
.role-kind.evolves { color:#a9dbb8; border-color:#3d7550; background:#14251b; }
.role-kind.fixed { color:#bdcdec; border-color:#445a80; background:#162033; }
.role-kind.deterministic { color:#f0ca8d; border-color:#735c34; background:#282014; }
.role-kind.human { color:#d6c3f0; border-color:#675181; background:#211a2a; }

.evolution-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); gap:18px; align-items:start; }
.evolution-cycle { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:30px 20px; min-height:250px; border:1px solid #303744; border-radius:16px; background:#13171e; }
.cycle-node { width:125px; min-height:95px; padding:14px 10px; text-align:center; display:flex; flex-direction:column; justify-content:center; border-radius:50%; border:1px solid #3d526e; background:#182131; }
.cycle-node strong { color:#fff; }.cycle-node small { color:#aab5c6; margin-top:4px; }
.cycle-arrow { font-size:22px; color:#7185a4; }
.evolution-notes { margin:0; }
.evolution-notes p { line-height:1.5; margin:0 0 13px; color:#b9c1cf; }
.evolution-notes p:last-child { margin-bottom:0; }

.money-loop { display:flex; align-items:stretch; gap:8px; margin:26px 0; }
.money-step { flex:1; min-width:0; border:1px solid #31547e; border-radius:12px; background:#142033; padding:16px; }
.money-step > span { display:flex; width:27px; height:27px; align-items:center; justify-content:center; border-radius:50%; background:#2d527e; color:#fff; font-weight:900; font-size:12px; }
.money-step strong,.money-step small { display:block; }
.money-step strong { margin:10px 0 4px; color:#fff; }.money-step small { color:#aebbd0; line-height:1.35; }
.money-arrow { align-self:center; color:#7185a4; font-size:21px; }
.boundary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.boundary-card { border:1px solid; border-radius:13px; padding:18px 20px; }
.boundary-card h3 { margin-top:0; }.boundary-card ul { padding-left:19px; color:#bcc3cf; line-height:1.65; }
.boundary-card.yes { border-color:#315f43; background:#142019; }.boundary-card.no { border-color:#704347; background:#241718; }
.about-next { max-width:1250px; margin:15px auto 20px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px; border-radius:14px; border:1px solid #30445e; background:#151d29; }
.about-next p { color:#aeb6c4; margin:6px 0 0; }

.roadmap-legend { display:flex; flex-wrap:wrap; gap:18px; margin:18px 0 38px; color:#aeb6c4; font-size:13px; }
.roadmap-legend span { display:flex; align-items:center; gap:7px; }.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }.legend-dot.historical { background:#737d8c; }.legend-dot.current { background:#5fa4ff; }.legend-dot.planned { background:#7ed69a; }.legend-dot.direction { background:#c8a0ff; }
.roadmap-timeline { position:relative; max-width:1250px; margin:0 auto; }
.roadmap-timeline::before { content:""; position:absolute; top:16px; bottom:30px; left:45px; width:2px; background:#303744; }
.roadmap-version { position:relative; display:grid; grid-template-columns:90px minmax(0,1fr); gap:20px; margin-bottom:32px; }
.roadmap-marker { z-index:1; width:90px; display:flex; justify-content:center; }
.roadmap-marker span { display:flex; width:62px; height:62px; align-items:center; justify-content:center; border-radius:50%; border:2px solid #46505f; background:#171b23; font-weight:900; color:#d0d5df; }
.roadmap-version.current .roadmap-marker span { border-color:#477db8; color:#a9d1ff; background:#152337; }.roadmap-version.planned .roadmap-marker span { border-color:#3f7a51; color:#aeedc1; background:#14251b; }.roadmap-version.direction .roadmap-marker span { border-color:#765598; color:#dec7f5; background:#22192c; }
.roadmap-content { border:1px solid #303744; border-radius:14px; background:#171b23; padding:22px; }
.roadmap-version.current .roadmap-content { border-color:#304d70; }.roadmap-version.current.accent .roadmap-content { background:#151d29; }.roadmap-version.planned .roadmap-content { border-color:#315d3e; }.roadmap-version.direction .roadmap-content { border-color:#594369; }
.roadmap-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:10px; }
.roadmap-heading h2 { margin:5px 0 0; }.roadmap-heading > strong { color:#8f9aab; font-size:13px; text-align:right; max-width:240px; }
.roadmap-status { text-transform:uppercase; font-size:10px; letter-spacing:.13em; font-weight:900; color:#8291a7; }
.roadmap-content > p { color:#b7bfcc; line-height:1.62; max-width:1000px; }
.roadmap-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }.roadmap-columns > div { padding:15px 17px; background:#13171e; border-radius:10px; }.roadmap-columns h3 { margin:0 0 8px; font-size:16px; }.roadmap-columns ul { margin:0; padding-left:18px; color:#aeb6c4; line-height:1.6; }
.roadmap-chip-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }.roadmap-chip-grid span { border:1px solid #34445b; background:#141d2a; border-radius:999px; padding:7px 10px; color:#b9c9df; font-size:12px; }.roadmap-chip-grid.large span { padding:9px 12px; }
.roadmap-stage-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }.roadmap-stage { display:flex; gap:12px; padding:14px; border-radius:10px; background:#131b16; border:1px solid #2e4935; }.roadmap-stage > span { flex:0 0 auto; display:flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; background:#28513a; color:#c1e8cc; font-weight:900; font-size:12px; }.roadmap-stage h3 { font-size:15px; margin:3px 0 5px; }.roadmap-stage p { color:#aeb9b0; line-height:1.45; margin:0; font-size:13px; }
.roadmap-principle { margin-top:18px; padding:13px 15px; border-radius:9px; border:1px solid #3f684b; background:#14231a; color:#b8d8c0; }.roadmap-principle.warning { border-color:#6b5836; background:#241e14; color:#d6c198; }
.roadmap-footer { max-width:1160px; margin:18px auto 40px 110px; padding:22px; border-radius:13px; border:1px solid #354052; background:#151a22; }.roadmap-footer p { color:#aeb6c4; line-height:1.6; max-width:900px; }

@media (max-width:1000px) {
    .site-header { justify-content:space-between; gap:12px; padding:12px 16px; }
    .site-header .brand { font-size:18px; }
    .nav-toggle { display:flex; flex:0 0 auto; }
    .nav-panel { display:none; position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 63px); overflow-y:auto; flex-direction:column; align-items:stretch; gap:12px; padding:12px 16px 16px; background:#171a21; border-top:1px solid #2d3340; border-bottom:1px solid #2d3340; box-shadow:0 12px 28px rgba(0,0,0,.35); }
    .nav-panel.open { display:flex; }
    nav { width:100%; display:flex; flex-direction:column; gap:4px; overflow:visible; white-space:normal; }
    nav a { display:block; padding:10px 12px; border-radius:7px; color:#d6e4ff; }
    nav a:hover { background:#202631; text-decoration:none; }
    .nav-account { display:flex; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid #303744; }
    .page-heading-row,.section-heading-row { flex-direction:column; align-items:flex-start; }
    .about-hero { flex-direction:column; align-items:flex-start; }
    .evolution-layout { grid-template-columns:1fr; }
    .money-loop { display:grid; grid-template-columns:1fr; }
    .money-arrow { text-align:center; transform:rotate(90deg); }
    .roadmap-stage-list { grid-template-columns:1fr; }
}

@media (max-width:800px) {
    main { padding:12px; }
    table { font-size:13px; min-width:800px; }
    .decision-form { flex-direction:column; align-items:stretch; }
    .settings-grid { grid-template-columns:1fr; }
    .cards,.cards.compact-cards { grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:10px; }
    .card { padding:14px; min-height:96px; }
    .card strong { font-size:26px; }
    .flow-row { grid-template-columns:1fr; }.flow-arrow.split { font-size:0; }.flow-arrow.split::after { content:"↓"; font-size:23px; }
    .boundary-grid,.roadmap-columns { grid-template-columns:1fr; }
    .evolution-cycle { flex-direction:column; }.cycle-arrow { transform:rotate(90deg); }
    .roadmap-timeline::before { left:29px; }.roadmap-version { grid-template-columns:60px minmax(0,1fr); gap:10px; }.roadmap-marker { width:60px; }.roadmap-marker span { width:52px; height:52px; font-size:13px; }.roadmap-content { padding:17px; }.roadmap-heading { flex-direction:column; }.roadmap-heading > strong { text-align:left; }.roadmap-footer { margin-left:70px; }
}

@media (max-width:520px) {
    .nav-account { flex-direction:column; align-items:stretch; }
    .nav-account .user-badge { align-self:flex-start; }
    .nav-account form button { width:100%; }
    .settings-grid { grid-template-columns:minmax(0,1fr); }
    .panel,.approval { padding:14px; }
    .inline-form label { min-width:100%; }
    .about-hero h1 { font-size:36px; }.about-tabs { width:100%; }.about-tab { flex:1; text-align:center; }.about-callout { flex-direction:column; }.flow-diagram { padding:15px 10px; }.role-grid { grid-template-columns:1fr; }.about-next { flex-direction:column; align-items:flex-start; }.roadmap-legend { gap:10px 14px; }.roadmap-timeline::before { display:none; }.roadmap-version { grid-template-columns:1fr; }.roadmap-marker { width:auto; justify-content:flex-start; }.roadmap-marker span { border-radius:999px; width:auto; height:auto; padding:7px 11px; }.roadmap-footer { margin-left:0; }
}