/* Cross-Border Cockpit, added to styles.css: two more rail hues (r8 GL1 PC, r9 Appia on Hoodi) and the five project hues (p0 to p4),
   each at 3:1 or more against the chart surface of its theme, then the project cards and the tokenised central bank money section. */
:root { --r8: #0e8a9e; --r9: #9a6b35; --p0: #2a78d6; --p1: #0e8a9e; --p2: #7a45c4; --p3: #b76e00; --p4: #6b7686; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --r8: #22b0c6; --r9: #c08a4f; --p0: #3987e5; --p1: #22b0c6; --p2: #a07ce8; --p3: #d99a2b; --p4: #95a1b4; }
}
:root[data-theme="dark"] { --r8: #22b0c6; --r9: #c08a4f; --p0: #3987e5; --p1: #22b0c6; --p2: #a07ce8; --p3: #d99a2b; --p4: #95a1b4; }

/* project tiles: each a button that sets the project filter */
.ptiles { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ptile { font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 10px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ptile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), var(--shadow); }
.ptile:hover { border-color: var(--ink2); }
.ptile .ph { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptile .pn { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm { min-width: 24px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--ink); color: var(--bg); font-style: normal; font-size: 11px;
  font-weight: 700; letter-spacing: .03em; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ptile .pv b { font-size: 22px; font-weight: 640; }
.ptile .pv small, .ptile .plast { font-size: 12px; color: var(--muted); }
.ptile .psp { display: block; }
.spark { display: block; width: 100%; height: 34px; }

/* tokenised central bank money */
.grid-t { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ccy { justify-self: start; }
.alluvial, .supply { position: relative; }
.alluvial svg, .supply svg { display: block; width: 100%; height: auto; }
.alluvial .node { cursor: default; }
.alluvial .node:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2.5; }
.alluvial .band { mix-blend-mode: normal; transition: stroke-opacity .15s; }
.supply.multiples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.supply .cell { position: relative; min-width: 0; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.witness { color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { .alluvial .band { transition: none; } }
@media (max-width: 1100px) {
  .grid-t { grid-template-columns: minmax(0, 1fr); }
  .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply.multiples { grid-template-columns: minmax(0, 1fr); }
}

/* demonstration banner */
.demo { margin: 0; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-left-width: 4px; border-radius: 10px;
  background: var(--panel-2); font-size: 13px; color: var(--ink2); }

/* tables and marks of the central bank money section */
.scale-note { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
details.tbl { border-top: 1px solid var(--line); padding-top: 6px; }
details.tbl .tw { max-height: 22rem; margin-top: 6px; }
.t.recon td small, .t td small { display: block; font-size: 11px; color: var(--muted); }
.t td.ok { color: var(--live); }
.t td.warn { color: var(--warn); font-weight: 600; }
.t caption { caption-side: top; text-align: left; font-size: 12.5px; color: var(--ink2); padding: 0 0 6px; }
#recon { display: grid; gap: 8px; }
#recon .tw { max-height: none; }
ul.by { margin: 6px 0 0; padding-left: 1.1rem; font-size: 12.5px; color: var(--ink2); display: grid; gap: 3px; }
.legend .sw.op { background: var(--ink2); }
.alluvial .band { cursor: pointer; }
.alluvial .node { cursor: pointer; }
.mx td.pick { cursor: pointer; }
.mx td.pick:hover { outline: 1.5px solid var(--ink2); outline-offset: -1px; }
tr.pick { cursor: pointer; }
tr.pick:hover td { background-color: color-mix(in srgb, var(--ink) 5%, transparent); }

/* transactions behind a mark */
.drill { border-left: 4px solid var(--accent); }
.drill-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.drill-bar a.tbtn { text-decoration: none; }
.t.legs td { white-space: nowrap; }
.t.legs td:first-child { font-family: var(--mono); font-size: 12px; }
.t.legs tbody tr { box-shadow: inset 3px 0 0 var(--rail, var(--line)); }
#drill-list { max-height: 34rem; }

[hidden] { display: none !important; }

/* the lean layout: four headline figures, closed sections for the detail, more filters folded */
#figures.readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demo { padding: 5px 12px; font-size: 12.5px; }
.take { font-size: 12.5px; color: var(--muted); }
.morefilters { border: 0; padding: 0; }
.morefilters > summary { font-size: 13px; color: var(--ink2); cursor: pointer; padding: 5px 4px; }
.morefilters[open] { flex-basis: 100%; }
.morefilters .mf { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 6px; }
details.more { border: 1px solid var(--line); border-radius: 14px; padding: 0; }
details.more > summary { padding: 12px 18px; font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); cursor: pointer; list-style-position: inside; }
details.more[open] > summary { border-bottom: 1px solid var(--line); }
details.more .more-body { padding: 14px 18px 16px; display: grid; gap: 12px; position: relative; }
details.more .card { padding: 0; }
.witness { color: var(--ink2); }
@media (max-width: 640px) { #figures.readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }