/* treasury.css — /treasury, redone as Standard Reserve's "Protocol parameters" content area (the live
   /app/protocol/live/ page) in Cognia's design system (treasury redo, round 2). cognia.fun's top nav stays; this
   sheet styles the heading, the five tabs on the sliding highlight, the facts-only status strip, the reference's
   sections (a top hairline, H2, intro, "… →" hand-off links), the bordered value cells (label / value / one-line
   note, 3 across, 2 on phones), the editorial three-up, the compact label/value rows of an epoch, the tables and
   the address cards. The long-form reader is treasury-longform.css; the graphs are treasury-graphs.css.

   Every colour is a Cognia token (tokens.css / tokens-dark.css) or a mix of two; the page-local roles below have
   a dark pair. Small text holds 4.5:1: brand-coloured labels use --tr-acc-ink (the brand deepened toward ink,
   #a84617, 5.6:1 on paper — this subsumes the R2 · QA fix to .pf-eyebrow / .pf-sect-label, 64%), never the
   2.8:1 raw brand; dark keeps the brand (6.1:1). A kind of inflow is a SHAPE plus its label, never colour alone.
   Wide tables scroll inside their own box; the page never scrolls sideways. 44px targets on phones.
   Text measure: the grill's ~68 characters, set in em (33em ≈ 68 Inter characters at any size), not ch — Inter's
   "0" is wider than its average letter, so 68ch let lines run to ~90 characters. */

:root{
  --tr-rule: var(--border);                                       /* hairlines, cell gaps            */
  --tr-tint: var(--divider-warm);                                 /* figure / table ground           */
  --tr-acc-ink: color-mix(in srgb, var(--brand) 62%, var(--ink)); /* brand-coloured small text, AA   */
  --tr-tip-bg: var(--ink-tip);
  --tr-tip-fg: var(--paper);
  --tr-body: color-mix(in srgb, var(--ink) 86%, var(--graphite)); /* long-form body copy             */
  --tr-btn-bg: var(--ink);
  --tr-btn-fg: var(--paper);
  --tr-clear: 100px;                                              /* under the fixed glass nav       */
}
[data-theme="dark"]{
  --tr-rule: color-mix(in srgb, var(--border) 50%, var(--paper));
  --tr-tint: var(--surface);
  --tr-acc-ink: var(--brand);
  --tr-tip-bg: var(--surface-raised);
  --tr-tip-fg: var(--ink);
  --tr-body: color-mix(in srgb, var(--ink) 88%, var(--graphite));
}

.tr-page{ position:relative; }
.tr-muted{ color:var(--graphite); }
.tr-mono{ font-family:var(--font-mono); font-size:var(--fs-base); }
.tr-ico{ width:12px; height:12px; flex:none; }

/* ── the load-time entrance (meridian-motion.md §1.3 #7): heading, tabs, content at 0 / 45 / 90ms ── */
.cx-js .tr-enter{ opacity:0; transform:translateY(12px); }
.cx-js .tr-enter.is-in{
  opacity:1; transform:none;
  transition:opacity .38s ease var(--d, 0ms), transform .46s cubic-bezier(.22,1,.36,1) var(--d, 0ms);
}

/* ── heading ────────────────────────────────────────────────────────────────────────────── */
.tr-head{ max-width:896px; }
.tr-eyebrow{
  font:var(--fw-bold) var(--fs-sm)/16px var(--font-mono); letter-spacing:var(--ls-12);
  text-transform:uppercase; color:var(--tr-acc-ink); margin:0 0 var(--sp-9);
}
.tr-titlerow{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-9) var(--sp-13); }
.tr-titlerow h1{
  font-family:var(--font-display); font-size:clamp(32px, 4.2vw, 43px); font-weight:var(--fw-medium);
  line-height:1.05; letter-spacing:-.035em; color:var(--ink); margin:0;
}
.tr-lede{ margin:var(--sp-11) 0 0; max-width:688px; font-size:var(--fs-2xl); line-height:24px; color:var(--graphite); }
.tr-pillslot{ display:inline-flex; align-items:center; min-height:28px; }
.tr-pill{
  display:inline-flex; align-items:center; gap:var(--sp-6);
  padding:var(--sp-3) var(--sp-9); border:1px solid var(--border); border-radius:var(--r-full);
  background:var(--paper); color:var(--ink);
  font:var(--fw-medium) var(--fs-md)/16px var(--font-mono); letter-spacing:var(--ls-06);
  white-space:nowrap; animation:fade-in var(--dur-300) var(--ease) both;
}
.tr-pill i{ width:7px; height:7px; flex:none; box-sizing:border-box; border-radius:var(--r-circle); background:var(--graphite); }
.tr-pill--proposed i{ background:none; border:1.5px solid var(--warn); }
.tr-pill--active i{ background:var(--ok); }

/* ── the five tabs on the sliding highlight (tabs.js) ───────────────────────────────────── */
.tr-tabs{
  position:relative; display:inline-flex; gap:var(--sp-3); max-width:100%;
  margin-top:var(--sp-18); padding:var(--sp-3);
  border-radius:var(--pf-r-4); background:var(--pf-trough);
}
.tr-tabs__pill{
  position:absolute; top:var(--sp-3); left:0; width:0; height:0;
  border-radius:var(--pf-r-4); background:var(--pf-raised); box-shadow:var(--sh-1-tight);
  opacity:0; pointer-events:none;
}
.tr-tabs.has-pill .tr-tabs__pill{ opacity:1; }
.tr-tabs.is-animated .tr-tabs__pill{
  transition:left .24s var(--mrd-ease-out-quint), top .24s var(--mrd-ease-out-quint),
             width .24s var(--mrd-ease-out-quint), height .24s var(--mrd-ease-out-quint);
}
.tr-tabs__btn{
  position:relative; z-index:1; flex:none; min-height:40px; padding:var(--sp-9) var(--sp-15);
  border:0; border-radius:var(--pf-r-4); background:none; cursor:pointer;
  font:var(--fw-medium) var(--fs-lg)/20px var(--font-body); color:var(--graphite); white-space:nowrap;
  transition:color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.tr-tabs__btn:hover, .tr-tabs__btn[aria-selected="true"]{ color:var(--ink); }
/* before the highlight mounts, the selected tab carries the raised surface itself */
.tr-tabs:not(.has-pill) .tr-tabs__btn[aria-selected="true"]{ background:var(--pf-raised); box-shadow:var(--sh-1-tight); }
.tr-tabs__btn:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
/* phones: 3 + 2 rows, every tab a 44px target */
@media (max-width:679px){
  .tr-tabs{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); width:100%; }
  .tr-tabs__btn{ grid-column:span 2; min-height:44px; padding:var(--sp-7) var(--sp-5); white-space:normal; text-align:center; line-height:17px; }
  .tr-tabs__btn:nth-of-type(n+4){ grid-column:span 3; }
}

/* ── the status strip: facts only (never a liveness claim) ──────────────────────────────── */
.tr-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-15);
  margin-top:var(--sp-15); padding:var(--sp-11) var(--sp-15); min-height:44px;
  border-radius:var(--pf-r-4); background:var(--pf-trough);
  font:var(--fs-lg)/20px var(--font-body); color:var(--ink);
}
.tr-strip:empty{ visibility:hidden; }
.tr-strip p{ margin:0; min-width:0; }
.tr-strip__r{ color:var(--graphite); font-variant-numeric:tabular-nums; }
.tr-count{ color:var(--ink); font-variant-numeric:tabular-nums; }
.tr-roll{ font-variant-numeric:tabular-nums; }
/* the tickers' glyphs are drawn by CSS (src/treasury/ticker.js), so the aria-hidden cells add nothing to the
   text a reader copies; the visually-hidden twin carries the value once */
.tr-g::before{ content:attr(data-g); }
.tr-cells-g{ -webkit-user-select:none; user-select:none; }
/* the host and its twin are inline (not flex items, not absolutely positioned), so a copy or innerText of the
   strip reads "· in 5d 17h" on one line */
.tr-page .price-ticker, .tr-page .ticking{ display:inline; }
.tr-page .price-ticker > .pf-sr, .tr-page .ticking > .pf-sr{
  position:static; display:inline-block; width:1px; height:1px; margin:0 -1px 0 0; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; vertical-align:baseline;
}
.tr-textbtn{
  display:inline-flex; align-items:center; min-height:32px; padding:0; border:0; background:none; cursor:pointer;
  font:var(--fw-medium) var(--fs-lg)/20px var(--font-body); color:var(--ink);
  text-decoration:underline; text-underline-offset:3px;
}
.tr-textbtn:hover{ color:var(--tr-acc-ink); }
.tr-textbtn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }
.tr-textbtn[disabled]{ opacity:.55; cursor:progress; }
@media (max-width:599px){
  .tr-strip{ flex-direction:column; align-items:flex-start; }
  .tr-textbtn{ min-height:44px; }
}

/* ── panels: hidden until chosen; a short rise when one opens (the clone's pi-copy-enter) ── */
.tr-panel{ margin-top:var(--sp-7); min-width:0; scroll-margin-top:var(--tr-clear); }
.tr-panel.is-entering{ animation:tr-rise-10 .25s var(--mrd-ease-out-quint) both; }
@keyframes tr-rise-10{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
#trTabs, .tr-sec, .tr-epoch, .tr-wpsec{ scroll-margin-top:var(--tr-clear); }
/* a deep link moves focus to the section's heading (or the epoch's <details>) with tabindex -1. Tab can never
   land there, so a ring would only ever be the script's: none is drawn. Keyboard rings elsewhere are untouched. */
.tr-wph2[tabindex="-1"]:focus, .tr-h2[tabindex="-1"]:focus, .tr-h3[tabindex="-1"]:focus,
.tr-epoch[tabindex="-1"]:focus, #trPage[tabindex="-1"]:focus{ outline:none; }

/* ── a reference section (.pi-section): a hairline, the H2, its intro, a hand-off link ──── */
.tr-sec{ padding:var(--sp-18) 0 var(--sp-20); border-top:1px solid var(--tr-rule); min-width:0; }
.tr-panel > .tr-sec:first-child{ margin-top:var(--sp-9); }
.tr-sec__head{ margin-bottom:var(--sp-15); max-width:720px; }
.tr-label{
  display:block; margin:0 0 var(--sp-7);
  font:var(--fw-bold) var(--fs-sm)/16px var(--font-mono); letter-spacing:var(--ls-10);
  text-transform:uppercase; color:var(--tr-acc-ink);
}
.tr-h2{ margin:0; font:var(--fw-medium) var(--fs-21)/1.2 var(--font-display); letter-spacing:-.03em; color:var(--ink); }
.tr-h3{ margin:0; font:var(--fw-medium) var(--fs-17)/1.3 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.tr-h4{ margin:var(--sp-15) 0 var(--sp-7); font:var(--fw-medium) var(--fs-sm)/16px var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; color:var(--graphite); }
.tr-intro{ margin:var(--sp-7) 0 0; max-width:33em; font-size:var(--fs-xl); line-height:22px; color:var(--graphite); }
.tr-after{ margin:var(--sp-13) 0 0; max-width:32em; font-size:var(--fs-xl); line-height:22px; color:var(--ink); }
.tr-note{ margin:var(--sp-9) 0 0; max-width:39em; font-size:var(--fs-base-p); line-height:1.6; color:var(--graphite); }
.tr-lead{ margin:0 0 var(--sp-9); max-width:39em; font-size:var(--fs-xl); line-height:1.55; color:var(--ink); }
.tr-lead b{ font-weight:var(--fw-semibold); }
.tr-caveat{ margin:var(--sp-13) 0 0; max-width:39em; font-size:var(--fs-xl); line-height:1.6; color:var(--ink); }
.tr-empty{ margin:0; padding:var(--sp-9) 0; max-width:35em; font-size:var(--fs-xl); line-height:1.6; color:var(--graphite); }
.tr-src{ margin:var(--sp-11) 0 0; max-width:110ch; font:var(--fs-md)/1.55 var(--font-mono); letter-spacing:.02em; color:var(--graphite); }
.tr-src b{ color:var(--ink); font-weight:var(--fw-medium); }
.tr-down{ margin:var(--sp-9) 0; }

/* the hand-off link ("Read the rule in full →"), grey and underlined */
.tr-ref{
  display:inline-flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-15); min-height:32px;
  font-size:var(--fs-lg); color:var(--graphite); text-decoration:underline; text-underline-offset:4px;
  transition:color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.tr-ref:hover{ color:var(--ink); }
.tr-ref .tr-ico{ transition:transform var(--mrd-duration-fast) var(--mrd-ease-in-out); }
.tr-ref:hover .tr-ico{ transform:translateX(2px); }
.tr-ref:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }

/* the actions row: one ink button, one hand-off link */
.tr-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-9) var(--sp-18); margin-top:var(--sp-15); }
.tr-actions .tr-ref{ margin-top:0; }
.tr-btn{
  display:inline-flex; align-items:center; gap:var(--sp-5); min-height:40px; padding:0 var(--sp-15);
  border:1px solid transparent; border-radius:var(--pf-r-4); text-decoration:none; cursor:pointer;
  font:var(--fw-medium) var(--fs-lg)/1 var(--font-body);
  transition:background-color var(--mrd-duration-fast) var(--mrd-ease-in-out), opacity var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.tr-btn--ink{ background:var(--tr-btn-bg); color:var(--tr-btn-fg); }
.tr-btn--ink:hover{ opacity:.86; }
.tr-btn:active{ opacity:.6; }
.tr-btn .tr-ico{ transition:transform var(--mrd-duration-fast) var(--mrd-ease-in-out); }
.tr-btn:hover .tr-ico{ transform:translate(2px,-2px); }
.tr-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ── bordered value cells: label / value / one-line note; 3 across, 2 on phones ─────────── */
.tr-cells{
  --cols:3;
  display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:1px; margin:0;
  background:var(--tr-rule); border:1px solid var(--tr-rule); border-radius:6px; overflow:hidden;
}
.tr-cell{ display:flex; flex-direction:column; gap:var(--sp-5); min-width:0; padding:var(--sp-15); background:var(--paper); }
.tr-cell dt{ font:var(--fs-lg)/20px var(--font-body); color:var(--graphite); }
.tr-cell dd{ margin:0; min-width:0; }
.tr-fig{
  display:block; font:var(--fw-medium) var(--fs-21)/1.15 var(--font-display); letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.tr-cells--acct .tr-fig{ font:var(--fw-medium) var(--fs-17)/1.3 var(--font-mono); letter-spacing:0; }
.tr-cell__n{ font:var(--fs-base)/1.45 var(--font-body); color:var(--graphite); }
/* every grid is whole rows, as on the reference (no spanning cell):
   - the four headline figures: 4 across from 1000px, 2 × 2 below;
   - the accounting's four tiles (long, asset-native values): 2 × 2 at every width;
   - the rule's six parameters: 3 across, 2 on phones;
   - the three tiers: 3 across at every width (short values; 2 on a phone would leave one alone). */
@media (max-width:959px){ .tr-cells{ --cols:2; } }
.tr-cells--head, .tr-cells--acct{ --cols:2; }
@media (min-width:1000px){ .tr-cells--head{ --cols:4; } }
.tr-cells.tr-cells--tiers{ --cols:3; }
/* only if the data file leaves the rule short of six numbers: the last cell takes the rest of its row */
@media (min-width:960px){
  .tr-cells--rule .tr-cell:last-child:nth-child(3n+1){ grid-column:span 3; }
  .tr-cells--rule .tr-cell:last-child:nth-child(3n+2){ grid-column:span 2; }
}
@media (max-width:959px){ .tr-cells--rule .tr-cell:last-child:nth-child(odd){ grid-column:span 2; } }
@media (max-width:599px){
  .tr-cell{ padding:var(--sp-13) var(--sp-11); } .tr-fig{ font-size:var(--fs-19); }
  .tr-cells--tiers .tr-cell{ padding:var(--sp-13) var(--sp-9); }
}
.tr-cells .pf-skel{ margin-bottom:var(--sp-3); }

/* ── the editorial three-up ("Where supply comes from." / …) ────────────────────────────── */
.tr-sec--ed{ padding-top:var(--sp-7); border-top:0; }
.tr-edgrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-22) var(--sp-21); }
.tr-ed{ display:flex; flex-direction:column; align-items:flex-start; padding-top:var(--sp-18); border-top:1px solid var(--tr-rule); min-width:0; }
.tr-ed p{ margin:var(--sp-9) 0 0; font-size:var(--fs-xl); line-height:22px; color:var(--graphite); }
.tr-ed .tr-ref{ margin-top:auto; padding-top:var(--sp-13); }
@media (max-width:759px){ .tr-edgrid{ grid-template-columns:minmax(0,1fr); gap:var(--sp-7); } }

/* ── two columns (graph C: the rule table + formula beside the figure) ──────────────────── */
.tr-two{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sp-18); align-items:start; margin-top:var(--sp-18); }
.tr-two > *{ min-width:0; }
@media (max-width:1023px){ .tr-two{ grid-template-columns:minmax(0,1fr); } }

/* ── tables ─────────────────────────────────────────────────────────────────────────────── */
.tr-scrollbox{ position:relative; min-width:0; max-width:100%; }
.tr-scrollbox::before, .tr-scrollbox::after, .tr-scrollbox__more{
  position:absolute; z-index:1; pointer-events:none; opacity:0;
  transition:opacity var(--dur-200) var(--mrd-ease-out-cubic);
}
.tr-scrollbox::before, .tr-scrollbox::after{ content:""; top:0; bottom:0; width:var(--sp-22); }
.tr-scrollbox::before{ left:0; background:linear-gradient(to right, var(--tr-rule) 0 1px, var(--paper) 1px, transparent); }
.tr-scrollbox::after{ right:0; background:linear-gradient(to left, var(--tr-rule) 0 1px, var(--paper) 1px, transparent); }
/* the "more" chevron sits in its own right-hand gutter (opened only while the table continues past the right
   edge), so it never covers a cell's text */
.tr-scrollbox[data-more~="end"]{ padding-right:30px; }
.tr-scrollbox[data-more~="end"]::after{ right:30px; }
.tr-scrollbox__more{
  z-index:2; top:50%; right:2px; width:24px; height:24px; margin-top:-12px; box-sizing:border-box;
  display:grid; place-items:center; border:1px solid var(--border); border-radius:var(--r-circle);
  background:var(--paper); color:var(--tr-acc-ink);
}
.tr-scrollbox[data-more~="start"]::before, .tr-scrollbox[data-more~="end"]::after,
.tr-scrollbox[data-more~="end"] > .tr-scrollbox__more{ opacity:1; }
.tr-scroll{ max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:var(--r-3); }
.tr-scroll:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.tr-table{ min-width:520px; }
.tr-table thead th{ border-bottom-color:var(--tr-rule); }
.tr-table td, .tr-table th[scope="row"]{ border-bottom:1px solid var(--tr-rule); vertical-align:top; }
.tr-table th[scope="row"]{ text-align:left; font-weight:var(--fw-medium); color:var(--ink); padding:var(--sp-9); }
.tr-table th.num{ text-align:right; }
.tr-sub{ display:block; margin-top:var(--sp-2); font:var(--fs-md) var(--font-mono); color:var(--graphite); white-space:nowrap; letter-spacing:0; }
@media (hover:hover){ .tr-table tbody tr.pf-trow:hover > *{ background:var(--brand-06); } }
.tr-acct{ min-width:560px; }
.tr-sources{ min-width:600px; }
.tr-allocs{ min-width:760px; }
.tr-allocs .tr-reason .tr-v{ display:block; min-width:220px; max-width:36ch; white-space:normal; }
.tr-allocs .tr-chip{ text-transform:none; letter-spacing:0; }
.tr-contrib{ min-width:760px; }
.tr-who, .tr-tiercell{ white-space:nowrap; }
.tr-v{ min-width:0; }
/* phones: each contributor is a card of label / value rows (the proof .pf-stack idea, kept local), so the
   Receipt — where "Paid" proves a transaction exists — is on screen without a sideways scroll */
@media (max-width:599px){
  .tr-stack{ min-width:0; }
  .tr-stack thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tr-stack, .tr-stack tbody, .tr-stack tr, .tr-stack th, .tr-stack td{ display:block; width:auto; }
  .tr-stack tr.pf-trow{ margin:0 0 var(--sp-7); padding:var(--sp-9) var(--sp-11) var(--sp-5); border:1px solid var(--tr-rule); border-radius:6px; background:var(--paper); }
  .tr-stack tr.pf-trow:last-child{ margin-bottom:0; }
  .tr-stack tr.pf-trow > th[scope="row"]{ padding:0 0 var(--sp-7); border:0; font-size:var(--fs-lg); }
  .tr-stack tr.pf-trow > td{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-11);
    min-height:36px; padding:var(--sp-5) 0; border:0; border-top:1px dashed var(--tr-rule); text-align:right;
  }
  .tr-stack tr.pf-trow > td::before{
    content:attr(data-l); flex:none; text-align:left;
    font:var(--fw-medium) var(--fs-sm)/16px var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; color:var(--graphite);
  }
  .tr-stack .tr-sub{ white-space:normal; }
  .tr-stack .tr-tx .tr-txlink{ min-height:44px; }
  .tr-scroll:has(> .tr-stack){ overflow:visible; }
}
.tr-date{ white-space:nowrap; color:var(--graphite); font-variant-numeric:tabular-nums; }

/* transaction and explorer links: mono, the accent, a 44px target on touch */
.tr-txlink, .tr-explink{
  display:inline-flex; align-items:center; gap:var(--sp-3); min-height:30px;
  font:var(--fs-md) var(--font-mono); color:var(--tr-acc-ink); text-underline-offset:3px; white-space:nowrap;
}
.tr-txlink .tr-ico, .tr-explink .tr-ico{ transition:transform var(--dur-200) var(--mrd-ease-out-cubic); }
@media (hover:hover){ .tr-txlink:hover .tr-ico, .tr-explink:hover .tr-ico{ transform:translate(1px,-1px); } }
.tr-txlink:focus-visible, .tr-explink:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-3); }
.tr-txlink__k{ font-weight:var(--fw-semibold); color:var(--ok-text); margin-right:var(--sp-2); }
.tr-tx .pf-copy{ min-height:30px; padding:0 var(--sp-6); font-size:var(--fs-md); }
.tr-addr{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5) var(--sp-9); min-width:0; }
.tr-addr .pf-copy{ max-width:100%; }
@media (pointer:coarse), (max-width:599px){
  .tr-txlink, .tr-explink, .tr-tx .pf-copy, .tr-addr .pf-copy, .tr-ref, .tr-btn{ min-height:44px; }
}

/* receipts: "Paid" only with a link; the other two are an outlined ring + the word */
.tr-rcpt{ display:inline-flex; align-items:center; gap:var(--sp-5); min-height:30px; font:var(--fs-md) var(--font-mono); color:var(--graphite); white-space:nowrap; }
.tr-rcpt::before{ content:""; width:7px; height:7px; flex:none; box-sizing:border-box; border-radius:var(--r-circle); }
.tr-rcpt--fwd::before{ border:1.5px dashed var(--graphite); }
.tr-rcpt--pending::before{ border:1.5px solid var(--warn); }

/* inflow kinds: shape + label */
.tr-kind, .tr-kindsum{ display:inline-flex; align-items:center; gap:var(--sp-5); color:var(--ink); white-space:nowrap; }
.tr-kind::before, .tr-kindsum::before{ content:""; flex:none; width:8px; height:8px; box-sizing:border-box; }
.tr-kind--fee::before{ background:var(--brand); }
.tr-kind--cap::before{ border:1.5px solid var(--ink); }
.tr-kind--oth::before{ border-radius:var(--r-circle); background:var(--graphite); }
.tr-kindsums{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-7) var(--sp-15); margin:var(--sp-13) 0 0; font-size:var(--fs-base-p); }
.tr-kindsum b{ font-family:var(--font-mono); font-weight:var(--fw-medium); margin-left:var(--sp-3); }
.tr-kindsums__n{ color:var(--graphite); font-size:var(--fs-base); }

/* ── epochs: newest open, older collapsed; facts as compact label / value rows ──────────── */
.tr-sec--list{ border-top:0; padding-top:0; }
.tr-epochs{ display:grid; gap:var(--sp-11); }
.tr-epoch{ border:1px solid var(--tr-rule); border-radius:6px; background:var(--paper); min-width:0; }
.tr-epoch__sum{ list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-13); padding:var(--sp-13) var(--sp-15); min-height:44px; border-radius:6px; }
.tr-epoch__sum::-webkit-details-marker{ display:none; }
.tr-epoch__sum:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (hover:hover){ .tr-epoch__sum:hover .tr-epoch__t{ color:var(--tr-acc-ink); } }
.tr-epoch__t{ font:var(--fw-medium) var(--fs-17)/1.3 var(--font-display); letter-spacing:-.02em; color:var(--ink); transition:color var(--dur-150) var(--ease); }
.tr-epoch__m{ flex:1 1 auto; font:var(--fs-md)/18px var(--font-mono); letter-spacing:var(--ls-06); color:var(--graphite); }
.tr-epoch__chev{ display:grid; place-items:center; width:24px; height:24px; flex:none; color:var(--graphite); margin-left:auto; }
.tr-epoch__chev .tr-ico{ width:14px; height:14px; transform:rotate(90deg); transition:transform var(--dur-200) var(--mrd-ease-out-quint); }
.tr-epoch[open] > .tr-epoch__sum .tr-epoch__chev .tr-ico{ transform:rotate(-90deg); }
.tr-epoch__body{ padding:0 var(--sp-15) var(--sp-15); border-top:1px solid var(--tr-rule); }
.tr-epoch[open] > .tr-epoch__body{ animation:drop-in .22s var(--mrd-ease-out-quint) both; }
.tr-kv{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--sp-22); margin:0 0 var(--sp-15); }
.tr-kv__row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-15);
  min-height:44px; padding:var(--sp-5) 0; border-bottom:1px solid var(--tr-rule); min-width:0;
}
.tr-kv__row dt{ font-size:var(--fs-lg); color:var(--graphite); flex:none; }
.tr-kv__row dd{ margin:0; min-width:0; text-align:right; font-size:var(--fs-lg); color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tr-kv__row dd .tr-txlink, .tr-kv__row dd .pf-copy{ min-height:30px; }
@media (max-width:719px){ .tr-kv{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:599px){
  .tr-epoch__body{ padding:0 var(--sp-11) var(--sp-11); }
  .tr-epoch__sum{ display:grid; grid-template-columns:minmax(0,1fr) auto; padding:var(--sp-11); }
  .tr-epoch__t, .tr-epoch__m{ grid-column:1; }
  .tr-epoch__chev{ grid-column:2; grid-row:1 / span 2; }
  .tr-kv__row dd .tr-txlink, .tr-kv__row dd .pf-copy{ min-height:44px; }
}

/* ── the accounting half ─────────────────────────────────────────────────────────────────── */
.tr-acctbody{ min-width:0; }
.tr-subsec{ margin-top:var(--sp-20); padding-top:var(--sp-15); border-top:1px solid var(--tr-rule); min-width:0; }
.tr-subsec > .tr-h3{ margin-bottom:var(--sp-11); }
.tr-costs{ list-style:none; margin:var(--sp-7) 0 0; padding:0; display:grid; gap:var(--sp-3); max-width:560px; }
.tr-costs li{ display:flex; justify-content:space-between; gap:var(--sp-11); padding:var(--sp-3) 0; border-bottom:1px dashed var(--tr-rule); font:var(--fs-md) var(--font-mono); color:var(--graphite); }
.tr-costs b{ color:var(--ink); font-weight:var(--fw-medium); }
.tr-chip{
  display:inline-flex; align-items:center; padding:1px var(--sp-6); border:1px solid var(--border); border-radius:var(--r-full);
  font:var(--fw-medium) var(--fs-sm)/16px var(--font-mono); letter-spacing:var(--ls-08); text-transform:uppercase; color:var(--graphite); white-space:nowrap;
}
.tr-chip--reconciled, .tr-chip--live{ color:var(--ok-text); border-color:var(--ok); }
.tr-chip--mismatch{ color:var(--danger-text); border-color:var(--danger); }
.tr-chip--pending{ border-color:var(--warn); }

/* ── addresses: the reference's contract cards, 2 across ────────────────────────────────── */
.tr-cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-13); }
@media (max-width:759px){ .tr-cards{ grid-template-columns:minmax(0,1fr); } }
.tr-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-7); min-width:0;
  padding:var(--sp-17); border:1px solid var(--tr-rule); border-radius:6px; background:var(--paper);
}
.tr-card__role{ margin:0; font-size:var(--fs-xl); line-height:22px; color:var(--graphite); }
.tr-card__addr{
  display:block; max-width:100%; margin-top:var(--sp-5); font:var(--fs-base)/1.5 var(--font-mono); color:var(--ink);
  overflow-wrap:anywhere; word-break:break-all;
}
.tr-card__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-7) var(--sp-15); }
.tr-card__note{ margin:var(--sp-3) 0 0; font-size:var(--fs-base-p); line-height:1.55; color:var(--graphite); }
.tr-copyaddr{
  display:inline-flex; align-items:center; min-height:32px; padding:0 var(--sp-11);
  border:1px solid transparent; border-radius:var(--pf-r-4); background:var(--pf-trough); color:var(--ink); cursor:pointer;
  font:var(--fw-medium) var(--fs-base) var(--font-body);
  transition:background-color var(--mrd-duration-fast) var(--mrd-ease-in-out), color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.tr-copyaddr:hover{ background:var(--brand-08); }
.tr-copyaddr.is-done{ color:var(--tr-acc-ink); }
.tr-copyaddr:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (pointer:coarse), (max-width:599px){ .tr-copyaddr{ min-height:44px; } }
.tr-take{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-13) var(--sp-18); padding:var(--sp-17); border:1px solid var(--tr-rule); border-radius:6px; background:var(--tr-tint); }
.tr-take__t{ margin:0; max-width:29em; font-size:var(--fs-2xl); line-height:1.55; color:var(--ink); }
.tr-take__t b{ font-weight:var(--fw-semibold); }

/* ── reduced motion: layer 2 for this sheet (layer 1 is proof/motion.css) ───────────────── */
@media (prefers-reduced-motion: reduce){
  .cx-js .tr-enter, .cx-js .tr-enter.is-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .tr-panel.is-entering, .tr-pill, .tr-epoch[open] > .tr-epoch__body{ animation:none !important; opacity:1 !important; transform:none !important; }
  .tr-tabs.is-animated .tr-tabs__pill, .tr-scrollbox::before, .tr-scrollbox::after, .tr-scrollbox__more{ transition:none !important; }
}

/* launch boost banner (2026-10-08) */
.tr-boost{ margin:0 0 14px; padding:10px 14px; border:1px solid var(--line, rgba(0,0,0,.15)); border-left:3px solid var(--accent, #e85d04); border-radius:8px; font-size:13px; line-height:1.5; color:var(--ink, #222); background:var(--surface-2, rgba(0,0,0,.03)); }