/* report-changes.css: CH 02, "What changed since your last report", redrawn (2026-09-18; the report polish plan,
   sections 5 and 6). The board (mock-up i) heads the chapter, the ledger (mock-up ii) is its body, and the timeline
   (mock-up iii) draws only on the stable page. Runs on report-view.css's tokens; every rule here is prefixed rc-.
   The state of a change has one look everywhere: solid for firm, a gold count for likely, dashed for confirming. */

/* ── the head: the number, the sub-line ──────────────────────────────────── */
.rc-lead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.rc-lead .n{font:700 46px/1 var(--disp);color:var(--mint);letter-spacing:-.02em}
.rc-lead.pending .n{color:var(--gold)}
.rc-lead.none .n{color:var(--ink3)}
.rc-lead .w{font-size:1.05rem;color:var(--ink2)}
.rc-sub{font-size:.8rem;color:var(--ink3);margin:0 0 10px;max-width:72em}
/* the owner, 2026-09-22 (market parity doc, section 10): where this reading stands against the market's first four.
   A panel, not a warning: building a baseline is the method working, so it wears the page's quiet surface, with the
   gold line only while the four readings are still being taken */
.rc-base{margin:10px 0 14px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}
.rc-base.building{border-color:var(--gold-line)}
.rc-base-h{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:600 .88rem var(--body);color:var(--ink)}
.rc-base-h .base-ic{margin-left:0}
.rc-base-t{margin:0;font-size:.8rem;line-height:1.55;color:var(--ink2);max-width:72em}

/* ── the board: one tile a kind ──────────────────────────────────────────── */
.rc-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin:10px 0 4px}
.rc-tile{text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);cursor:pointer;font:inherit;display:block;width:100%;min-width:0}
.rc-tile:hover,.rc-tile:focus-visible{border-color:var(--gold);outline:none}
.rc-tile u{display:block;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);text-decoration:none;margin-bottom:4px}
.rc-tile b{display:flex;align-items:center;gap:7px;font:700 24px/1 var(--disp);color:var(--ink)}
.rc-tile b svg{width:14px;height:14px;flex:0 0 auto;color:var(--ink3)}
.rc-tile.firm b{color:var(--mint)}.rc-tile.firm b svg{color:var(--mint)}
.rc-tile.likely b{color:var(--gold)}.rc-tile.likely b svg{color:var(--gold)}
.rc-tile.confirming{opacity:.78;border-style:dashed}
.rc-tile span{display:block;font-size:11.5px;color:var(--ink2);margin-top:4px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc-tile i{display:block;font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:6px;font-style:normal}
.rc-tile.firm i{color:var(--mint)}

/* ── the figures ─────────────────────────────────────────────────────────── */
.rc-fig{align-items:center;flex-wrap:wrap}
.rc-figx{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;margin-left:auto;flex:0 0 auto}
.rc-figx a{font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.rc-evidence{font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);background:none;border:1px solid var(--line);border-radius:999px;padding:2px 9px;cursor:pointer}
.rc-evidence:hover{color:var(--gold);border-color:var(--gold-line)}
/* the owner, 23 Sep (the timing plan, D3): while the market's figures are not told, each stands against the range its
   first four readings found. Shown, not told: the quieter ink of a reading, never the mint of a confirmed change */
.rc-range > span:not(.rc-figx){color:var(--ink2);min-width:0}
.rc-range > svg{color:var(--ink3)}
/* one line a figure on a phone too: the glyph, the sentence wrapping in its own column, and the baseline's mark at the
   row's right edge, one column down the three rows (a sentence span grows; this one does not) */
.rc-range > .rc-figx{flex:0 0 auto}

/* ── the ledger ──────────────────────────────────────────────────────────── */
.rc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.rc-chip{font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink2);cursor:pointer}
.rc-chip:hover{border-color:var(--gold)}
.rc-chip.on{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.rc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line2);border-radius:10px}
.rc-ledger{width:100%;border-collapse:collapse;font-size:12.5px;margin:0;min-width:640px}
.rc-ledger th{text-align:left;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);padding:8px 10px;background:var(--surface);white-space:nowrap}
.rc-ledger td{border-bottom:1px solid var(--line2);padding:7px 10px;color:var(--ink2);vertical-align:top}
.rc-ledger tr:last-child td{border-bottom:0}
.rc-ledger td.who{color:var(--ink);font-weight:600;max-width:22em}
.rc-ledger td.ft{color:var(--ink)}
.rc-ledger td.sure{white-space:nowrap}
.rc-ledger td.sure small{display:block;font:10px var(--mono);color:var(--ink3);margin-top:3px}
.rc-ledger tr.rc-row{cursor:pointer}
.rc-ledger tr.rc-row:hover td,.rc-ledger tr.rc-row:focus-visible td{background:var(--gold-soft)}
.rc-ledger tr.rc-row:focus-visible{outline:none}
.rc-ledger tr.confirming td{color:var(--ink3)}
.rc-ledger tr.confirming td.who,.rc-ledger tr.confirming td.ft{color:var(--ink2);font-weight:500}
.rc-ledger tr.withdrawn td{color:var(--ink3);text-decoration:line-through}
.rc-ledger tr.withdrawn td.sure{text-decoration:none}
.rc-ledger tr.rc-note td{color:var(--ink3);font-size:.76rem;text-align:left;padding:9px 10px}
.rc-ledger th:first-child,.rc-ledger td:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
.rc-ledger tr.rc-row:hover td:first-child{background:#1c231f}
.rc-more{font:600 .72rem var(--mono);letter-spacing:.06em;color:var(--gold);background:none;border:1px dashed var(--gold-line);border-radius:999px;cursor:pointer;padding:4px 12px}
.rc-sure{display:inline-block;font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink3);white-space:nowrap;vertical-align:middle}
.rc-sure.firm{color:var(--mint);border-color:rgba(67,213,151,.4);background:var(--mint-soft)}
.rc-sure.likely{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.rc-sure.confirming{border-style:dashed}
.rc-sure.withdrawn{text-decoration:line-through}

/* ── the timeline (the stable page) ──────────────────────────────────────── */
.rc-strip{margin:4px 0 8px;overflow:hidden}
.rc-tl{display:grid;grid-template-columns:112px minmax(0,1fr) 96px;gap:10px;align-items:center;font-size:12px;margin:2px 0}
.rc-tl .k{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-tl .axis{position:relative;height:32px;border-bottom:1px solid var(--line)}
.rc-tl .dot{position:absolute;top:11px;width:10px;height:10px;border-radius:50%;background:var(--mint);transform:translateX(-50%)}
.rc-tl .dot.ghost{background:var(--line)}
/* the subscriber's page (S1): an earlier reading of the customer's own opens its own page; the ring says it can be opened.
   A tap target a finger can hit, drawn as the same dot with a gold ring round it. */
.rc-tl a.dot.open{display:block;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold);cursor:pointer}
.rc-tl a.dot.open::after{content:"";position:absolute;left:-9px;top:-9px;width:28px;height:28px}
.rc-tl a.dot.open:hover,.rc-tl a.dot.open:focus-visible{background:var(--gold);outline:none}
.rc-tl .lab{position:absolute;top:-3px;font:9.5px var(--mono);color:var(--ink3);transform:translateX(-50%);white-space:nowrap}
.rc-tl .lab.lo{top:21px}
.rc-tl .lab.v{top:8px;color:var(--mint);font-weight:600}
.rc-tl .lab.p{top:8px;color:var(--ink3);border:1px dashed var(--line);border-radius:999px;padding:0 6px}
.rc-tl .tot{font:600 13px var(--mono);color:var(--ink);text-align:right;white-space:nowrap}
.rc-tl .tot.h{font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);white-space:normal;line-height:1.3}

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width:700px){
  .rc-lead .n{font-size:40px}
  .rc-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc-tile{padding:9px 10px}
  .rc-tl{grid-template-columns:76px minmax(0,1fr) 62px;gap:6px}
  .rc-tl .k{white-space:normal;line-height:1.25}
  .rc-tl .lab{font-size:8.5px}
  /* the axis is a hand wide: the thin labels hide, and the kept ones alternate rows among themselves */
  .rc-tl .lab.thin{display:none}
  .rc-tl .lab.lo{top:-3px}
  .rc-tl .lab.lo-n{top:21px}
  .rc-ledger{min-width:560px}
}
@media (max-width:400px){
  .rc-board{grid-template-columns:1fr 1fr}
  .rc-tile b{font-size:21px}
}

/* ── paper ───────────────────────────────────────────────────────────────── */
@media print{
  .rc-lead .n,.rc-tile b,.rc-ledger td.who,.rc-ledger td.ft,.rc-tl .tot{color:#111 !important}
  .rc-sub,.rc-tile span,.rc-tile u,.rc-tile i,.rc-ledger td,.rc-ledger th,.rc-tl .k,.rc-tl .lab{color:#333 !important}
  .rc-tile,.rc-wrap,.rc-ledger th,.rc-ledger td:first-child,.rc-ledger th:first-child{background:#fff !important;border-color:#999 !important}
  .rc-sure{color:#111 !important;border-color:#777 !important;background:#fff !important}
  .rc-chips,.rc-more,.rc-morerow,.rc-evidence{display:none}
  .rc-wrap{overflow:visible;border:0}
  .rc-ledger{min-width:0}
  /* a column pinned to the left of a scrolling box has nothing to pin to on paper, and Chrome prints it twice */
  .rc-ledger th:first-child,.rc-ledger td:first-child{position:static}
  .rc-tl .dot{background:#333}.rc-tl .dot.ghost{background:#bbb}
  /* the market's figures against their range (D3) and the lead of a reading that started fresh, in dark ink on paper */
  .rc-range > span:not(.rc-figx),.rc-range > svg,.rc-fresh{color:#333 !important}
}