/* The ledger: cumulative R as an engraved ink chart, with hatched drawdowns and an outcome histogram.
   Every selector is scoped under .m-ledger. SVG marks take their colors from the page tokens, so they follow the scheme. */
.m-ledger {
  --lg-hatch-accent: repeating-linear-gradient(135deg, var(--accent) 0 1.3px, transparent 1.3px 4.6px);
  --lg-hatch-ink: repeating-linear-gradient(135deg, var(--ink) 0 1.1px, transparent 1.1px 4.4px);
}

/* Records as tabs */
.m-ledger .lg-tabs { display: flex; flex-wrap: wrap; gap: 0 30px; margin-top: 24px; border-bottom: 1px solid var(--ink); }
.m-ledger .lg-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 44px; padding: 8px 0 9px; margin: 0 0 -1px;
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer; text-align: left; font: inherit;
}
.m-ledger .lg-tab:hover { color: var(--ink); }
.m-ledger .lg-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.m-ledger .lg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.m-ledger .lg-tab-name { font: 600 19px/1.15 var(--serif); letter-spacing: -.01em; }
.m-ledger .lg-tab-name i { font-weight: 400; color: var(--muted); }
.m-ledger .lg-tab-n { font: 400 11.5px/1.2 var(--mono); color: var(--muted); }

/* Filters */
.m-ledger .lg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; padding: 16px 0 0; }
.m-ledger .lg-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.m-ledger .lg-flabel { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.m-ledger .lg-chip { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; }
.m-ledger .lg-chip-n { font: 400 11px/1 var(--mono); color: var(--muted); }
.m-ledger .lg-chip[aria-pressed="true"] .lg-chip-n { color: inherit; opacity: .72; }
.m-ledger .lg-chip:disabled { cursor: default; color: var(--muted); border-color: var(--rule); background: transparent; }
.m-ledger .lg-chip:disabled + .lg-chip { border-left-color: var(--ink); }

/* The total and the statistics line */
.m-ledger .lg-head { margin-top: 26px; }
.m-ledger .lg-total-l { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.m-ledger .lg-total-l > span:first-child { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.m-ledger .lg-scope { font: italic 400 15px/1.3 var(--serif); color: var(--muted); }
.m-ledger .lg-big {
  margin: 4px 0 0; font: 800 clamp(76px, 15vw, 156px)/.92 var(--serif); letter-spacing: -.045em; color: var(--ink);
  font-variant-numeric: lining-nums proportional-nums; white-space: nowrap;
}
.m-ledger .lg-big.up { color: var(--green); }
.m-ledger .lg-big.dn { color: var(--red); }
.m-ledger .lg-big.is-unset { visibility: hidden; }
.m-ledger .lg-big-u { font-size: .4em; letter-spacing: 0; margin-left: .08em; font-weight: 600; }

.m-ledger .lg-stats { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); justify-content: start; margin: 18px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.m-ledger .lg-stat { padding: 10px 26px 12px 18px; border-left: 1px solid var(--rule); min-width: 0; }
.m-ledger .lg-stat:first-child { border-left: 0; padding-left: 0; }
.m-ledger .lg-stat dt { font: 600 10px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.m-ledger .lg-stat dd { margin: 5px 0 0; font: 500 20px/1.2 var(--mono); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.m-ledger .lg-stat small { font: 400 12px/1 var(--sans); letter-spacing: 0; color: var(--muted); }
.m-ledger .lg-sl { color: var(--muted); font-weight: 400; }

/* Figures */
.m-ledger .lg-fig { margin: 30px 0 0; }
.m-ledger .lg-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font: italic 400 16px/1.35 var(--serif); color: var(--ink); }
.m-ledger .lg-fig-n { font: 600 10.5px/1.3 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.m-ledger .lg-key { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px/1.3 var(--sans); font-style: normal; color: var(--muted); }
.m-ledger .lg-key-hatch { display: inline-block; width: 24px; height: 12px; background: var(--lg-hatch-accent); border-top: 1px solid var(--accent); }
.m-ledger .lg-hint { margin: 6px 0 0; font: italic 400 13px/1.4 var(--serif); color: var(--muted); }
.m-ledger .lg-fn { margin: 10px 0 0; font: italic 400 13.5px/1.5 var(--serif); color: var(--muted); max-width: 560px; }

.m-ledger .lg-plot { position: relative; height: clamp(260px, 33vw, 372px); margin-top: 14px; touch-action: pan-y; cursor: crosshair; }
.m-ledger .lg-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.m-ledger .lg-hist { position: relative; height: 236px; margin-top: 12px; }
.m-ledger .lg-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

/* Ink: axes, rules, labels */
.m-ledger .lg-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.m-ledger .lg-zero { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; }
.m-ledger .lg-base { stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.m-ledger .lg-xtick { stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.m-ledger .lg-ytick, .m-ledger .lg-xlab { font: 400 11px var(--mono); fill: var(--muted); }
.m-ledger .lg-ytick.is-zero, .m-ledger .lg-xlab.is-end, .m-ledger .lg-xlab.is-zero { fill: var(--ink); }

/* The record: hatched drawdown, the high-water edge, the ink line */
.m-ledger .lg-hatch-line { stroke: var(--accent); stroke-width: 1; }
.m-ledger .lg-peak { fill: none; stroke: var(--accent); stroke-width: 1; stroke-linejoin: round; }
.m-ledger .lg-line { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.m-ledger .lg-end { fill: var(--ink); }
.m-ledger .lg-dd-dim, .m-ledger .lg-dd-cap { stroke: var(--accent); stroke-width: 1.4; }
.m-ledger .lg-dd-hi { fill: var(--paper); stroke: var(--accent); stroke-width: 1.4; }
.m-ledger .lg-pen { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }

/* Annotations: italic callouts on a paper knockout, thin leaders */
.m-ledger .lg-ann text { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.m-ledger .lg-ann-it { font: italic 400 13.5px var(--serif); fill: var(--ink); }
.m-ledger .lg-ann-n { font: 500 14px var(--mono); fill: var(--ink); letter-spacing: -.01em; }
.m-ledger .lg-ann-bg { fill: var(--paper); }
.m-ledger .lg-leader { stroke: var(--ink); stroke-width: .75; }
.m-ledger .lg-anns { transition: opacity .5s ease; }
.m-ledger .is-drawing .lg-anns { opacity: 0; transition: none; }

/* Hover */
.m-ledger .lg-guide { stroke: var(--muted); stroke-width: 1; shape-rendering: crispEdges; }
.m-ledger .lg-jump { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: butt; }
.m-ledger .lg-jump.up { stroke: var(--green); }
.m-ledger .lg-jump.dn { stroke: var(--red); }
.m-ledger .lg-hot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }

/* Tooltip (the page's .tip, filled in) */
.m-ledger .lg-tip { min-width: 196px; padding: 8px 11px 9px; }
.m-ledger .lg-tip[hidden] { display: none; }
.m-ledger .lg-tip-d { display: flex; justify-content: space-between; gap: 14px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m-ledger .lg-tip-k { font: 400 11px/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.m-ledger .lg-tip-t { margin: 3px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.m-ledger .lg-tip-t b { font: 800 17px/1.2 var(--serif); letter-spacing: -.01em; margin-right: 4px; }
.m-ledger .lg-tip-t .dir-LONG, .m-ledger .lg-tip-t .dir-SHORT { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }
.m-ledger .lg-tip-s { font: italic 400 13px/1.3 var(--serif); color: var(--muted); }
.m-ledger .lg-tip-v { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.m-ledger .lg-tip-v span { font: 400 12px/1.6 var(--sans); color: var(--muted); }
.m-ledger .lg-tip-v b { font: 500 14px/1.5 var(--mono); }

/* Figure 2: the distribution */
.m-ledger .lg-bar.is-win { fill: var(--ink); }
.m-ledger .lg-bar.is-loss { stroke: var(--ink); stroke-width: 1; }
.m-ledger .lg-ink-hatch { stroke: var(--ink); stroke-width: 1.1; }
.m-ledger .lg-hn { font: 500 12.5px var(--mono); fill: var(--ink); }
.m-ledger .lg-hn.is-zero { fill: var(--muted); }
.m-ledger .lg-side { font: italic 400 13px var(--serif); fill: var(--muted); }
.m-ledger .lg-bin-hit { fill: transparent; pointer-events: all; }
.m-ledger .lg-bin.is-on .lg-bin-hit { fill: var(--paper2); }
.m-ledger .lg-hist .lg-tip { min-width: 0; }

/* The lower row: distribution beside the caveats */
.m-ledger .lg-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
.m-ledger .lg-notes { margin-top: 30px; border-top: 2px solid var(--ink); }
.m-ledger .lg-notes h3 { margin: 10px 0 10px; color: var(--ink); }
.m-ledger .lg-notes p { margin: 0 0 12px; font: italic 400 15.5px/1.52 var(--serif); color: var(--ink); }
.m-ledger .lg-notes em { font: 600 10.5px/1 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }

/* The ledger itself, line by line */
.m-ledger .lg-book { margin-top: 30px; border-top: 1px solid var(--ink); }
.m-ledger .lg-book summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; padding: 12px 0 10px; cursor: pointer; list-style: none; }
.m-ledger .lg-book summary::-webkit-details-marker { display: none; }
.m-ledger .lg-book summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ink); font: 500 14px/1 var(--mono); align-self: center; }
.m-ledger .lg-book[open] summary::before { content: '−'; }
.m-ledger .lg-book summary:hover .lg-book-t { color: var(--accent); }
.m-ledger .lg-book-t { font: 600 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.m-ledger .lg-book-n { font: italic 400 15px/1.3 var(--serif); color: var(--muted); }
.m-ledger .lg-book .table-wrap { max-height: 480px; overflow-y: auto; }
.m-ledger .lg-book th { position: sticky; top: 0; background: var(--paper); z-index: 1; }
.m-ledger .lg-book td.up { color: var(--green); } .m-ledger .lg-book td.dn { color: var(--red); }
.m-ledger .lg-sym { font: 800 15px/1.2 var(--serif); text-decoration: none; }
.m-ledger .lg-sym:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* Empty: a ledger page waiting for its first entry */
.m-ledger .lg-frame { margin-top: 22px; }
.m-ledger .lg-frame-plot { position: relative; height: 170px; border-bottom: 1px solid var(--ink);
  background: repeating-linear-gradient(180deg, transparent 0 41px, var(--rule) 41px 42px); }
.m-ledger .lg-frame-plot::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--ink); }
.m-ledger .lg-frame-zero { position: absolute; left: 0; top: calc(50% - 19px); padding-right: 6px; background: var(--paper); font: 400 11px/1.4 var(--mono); color: var(--ink); }
.m-ledger .lg-frame-note { margin: 14px 0 0; font: italic 400 18px/1.45 var(--serif); color: var(--muted); max-width: 640px; }
.m-ledger .lg-reset { margin-top: 12px; min-height: 36px; padding: 0 0 3px; background: none; border: 0; border-bottom: 2px solid var(--accent); color: var(--accent); cursor: pointer;
  font: 600 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.m-ledger .lg-reset:hover { color: var(--ink); border-color: var(--ink); }

/* Motion: the histogram bars rise once the ledger is on screen */
@media (prefers-reduced-motion: no-preference) {
  .m-ledger .lg-bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.22, .7, .2, 1) calc(var(--i) * 70ms + 200ms); }
  .m-ledger .lg-hn { transition: opacity .4s ease calc(var(--i) * 70ms + 650ms); }
  .m-ledger .is-waiting .lg-bar { transform: scaleY(0); transition: none; }
  .m-ledger .is-waiting .lg-hn { opacity: 0; transition: none; }
}

@media (max-width: 860px) {
  .m-ledger .lg-lower { grid-template-columns: 1fr; }
  .m-ledger .lg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-ledger .lg-stat { padding: 10px 10px 12px 12px; }
  .m-ledger .lg-stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .m-ledger .lg-stat:nth-child(n + 4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .m-ledger .lg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .m-ledger .lg-tab { justify-content: flex-end; }
  .m-ledger .lg-tab-name { font-size: 16.5px; line-height: 1.2; }
  .m-ledger .lg-tab-name i { display: block; }
  .m-ledger .lg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-ledger .lg-stat:nth-child(n) { border-left: 1px solid var(--rule); padding-left: 12px; }
  .m-ledger .lg-stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .m-ledger .lg-stat:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .m-ledger .lg-filters { gap: 12px 24px; }
  .m-ledger .lg-stat dd { font-size: 18px; }
  .m-ledger .lg-key { margin-left: 0; }
  .m-ledger .lg-hist { height: 220px; }
  .m-ledger .lg-cap { font-size: 15px; }
}