/* Action Ledger demo — recreation of the design system's LedgerScreen
   (ui_kits/ledger/) as dependency-free markup. Structure, tokens and seed
   data match the source component; React is not required. */

.ledgerframe{overflow-x:auto}
.lg{display:flex;height:560px;min-width:940px;background:var(--archive-paper);font-family:var(--font-body);text-align:left}

/* sidebar */
.lg-side{width:232px;flex:0 0 auto;background:var(--ledger-ink);color:var(--text-on-ink);display:flex;flex-direction:column;padding:22px 0;border-right:1px solid var(--hairline-ink)}
.lg-side .lg-wm{padding:0 22px 22px;font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:-.02em;color:var(--text-on-ink);display:flex;align-items:center;gap:8px}
.lg-side nav{display:flex;flex-direction:column}
.lg-side nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:11px 22px;color:var(--muted-ink);border-left:3px solid transparent}
.lg-side nav a.on{color:var(--text-on-ink);background:var(--ink-2);border-left-color:var(--held-amber)}
.lg-side .lg-foot{margin-top:auto;padding:0 22px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted-ink)}

/* main */
.lg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.lg-head{padding:26px 30px 20px;border-bottom:1px solid var(--hairline)}
.lg-head .lg-eb{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.lg-head .lg-eb b{color:var(--held-amber-deep);font-weight:600}
.lg-head h3{font-family:var(--font-display);font-weight:500;font-size:28px;letter-spacing:-.02em;line-height:1.08;color:var(--text-strong);margin-top:12px}
.lg-head .lg-rule{width:72px;height:4px;background:var(--held-amber-deep);margin-top:14px}
.lg-stats{display:flex;gap:20px;margin-top:18px;font-family:var(--font-mono);font-size:12px;color:var(--muted);align-items:center;flex-wrap:wrap}

.lg-scroll{flex:1;overflow-y:auto;padding:16px 20px}
.lg table{width:100%;border-collapse:collapse}
.lg th{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 16px 12px;font-weight:500}
.lg th.r,.lg td.r{text-align:right}
.lg tbody tr{cursor:pointer;border-bottom:1px solid var(--hairline)}
.lg tbody tr:hover{background:var(--surface-2)}
.lg tbody tr.sel{background:var(--paper-2)}
.lg td{padding:13px 16px;vertical-align:middle}
.lg td .id{font-family:var(--font-mono);font-size:12px;color:var(--ledger-ink)}
.lg td .ag{font-size:14px;color:var(--text-strong)}
.lg td .kd{font-size:12.5px;color:var(--muted)}
.lg td .amt{font-family:var(--font-mono);font-size:13px;color:var(--ledger-ink)}

/* pills + badges */
.lg-pill{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius-sm);padding:3px 8px;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap}
.lg-pill i{width:6px;height:6px;transform:rotate(45deg);background:currentColor;display:block}
.lg-pill.held{color:var(--state-held-fg);background:var(--state-held-bg);border:1px solid var(--state-held-border)}
.lg-pill.cleared{color:var(--state-cleared-fg);background:var(--state-cleared-bg);border:1px solid var(--state-cleared-border)}
.lg-pill.reversed{color:var(--state-reversed-fg);background:var(--state-reversed-bg);border:1px solid var(--state-reversed-border)}
.lg-tier{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ledger-ink);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:3px 9px;display:inline-flex;align-items:center;gap:8px;background:var(--surface-card);line-height:1;white-space:nowrap}
.lg-tier b{color:var(--held-amber-deep);font-weight:600}
.lg-tier span{color:var(--muted)}

.lg-btn{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.lg-btn.amber{background:var(--held-amber);color:var(--ledger-ink);border-color:var(--held-amber)}
.lg-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.lg-btn.secondary{background:var(--surface-0);color:var(--text-strong);border-color:var(--hairline-strong)}
.lg-btn.ghost{background:transparent;color:var(--accent);border-color:transparent}
.lg-btn:hover{filter:brightness(.95)}

/* drawer */
.lg-drawer{width:340px;flex:0 0 auto;border-left:1px solid var(--hairline);background:var(--surface-card);padding:26px;overflow-y:auto}
.lg-drawer .dr-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lg-drawer .dr-id{font-family:var(--font-mono);font-size:13px;color:var(--ledger-ink)}
.lg-drawer .dr-amt{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--text-strong);margin-top:14px}
.lg-drawer .dr-kind{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.lg-chain{display:flex;align-items:center;width:100%}
.lg-chain .n{width:10px;height:10px;transform:rotate(45deg);flex:0 0 auto;border:2px solid var(--held-amber-deep);background:var(--archive-paper);margin:0 3px}
.lg-chain .n.f{background:var(--held-amber-deep)}
.lg-chain .s{height:2px;background:var(--hairline);flex:1}
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}
.lg-grid .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lg-grid .val{font-family:var(--font-mono);font-size:13px;color:var(--ledger-ink);margin-top:4px}
.lg-note{border-left:4px solid var(--held-amber);background:var(--surface-card-alt);padding:16px 20px;border-radius:0 var(--radius-md) var(--radius-md) 0;margin-bottom:18px}
.lg-note .lab{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--held-amber-deep);margin-bottom:6px}
.lg-note p{font-size:15px;line-height:1.5;color:var(--text-body)}
.lg-acts{display:flex;gap:10px}
.lg-acts .lg-btn{flex:1}