/* treasury-graphs.css — /treasury's three graphs (A the loop, B each day's pool, C how big a pool can be), ported
   from the approved previews (refs/treasury-redo/_scripts/graph-parts/common.css + A.html) onto the page's tokens.

   The frame is the whitepaper's figure.wp-chart.corner-borders: a tinted panel one step off the page, corner
   marks, an uppercase tracked head, the SVG, a centred note. Guides and axes are graphite mixed into the tint;
   the rule's curve is ink at 2px; data marks are the brand (house), Skill / held / rolls forward are graphite,
   capital is ink. Brand is under 3:1 on the tint, so every data graph carries direct labels and a table twin.
   Provenance chips are always visible inside the figure. Light and dark both resolve through the tokens (the
   tooltip's ink-on-paper flips in dark: --tr-tip-bg / --tr-tip-fg, treasury.css).

   Motion: draw-in by stroke-dashoffset on pathLength=1 (0.9s out-cubic, +80ms a path), columns grow from the
   baseline (0.6s, +60ms), nodes rise 8px, labels fade 0.4s after; the pill tabs slide at .24s quint and the plot
   crossfades .2s on a view change; the ink tooltip rises 4px in .14s. Reduced motion lands on the end state. */

.tr-graph{ --tr-guide: color-mix(in srgb, var(--graphite) 34%, var(--tr-tint));
  --tr-grid: color-mix(in srgb, var(--graphite) 14%, var(--tr-tint));
  --tr-dot: color-mix(in srgb, var(--graphite) 26%, var(--white));
  --tr-corner: color-mix(in srgb, var(--graphite) 55%, transparent);
  min-width:0; }
[data-theme="dark"] .tr-graph{ --tr-dot: color-mix(in srgb, var(--graphite) 34%, var(--surface)); }
.tr-graph__h{ margin:var(--sp-18) 0 0; }
.tr-graph__lede{ margin:var(--sp-7) 0 0; max-width:33em; font-size:var(--fs-xl); line-height:22px; color:var(--graphite); }
.tr-wpbody .tr-graph__lede{ font-size:var(--fs-16); line-height:25px; color:var(--tr-body); }

/* ── the sliding-pill tabs inside a figure (mono, as in the approved previews) ───────────── */
.tr-subtabs{ position:relative; display:inline-flex; max-width:100%; gap:var(--sp-3); padding:var(--sp-3); margin-top:var(--sp-15); border-radius:var(--pf-r-4); background:var(--pf-trough); }
.tr-subtabs__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-subtabs.has-pill .tr-subtabs__pill{ opacity:1; }
.tr-subtabs.is-animated .tr-subtabs__pill{ transition:left .24s var(--mrd-ease-out-quint), width .24s var(--mrd-ease-out-quint); }
.tr-subtabs__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-mono); letter-spacing:var(--ls-06); color:var(--graphite); white-space:nowrap;
  transition:color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.tr-subtabs__btn:hover, .tr-subtabs__btn.is-active{ color:var(--ink); }
.tr-subtabs:not(.has-pill) .tr-subtabs__btn.is-active{ background:var(--pf-raised); box-shadow:var(--sh-1-tight); }
.tr-subtabs__btn:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
@media (max-width:459px){ .tr-subtabs{ display:flex; width:100%; } .tr-subtabs__btn{ flex:1 1 0; min-height:44px; padding:var(--sp-9) var(--sp-5); } }

/* ── the figure frame ────────────────────────────────────────────────────────────────────── */
.tr-figure{ position:relative; margin:var(--sp-15) 0 0; padding:28px 24px 20px; background:var(--tr-tint); min-width:0; }
.tr-two > .tr-figure{ margin-top:0; }
@media (max-width:640px){ .tr-figure{ padding:20px 14px 16px; } }
.tr-figure__head{ display:flex; flex-wrap:wrap; gap:var(--sp-7) var(--sp-15); align-items:baseline; justify-content:space-between; }
.tr-figure__title{ margin:0; font:var(--fw-semibold) var(--fs-lg)/18px var(--font-mono); letter-spacing:var(--ls-08); text-transform:uppercase; color:var(--ink); }
.tr-figure__prov{ display:inline-flex; flex-wrap:wrap; gap:var(--sp-5); }
.tr-figure__cap{ margin:var(--sp-15) 0 0; text-align:center; font:italic var(--fs-xl)/1.5 var(--font-body); color:var(--graphite); }
.tr-figure__cap .tr-nw{ font-style:normal; }

/* provenance chips: always inside the figure */
.tr-prov{ display:inline-flex; align-items:center; padding:3px var(--sp-7); border-radius:var(--pf-r-4); font:var(--fw-semibold) var(--fs-sm)/14px var(--font-mono); letter-spacing:var(--ls-08); text-transform:uppercase; }
.tr-prov--rule{ background:var(--paper); color:var(--ink); border:1px solid var(--graphite); }
.tr-prov--data{ background:var(--paper); color:var(--graphite); border:1px solid var(--border); }

/* the legend: the swatch mirrors the mark */
.tr-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-7) var(--sp-15); margin:var(--sp-11) 0 0; padding:0; list-style:none; font:var(--fs-base)/16px var(--font-body); color:var(--graphite); }
.tr-legend li{ display:inline-flex; align-items:center; gap:var(--sp-5); }
.tr-sw{ display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; box-sizing:border-box; }
.tr-sw--paid, .tr-sw--mem{ background:var(--brand); }
.tr-sw--pending{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--brand); }
.tr-sw--fwd, .tr-sw--skill{ background:var(--graphite); }
.tr-sw--ceil, .tr-sw--rule, .tr-sw--money{ width:16px; height:0; border-radius:0; border-top:1.5px solid var(--ink); }
.tr-sw--rule{ border-top-width:2px; }
.tr-sw--effect{ width:16px; height:0; border-radius:0; border-top:1.5px dashed var(--graphite); }
.tr-sw--open{ background:transparent; border:1.25px dashed var(--graphite); }

/* ── the plot ────────────────────────────────────────────────────────────────────────────── */
.tr-cv{ position:relative; margin-top:var(--sp-15); min-height:40px; transition:opacity .2s var(--mrd-ease-in-out); }
.tr-cv.is-out{ opacity:0; }
.tr-cv svg{ display:block; width:100%; height:auto; overflow:visible; }
.tr-cv svg:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.g-axis{ stroke:var(--tr-guide); stroke-width:1; fill:none; shape-rendering:crispEdges; }
.g-grid{ stroke:var(--tr-grid); stroke-width:1; shape-rendering:crispEdges; }
.g-guide{ stroke:var(--tr-guide); stroke-width:1; stroke-dasharray:5 6; fill:none; }
.g-tick{ fill:var(--graphite); font:var(--fs-md) var(--font-mono); font-variant-numeric:tabular-nums; }
.g-lab{ fill:var(--graphite); font:var(--fw-medium) var(--fs-md) var(--font-mono); letter-spacing:var(--ls-06); text-transform:uppercase; }
.g-lab--ink{ fill:var(--ink); }
.g-note{ fill:var(--graphite); font:italic 12.5px var(--font-body); }
.g-val{ fill:var(--ink); font:var(--fw-semibold) var(--fs-base) var(--font-mono); font-variant-numeric:tabular-nums; }
.g-curve{ stroke:var(--ink); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.g-rdot{ fill:var(--tr-dot); stroke:var(--ink); stroke-width:1.25; }
.g-ddot{ fill:var(--brand); stroke:var(--tr-tint); stroke-width:2; }
.g-seg--paid, .g-seg--mem{ fill:var(--brand); }
.g-seg--fwd, .g-seg--skill{ fill:var(--graphite); }
.g-seg--pending{ fill:var(--tr-tint); stroke:var(--brand); stroke-width:1.5; }
.g-ceil{ stroke:var(--ink); stroke-width:1.5; }
.g-open{ fill:none; stroke:var(--graphite); stroke-width:1.25; stroke-dasharray:2.5 2; }
.g-hit{ fill:transparent; cursor:default; outline:none; }
.g-focus{ fill:none; stroke:var(--ink); stroke-width:1; stroke-dasharray:2 2; opacity:0; pointer-events:none; }
.g-focus.is-on{ opacity:1; }
.g-hit:focus-visible + .g-focus{ opacity:1; stroke:var(--brand); stroke-width:2; stroke-dasharray:none; }

/* motion: the Meridian draw-in (pathLength=1), the column grow, the label fade, the node rise */
.is-armed .g-draw{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s var(--mrd-ease-out-cubic); }
.is-armed.is-drawn .g-draw{ stroke-dashoffset:0; }
.is-armed .g-fade{ opacity:0; transition:opacity .4s ease-out; }
.is-armed.is-drawn .g-fade{ opacity:1; }
.is-armed .g-grow{ transform:scaleY(0); transform-box:fill-box; transform-origin:50% 100%; transition:transform .6s var(--mrd-ease-out-cubic); }
.is-armed.is-drawn .g-grow{ transform:none; }
.is-armed .g-rise{ opacity:0; transform:translateY(8px); transition:opacity .4s var(--mrd-ease-out-cubic), transform .4s var(--mrd-ease-out-cubic); }
.is-armed.is-drawn .g-rise{ opacity:1; transform:none; }

/* the empty state, inside the plot */
.tr-empty-plot{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-5); padding:0 var(--sp-18); text-align:center; pointer-events:none; }
.tr-empty-plot b{ font:var(--fw-semibold) var(--fs-xl)/1.4 var(--font-body); color:var(--ink); }
.tr-empty-plot span:not(.tr-nw){ max-width:26em; font:var(--fs-lg)/1.5 var(--font-body); color:var(--graphite); }
.tr-empty-plot .tr-nw{ pointer-events:auto; }
@media (max-width:559px){ .tr-empty-plot{ position:static; padding:var(--sp-13) 0 0; } }

/* ── the tooltip (the Meridian hint tip: .14s opacity + a 4px rise; also opened by keyboard focus) ── */
.tr-tip{
  position:absolute; z-index:5; top:0; left:0; min-width:180px; max-width:290px; padding:var(--sp-9) var(--sp-11);
  border-radius:6px; background:var(--tr-tip-bg); color:var(--tr-tip-fg); box-shadow:var(--sh-3-tipop);
  font:var(--fs-base)/1.45 var(--font-body); pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
}
[data-theme="dark"] .tr-tip{ border:1px solid var(--tr-rule); }
.tr-tip.is-on{ opacity:1; transform:none; }
.tr-tip__h{ font:var(--fw-semibold) var(--fs-md)/16px var(--font-mono); letter-spacing:var(--ls-06); text-transform:uppercase; }
.tr-tip__s{ color:color-mix(in srgb, var(--tr-tip-fg) 74%, transparent); font-size:var(--fs-md); margin-bottom:var(--sp-5); }
.tr-tip__r{ display:grid; grid-template-columns:12px auto 1fr; gap:var(--sp-7); align-items:baseline; }
.tr-tip__r i{ display:block; width:10px; height:0; border-top:2px solid transparent; transform:translateY(-3px); }
.tr-tip__r i[data-k="brand"]{ border-top-color:var(--brand); }
.tr-tip__r i[data-k="brand-dash"]{ border-top:2px dashed var(--brand); }
.tr-tip__r i[data-k="graphite"]{ border-top-color:color-mix(in srgb, var(--tr-tip-fg) 55%, transparent); }
.tr-tip__r i[data-k="ink"]{ border-top-color:var(--tr-tip-fg); }
.tr-tip__r b{ font:var(--fw-semibold) var(--fs-base) var(--font-mono); font-variant-numeric:tabular-nums; }
.tr-tip__r span{ color:color-mix(in srgb, var(--tr-tip-fg) 76%, transparent); }
.tr-tip__f{ margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid color-mix(in srgb, var(--tr-tip-fg) 18%, transparent); color:color-mix(in srgb, var(--tr-tip-fg) 76%, transparent); font:var(--fs-md)/1.4 var(--font-mono); }
/* a phone pins the tip to the plot's top-right corner instead of chasing the finger */
@media (max-width:640px){ .tr-tip{ left:auto !important; right:8px; top:8px !important; } }

/* ── the table twin ("Show the numbers as a table") ──────────────────────────────────────── */
.tr-tv{ margin-top:var(--sp-13); }
.tr-tv > summary{
  display:inline-flex; align-items:center; min-height:32px; cursor:pointer; list-style:none; width:max-content; max-width:100%;
  font:var(--fs-md)/20px var(--font-mono); letter-spacing:var(--ls-06); color:var(--graphite); text-decoration:underline; text-underline-offset:4px;
}
.tr-tv > summary::-webkit-details-marker{ display:none; }
.tr-tv > summary:hover{ color:var(--ink); }
.tr-tv > summary:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }
.tr-tv__scroll{ overflow-x:auto; margin-top:var(--sp-9); }
.tr-tv__scroll:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.tr-tv table{ border-collapse:collapse; min-width:100%; font:var(--fs-base)/1.4 var(--font-mono); font-variant-numeric:tabular-nums; }
.tr-tv th, .tr-tv td{ padding:var(--sp-7) var(--sp-11); border-bottom:1px dashed var(--tr-guide); text-align:left; white-space:nowrap; color:var(--ink); }
.tr-tv thead th{ font-weight:var(--fw-medium); color:var(--graphite); text-transform:uppercase; letter-spacing:var(--ls-06); font-size:var(--fs-sm); }
.tr-tv tbody th{ font-weight:var(--fw-medium); }
.tr-tv td.n, .tr-tv th.n{ text-align:right; }
@media (max-width:599px){ .tr-tv > summary{ min-height:44px; } }

/* ── graph C's rule table and formula (Standard's wp-table--dense) ───────────────────────── */
.tr-ruletable{ width:100%; border-collapse:collapse; font:var(--fs-lg)/1.45 var(--font-body); }
.tr-ruletable th, .tr-ruletable td{ padding:var(--sp-11) 0; border-bottom:1px dashed var(--tr-guide); text-align:left; vertical-align:top; }
.tr-ruletable thead th{ font:var(--fw-semibold) var(--fs-sm)/16px var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; color:var(--graphite); }
.tr-ruletable tbody th{ font-weight:var(--fw-semibold); color:var(--ink); padding-right:var(--sp-15); white-space:nowrap; }
.tr-ruletable td{ color:var(--graphite); }
.tr-formula{ margin:var(--sp-15) 0 0; padding:var(--sp-11) var(--sp-15); background:var(--tr-tint); border-radius:var(--pf-r-4); font:var(--fs-base)/1.6 var(--font-mono); color:var(--ink); overflow-wrap:anywhere; }

/* ── graph A: the loop (nodes, money and effect edges, today's status) ───────────────────── */
.tr-loop-svg{ display:block; width:100%; height:auto; }
.n-head{ fill:var(--ink); } .n-head--effect{ fill:var(--tr-dot); }
.n-title{ fill:var(--paper); font:var(--fw-semibold) 12px var(--font-mono); letter-spacing:.08em; }
.n-title--effect{ fill:var(--ink); }
.n-body{ fill:var(--white); } .n-body--effect{ fill:color-mix(in srgb, var(--white) 70%, var(--tr-tint)); }
.n-sub{ fill:var(--graphite); font:13.5px var(--font-body); }
.e-money{ stroke:var(--ink); stroke-width:1.5; fill:none; }
.e-effect{ stroke:var(--graphite); stroke-width:1.25; stroke-dasharray:5 4; fill:none; }
.ah-money{ stroke:var(--ink); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ah-effect{ stroke:var(--graphite); stroke-width:1.25; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.e-start{ fill:var(--tr-tint); stroke:var(--ink); stroke-width:1.25; }
.e-lab{ fill:var(--ink); font:var(--fw-semibold) 12px var(--font-mono); letter-spacing:.06em; }
.e-lab--effect{ fill:var(--graphite); font-weight:var(--fw-medium); }
.e-note{ fill:var(--graphite); font:italic 13px var(--font-body); }
.st{ opacity:0; transition:opacity .3s var(--mrd-ease-in-out); }
.is-today .st{ opacity:1; }
.st-text{ fill:var(--ink); font:var(--fw-medium) 12.5px var(--font-body); }
.st-text--none{ fill:var(--graphite); font-style:italic; font-weight:400; }
.st-ok{ fill:var(--ok); } .st-wait{ fill:none; stroke:var(--warn); stroke-width:1.5; }

/* the same loop as an ordered list: the phone form, the screen-reader form, and the desktop list twin */
.tr-flow{ list-style:none; margin:var(--sp-15) 0 0; padding:0; }
.tr-flow__n{ background:var(--white); }
.tr-flow__n.is-effect{ background:color-mix(in srgb, var(--white) 70%, var(--tr-tint)); }
.tr-flow__h{ display:flex; gap:var(--sp-7); align-items:center; padding:var(--sp-7) var(--sp-11); background:var(--ink); color:var(--paper); font:var(--fw-semibold) var(--fs-md)/16px var(--font-mono); letter-spacing:.08em; }
.tr-flow__n.is-effect .tr-flow__h{ background:var(--tr-dot); color:var(--ink); }
.tr-flow__h i{ font-style:normal; opacity:.75; }
.tr-flow__b{ padding:var(--sp-9) var(--sp-11) var(--sp-11); font:var(--fs-lg)/1.45 var(--font-body); color:var(--graphite); }
.tr-flow__st{ display:none; margin-top:var(--sp-5); color:var(--ink); font-weight:var(--fw-medium); }
.is-today .tr-flow__st{ display:flex; gap:var(--sp-7); align-items:center; }
.tr-flow__st::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none; }
.tr-flow__st[data-s="ok"]::before{ background:var(--ok); }
.tr-flow__st[data-s="wait"]::before{ box-shadow:inset 0 0 0 1.5px var(--warn); }
.tr-flow__st[data-s="none"]{ color:var(--graphite); font-style:italic; font-weight:400; }
.tr-flow__st[data-s="none"]::before{ display:none; }
.tr-flow__e{ position:relative; padding:var(--sp-9) 0 var(--sp-9) 34px; font:var(--fw-semibold) var(--fs-md)/16px var(--font-mono); letter-spacing:.06em; color:var(--ink); }
.tr-flow__e::before{ content:""; position:absolute; left:16px; top:0; bottom:0; border-left:1.5px solid var(--ink); }
.tr-flow__e::after{ content:""; position:absolute; left:12px; bottom:2px; width:7px; height:7px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg); }
.tr-flow__e.is-effect{ color:var(--graphite); font-weight:var(--fw-medium); }
.tr-flow__e.is-effect::before{ border-left:1.25px dashed var(--graphite); }
.tr-flow__e.is-effect::after{ border-color:var(--graphite); }
.tr-flow__e small{ display:block; font:italic var(--fs-base)/1.4 var(--font-body); letter-spacing:0; color:var(--graphite); text-transform:none; }
.tr-flow__e .tr-flow__st{ font:var(--fw-medium) var(--fs-lg)/1.45 var(--font-body); letter-spacing:0; }
.tr-flow__side{ margin:var(--sp-5) 0 0; padding:var(--sp-7) var(--sp-11); border-left:2px solid var(--ink); background:color-mix(in srgb, var(--white) 55%, var(--tr-tint)); font:var(--fw-semibold) var(--fs-md)/16px var(--font-mono); letter-spacing:.06em; color:var(--ink); }
.tr-flow__side small{ display:block; font:italic var(--fs-base)/1.4 var(--font-body); letter-spacing:0; color:var(--graphite); }
.tr-flow__back{ padding:var(--sp-9) var(--sp-11); font:italic var(--fs-lg)/1.45 var(--font-body); color:var(--graphite); }
.is-armed .tr-flow > li{ opacity:0; transform:translateY(8px); transition:opacity .4s var(--mrd-ease-out-cubic), transform .4s var(--mrd-ease-out-cubic); }
.is-armed.is-drawn .tr-flow > li{ opacity:1; transform:none; }
.tr-listbtn{
  display:inline-flex; align-items:center; min-height:32px; margin-top:var(--sp-13); padding:0; border:0; background:none; cursor:pointer;
  font:var(--fs-md)/20px var(--font-mono); letter-spacing:var(--ls-06); color:var(--graphite); text-decoration:underline; text-underline-offset:4px;
}
.tr-listbtn:hover{ color:var(--ink); }
.tr-listbtn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }
/* The SVG is drawn on a 1000-wide viewBox: below an 880px column its 12px labels would shrink under 10px, so the
   switch follows the COLUMN (a container query), not the viewport — a tablet, and the 1100-1144px band where the
   contents column still takes its 232px, both get the list. */
.tr-graph--a{ container:tr-loop / inline-size; }
/* wide column: the SVG is the figure; the list is for screen readers until "Show the steps as a list" */
@container tr-loop (min-width:880px){
  .tr-figure--a:not(.is-listed) .tr-flow{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
/* narrower: the list IS the figure */
@container tr-loop (max-width:879.98px){ .tr-cv--a .tr-loop-svg{ display:none; } .tr-graph--a .tr-listbtn{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .is-armed .g-draw{ stroke-dashoffset:0 !important; transition:none !important; }
  .is-armed .g-fade{ opacity:1 !important; transition:none !important; }
  .is-armed .g-grow{ transform:none !important; transition:none !important; }
  .is-armed .g-rise, .is-armed .tr-flow > li{ opacity:1 !important; transform:none !important; transition:none !important; }
  .tr-cv, .tr-tip, .st, .tr-subtabs.is-animated .tr-subtabs__pill{ transition:none !important; }
}