/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LEDGER: the Keystone look, as Keystone has it (5 November 2026)

   Keystone's house look (~/keystone-mercury themes/ledger.css), a clone of a banking app's dashboard
   on the reference library (Refero site 857: Home ef9b2943 / d8399610, Insights bb1d3ce5, Accounts
   c7f36c02, Tasks e697f79b; its own dark 859b1114, 320c6124, 420d8e8e). The same values here:
     Page #ffffff · rail #fbfbfb · cards with a #e7e7ea hairline, radius 12, a barely-there shadow
     Ink #24242f · grey text #6b6c72 · field edges #8a8b95 · indigo #5666df for the primary action,
     focus and links · pills for buttons, 9px fields, 6px grey chips, an underline for tabs
     Dark: rail #10101a · page #171721 · cards #1e1e28 · indigo #5d6bd7 as a fill, #939ef0 as words
   Font: Inter, the open stand-in for the reference's own licensed face (Arcadia).
   ⛔ Admin only. Tokens in looks/tokens.css; the components in looks/flat.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

html[data-look="ledger"] .rl { border-radius: 8px; font-weight: 400; }
html[data-look="ledger"] .rl.on { background: #eeeef1; font-weight: 500; }
html[data-look="ledger"]:not([data-theme="light"]) .rl.on { background: #23232f; }
html[data-look="ledger"] .rl .count { background: #e9ebfb; color: #4351c6; border-radius: 5px; font-weight: 500; }
html[data-look="ledger"]:not([data-theme="light"]) .rl .count { background: #2f3352; color: #c3c8f5; }
html[data-look="ledger"] #rail .group { font-weight: 400; }

/* the bar: a 10px search box and the reference's outlined pill for the one action */
html[data-look="ledger"] #topbar .search { border-radius: 10px; border-color: var(--lk-line); height: 38px; }
html[data-look="ledger"] #topbar .search:hover, html[data-look="ledger"] #topbar .search:focus-within { border-color: var(--lk-acc); box-shadow: 0 0 0 3px var(--lk-acc-soft); }
html[data-look="ledger"] #topbar .btn-volt { height: 38px; padding: 0 16px; background: var(--lk-card); color: var(--lk-ink); border: 1px solid var(--lk-line); font-weight: 500; }
html[data-look="ledger"] #topbar .btn-volt:hover:not(:disabled) { background: var(--lk-card-2); }

/* page headers: a light 28px title */
html[data-look="ledger"] .band .kick { font-weight: 400; }
html[data-look="ledger"] .band .bstat { border-radius: 8px; }
html[data-look="ledger"] .band .bstat b { font-weight: 500; }

/* status: the reference's small grey chips with a dot */
html[data-look="ledger"] .chip, html[data-look="ledger"][data-theme="light"] .chip { background: var(--lk-card-2); border: 0; border-radius: 6px; font-weight: 500; }
html[data-look="ledger"][data-theme="light"] .c-new, html[data-look="ledger"][data-theme="light"] .c-assigned, html[data-look="ledger"][data-theme="light"] .c-transit,
html[data-look="ledger"][data-theme="light"] .c-delivered, html[data-look="ledger"][data-theme="light"] .c-paid, html[data-look="ledger"][data-theme="light"] .c-invoiced,
html[data-look="ledger"][data-theme="light"] .c-cancelled, html[data-look="ledger"][data-theme="light"] .c-pending, html[data-look="ledger"][data-theme="light"] .c-awaiting { background: var(--lk-card-2); }

/* segments and tabs: 10px track, 8px buttons; the lit tab is ink */
html[data-look="ledger"] .seg { border-radius: 10px; }
html[data-look="ledger"] .seg button { border-radius: 8px; font-weight: 400; }
html[data-look="ledger"] .tab { font-weight: 400; }
html[data-look="ledger"] .tab.on { font-weight: 500; }
html[data-look="ledger"] .fpill.on, html[data-look="ledger"] .fsel.on, html[data-look="ledger"] .pager button.on { background: var(--lk-sel); color: var(--lk-sel-ink); }

/* numbers and tables: the light figures and the indigo links of the reference */
html[data-look="ledger"] .kpi .num { font-size: 28px; letter-spacing: -0.015em; }
html[data-look="ledger"] .tbl thead th { font-weight: 400; }
html[data-look="ledger"] .tbl .ref, html[data-look="ledger"] .tbl td.refcell .refno { font-weight: 500; }
html[data-look="ledger"] .panel-h .more { font-weight: 500; }
html[data-look="ledger"] .qa svg { stroke: var(--lk-acc-text); }
html[data-look="ledger"] #login .btn { background: var(--lk-act); color: var(--lk-act-ink); padding: 14px 20px; font-size: 16px; }
html[data-look="ledger"][data-theme="light"] #login { background: var(--lk-rail); }