/* Split-chain ledger component: wall-clock timeline and recent-blocks
   table. Mount: #ledger-mount, filled by js/ledger.js renderLedger(). Tokens only.

   The tl-* rules are the timeline's, drawn by js/timeline.js into the
   .ledger-timeline host renderLedger() mounts. They live here rather than in a
   stylesheet of their own because this file is the one stylesheet for this mount
   point, and a separate file would have to be linked from index.html, which is
   an orchestrator-owned shared file (AGENTS.md).

   The deployed CSP is `style-src 'self'` with no unsafe-inline, so a style
   ATTRIBUTE is discarded outright: every dynamic number in the timeline is
   either an SVG presentation attribute or a CSSOM assignment in js/timeline.js,
   never setAttribute("style", ...). */

.ledger {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}.ledger-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 7rem;
}
.ledger-stat-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ledger-stat-of {
  font-family: var(--body);
  font-size: 0.75rem;
  color: var(--faint);
}
.ledger-stat-of .ledger-num { color: var(--faint); }
.ledger-stat-label {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.ledger-tone-gold { color: var(--gold); }
.ledger-tone-reject { color: var(--reject); }
.ledger-tone-frost { color: var(--frost); }
.ledger-tone-stranded {
  color: var(--frost);
  display: inline-block;
  border-bottom: 2px solid var(--reject);
  padding-bottom: 0.05rem;
}

/* Numerals embedded in serif prose still render mono, per identity rule */
.ledger-num { font-family: var(--mono); }

.ledger-note {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Timeline: two lanes on one wall-clock axis, drawn by js/timeline.js */
.ledger-timeline {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.7rem 0.6rem;
}

.tl-pending {
  margin: 0;
  padding: 2rem 0.6rem;
  text-align: center;
  font-family: var(--body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--faint);
}

/* The canvas is the measured box: no padding and no border of its own, so the
   width js/timeline.js reads off it is exactly the width it draws at. */
.tl-canvas {
  position: relative;
  width: 100%;
}

.tl-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
}

.tl-svg text {
  font-family: var(--mono);
  paint-order: stroke;
}

/* Legend. No counts the counters strip above already carries. */
.tl-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.3rem;
  margin-bottom: 0.7rem;
  font-family: var(--body);
  font-size: 0.74rem;
  color: var(--muted);
}
.tl-key { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.tl-key .tl-swatch {
  display: inline-block;
  width: 9px;
  height: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 1px;
  transform: translateY(1px);
}
.tl-key-maj .tl-swatch { background: var(--gold); border-color: var(--gold-dim); }
.tl-key-fork .tl-swatch { background: var(--frost); border-color: var(--frost-dim); }
.tl-key-reject .tl-swatch { background: var(--reject); border-color: var(--reject); height: 3px; transform: translateY(-2px); }
.tl-key-shared .tl-swatch { background: var(--surface-raise); border-color: var(--line-strong); }
.tl-key strong { font-family: var(--mono); color: var(--text); font-weight: 700; }
.tl-key-scale { color: var(--faint); font-style: italic; }

/* Lane furniture. Geometry is set by attributes, colour lives here. */
.tl-base-maj { stroke: var(--gold-dim); stroke-width: 1; }
.tl-base-fork { stroke: var(--frost-dim); stroke-width: 1; }
/* Dashed only where the fork has laid down nothing: an interval with no block
   in it, not a measurement. */
.tl-base-silent { stroke: var(--frost-dim); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.75; }

/* One brick is exactly one block, so a column's height IS the number of blocks
   that landed in that slice of time: never averaged, never flattened. */
.tl-brick-maj { fill: var(--gold); }
.tl-brick-fork { fill: var(--frost); }
/* Position marker for a fork column, never a magnitude. Width is set by
   js/timeline.js from the room the fork's own columns leave; a stem too narrow
   to pad is drawn at full strength so it does not vanish. */
.tl-stem-fork { fill: var(--frost); opacity: 0.18; }
.tl-stem-tight { opacity: 0.5; }

/* The rejection rail: one pip under any column holding a block the BIP-110 node
   refused. Continuous only because every column really is refused. */
.tl-reject { fill: var(--reject); }

/* The last shared block, in the gutter, where the lanes leave each other */
.tl-node { fill: var(--surface-raise); stroke: var(--line-strong); stroke-width: 1; }
.tl-node-t { fill: var(--text); }
.tl-node-sub { fill: var(--faint); }
.tl-fan-maj { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.tl-fan-fork { fill: none; stroke: var(--frost); stroke-width: 1.5; }

/* The same height on two chains, at the point they stop being one chain */
.tl-pair-maj { fill: var(--gold); }
.tl-pair-fork { fill: var(--frost); }
.tl-pair-tick { stroke: var(--line-strong); stroke-width: 1; }

.tl-lane-maj-t { fill: var(--gold); letter-spacing: 0.08em; }
.tl-lane-fork-t { fill: var(--frost); letter-spacing: 0.08em; }
.tl-lane-sub-t { fill: var(--faint); }

.tl-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.tl-mark-flag { fill: var(--muted); }
.tl-mark-t { fill: var(--text); }

/* The holes in the fork lane */
.tl-gap { stroke: var(--frost-dim); stroke-width: 1; stroke-dasharray: 4 3; }
.tl-gap-cap { stroke: var(--frost-dim); stroke-width: 1; }
.tl-gap-t { fill: var(--frost); }
.tl-silence-t { fill: var(--frost-dim); }

/* The height gap, bracketed in the corridor at the right edge */
.tl-edge-rule { stroke: var(--text); stroke-width: 1.5; }
.tl-edge-value { fill: var(--text); font-weight: 700; }
.tl-edge-label { fill: var(--muted); }

.tl-axis { stroke: var(--line-strong); stroke-width: 1; }
.tl-axis-tick { stroke: var(--line-strong); stroke-width: 1; }
.tl-axis-t { fill: var(--muted); }
.tl-axis-meta { fill: var(--faint); }

/* Interaction */
.tl-hit { fill: transparent; cursor: crosshair; }
.tl-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tl-cursor { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.tl-hi { fill: none; stroke-width: 1.5; }
.tl-hi-maj { stroke: var(--text); }
.tl-hi-fork { stroke: var(--text); }
.tl-off { display: none; }

/* Readout: what both chains were at the instant under the cursor */
.tl-tip {
  position: absolute;
  z-index: 5;
  min-width: 15rem;
  max-width: min(22rem, 88vw);
  padding: 0.45rem 0.6rem;
  background: var(--surface-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  pointer-events: none;
}
.tl-tip[hidden] { display: none; }

/* Floated on a phone it would cover the strip it is describing, so below the
   compact breakpoint it docks under the plot instead. */
.tl-tip-docked {
  position: static;
  max-width: none;
  width: 100%;
  margin-top: 0.5rem;
}

.tl-tip-when {
  display: block;
  font-family: var(--mono);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
  margin-bottom: 0.35rem;
}
.tl-tip-row { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.5rem; }
.tl-tip-row + .tl-tip-row { margin-top: 0.2rem; }
.tl-tip-side { font-weight: 700; }
.tl-tip-maj .tl-tip-side { color: var(--gold); }
.tl-tip-fork .tl-tip-side { color: var(--frost); }
.tl-tip-body { color: var(--text); }
.tl-tip-height { font-family: var(--mono); }
.tl-tip-none { color: var(--faint); font-family: var(--body); font-style: italic; }
.tl-tip-sub { display: block; color: var(--faint); font-size: 0.94em; }
.tl-tip-gap {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}
.tl-tip-gap .tl-num { font-family: var(--mono); color: var(--text); font-weight: 700; }

.tl-caption {
  margin: 0.7rem 0 0;
  font-family: var(--body);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.tl-caption b { font-family: var(--mono); color: var(--text); font-weight: 700; }
.tl-caption .tl-c-maj { font-family: var(--mono); color: var(--gold); font-weight: 700; }
.tl-caption .tl-c-fork { font-family: var(--mono); color: var(--frost); font-weight: 700; }

/* Recent-blocks table */
.ledger-table-wrap {
  overflow-x: auto;
}
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.82rem;
  /* Fixed, so the fork's table and the majority's put their columns at the
     same x. Left to auto each sizes to its own content ("Ocean.xyz" against
     "Foundry USA") and the two stacked tables do not line up. */
  table-layout: fixed;
}
.ledger-table th:nth-child(1), .ledger-table td:nth-child(1) { width: 22%; }
.ledger-table th:nth-child(2), .ledger-table td:nth-child(2) { width: 26%; }
.ledger-table th:nth-child(3), .ledger-table td:nth-child(3) { width: 20%; }
.ledger-table th:nth-child(4), .ledger-table td:nth-child(4) { width: 32%; }
.ledger-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--muted);
  padding-bottom: 0.55rem;
}
.ledger-table th,
.ledger-table td {
  text-align: left;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ledger-table th {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}
.ledger-height { color: var(--text); }

.ledger-empty-row {
  font-family: var(--body);
  font-style: italic;
  white-space: normal;
  color: var(--muted);
  padding: 0.9rem 0.65rem;
}

/* Same rule as the intent table: no display:flex on a td (it breaks the
   shared row border). The dot is spaced with a margin. */
.ledger-signal-cell { vertical-align: middle; }
.ledger-dot { font-size: 0.6rem; line-height: 1; margin-right: 0.4rem; }
.ledger-dot-frost { color: var(--frost); }
.ledger-dot-faint { color: var(--faint); opacity: 0.5; }
/* No verdict recorded is not the same fact as "did not signal", so it reads
   quieter than both (js/ledger.js: signalState). */
.ledger-dot-unknown { color: var(--faint); opacity: 0.25; }
.ledger-signal-text { color: var(--muted); font-size: 0.74rem; }
.ledger-signal-unknown { color: var(--faint); font-style: italic; }

.verdict-word { font-family: var(--mono); }
.verdict-rejected { color: var(--reject); }
.verdict-extends { color: var(--frost); }
.verdict-stranded {
  color: var(--frost);
  text-decoration-line: underline;
  text-decoration-color: var(--reject);
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.verdict-unknown { color: var(--faint); }

@media (max-width: 720px) {
  .ledger-stat-value { font-size: 1.35rem; }
  .ledger-timeline { padding: 0.5rem 0.4rem 0.45rem; }
  .tl-legend { gap: 0.25rem 0.85rem; font-size: 0.7rem; }
  .tl-tip { font-size: 0.7rem; min-width: 12rem; }
  .tl-tip-row { grid-template-columns: 4rem 1fr; }
  .tl-caption { font-size: 0.76rem; }
}

/* Older rows behind the same toggle the concentration table uses
   (css/instruments.css .concentration-toggle), so the control reads the same
   in both places. */
.ledger-more-row td { border-bottom: 0; padding-top: 0.5rem; }