/* treasury-longform.css — the How it works tab (#how), set like the Standard Reserve whitepaper
   (/app/protocol/whitepaper/): a 192px sticky contents column (CONTENTS head, two-digit rows, a 2px progress rail
   whose fill is scaleY at 80ms linear, a diamond on the active row at .2s), then the article — sections with a
   top hairline, the "01" number and a 32px H2; body copy 16/25 capped near 68 characters (33em, not 68ch: see treasury.css); tinted figure panels
   with corner marks and uppercase tracked heads; dashed-rule tables; bold lead-in lists; the three steps; the
   flywheel rows. Below 1100px the column becomes the floating "Contents" button and its card. Cognia tokens
   throughout (treasury.css declares the page-local roles and their dark pair). */

.tr-wp{ display:grid; grid-template-columns:192px minmax(0,1fr); gap:var(--sp-22); align-items:start; }
.tr-wpbody{ min-width:0; max-width:900px; }

/* ── the contents column ─────────────────────────────────────────────────────────────────── */
.tr-toc{ position:sticky; top:var(--tr-clear); align-self:start; padding-top:var(--sp-18); }
.tr-toc__head{ margin:0 0 var(--sp-16); font:var(--fw-semibold) var(--fs-md)/16px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); }
.tr-toc__rail{ position:absolute; left:0; top:calc(var(--sp-18) + 34px); bottom:0; width:2px; background:var(--pf-trough); border-radius:1px; }
.tr-toc__fill{ position:absolute; inset:0; display:block; background:color-mix(in srgb, var(--brand) 55%, var(--tr-tint)); transform-origin:top center; transform:scaleY(0); transition:transform .08s linear; border-radius:1px; }
.tr-toc__marker{
  position:absolute; left:-3px; top:-4px; display:block; width:8px; height:8px; background:var(--tr-acc-ink);
  transform:translateY(0) rotate(45deg) scale(0); transition:transform .2s ease-in-out;
}
.tr-toc__list{ list-style:none; margin:0; padding:0; }
.tr-toc__list a{
  display:flex; align-items:baseline; gap:var(--sp-9); padding:5px 0 5px var(--sp-15); min-height:28px; box-sizing:border-box;
  font:var(--fs-lg)/18px var(--font-body); color:var(--graphite); text-decoration:none;
  transition:color .15s ease-in-out;
}
.tr-toc__list a:hover{ color:var(--ink); }
.tr-toc__list a.is-active{ color:var(--ink); font-weight:var(--fw-medium); }
.tr-toc__list a:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; border-radius:2px; }
.tr-toc__n{ flex:none; font:var(--fw-semibold) var(--fs-md)/18px var(--font-mono); letter-spacing:.1em; color:var(--graphite); }
.tr-toc__list a.is-active .tr-toc__n{ color:var(--tr-acc-ink); }

/* ── the floating "Contents" (narrow screens; only while How it works is open) ───────────── */
.tr-tocfab{ position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:45; display:none; }
.tr-tocfab__btn{
  min-height:40px; padding:0 var(--sp-15); border:0; border-radius:var(--pf-r-4); cursor:pointer;
  background:var(--tr-btn-bg); color:var(--tr-btn-fg); box-shadow:var(--sh-2);
  font:var(--fw-medium) var(--fs-lg)/1 var(--font-body);
}
.tr-tocfab__btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.tr-tocfab__card{
  position:absolute; right:0; bottom:calc(100% + var(--sp-7)); width:min(300px, calc(100vw - 40px));
  max-height:min(70vh, 520px); overflow:auto; padding:var(--sp-11) var(--sp-13);
  border:1px solid var(--tr-rule); border-radius:6px; background:var(--paper); box-shadow:var(--sh-3-tipop);
  animation:drop-in .16s var(--mrd-ease-in-out) both;
}
[data-theme="dark"] .tr-tocfab__card{ background:var(--surface); }
.tr-tocfab__card[hidden]{ display:none; }
.tr-tocfab__card .tr-toc__list a{ padding-left:0; min-height:40px; align-items:center; }
@media (max-width:1099px){
  .tr-wp{ grid-template-columns:minmax(0,1fr); }
  .tr-toc{ display:none; }
  body[data-tr-tab="how"] .tr-tocfab{ display:block; }
  .tr-wpbody{ max-width:none; }
}
@media (max-width:599px){ .tr-tocfab__btn{ min-height:44px; } .tr-tocfab__card .tr-toc__list a{ min-height:44px; } }

/* ── sections ───────────────────────────────────────────────────────────────────────────── */
.tr-wpsec{ margin-top:72px; padding-top:var(--sp-22); border-top:1px solid var(--tr-rule); min-width:0; }
.tr-wpsec:first-child{ margin-top:var(--sp-18); }
.tr-wpsec__head{ margin-bottom:28px; }
.tr-wpsec__n{ display:block; margin-bottom:var(--sp-13); font:var(--fw-semibold) var(--fs-lg)/16px var(--font-mono); letter-spacing:.08em; color:var(--graphite); }
.tr-wph2{ margin:0; font:var(--fw-medium) clamp(25px, 2.6vw, 32px)/1.25 var(--font-display); letter-spacing:-.02em; color:var(--ink); max-width:24ch; }
.tr-wph3{ margin:var(--sp-21) 0 var(--sp-9); font:var(--fw-medium) var(--fs-19)/1.3 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.tr-wph3 .tr-label{ margin-bottom:var(--sp-5); }
.tr-wpp{ margin:0 0 var(--sp-15); max-width:33em; font:var(--fs-16)/25px var(--font-body); color:var(--tr-body); }
.tr-wpp b{ font-weight:var(--fw-semibold); color:var(--ink); }
.tr-wpnote{ margin:var(--sp-13) 0 0; max-width:33em; font:var(--fs-xl)/1.75 var(--font-body); color:var(--graphite); }
.tr-statement{ margin:var(--sp-18) 0; max-width:40ch; font:var(--fw-medium) var(--fs-20)/1.45 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.tr-rulemeta{ display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-13); margin:var(--sp-11) 0 0; }
.tr-rulemeta span{ font:var(--fs-md)/18px var(--font-mono); letter-spacing:var(--ls-06); color:var(--graphite); }
.tr-rulemeta span + span::before{ content:"·"; margin-right:var(--sp-13); }
@media (max-width:599px){ .tr-rulemeta{ flex-direction:column; } .tr-rulemeta span + span::before{ content:none; } .tr-wpsec{ margin-top:56px; padding-top:var(--sp-20); } }

/* bold lead-in lists (wp-flows): a dashed hairline between rows */
.tr-flows{ list-style:none; margin:var(--sp-13) 0; padding:0; max-width:33em; font-size:var(--fs-2xl); }
.tr-flows li{ padding:var(--sp-11) 0; border-bottom:1px dashed var(--tr-dash, var(--tr-rule)); font:var(--fs-2xl)/1.6 var(--font-body); color:var(--tr-body); }
.tr-flows li:first-child{ border-top:1px dashed var(--tr-dash, var(--tr-rule)); }
.tr-flows b{ font-weight:var(--fw-semibold); color:var(--ink); }

/* ── tinted figure panels with corner marks (figure.wp-table.corner-borders) ─────────────── */
.tr-wpbody{
  --tr-dash: color-mix(in srgb, var(--graphite) 34%, var(--tr-tint));
  --tr-corner: color-mix(in srgb, var(--graphite) 55%, transparent);
}
.tr-wpfig{ position:relative; margin:var(--sp-18) 0; padding:var(--sp-7) var(--sp-18) var(--sp-13); background:var(--tr-tint); min-width:0; }
.tr-wpfig::before, .tr-figure::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--tr-corner),var(--tr-corner)) top left / 12px 1px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) top left / 1px 12px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) top right / 12px 1px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) top right / 1px 12px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--tr-corner),var(--tr-corner)) bottom right / 1px 12px no-repeat;
}
.tr-wpfig__head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-7); padding:var(--sp-13) 0 var(--sp-7); font:var(--fw-semibold) var(--fs-base)/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.tr-wpfig__note{ margin:var(--sp-11) 0 0; text-align:center; font:var(--fs-lg)/1.5 var(--font-body); color:var(--graphite); }
@media (max-width:599px){ .tr-wpfig{ padding:var(--sp-5) var(--sp-11) var(--sp-11); margin-inline:calc(var(--sp-15) * -1 + 1px); } }
.tr-quote{ margin:var(--sp-7) 0 var(--sp-5); padding-left:var(--sp-15); border-left:2px solid var(--brand); }
.tr-quote p{ margin:0; max-width:33em; font:var(--fs-17)/1.65 var(--font-body); color:var(--ink); }

/* dashed-rule tables: TH 11px tracked uppercase, the first column bold ink, cells grey */
.tr-wptable__scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
.tr-wptable__scroll:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.tr-wptable{ width:100%; border-collapse:collapse; font:var(--fs-2xl)/22px var(--font-body); }
.tr-wptable thead th{ padding:var(--sp-11) var(--sp-15) var(--sp-11) 0; border-bottom:1px dashed var(--tr-dash); text-align:left; font:var(--fw-semibold) var(--fs-md)/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); white-space:nowrap; }
.tr-wptable td, .tr-wptable tbody th{ padding:var(--sp-11) var(--sp-15) var(--sp-11) 0; border-bottom:1px dashed var(--tr-dash); text-align:left; vertical-align:top; color:var(--graphite); }
.tr-wptable tbody tr:last-child > *{ border-bottom:0; }
.tr-wptable tbody th{ font-weight:var(--fw-semibold); color:var(--ink); white-space:nowrap; }
.tr-wptable .num{ text-align:right; font-family:var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.tr-wptable--dense{ font-size:var(--fs-xl); }
.tr-wpfig--table .tr-wptable{ min-width:560px; }
.tr-wpfig--table .tr-wptable.tr-wptable--dense{ min-width:0; }
.tr-wpformula{ margin:var(--sp-13) 0 0; padding:var(--sp-11) var(--sp-15); background:var(--tr-tint); border-radius:var(--pf-r-4); font:var(--fs-lg)/1.6 var(--font-mono); color:var(--ink); overflow-wrap:anywhere; }

/* ── the three steps (ol.wp-steps), their connectors drawing in (the current page's draw-in) ── */
.tr-steps{ list-style:none; margin:var(--sp-18) 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-21); }
.tr-step{ position:relative; display:flex; flex-direction:column; gap:var(--sp-5); padding-top:var(--sp-15); border-top:1px solid var(--tr-rule); min-width:0; }
.tr-step__n{ font:var(--fw-semibold) var(--fs-lg)/16px var(--font-mono); letter-spacing:.08em; color:var(--tr-acc-ink); }
.tr-step__k{ font:var(--fw-medium) var(--fs-16)/1.35 var(--font-display); color:var(--ink); }
.tr-step__s{ font:var(--fs-2xl)/23px var(--font-body); color:var(--graphite); }
.tr-step__link{ position:absolute; top:-5px; left:100%; width:var(--sp-21); height:9px; display:flex; align-items:center; pointer-events:none; color:var(--graphite); }
.tr-step__link i{ flex:1; height:1px; margin-right:-1px; background:currentColor; transform-origin:left center; }
.tr-step__link::after{ content:""; width:6px; height:6px; margin:0 1px 0 -7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); flex:none; }
.tr-steps.is-armed .tr-step{ opacity:0; transform:translateY(10px); }
.tr-steps.is-armed .tr-step__link i{ transform:scaleX(0); }
.tr-steps.is-armed .tr-step__link::after{ opacity:0; }
.tr-steps.is-armed.is-drawn .tr-step{ opacity:1; transform:none; transition:opacity .4s var(--mrd-ease-out-cubic), transform .4s var(--mrd-ease-out-cubic); transition-delay:calc(var(--i, 0) * .12s); }
.tr-steps.is-armed.is-drawn .tr-step__link i{ transform:scaleX(1); transition:transform .4s var(--mrd-ease-out-cubic); transition-delay:calc(var(--i, 0) * .12s + .22s); }
.tr-steps.is-armed.is-drawn .tr-step__link::after{ opacity:1; transition:opacity .2s var(--mrd-ease-out-cubic); transition-delay:calc(var(--i, 0) * .12s + .5s); }
@media (max-width:759px){ .tr-steps{ grid-template-columns:minmax(0,1fr); gap:var(--sp-18); } .tr-step__link{ display:none; } }

/* ── the flywheel rows (wp-fly-list): number, title + status, the API's figure, the sentence ── */
.tr-fly{ list-style:none; margin:var(--sp-18) 0 0; padding:0; max-width:760px; }
.tr-fly__item{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:var(--sp-15); padding:var(--sp-15) 0; border-top:1px solid var(--tr-rule); }
.tr-fly__item:last-child{ border-bottom:1px solid var(--tr-rule); }
.tr-fly__n{ font:var(--fw-semibold) var(--fs-lg)/24px var(--font-mono); letter-spacing:.08em; color:var(--graphite); }
.tr-fly__b{ min-width:0; }
.tr-fly__b p{ margin:0; }
.tr-fly__k{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5) var(--sp-11); font:var(--fw-medium) var(--fs-17)/24px var(--font-display); color:var(--ink); }
.tr-fly__st{
  display:inline-flex; align-items:center; gap:var(--sp-5); padding:1px var(--sp-7); border:1px solid var(--tr-rule); border-radius:var(--r-full);
  font:var(--fw-medium) var(--fs-sm)/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--graphite);
}
.tr-fly__st::before{ content:""; width:7px; height:7px; box-sizing:border-box; border-radius:var(--r-circle); }
[data-st="real"] .tr-fly__st{ color:var(--ok-text); border-color:var(--ok); }
[data-st="real"] .tr-fly__st::before{ background:var(--ok); }
[data-st="not-yet"] .tr-fly__st::before{ border:1.5px solid var(--warn); }
[data-st="intended"] .tr-fly__st::before{ border:1.5px dashed var(--graphite); }
.tr-fly__v{ margin-top:var(--sp-3) !important; font:var(--fw-medium) var(--fs-lg)/20px var(--font-mono); color:var(--ink); }
.tr-fly__s{ margin-top:var(--sp-5) !important; max-width:33em; font:var(--fs-2xl)/1.6 var(--font-body); color:var(--graphite); }

/* take part: the Safe line */
.tr-wpsafe{ margin-top:var(--sp-18); padding:var(--sp-15) var(--sp-17); background:var(--tr-tint); border-radius:6px; }
.tr-wpsafe .tr-label{ color:var(--graphite); }

@media (prefers-reduced-motion: reduce){
  .tr-steps .tr-step, .tr-steps .tr-step__link i{ opacity:1 !important; transform:none !important; transition:none !important; }
  .tr-steps .tr-step__link::after{ opacity:1 !important; transition:none !important; }
  .tr-toc__fill, .tr-toc__marker, .tr-toc__list a{ transition:none !important; }
  .tr-tocfab__card{ animation:none !important; }
}