/* LEDGER — the CR window (public/ledger.js). Opened by clicking CR in the HUD. */
#ledger { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 8, 12, 0.72); backdrop-filter: blur(2px); }
#ledger[hidden] { display: none; }
#ledger .lg-box { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px 12px;
  color: #d6ecf1; font: 12px/1.45 var(--chrome-font, 'JetBrains Mono', monospace);
  background: linear-gradient(170deg, #0a2230, #04121a 70%); border: 1px solid rgba(55, 213, 245, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 24px 60px -12px rgba(0, 0, 0, 0.9), 0 0 40px -12px rgba(55, 213, 245, 0.35); }
#ledger .lg-loading { padding: 40px; text-align: center; letter-spacing: 0.2em; color: #37d5f5; }
#ledger .in { color: #3dff9a; } #ledger .out { color: #ff7a93; }
#ledger i { font-style: normal; opacity: 0.6; }

#ledger .lg-head { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(55, 213, 245, 0.18); }
#ledger .lg-head > div:first-child { flex: 1; min-width: 0; }
#ledger .lg-title { font: 700 18px var(--sh-display, 'Chakra Petch', sans-serif); letter-spacing: 0.24em; color: #37d5f5; }
#ledger .lg-sub { color: #8fb4bf; font-size: 11px; }
#ledger .lg-balance { text-align: right; }
#ledger .lg-balance span { display: block; font-size: 9px; letter-spacing: 0.2em; color: #8fb4bf; }
#ledger .lg-balance b { font: 700 20px var(--sh-display, 'Chakra Petch', sans-serif); color: #ffd36a; text-shadow: 0 0 10px rgba(255, 211, 106, 0.35); }
#ledger .lg-x { width: 30px; height: 30px; cursor: pointer; color: #8fb4bf; background: transparent; border: 1px solid rgba(55, 213, 245, 0.3); }
#ledger .lg-x:hover { color: #fff; border-color: #37d5f5; }

#ledger h3 { margin: 0 0 6px; font: 700 10px var(--chrome-font, monospace); letter-spacing: 0.2em; color: #37d5f5; }
#ledger h3 small { margin-left: 6px; color: #8fb4bf; font-weight: 400; letter-spacing: 0.06em; }

#ledger .lg-away { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255, 211, 106, 0.45);
  border-left: 3px solid #ffd36a; background: rgba(255, 211, 106, 0.06); }
#ledger .lg-away h3 { display: flex; align-items: baseline; color: #ffd36a; }
#ledger .lg-away h3 b { margin-left: auto; font-size: 13px; letter-spacing: 0.04em; }
#ledger .lg-away-row { display: flex; justify-content: space-between; padding: 2px 0; }

#ledger .lg-range { display: flex; gap: 6px; margin: 14px 0 8px; }
#ledger .lg-range button { padding: 4px 10px; cursor: pointer; font: 700 10px var(--chrome-font, monospace); letter-spacing: 0.14em;
  color: #8fb4bf; background: rgba(6, 20, 28, 0.8); border: 1px solid rgba(55, 213, 245, 0.25); }
#ledger .lg-range button.on { color: #03101a; background: #37d5f5; border-color: #37d5f5; }

#ledger .lg-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
#ledger .lg-totals > div { padding: 8px 10px; border: 1px solid rgba(55, 213, 245, 0.18); background: rgba(6, 20, 28, 0.7); }
#ledger .lg-totals span { display: block; font-size: 9px; letter-spacing: 0.2em; color: #8fb4bf; }
#ledger .lg-totals b { font: 700 18px var(--sh-display, 'Chakra Petch', sans-serif); }

#ledger .lg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
#ledger .lg-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 4px 0; }
#ledger .lg-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ledger .lg-src-val { font-weight: 700; }
#ledger .lg-bar { grid-column: 1 / -1; height: 3px; background: rgba(55, 213, 245, 0.08); }
#ledger .lg-bar span { display: block; height: 100%; }
#ledger .lg-bar span.in { background: #3dff9a; } #ledger .lg-bar span.out { background: #ff7a93; }
#ledger .lg-empty { color: #6d8d97; font-style: italic; padding: 4px 0; }

#ledger .lg-recent table { width: 100%; border-collapse: collapse; }
#ledger .lg-recent th { text-align: left; font-size: 9px; letter-spacing: 0.16em; color: #8fb4bf; font-weight: 400;
  padding: 3px 6px; border-bottom: 1px solid rgba(55, 213, 245, 0.18); }
#ledger .lg-recent td { padding: 4px 6px; border-bottom: 1px solid rgba(55, 213, 245, 0.06); vertical-align: baseline; }
#ledger .lg-recent tr:hover td { background: rgba(55, 213, 245, 0.05); }
#ledger .lg-when { color: #8fb4bf; white-space: nowrap; }
#ledger .lg-amt { text-align: right; font-weight: 700; white-space: nowrap; }
#ledger .lg-bal { text-align: right; color: #8fb4bf; white-space: nowrap; }
#ledger .lg-recent th:nth-child(3), #ledger .lg-recent th:nth-child(4) { text-align: right; }
#ledger .lg-foot { margin-top: 10px; font-size: 10px; color: #6d8d97; }

/* The CR row in the HUD opens the ledger. */
.hud-vital-row[data-vital="cr"] { cursor: pointer; }
.hud-vital-row[data-vital="cr"]:hover { background: rgba(255, 211, 106, 0.07); }

@media (max-width: 560px) {
  #ledger .lg-cols { grid-template-columns: 1fr; }
  #ledger .lg-head { flex-wrap: wrap; }
  #ledger .lg-bal, #ledger .lg-recent th:nth-child(4) { display: none; }
}
/* The ledger icon at the end of the CR row: the row is the button (owner, 2026-10-17). */
.hud-vital-row[data-vital="cr"] .cr-ledger-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; color: #ffd36a; opacity: 0.75; }
.hud-vital-row[data-vital="cr"] .cr-ledger-ico svg { width: 13px; height: 13px; }
.hud-vital-row[data-vital="cr"]:hover .cr-ledger-ico { opacity: 1; }
/* A phone: the OPERATOR drawer's rows sit 13px apart, and a finger meant for CR landed on HEAT
   above it (which opens the Safehouse) — rows a finger can hit. */
html[data-phone="land"].phone-op-open .hud-vital-row { min-height: 24px; align-items: center; }
html[data-phone="land"].phone-op-open .hud-vital-row[data-vital="cr"] .cr-ledger-ico { width: 20px; height: 20px; }
html[data-phone="land"].phone-op-open .hud-vital-row[data-vital="cr"] .cr-ledger-ico svg { width: 15px; height: 15px; }