/*
===============================================================================
file_id: SOM-STY-PENDING-v1.0.0
name: ledger.css
description: Shared compact Claim ledger component styles; inherits each host site's font and dark palette through --cl-* custom properties (no new fonts) (stamp pending: Witness assigns)
project_id: SOMACO-CLAIMS
category: sty
tags: [claims, ledger, css, component, dark, hex]
created: 2026-10-27
modified: 2026-10-27
version: 1.0.0
agent_id: devin
execution: <link rel="stylesheet" href="claims/ledger.css"> next to ledger.js; override --cl-* on the host page
===============================================================================
*/
.cl{--cl-pn:var(--pn,#0d1018);--cl-ln:var(--ln,#1d2332);--cl-tx:var(--tx,#d9dde8);--cl-mu:var(--mu,#7d8599);--cl-ac:var(--ac,#2fb3ff);--cl-p:#7cff6b;--cl-l:#2fb3ff;--cl-o:#ffb547;font:inherit;color:var(--cl-tx);border:1px solid var(--cl-ln);background:var(--cl-pn);border-radius:8px;padding:10px 12px;margin:12px 0}
.cl *{box-sizing:border-box}
.cl summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:10px;align-items:center;list-style:none}
.cl summary::-webkit-details-marker{display:none}
.cl summary::before{content:"\2B21";color:var(--cl-ac)}
.cl[open] summary::before{content:"\2B22"}
.cl .cl-t{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.85em}
.cl .cl-n{display:inline-flex;gap:4px;align-items:baseline}
.cl .cl-n b{font-size:1.15em}
.cl .tag{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:3px;border:1px solid currentColor;line-height:1.5;white-space:nowrap}
.cl .tag.PROVEN{color:var(--cl-p)}.cl .tag.PLAUSIBLE{color:var(--cl-l)}.cl .tag.OWED{color:var(--cl-o)}
.cl .cl-hash{margin-left:auto;color:var(--cl-mu);font-size:.78em}
.cl .cl-hash.drift{color:#ff5d73}
.cl .cl-bar{display:flex;height:4px;border-radius:2px;overflow:hidden;margin:8px 0 2px;background:var(--cl-ln)}
.cl .cl-bar i{display:block}
.cl .cl-trend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--cl-mu);font-size:.82em;margin:8px 0}
.cl .cl-trend svg{display:block}
.cl .cl-trend table{border-collapse:collapse}
.cl .cl-trend td,.cl .cl-trend th{padding:1px 8px 1px 0;text-align:left;font-weight:400}
.cl .cl-f{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.cl .cl-f button{font:inherit;font-size:.78em;background:transparent;color:var(--cl-mu);border:1px solid var(--cl-ln);border-radius:4px;padding:2px 8px;cursor:pointer}
.cl .cl-f button[aria-pressed=true]{color:var(--cl-tx);border-color:var(--cl-ac)}
.cl ul{list-style:none;margin:0;padding:0;max-height:var(--cl-max,420px);overflow:auto}
.cl li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:7px 0;border-top:1px solid var(--cl-ln)}
.cl li .c{min-width:0}
.cl li .v{color:var(--cl-tx);font-weight:600}
.cl li .h{grid-column:2;color:var(--cl-mu);font-size:.82em;overflow-wrap:anywhere}
.cl li .h a{color:var(--cl-ac)}
.cl .cl-foot{color:var(--cl-mu);font-size:.78em;margin-top:8px;overflow-wrap:anywhere}
.cl .cl-foot a{color:var(--cl-ac)}
.cl-kpi{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){.cl .cl-hash{margin-left:0;width:100%}}
.cl .tag.WITHDRAWN{color:var(--cl-mu);text-decoration:line-through}