/* ============================================================
Ledger OS: Phase 1: design system + shell
------------------------------------------------------------
Loaded AFTER the stylesheet in index.html. It only restyles:
every class name, id and element the app renders is unchanged,
so no behaviour in app.js depends on anything here. Delete this
file and its to return to the previous look exactly.
Three materials:
ground the cool mineral desk the navigation sits on
paper the warm sheet the work happens on (.main)
panel ruled sections on the sheet (.panel, .stat, .modal …)
Colour carries meaning only: lapis = capital / primary action,
red = overdue / blocked, amber = late / tight, green = healthy.
============================================================ */
:root {
--font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", sans-serif;
/* layers */
--ground: #D3DAE5;
--ground-2: #C6CFDC;
--ground-ink: #1B2636;
--ground-ink-2: #4C586B;
--panel: #FAF9F5;
--panel-2: #EFEDE6;
--sunk: #E6E3DB;
--line-strong: #C8C4B8;
/* capital: lapis */
--lapis: #2E4A9E;
--lapis-2: #4560B8;
--lapis-soft: #E3E8F4;
--lapis-ink: #22377A;
/* the vault: the money-position field */
--vault: #1C2C63;
--vault-2: #253878;
--on-vault: #F1F4FC;
--on-vault-2: #AEBBE0;
--vault-lent: #8EA3F5;
/* status (validated light set) + darker inks for small text on tints */
--good: #00846F; --good-soft: #E0EEE7; --good-ink: #00695A;
--warn: #B87800; --warn-soft: #F5EBD6; --warn-ink: #855700;
--crit: #B4233F; --crit-soft: #F6E2E2; --crit-ink: #9C1B35;
--neutral-soft: #E8E5DE;
--rail: 252px;
--ease-out: cubic-bezier(.16, 1, .3, 1);
/* ---- the app's existing tokens, remapped (every old rule picks these up) ---- */
--ink: #1A2230;
--ink-soft: #565F6C;
--paper: #F4F2EC;
--paper-warm: #EFEDE6;
--card: #FAF9F5;
--sidebar: #1C2C63;
--sidebar-deep: #16234F;
--teal: #2E4A9E; /* was the primary accent → lapis */
--teal-deep: #22377A;
--teal-light: #4560B8;
--accent-tint: #E3E8F4;
--green: #00846F; /* healthy stays green */
--gold: #B87800; --gold-soft: #D9A441; --amber: #B87800;
--rust: #B4233F; --rust-soft: #E3AEB8;
--line: #E1DED5; --line-soft: #EAE7DF;
--track: #E6E3DB;
--c1: #2E4A9E; /* chart series 1. Money out */
--c2: #00846F; /* chart series 2. Money in */
--radius: 12px; --radius-lg: 14px;
--shadow: none;
--shadow-md: 0 1px 2px rgba(30,36,48,.06), 0 6px 18px rgba(30,36,48,.08);
--shadow-lg: 0 1px 2px rgba(30,36,48,.08), 0 18px 44px rgba(30,36,48,.18);
}
/* ---------- one typeface, everywhere (inline styles included) ---------- */
html body, html body *:not(svg):not(path):not(circle):not(rect) { font-family: var(--font) !important; }
body { background: var(--ground); color: var(--ink); font-size: 15px; font-variant-numeric: lining-nums proportional-nums; }
h1, h2, h3, .display { letter-spacing: -.015em; }
.mono, .num { font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
::-webkit-scrollbar-thumb { background: #C3C0B6; border-color: var(--paper); }
:focus-visible { outline-color: var(--lapis); }
/* ================= shell: ground, rail, paper ================= */
.sidebar {
width: var(--rail); background: var(--ground); color: var(--ground-ink); border-right: 0;
padding: 0 0 16px; transition: width .26s var(--ease-out);
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(27,38,54,.18); border-color: var(--ground); }
.brand { position: relative; padding: 18px 14px 18px 22px; border-bottom: 0; gap: 11px; min-height: 76px; }
.brand .logo {
width: 34px; height: 34px; border-radius: 9px; font-size: 16px; font-weight: 800; color: var(--on-vault);
background: linear-gradient(140deg, var(--vault-2), var(--vault)); box-shadow: none;
}
.brand .mark { color: var(--ground-ink); font-size: 15.5px; font-weight: 750; letter-spacing: -.015em; line-height: 1.15; }
.brand .sub { color: var(--ground-ink-2); font-size: 11.5px; letter-spacing: 0; }
/* index tabs: the active page is a tab joined to the paper sheet */
.nav { padding: 4px 0 10px 12px; }
.nav-label { color: var(--ground-ink-2); font-size: 11.5px; letter-spacing: .01em; text-transform: none; font-weight: 650; padding: 16px 12px 6px; }
.nav-label:first-child { padding-top: 4px; }
.nav a {
color: var(--ground-ink); font-size: 14px; font-weight: 550; padding: 0 12px; height: 40px; margin: 0 12px 2px 0;
border-radius: 10px; transition: background .16s, margin .2s var(--ease-out), border-radius .2s;
}
.nav a .ic { width: 18px; height: 18px; display: inline-grid; place-items: center; opacity: .72; font-size: 14px; }
.nav a .ic svg { width: 18px; height: 18px; display: block; }
.nav a:hover { background: var(--ground-2); color: var(--ground-ink); }
.nav a.active {
background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: none;
margin-right: 0; border-radius: 10px 0 0 10px;
}
.nav a.active .ic { opacity: 1; color: var(--lapis); }
.nav a.active::before, .nav a.active::after { content: ""; position: absolute; right: 0; width: 12px; height: 12px; pointer-events: none; }
.nav a.active::before { top: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--paper) 12px); }
.nav a.active::after { bottom: -12px; background: radial-gradient(circle at 0 100%, transparent 11.5px, var(--paper) 12px); }
.nav-badge { background: var(--lapis); color: #fff; box-shadow: none; border-radius: 6px; font-size: 11.5px; font-weight: 800; height: 20px; min-width: 22px; }
/* the account block on the ground */
.role-switch { border-top: 1px solid color-mix(in srgb, var(--ground-ink-2) 20%, transparent); padding: 14px 20px 4px; }
.user-box .lbl, .role-switch .lbl { color: var(--ground-ink-2); text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; }
.user-box .u-name { color: var(--ground-ink); font-size: 14.5px; font-weight: 700; }
.user-box .u-role { color: var(--ground-ink-2); font-size: 12.5px; }
.user-box .btn { background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ground-ink); border: 1px solid transparent; font-weight: 600; }
.user-box .btn:hover { background: var(--paper); border-color: transparent; box-shadow: none; }
/* The account block is pinned to the bottom of the sidebar. The sidebar scrolls
as one unit (no nested nav scroll); on laptop-height windows (about 870px
or less) that pushed Change Password / Log Out below the fold, so Log Out
showed as a clipped sliver. Sticky keeps both fully visible while the nav
scrolls above them; the sidebar's bottom padding moves inside the block so
nothing peeks out underneath it. */
.sidebar { padding-bottom: 0; }
.sidebar .user-box.role-switch { position: sticky; bottom: 0; z-index: 2; background: var(--ground); padding-bottom: 16px; }
/* collapse button (added by shell.js, desktop only) */
.rail-toggle {
position: absolute; right: 12px; top: 22px; width: 32px; height: 32px; border-radius: 8px; border: 0;
background: transparent; color: var(--ground-ink-2); display: grid; place-items: center; cursor: pointer;
}
.rail-toggle:hover { background: var(--ground-2); color: var(--ground-ink); }
.rail-toggle svg { width: 18px; height: 18px; transition: transform .26s var(--ease-out); }
/* the paper sheet */
.main {
margin-left: var(--rail); background: var(--paper); min-height: calc(100vh - 10px); margin-top: 10px;
border-top-left-radius: 22px; box-shadow: 0 0 0 1px rgba(30,40,60,.04), -8px 0 24px -14px rgba(30,40,60,.2);
padding: 26px 36px 64px; transition: margin-left .26s var(--ease-out);
}
/* page header: breadcrumb, title, purpose, who */
.topbar { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 24px; }
.topbar .crumb {
background: none; color: var(--ground-ink-2); padding: 0; border-radius: 0; text-transform: none; letter-spacing: 0;
font-size: 12.5px; font-weight: 650; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 7px;
}
.topbar .crumb::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lapis); }
.topbar h1 { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.08; }
.page-sub { font-size: 14px; color: var(--ink-soft); }
.topbar .who b { font-size: 14.5px; font-weight: 700; }
.topbar .who { font-size: 12.5px; }
#alertBtn { background: var(--panel) !important; border-color: var(--line) !important; font-weight: 600; }
/* collapsed rail on desktop: icons stay, words become tooltips */
@media (min-width: 1001px) {
html[data-rail="collapsed"] { --rail: 76px; }
html[data-rail="collapsed"] .brand { flex-direction: column; justify-content: flex-start; padding: 16px 0 10px; gap: 10px; }
html[data-rail="collapsed"] .brand .mark, html[data-rail="collapsed"] .brand .sub,
html[data-rail="collapsed"] .nav a span:not(.ic), html[data-rail="collapsed"] .nav-label,
html[data-rail="collapsed"] .role-switch .lbl, html[data-rail="collapsed"] .user-box .u-name, html[data-rail="collapsed"] .user-box .u-role,
html[data-rail="collapsed"] .user-box .btn-lbl { display: none; }
html[data-rail="collapsed"] .rail-toggle { position: static; }
html[data-rail="collapsed"] .rail-toggle svg { transform: rotate(180deg); }
html[data-rail="collapsed"] .nav-label { display: block !important; font-size: 0; padding: 0; height: 1px; margin: 10px 12px 10px 0; background: color-mix(in srgb, var(--ground-ink-2) 22%, transparent); }
html[data-rail="collapsed"] .nav a { justify-content: center; padding: 0; height: 44px; }
html[data-rail="collapsed"] .nav a .nav-badge { display: inline-flex; position: absolute; top: 3px; right: 6px; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 4px; }
html[data-rail="collapsed"] .nav a.active .nav-badge { right: 18px; }
html[data-rail="collapsed"] .nav a .nav-badge[style*="none"] { display: none !important; }
html[data-rail="collapsed"] .role-switch { padding: 12px 10px 4px; }
html[data-rail="collapsed"] .user-box .btn-ic { display: inline; font-size: 15px; }
html[data-rail="collapsed"] .user-box .btn { padding: 8px 0; }
}
.rail-tip { position: fixed; z-index: 120; pointer-events: none; background: var(--ink); color: #F6F7FA; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 7px; box-shadow: var(--shadow-lg); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s; }
.rail-tip.show { opacity: 1; transform: none; }
.rail-tip span { opacity: .72; font-weight: 500; margin-left: 6px; }
/* the narrow rail (≤1000px) keeps its existing behaviour; only the look changes */
@media (max-width: 1000px) {
.sidebar { width: 64px; }
.main { margin-left: 64px; padding: 22px 20px 52px; }
.brand { padding: 16px 0; justify-content: center; min-height: 0; }
.rail-toggle { display: none; }
.nav { padding-left: 8px; }
.nav a { margin-right: 8px; height: 44px; }
.nav a.active { margin-right: 0; }
.nav-label { font-size: 0; padding: 0; height: 1px; margin: 10px 8px 10px 0; background: color-mix(in srgb, var(--ground-ink-2) 22%, transparent); display: block !important; }
.nav a .nav-badge { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 3px; }
}
@media (max-width: 768px) { .main { padding: 18px 14px 48px; border-top-left-radius: 18px; } .topbar h1 { font-size: 25px; } }
@media (max-width: 480px) {
.sidebar { width: 56px; } .main { margin-left: 56px; padding: 14px 10px 44px; border-top-left-radius: 14px; }
.nav { padding-left: 6px; } .nav a { margin-right: 6px; } .nav a.active { margin-right: 0; }
.topbar h1 { font-size: 22px; }
}
/* ================= surfaces ================= */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.panel-head { background: none; border-bottom: 1px solid var(--line); padding: 16px 22px; }
.panel-head h2 { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.panel-head .hint { font-size: 12.5px; color: var(--ink-soft); }
.panel-sub, .field-hint, .page-intro { color: var(--ink-soft); }
.field-hint b { font-weight: 650; }
/* key figures: panels with a thin meaning stripe */
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; padding: 18px 20px; }
.stat::before { width: 3px; top: 14px; bottom: 14px; background: var(--lapis); border-radius: 0 3px 3px 0; }
.stat.warn::before { background: var(--crit); }
.stat.gold::before { background: var(--warn); }
.stat[onclick]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.stat-icon { background: var(--lapis-soft); color: var(--lapis); border-radius: 9px; }
.stat.warn .stat-icon { background: var(--crit-soft); color: var(--crit); }
.stat.gold .stat-icon { background: var(--warn-soft); color: var(--warn); }
.stat .label, .hero-cell .k, .hero-label, .kv .k, .standing-cell .k, .standing-loans h5, .perm-group h4 {
text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600;
}
.stat .value { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.stat .unit { font-size: 12px; font-weight: 650; letter-spacing: .03em; }
/* the money position field: the vault */
.hero-main {
background:
repeating-radial-gradient(circle at 104% -20%, rgba(255,255,255,.055) 0 1px, transparent 1px 11px),
repeating-radial-gradient(circle at -10% 130%, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
linear-gradient(135deg, var(--vault-2), var(--vault) 62%);
color: var(--on-vault); border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(20,30,70,.55);
}
.hero-label { color: var(--on-vault-2); opacity: 1; }
.hero-value { font-size: 46px; font-weight: 700; letter-spacing: -.035em; }
.hero-value .unit { font-size: 15px; font-weight: 650; letter-spacing: .04em; opacity: .7; }
.hero-sub { color: var(--on-vault-2); opacity: 1; }
.hero-meter-bar { height: 12px; border-radius: 4px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hero-meter-fill { background: var(--vault-lent); border-radius: 4px 0 0 4px; }
.hero-meter-legend { color: var(--on-vault-2); opacity: 1; font-size: 12px; }
.hero-cell { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.hero-cell .v { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.hero-cell.alert { border-color: color-mix(in srgb, var(--crit) 35%, var(--line)); background: color-mix(in srgb, var(--crit-soft) 45%, var(--panel)); }
.hero-cell.clickable:hover { box-shadow: var(--shadow-md); }
/* attention rows: a tone stripe, one line of words, one action */
.attn-item { background: var(--panel); border: 1px solid var(--line); border-left-width: 3px; border-radius: 12px; }
.attn-item.critical { border-left-color: var(--crit); }
.attn-item.warning { border-left-color: var(--warn); }
.attn-item.info { border-left-color: var(--lapis); }
.attn-badge { border-radius: 8px; }
.attn-item.critical .attn-badge { background: var(--crit-soft); color: var(--crit); }
.attn-item.warning .attn-badge { background: var(--warn-soft); color: var(--warn); }
.attn-item.info .attn-badge { background: var(--lapis-soft); color: var(--lapis); }
.attn-title { font-weight: 700; }
/* ================= insight chips: the system's shorthand =================
Existing status classes take the chip shape; tone = meaning. */
.badge, .pill, .flag, .urg, .perm-chip, .pol-pill, .st {
display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px;
font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; border: 0; line-height: 1;
}
.badge::before { width: 6px; height: 6px; }
.b-low, .b-active, .pill.good, .pol-on, .chip-good { background: var(--good-soft); color: var(--good-ink); }
.b-low::before, .b-active::before { background: var(--good); }
.b-medium, .b-pending, .urg-warning, .chip-warn { background: var(--warn-soft); color: var(--warn-ink); }
.b-medium::before, .b-pending::before { background: var(--warn); }
.b-high, .b-overdue, .urg-critical, .pol-off, .chip-crit { background: var(--crit-soft); color: var(--crit-ink); }
.b-high::before, .b-overdue::before { background: var(--crit); }
.b-restricted, .b-owner { background: var(--ink); color: #F6F7FA; }
.b-closed, .b-off, .pill, .flag, .perm-chip, .chip-neutral { background: var(--neutral-soft); color: var(--ink-soft); }
.b-you, .perm-chip.on, .chip-info { background: var(--lapis-soft); color: var(--lapis-ink); }
.cat { border-radius: 6px; font-weight: 700; }
/* the chip helpers in shell.js render these */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; background: var(--neutral-soft); color: var(--ink-soft); }
.chip b { font-weight: 800; font-size: 12.5px; }
.chip.solid.chip-crit { background: var(--crit); color: #fff; }
.chip.solid.chip-warn { background: var(--warn); color: #fff; }
.chip.solid.chip-good { background: var(--good); color: #fff; }
.chip.solid.chip-info { background: var(--lapis); color: #fff; }
.pips { display: inline-flex; gap: 2px; align-items: center; }
.pips i { width: 4px; height: 11px; border-radius: 1.5px; background: currentColor; opacity: .22; }
.pips i.on { opacity: 1; }
.pips i.late { opacity: 1; background: var(--crit); }
.pips.bar { width: 40px; height: 6px; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.pips.bar i { display: block; height: 100%; width: var(--p); opacity: 1; border-radius: 0; }
/* display-only money: rials lead, baisa recede, the code is small */
.m { white-space: nowrap; letter-spacing: -.01em; }
.m .m-int { font-weight: 650; }
.m .m-dec { opacity: .55; font-weight: 500; }
.m .m-cur { font-size: .62em; font-weight: 650; letter-spacing: .04em; margin-left: .32em; opacity: .62; vertical-align: .12em; }
/* accounting convention: a final total is double-ruled */
.total { padding-bottom: 3px; border-bottom: 3px double currentColor; }
/* ================= tables ================= */
thead tr { background: var(--panel-2); }
th { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-soft); padding: 12px 14px; border-bottom: 1px solid var(--line); }
td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
tbody tr:hover { background: var(--panel-2); }
.th-btn { padding: 12px 14px; }
.th-btn:hover { color: var(--lapis-ink); background: color-mix(in srgb, var(--lapis) 6%, transparent); }
.th-sort.on .th-btn { color: var(--lapis-ink); }
.name { font-weight: 650; font-size: 14.5px; }
.num { font-size: 13.5px; }
.tbl-foot { background: none; border-top: 1px solid var(--line); }
.tbl-size select { background: var(--panel); border-color: var(--line); }
/* ================= controls ================= */
.btn { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 9px; font-weight: 650; font-size: 13.5px; color: var(--ink); }
.btn:hover { background: var(--panel-2); border-color: var(--line-strong); box-shadow: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--lapis); border-color: var(--lapis); color: #fff; }
.btn-primary:hover { background: var(--lapis-2); border-color: var(--lapis-2); box-shadow: none; }
.btn-danger { background: var(--panel); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
.btn-danger:hover { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); box-shadow: none; }
.btn[disabled]:hover { background: var(--panel); border-color: var(--line-strong); }
.icon-btn { background: var(--panel); border-color: var(--line-strong); border-radius: 9px; color: var(--ink-soft); }
.icon-btn:hover { background: var(--lapis-soft); border-color: var(--lapis); color: var(--lapis); transform: none; }
.icon-btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
.icon-btn.danger:hover { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.copy-btn:hover { color: var(--lapis); }
.toolbar input[type=text], .toolbar input:not([type]), .toolbar select,
.pol-filterbar select, .pol-filterbar input, .sim-pick select { background: var(--panel); border-color: var(--line-strong); border-radius: 9px; }
.toolbar input:focus, .toolbar select:focus, .pol-filterbar input:focus, .pol-filterbar select:focus,
.field input:focus, .field select:focus, .pol-field input:focus, .pol-field select:focus { border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.field label, .pol-field label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 650; color: var(--ink); }
.field input, .field select, .pol-field input, .pol-field select { background: var(--panel); border-color: var(--line-strong); border-radius: 9px; }
.queue-tab { background: var(--panel); border-color: var(--line); border-radius: 9px; font-weight: 600; }
.queue-tab:hover { border-color: var(--lapis); color: var(--lapis-ink); }
.queue-tab.active { background: var(--ink); border-color: var(--ink); }
.queue-tab .n { border-radius: 6px; font-weight: 800; }
.queue-tab.has .n, .queue-tab.active.has .n { background: var(--crit); }
.pol-tog { background: var(--panel); border-color: var(--line-strong); border-radius: 9px; }
.pol-tog:hover { border-color: var(--lapis); background: var(--lapis-soft); }
.pol-status.on { color: var(--good-ink); }
.pol-status.off { color: var(--crit); }
/* ================= cards and blocks ================= */
.approval:hover, .perm-check:hover { background: var(--panel-2); }
.approval-emp, .launch-name, .pol-cat-title, .pol-h, .qa-card-title, .standing-name, .user-card-name, .role-name { font-weight: 700; }
.approval-amt { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.ai-box { background: var(--panel-2); border-left-color: var(--warn); }
.ai-box .ai-label { color: var(--warn-ink); text-transform: none; letter-spacing: 0; font-weight: 650; }
.standing, .access-preview { background: var(--paper); border-color: var(--line); }
.standing-cell, .user-card, .role-row, .pol-cat-card, .qa-card { background: var(--panel); border-color: var(--line); box-shadow: none; }
.user-card:hover, .pol-cat-card:hover { border-color: var(--line-strong); box-shadow: none; }
.user-card.is-off { background: var(--paper); }
.warn-block { background: var(--ink); color: #F6F7FA; }
.warn-danger, .rem-status.bad, .launch-warn, .pol-banner-err { background: var(--crit-soft); color: var(--crit-ink); border-color: transparent; }
.warn-warn, .rem-status.warn, .override-box { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.override-box h4, .override-box ul { color: var(--warn-ink); }
.warn-info, .rem-status { background: var(--lapis-soft); color: var(--lapis-ink); }
.warn-good, .rem-status.good { background: var(--good-soft); color: var(--good-ink); }
.empty .big, .empty-sm .tick { background: var(--panel-2); }
.empty-sm .tick { color: var(--good); }
.report-section h3 { color: var(--ink); font-weight: 750; }
.report-list li::before { color: var(--lapis); }
.sim-note { background: var(--panel-2); border-color: var(--line); }
/* charts: thin marks, recessive tracks */
.hbar-track { background: var(--sunk); border-radius: 4px; }
.hbar-fill { border-radius: 4px; }
.hbar-row.is-critical .hbar-fill { background: var(--crit); }
.hbar-row.is-warning .hbar-fill { background: var(--warn); }
.bar { border-radius: 4px 4px 1px 1px; }
.ring .score b { font-weight: 750; }
/* ================= modals, toast, login ================= */
.modal-bg { background: rgba(10,16,26,.45); backdrop-filter: none; }
.modal { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); animation: modalIn .24s var(--ease-out) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; border-bottom-color: var(--line); }
.modal-actions { border-top-color: var(--line); }
.toast { background: var(--ink); border-radius: 10px; font-weight: 550; }
.toast.err { background: var(--crit); }
.login-screen {
background:
repeating-radial-gradient(circle at 100% 0, rgba(255,255,255,.05) 0 1px, transparent 1px 12px),
linear-gradient(140deg, var(--vault-2), var(--vault) 60%, #121C42);
}
.login-card { background: var(--paper); border-radius: 18px; }
.login-brand { font-weight: 750; letter-spacing: -.03em; }
.login-sub { letter-spacing: 0; }
/* print: the report reads as a document */
@media print {
body { background: #fff !important; }
.main { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; transition: none !important; }
.sidebar { transition: none !important; }
.rail-toggle, .rail-tip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .modal, .sidebar, .main { animation: none !important; transition: none !important; } }
/* six key-figure cards fit one row on a laptop width */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
/* permission labels can be long: let them wrap instead of widening the card */
.perm-chip { white-space: normal; height: auto; min-height: 24px; padding: 4px 8px; line-height: 1.3; }
/* ---- narrow screens: two blocks that used to run past the screen edge ---- */
/* WhatsApp Channel → bot simulator: the employee picker sized itself to its
longest option ("Name (B) · +968…"). It now fits the row and truncates. */
.sim-pick select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 600px) {
.sim-pick select { flex: 1 1 100%; width: 100%; }
/* Monthly Report → health score: the ring and its explanation sat in one
non-wrapping row with a 220px minimum; on a phone they stack instead. */
.health-wrap { flex-wrap: wrap; gap: 16px; }
.health-wrap > :not(.ring) { min-width: 0 !important; flex: 1 1 100% !important; }
}
/* =====================================================================
Ledger OS: renovated pages: Overview, Active Loans + drawer,
Contributions + funding history, WhatsApp Channel.
===================================================================== */
.faint { color: var(--ink-soft); }
.crit-ink { color: var(--crit-ink); } .warn-ink { color: var(--warn-ink); }
.calm { padding: 14px 0; color: var(--ink-soft); font-size: 13.5px; }
.head-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.head-total { font-size: 17px; font-weight: 650; }
.head-total.total { padding-bottom: 2px; }
.panel-head h2 + .chip, .panel-head > .chip { margin-left: auto; }
button.list-more, .list-more { all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 22px 16px; color: var(--lapis); font-weight: 650; font-size: 13px; }
button.list-more:hover { text-decoration: underline; }
.m-xl { font-size: 34px; line-height: 1.05; letter-spacing: -.025em; }
.m-lg { font-size: 25px; line-height: 1.1; letter-spacing: -.02em; }
.m-hero { font-size: 52px; line-height: 1; letter-spacing: -.035em; }
.m-hero .m-int { font-weight: 700; }
/* hover card (shell.js shows it for any [data-tip]) */
.ltip { position: fixed; z-index: 130; pointer-events: none; background: var(--ink); color: #F6F7FA; font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 8px; box-shadow: var(--shadow-lg); max-width: 300px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .14s var(--ease-out); }
.ltip.show { opacity: 1; transform: none; }
.ltip b { font-weight: 750; }
.ltip hr { border: 0; border-top: 1px solid rgba(255,255,255,.22); margin: 6px 0; }
.ltip .tl { display: flex; justify-content: space-between; gap: 16px; }
.ltip .tl span:last-child { font-weight: 650; }
[data-tip] { cursor: default; }
.chip[data-tip] { cursor: help; }
.chip[data-tip]:hover, .chip[data-tip]:focus-visible { box-shadow: 0 0 0 1px currentColor; outline: none; }
/* ---------------- the vault: the money position ---------------- */
.vault {
position: relative; overflow: hidden; border-radius: 18px; color: var(--on-vault); margin-bottom: 22px;
background:
repeating-radial-gradient(circle at 104% -20%, rgba(255,255,255,.055) 0 1px, transparent 1px 11px),
repeating-radial-gradient(circle at -10% 130%, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
linear-gradient(135deg, var(--vault-2), var(--vault) 60%);
padding: 22px 30px 0; box-shadow: 0 18px 40px -24px rgba(20,30,70,.55);
}
.v-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--on-vault-2); }
.v-acct { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-acct b { color: var(--on-vault); font-weight: 700; }
.v-ic { color: var(--vault-lent); }
.v-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr) auto minmax(0, 1fr); gap: 18px; align-items: end; margin-top: 20px; }
.v-term { min-width: 0; }
.v-l { font-size: 13px; color: var(--on-vault-2); font-weight: 600; margin-bottom: 8px; }
.v-n .m-cur { opacity: .72; }
.v-s { margin-top: 8px; font-size: 12.5px; color: var(--on-vault-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.v-crit { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #fff; background: rgba(255,112,134,.32); padding: 4px 8px; border-radius: 6px; font-weight: 700; font-size: 12.5px; }
button.v-crit:hover { background: rgba(255,112,134,.45); }
.v-good { color: #6FE3C1; font-weight: 650; }
.v-op { font-size: 28px; font-weight: 300; color: var(--on-vault-2); padding-bottom: 22px; }
.v-bar { display: flex; gap: 4px; margin-top: 26px; }
.vb-co { all: unset; box-sizing: border-box; min-width: 76px; border-radius: 6px; display: block; }
button.vb-co { cursor: pointer; }
.vb-co:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vb-track { height: 24px; display: flex; gap: 2px; border-radius: 6px; overflow: hidden; transition: transform .18s var(--ease-out); }
.vb-co:hover .vb-track, .vb-co:focus-visible .vb-track { transform: translateY(-2px); }
.vb-track i, .co-bar i, .v-legend i { display: block; height: 100%; }
.vb-ok { background: var(--vault-lent); }
.vb-od { background: #FF7086; background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.3) 4px 6px); }
.vb-free { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.vb-lab { display: grid; gap: 1px; margin-top: 8px; padding-right: 6px; font-size: 12px; color: var(--on-vault-2); white-space: nowrap; overflow: hidden; }
.vb-lab span { overflow: hidden; text-overflow: ellipsis; }
.vb-lab span:first-child { font-weight: 700; color: var(--on-vault); }
.v-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 12px; color: var(--on-vault-2); }
.v-legend span { display: inline-flex; align-items: center; gap: 7px; }
.v-legend i { width: 12px; height: 12px; border-radius: 3px; }
.v-empty { margin-top: 20px; font-size: 13px; color: var(--on-vault-2); }
.v-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; margin: 18px -30px 0; padding: 13px 30px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); font-size: 13px; }
.v-next:empty { display: none; }
.v-nextbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--on-vault); }
button.v-nextbtn { cursor: pointer; }
button.v-nextbtn:hover span:last-child { text-decoration: underline; }
.v-nextbtn b { font-weight: 700; }
.v-nextbtn span:last-child { color: var(--on-vault-2); }
.v-nextbtn span:last-child b { color: var(--on-vault); }
.v-live { width: 9px; height: 9px; border-radius: 50%; background: #8A94A8; flex: none; }
.v-live.on { background: #4FE0B6; animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(79,224,182,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(79,224,182,0); } }
.v-perf { color: var(--on-vault-2); margin-left: auto; }
.v-perf b { color: var(--on-vault); font-weight: 650; }
/* ---------------- command grid ---------------- */
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.ov-grid > .panel { margin-bottom: 0; min-width: 0; }
.ov-today { grid-column: span 5; } .ov-cash { grid-column: span 7; }
.ov-cos { grid-column: span 7; } .ov-od { grid-column: span 5; }
.ov-move { grid-column: span 7; } .ov-act { grid-column: span 5; }
.ov-quick { grid-column: span 5; } .ov-fund { grid-column: span 7; }
.ov-fund[style*="none"] + *, .ov-quick:has(+ .ov-fund[style*="none"]) { grid-column: 1 / -1; }
.tasks { display: grid; }
.task { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 22px 14px 20px; border-top: 1px solid var(--line); transition: background .15s; }
.task:first-child { border-top: 0; }
.task:hover { background: var(--panel-2); }
.task::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
.t-crit::before { background: var(--crit); } .t-warn::before { background: var(--warn); } .t-info::before { background: var(--lapis); } .t-good::before { background: var(--good); }
.task-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 800; align-self: start; }
.t-crit .task-ic { background: var(--crit-soft); color: var(--crit); } .t-warn .task-ic { background: var(--warn-soft); color: var(--warn); }
.t-info .task-ic { background: var(--lapis-soft); color: var(--lapis); } .t-good .task-ic { background: var(--good-soft); color: var(--good); }
.task-txt { min-width: 0; }
.task-t { font-weight: 700; font-size: 14px; }
.task-d { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
/* what comes back, and when */
.du-body { padding: 18px 22px 8px; }
.du-bar { display: flex; gap: 3px; height: 16px; border-radius: 5px; overflow: hidden; }
.du-seg { min-width: 6px; transition: filter .15s; outline-offset: 2px; }
.du-seg:hover, .du-seg:focus-visible { filter: brightness(1.12); }
.du-od, i.du-od { background: var(--crit); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.28) 4px 6px); }
.du-wk, i.du-wk { background: var(--warn); }
.du-mo, i.du-mo { background: var(--lapis); }
.du-lt, i.du-lt { background: color-mix(in srgb, var(--lapis) 35%, var(--panel)); }
.du-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.du-key { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; font-size: 12.5px; align-items: center; }
.du-key i { width: 10px; height: 10px; border-radius: 3px; grid-row: 1; }
.du-key span:nth-of-type(1) { color: var(--ink-soft); font-weight: 600; }
.du-key b { grid-column: 2; font-size: 14px; font-weight: 700; }
.du-key .faint { grid-column: 2; font-size: 12px; }
.du-key.zero { opacity: .55; }
.du-next-h { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.lrows { display: grid; }
.lrow { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 10px; margin: 0 -10px; border-bottom: 1px solid var(--line-soft); border-radius: 8px; transition: background .12s; }
.lrow:last-child { border-bottom: 0; }
button.lrow { cursor: pointer; }
button.lrow:hover { background: var(--panel-2); }
.lrow:focus-visible { outline: 2px solid var(--lapis); outline-offset: -2px; }
.lrow-who { display: grid; min-width: 0; }
.lrow-who span:first-child { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-who .faint { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-mid { display: flex; justify-content: flex-end; }
.lrow-amt { min-width: 96px; text-align: right; }
.dchip { display: grid; font-size: 13px; font-weight: 700; line-height: 1.25; }
.dchip small { font-size: 11px; font-weight: 550; color: var(--ink-soft); }
.od-list { padding: 6px 22px 4px; }
.ov-od .calm, .ov-cos .calm { padding: 16px 22px; }
/* companies board */
.co-list { display: grid; padding: 4px 0 6px; }
.co-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.5fr) 86px 112px; gap: 14px; align-items: center; padding: 11px 22px; border-top: 1px solid var(--line-soft); transition: background .12s; }
.co-row:first-child { border-top: 0; }
button.co-row { cursor: pointer; }
.co-row:hover { background: var(--panel-2); }
.co-row:focus-visible { outline: 2px solid var(--lapis); outline-offset: -2px; }
.co-name { display: grid; min-width: 0; }
.co-name span:first-child { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-name .faint { font-size: 12px; }
.co-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.co-bar { height: 10px; display: flex; gap: 2px; border-radius: 3px; overflow: hidden; }
.co-bar .vb-ok { background: var(--lapis); }
.co-bar .vb-od { background-color: var(--crit); }
.co-bar .vb-free { background: var(--lapis-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lapis) 28%, transparent); }
.co-bar .vb-none { background: repeating-linear-gradient(135deg, var(--sunk) 0 4px, transparent 4px 8px); }
.co-free { text-align: right; font-size: 13.5px; }
/* lower overview: quieter */
.ov-lower .panel-head h2 { font-size: 15px; }
#quickActions .panel-body { gap: 8px !important; }
/* ---------------- Active Loans ---------------- */
.lstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 20px; overflow: hidden; }
.ls-cell { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 16px 20px; border-left: 1px solid var(--line); position: relative; transition: background .15s; min-width: 0; }
.ls-cell:first-child { border-left: 0; }
.ls-cell:hover { background: var(--panel-2); }
.ls-cell:focus-visible { outline: 2px solid var(--lapis); outline-offset: -2px; }
.ls-cell[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 -3px 0 var(--lapis); }
.ls-cell.crit[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--crit); }
.ls-k { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.ls-v { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
.ls-cell.crit .ls-v { color: var(--crit); }
.ls-cell.warn .ls-v { color: var(--warn-ink); }
.ls-cell.info .ls-v { color: var(--lapis-ink); }
.ls-s { font-size: 12.5px; color: var(--ink-soft); }
#loanTable td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
#loanTable tbody tr.lt-row { cursor: pointer; }
#loanTable tr.row-crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
#loanTable tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
#loanTable .who { font-weight: 700; }
#loanTable .sub, #contribTable .sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
#loanTable th:nth-child(4), #loanTable td.r { text-align: right; }
.lt-when { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lt-date { font-weight: 700; }
.lt-amt { font-size: 13px; color: var(--ink-soft); }
.lt-chip { margin-top: 6px; }
.lt-warn { font-size: 11.5px; color: var(--crit-ink); margin-top: 4px; }
.lt-out { font-size: 15px; }
#loanTable .row-actions { justify-content: flex-end; }
/* the loan drawer: the existing dialog, opened from the right */
#loanDetailModal { justify-content: flex-end; align-items: stretch; }
#loanDetailModal .modal {
width: min(680px, 100vw); max-height: none; height: 100vh; margin: 0; border-radius: 18px 0 0 18px; display: flex; flex-direction: column;
padding: 0; animation: drawerIn .34s var(--ease-out) both; overflow: hidden;
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
#loanDetailModal .modal h3 { margin: 0; padding: 20px 26px 4px; border: 0; font-size: 22px; }
#loanDetailBody { flex: 1; overflow-y: auto; padding: 0 26px 26px; }
#loanDetailModal .modal-actions { margin: 0; padding: 14px 26px; border-top: 1px solid var(--line); background: var(--panel); }
.ld-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-soft); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.ld-owed { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: end; padding: 18px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ld-k { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); margin-bottom: 6px; }
.ld-side { justify-self: end; text-align: right; color: var(--ink-soft); font-size: 13px; }
.ld-prog { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; margin-top: 8px; }
.ld-prog i { display: block; height: 100%; background: var(--good); border-radius: 4px; }
.ld-verdict { display: grid; gap: 3px; margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; border-left: 3px solid; }
.ld-verdict span { color: var(--ink-soft); }
.ld-verdict.vd-crit { background: var(--crit-soft); border-color: var(--crit); }
.ld-verdict.vd-warn { background: var(--warn-soft); border-color: var(--warn); }
.ld-verdict.vd-info { background: var(--lapis-soft); border-color: var(--lapis); }
.ld-verdict.vd-good { background: var(--good-soft); border-color: var(--good); }
.ld-h { font-size: 14.5px; font-weight: 750; margin: 22px 0 10px; }
.ld-h .faint { font-weight: 550; }
.ld-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.ld-cell { border-radius: 8px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 1px; outline-offset: 2px; }
.ld-cell .n { font-size: 11px; font-weight: 750; color: var(--ink-soft); }
.ld-cell .d { font-size: 12px; font-weight: 650; }
.ld-cell.s-paid { background: var(--good-soft); border-color: transparent; } .ld-cell.s-paid .n { color: var(--good-ink); }
.ld-cell.s-late { background: var(--crit-soft); border-color: transparent; } .ld-cell.s-late .n { color: var(--crit-ink); }
.ld-cell.s-next { border-color: var(--lapis); box-shadow: inset 0 0 0 1px var(--lapis); } .ld-cell.s-next .n { color: var(--lapis); }
.ld-note { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }
.ld-list { display: grid; }
.ld-li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; flex-wrap: wrap; align-items: center; }
.ld-more { margin-top: 18px; border-top: 1px solid var(--line); }
.ld-more > summary { cursor: pointer; list-style: none; padding: 14px 0 6px; font-weight: 750; font-size: 14.5px; display: flex; gap: 8px; align-items: center; }
.ld-more > summary::-webkit-details-marker { display: none; }
.ld-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease-out); margin-right: 4px; }
.ld-more[open] > summary::before { transform: rotate(45deg); }
.ld-more .faint { font-weight: 550; }
.leaders { display: grid; gap: 10px; margin: 8px 0 4px; }
.leaders > div { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.leaders dt { color: var(--ink-soft); white-space: nowrap; }
.leaders .fill { flex: 1; border-bottom: 1.5px dotted var(--line-strong); transform: translateY(-4px); min-width: 16px; }
.leaders dd { margin: 0; font-weight: 650; text-align: right; }
/* ---------------- Contributions ---------------- */
.fund-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: end; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 20px; }
.fe-term { display: grid; gap: 4px; min-width: 0; }
.fe-k { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.fe-k b { color: var(--ink); font-size: 14px; }
.fe-s { font-size: 12px; color: var(--ink-soft); }
.fe-op { font-size: 24px; font-weight: 300; color: var(--ink-soft); padding-bottom: 24px; }
.fe-util { display: grid; gap: 8px; padding-left: 20px; border-left: 1px solid var(--line); min-width: 0; }
.fe-meter { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.fe-meter i { display: block; height: 100%; background: var(--lapis); }
.fe-meter i.warn { background: var(--warn); } .fe-meter i.crit { background: var(--crit); }
#contribTable .who { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#contribTable td.r, #contribTable th:nth-child(3), #contribTable th:nth-child(4), #contribTable th:nth-child(5) { text-align: right; }
.cbar { display: flex; align-items: center; gap: 10px; outline-offset: 3px; }
.cbar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--lapis-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lapis) 22%, transparent); overflow: hidden; }
.cbar-track i { display: block; height: 100%; background: var(--lapis); }
.cbar-track i.warn { background: var(--warn); } .cbar-track i.crit { background: var(--crit); }
.cbar b { font-size: 12.5px; min-width: 34px; text-align: right; }
.cbar-empty { font-size: 12px; color: var(--ink-soft); }
.ledger-list { display: grid; padding: 4px 0 8px; }
.lg-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto 130px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.lg-row:last-child { border-bottom: 0; }
.lg-when { display: grid; font-size: 13px; }
.lg-when .faint { font-size: 12px; }
.lg-what { display: grid; gap: 3px; min-width: 0; font-size: 12.5px; }
.lg-co { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-bal { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.lg-bal b { color: var(--ink); }
.lg-chg { text-align: right; font-size: 15px; }
.lg-chg.pos .m { color: var(--good-ink); }
.lg-chg.neg .m { color: var(--crit); }
/* ---------------- WhatsApp Channel ---------------- */
.wa-board { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.wa-state, .wa-tile { border-radius: 14px; padding: 18px 20px; display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; }
.wa-tile { background: var(--panel); border: 1px solid var(--line); }
.wa-state.on { background: linear-gradient(160deg, color-mix(in srgb, var(--good) 16%, var(--panel)), var(--good-soft)); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.wa-state.off { background: linear-gradient(160deg, color-mix(in srgb, var(--crit) 10%, var(--panel)), var(--crit-soft)); border: 1px solid color-mix(in srgb, var(--crit) 26%, transparent); }
.wa-k { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.wa-onoff { display: flex; align-items: center; gap: 12px; font-size: 42px; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.wa-state.on .wa-onoff { color: var(--good-ink); }
.wa-state.off .wa-onoff { color: var(--crit); }
.wa-lamp { width: 14px; height: 14px; border-radius: 50%; background: var(--crit); }
.wa-state.on .wa-lamp { background: var(--good); animation: liveG 2.4s ease-out infinite; }
@keyframes liveG { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.wa-d { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wa-v { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
.wa-v.crit { color: var(--crit); }
.wa-of { font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.wa-tile .pips { color: var(--good); }
.wa-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.wa-fails { padding: 4px 22px 10px; }
.wa-fail { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto 110px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.wa-fail:last-child { border-bottom: 0; }
.wa-fail-who { display: grid; min-width: 0; }
.wa-fail-who .faint { font-size: 12px; }
.wa-fail-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.wa-fail-at { text-align: right; font-size: 12px; white-space: nowrap; }
/* ---------------- responsive ---------------- */
@media (max-width: 1240px) {
.ov-today, .ov-cash, .ov-cos, .ov-od, .ov-move, .ov-act, .ov-quick, .ov-fund { grid-column: 1 / -1; }
.wa-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fund-eq { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.fe-util { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
}
@media (max-width: 1000px) {
.v-eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.v-term.lead { grid-column: 1 / -1; order: -1; }
.v-op { display: none; }
.lstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls-cell:nth-child(3) { border-left: 0; }
.ls-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
.vault { padding: 18px 18px 0; border-radius: 16px; }
.v-foot { margin: 16px -18px 0; padding: 12px 18px; }
.v-perf { margin-left: 0; }
.m-hero { font-size: 40px; }
.m-xl { font-size: 28px; }
.v-bar { flex-direction: column; gap: 10px; }
.vb-co { flex: none !important; width: max(var(--w), 120px); }
.task { grid-template-columns: 32px minmax(0, 1fr); padding-right: 16px; }
.task > .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
.du-body { padding: 16px 16px 6px; }
.du-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lrow { grid-template-columns: 64px minmax(0, 1fr) auto; }
.lrow-mid { grid-column: 2; grid-row: 2; justify-content: flex-start; }
.lrow-amt { grid-column: 3; grid-row: 1; min-width: 0; }
.od-list { padding: 6px 16px 4px; }
.co-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name free" "chips chips" "bar bar"; gap: 8px 12px; padding: 13px 16px; }
.co-name { grid-area: name; } .co-chips { grid-area: chips; } .co-bar { grid-area: bar; } .co-free { grid-area: free; }
.fund-eq { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.fe-op { display: none; }
.lg-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.lg-when { grid-column: 1 / -1; display: flex; gap: 8px; }
.lg-bal { grid-column: 1; }
.lg-chg { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.wa-board { grid-template-columns: minmax(0, 1fr); }
.wa-onoff { font-size: 34px; }
.wa-fail { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.wa-fail-msg { grid-column: 1 / -1; }
.wa-fails { padding: 4px 16px 10px; }
#loanDetailModal .modal { border-radius: 0; }
#loanDetailModal .modal h3, #loanDetailBody, #loanDetailModal .modal-actions { padding-left: 16px; padding-right: 16px; }
.ld-owed { grid-template-columns: minmax(0, 1fr); }
.ld-side { justify-self: start; text-align: left; }
}
@media (max-width: 480px) {
.lstrip { grid-template-columns: minmax(0, 1fr); }
.ls-cell { border-left: 0 !important; border-top: 1px solid var(--line); }
.ls-cell:first-child { border-top: 0; }
}
/* the strips replace the old card grids: no grid gap or margin left over */
#loanStats, #contribStats { display: block; margin-bottom: 0; }
/* the strips replace the old card grids: no grid gap or margin left over */
#loanStats, #contribStats { display: block; margin-bottom: 0; }
/* chip tones must win over the base .chip rule above them */
.chip.chip-good { background: var(--good-soft); color: var(--good-ink); }
.chip.chip-warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip.chip-crit { background: var(--crit-soft); color: var(--crit-ink); }
.chip.chip-info { background: var(--lapis-soft); color: var(--lapis-ink); }
.chip.chip-neutral { background: var(--neutral-soft); color: var(--ink-soft); }
.chip.solid.chip-crit { background: var(--crit); color: #fff; }
.chip.solid.chip-warn { background: var(--warn); color: #fff; }
.chip.solid.chip-good { background: var(--good); color: #fff; }
.chip.solid.chip-info { background: var(--lapis); color: #fff; }
.chip .pips { color: currentColor; }
/* row actions stay on one line */
#contribTable .btn, #loanTable .btn { white-space: nowrap; }
/* the funding ledger sits inside the panel gutter */
#contribHistoryBody .ledger-list { padding: 4px 22px 10px; }
.wa-more > summary { cursor: pointer; list-style: none; padding: 12px 0 4px; font-weight: 650; font-size: 13px; color: var(--lapis); }
.wa-more > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) { #contribHistoryBody .ledger-list { padding: 4px 16px 10px; } }
/* phones: the vault terms stack; the loan strip stays a compact 2 × 2 */
@media (max-width: 560px) {
.v-eq { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.v-eq .m-lg { font-size: 22px; }
.lstrip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ls-cell { padding: 12px 14px; border-left: 1px solid var(--line) !important; }
.ls-cell:nth-child(odd) { border-left: 0 !important; }
.ls-cell:nth-child(-n+2) { border-top: 0 !important; }
.ls-cell:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
.ls-v { font-size: 22px; }
.ls-k, .ls-s { font-size: 11.5px; }
}
/* ---------------- brand: the accepted demo's ledger mark ---------------- */
.brand .logo { background: none !important; box-shadow: none !important; width: 34px; height: 34px; border-radius: 9px; padding: 0; }
.brand .logo svg { display: block; width: 34px; height: 34px; }
.brand .mark { font-size: 16px; }
.login-mark { margin-bottom: 14px; }
.login-mark svg { display: block; }
.login-brand { font-size: 28px; }
/* ---------------- Employees: standing, actions, people ---------------- */
.emp-standing { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 16px; }
.es-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.es-k { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.es-v { font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.es-v b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; color: var(--good-ink); margin-right: 4px; }
.es-bar { display: flex; gap: 3px; height: 26px; margin-top: 16px; }
.es-seg { all: unset; box-sizing: border-box; cursor: pointer; min-width: 10px; border-radius: 6px; transition: transform .16s var(--ease-out), opacity .16s; }
.es-seg:hover, .es-seg:focus-visible { transform: translateY(-2px); }
.es-seg:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
.es-bar:has(.es-seg.on) .es-seg:not(.on) { opacity: .3; }
.es-good { background: var(--good); } .es-warn { background: var(--warn); } .es-crit { background: var(--crit); } .es-info { background: var(--lapis); }
.es-neutral { background: repeating-linear-gradient(135deg, #B4B1A8 0 4px, color-mix(in srgb, #B4B1A8 55%, transparent) 4px 8px); }
.es-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.es-key { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); background: var(--panel); }
.es-key b { font-weight: 800; color: var(--ink); font-size: 14px; }
.es-key i { width: 10px; height: 10px; border-radius: 3px; }
.es-key:hover { border-color: var(--line-strong); }
.es-key:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
.es-key.on { background: var(--ink); color: #F6F7FA; border-color: var(--ink); }
.es-key.on b { color: #F6F7FA; }
.es-key.clear { color: var(--lapis); border-style: dashed; }
.emp-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 18px; }
.emp-act { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.emp-act::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
.emp-act.t-warn::before { background: var(--warn); } .emp-act.t-crit::before { background: var(--crit); } .emp-act.t-info::before { background: var(--lapis); }
.emp-act.t-warn .task-ic { background: var(--warn-soft); color: var(--warn); } .emp-act.t-crit .task-ic { background: var(--crit-soft); color: var(--crit); } .emp-act.t-info .task-ic { background: var(--lapis-soft); color: var(--lapis); }
.emp-act > .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
.emp-shown { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
#empTable td { padding-top: 11px; padding-bottom: 11px; }
.emp-who { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: center; min-width: 0; border-radius: 8px; }
.emp-who:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; }
.emp-who:hover .emp-nm span:first-child { color: var(--lapis-ink); }
.emp-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--neutral-soft); color: var(--ink-soft); }
.emp-av.t-good { background: var(--good-soft); color: var(--good-ink); } .emp-av.t-warn { background: var(--warn-soft); color: var(--warn-ink); }
.emp-av.t-crit { background: var(--crit-soft); color: var(--crit-ink); } .emp-av.t-info { background: var(--lapis-soft); color: var(--lapis-ink); }
.emp-nm { display: grid; min-width: 0; }
.emp-nm span:first-child { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.emp-nm .faint { font-size: 12px; }
.emp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.emp-draw { display: grid; gap: 2px; font-size: 13px; white-space: nowrap; }
.emp-draw .faint { font-size: 11px; font-weight: 700; margin-right: 4px; }
.emp-acts-row { justify-content: flex-end; }
/* row actions: Profile always shows; Edit and Delete appear on hover or keyboard focus */
@media (hover: hover) {
#empTable .emp-acts-row > :not(:first-child) { opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .18s var(--ease-out); }
#empTable tr:hover .emp-acts-row > *, #empTable tr:focus-within .emp-acts-row > * { opacity: 1; transform: none; }
}
/* the employee profile: the existing dialog as a right-hand drawer */
#empProfileModal { justify-content: flex-end; align-items: stretch; }
#empProfileModal .modal { width: min(640px, 100vw); max-height: none; height: 100vh; margin: 0; border-radius: 18px 0 0 18px; display: flex; flex-direction: column; padding: 0; animation: drawerIn .34s var(--ease-out) both; overflow: hidden; }
#empProfileModal .modal h3 { margin: 0; padding: 20px 26px 4px; border: 0; font-size: 22px; }
#empProfileBody { flex: 1; overflow-y: auto; padding: 0 26px 26px; }
#empProfileModal .modal-actions { margin: 0; padding: 14px 26px; border-top: 1px solid var(--line); background: var(--panel); }
.ep-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ep-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ep-limit { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; }
.ep-limit-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; flex-wrap: wrap; }
.ep-limit-bar { height: 8px; border-radius: 4px; background: var(--lapis-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lapis) 22%, transparent); overflow: hidden; outline-offset: 2px; }
.ep-limit-bar i { display: block; height: 100%; background: var(--lapis); }
.ep-limit-s { font-size: 12px; }
.ep-bank { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; }
.ep-bank.missing { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.ep-bank.missing b { color: var(--warn-ink); }
.ep-acct { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ep-acct-n { font-size: 15px; font-weight: 650; letter-spacing: .02em; word-break: break-all; }
.ep-bank-s { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.ep-flags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#empProfileBody .standing { margin-top: 12px; }
@media (max-width: 760px) {
.emp-standing { padding: 16px; }
.es-v b { font-size: 26px; }
.emp-acts { grid-template-columns: minmax(0, 1fr); }
#empProfileModal .modal { border-radius: 0; }
#empProfileModal .modal h3, #empProfileBody, #empProfileModal .modal-actions { padding-left: 16px; padding-right: 16px; }
.ep-limits { grid-template-columns: minmax(0, 1fr); }
}
.emp-draw.dim { opacity: .45; }
/* ---------- Approvals: the decision desk ---------- */
#page-approvals .queue-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0 2px; }
#page-approvals .queue-tab { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 16px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 13px; margin-right: -1px; }
#page-approvals .queue-tab .n { order: -1; background: none; color: var(--ink-faint, var(--ink-soft)); font-family: inherit; font-size: 24px; font-weight: 750; padding: 0; min-width: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
#page-approvals .queue-tab.has .n { background: none; color: var(--ink); }
#page-approvals .queue-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--panel) 60%, transparent); }
#page-approvals .queue-tab.active { background: var(--panel); color: var(--ink); border-color: var(--line); position: relative; z-index: 1; }
#page-approvals .queue-tab.active .n { color: var(--lapis); background: none; }
#page-approvals .queue-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--panel); }
#page-approvals .queue-section { margin: 0; border-radius: 0 0 16px 16px; border-top: 1px solid var(--line); }
#page-approvals .queue-section .panel-head { padding: 16px 22px 0; border: 0; }
#page-approvals .queue-section .panel-head h2 { font-size: 15px; }
#page-approvals .queue-section .panel-body { padding: 14px 22px 22px; }
.q-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 16px; color: var(--ink-soft); font-size: 13.5px; }
.q-sum b { color: var(--ink); font-size: 20px; font-weight: 750; }
.desk { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.desk-rail { display: grid; gap: 6px; max-height: 70vh; overflow-y: auto; padding: 2px; }
.dr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; text-align: left; padding: 11px 13px 11px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
.dr-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lapis); }
.dr-item.t-crit::before { background: var(--crit); } .dr-item.t-warn::before { background: var(--warn); }
.dr-item.t-good::before { background: var(--good); } .dr-item.t-neutral::before { background: var(--line-strong); }
.dr-item:hover { border-color: var(--line-strong); }
.dr-item.on { border-color: var(--lapis); box-shadow: 0 0 0 1px var(--lapis); }
.dr-who { display: grid; gap: 1px; min-width: 0; }
.dr-who b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-who .faint, .dr-right .faint { font-size: 12px; }
.dr-right { display: grid; justify-items: end; gap: 1px; white-space: nowrap; font-weight: 650; }
.dr-chip { grid-column: 1 / -1; }
.desk-case { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; min-width: 0; animation: caseIn .22s var(--ease-out, ease-out) both; }
@keyframes caseIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .desk-case { animation: none; } }
.dc-kicker { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dc-title { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.dc-title h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.dc-amt { font-size: 24px; font-weight: 750; }
.dc-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.dc-evid { margin-top: 16px; padding: 14px 16px 10px; background: var(--panel); border-radius: 12px; }
.dc-evid-h { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.dc-evid .leaders dd { word-break: break-word; }
.dc-live { margin-top: 12px; }
.dc-live .appr-standing:not(:empty) { margin-top: 10px; }
.dc-field { margin-top: 14px; max-width: 280px; }
.dc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
.desk { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.desk-rail { grid-auto-flow: column; grid-auto-columns: minmax(220px, 78%); overflow-x: auto; max-height: none; padding-bottom: 6px; }
}
@media (max-width: 760px) {
#page-approvals .queue-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; }
#page-approvals .queue-tab { padding: 10px 12px; font-size: 12.5px; }
#page-approvals .queue-tab .n { font-size: 20px; }
#page-approvals .queue-section .panel-head, #page-approvals .queue-section .panel-body { padding-left: 14px; padding-right: 14px; }
.desk-case { padding: 16px; }
.dc-title h3, .dc-amt { font-size: 20px; }
.dc-actions .btn { flex: 1 1 auto; }
}
#page-approvals .queue-section .panel-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#page-approvals .queue-section .panel-head { align-items: center; }
@media (max-width: 560px) {
.dc-evid { padding: 12px 12px 8px; }
.dc-evid .leaders > div { flex-wrap: wrap; gap: 2px 8px; }
.dc-evid .leaders .fill { display: none; }
.dc-evid .leaders dt { flex: 1 1 100%; font-size: 12.5px; }
.dc-evid .leaders dd { text-align: left; word-break: break-all; }
}
/* ---------- Policy Center: launch control ---------- */
.pl-board { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 18px; margin-bottom: 18px; }
.pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pl-title { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.015em; }
.pl-sub { margin-top: 4px; color: var(--ink-soft); font-size: 13.5px; max-width: 760px; }
.pl-bar { display: flex; gap: 2px; height: 14px; margin: 18px 0 14px; border-radius: 7px; overflow: hidden; }
.pl-bar i { display: block; min-width: 6px; transition: opacity .2s; }
.pl-bar i.dim { opacity: .25; }
.t-good { --t: var(--good); --ts: var(--good-soft); --ti: var(--good-ink); }
.t-crit { --t: var(--crit); --ts: var(--crit-soft); --ti: var(--crit-ink); }
.t-warn { --t: var(--warn); --ts: var(--warn-soft); --ti: var(--warn-ink); }
.t-neutral { --t: var(--line-strong); --ts: var(--neutral-soft); --ti: var(--ink-soft); }
.t-info { --t: var(--lapis); --ts: var(--lapis-soft); --ti: var(--lapis-ink); }
.pl-bar i { background: var(--t); }
.pl-keys { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-key { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.pl-key .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--t); }
.pl-key b { font-variant-numeric: tabular-nums; }
.pl-key .faint { font-size: 12px; }
.pl-key:hover { border-color: var(--line-strong); }
.pl-key.on { border-color: var(--t); box-shadow: inset 0 0 0 1px var(--t); background: var(--ts); }
#page-policies .pol-filterbar { margin-bottom: 12px; }
#page-policies .pol-filterbar input, #page-policies .pol-filterbar select { font-family: inherit; font-size: 13px; padding: 7px 11px; border-radius: 9px; }
.pm-panel { padding: 0; overflow: hidden; }
.pm-scroll { overflow-x: auto; }
.pm { display: grid; min-width: max-content; }
.pm-row { display: grid; grid-template-columns: minmax(210px, 1.3fr) repeat(var(--pm-cols), minmax(118px, 1fr)); gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); align-items: stretch; }
.pm-row:last-child { border-bottom: 0; }
.pm-headrow { padding-top: 14px; padding-bottom: 8px; background: var(--panel); }
.pm-h { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); align-self: end; }
.pm-co { display: flex; flex-direction: column; justify-content: center; gap: 6px; align-items: flex-start; min-width: 0; }
.pm-co b { font-size: 14.5px; font-weight: 650; }
.pm-fund { display: block; width: 120px; height: 5px; border-radius: 3px; background: var(--lapis-soft); overflow: hidden; }
.pm-fund i { display: block; height: 100%; background: var(--lapis); }
.pm-cell { position: relative; display: grid; gap: 1px; align-content: center; text-align: left; padding: 10px 12px 10px 14px; border-radius: 11px; border: 1px solid transparent; background: var(--ts, var(--panel)); color: var(--ink); font: inherit; min-height: 62px; transition: opacity .2s, box-shadow .15s; }
.pm-cell::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t, transparent); }
button.pm-cell { cursor: pointer; }
button.pm-cell:hover { box-shadow: 0 0 0 1px var(--t) inset; }
.pm-cell.dim { opacity: .3; }
.pm-cap { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ti, var(--ink)); }
.pm-sub { font-size: 12px; color: var(--ink-soft); }
.pm-none { background: transparent; border: 1px dashed var(--line); }
.pm-lab { display: none; font-size: 11.5px; color: var(--ink-soft); }
.pm-foot { padding: 12px 18px 14px; font-size: 12.5px; border-top: 1px solid var(--line); }
.pol-lower { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.pol-lower .panel { margin: 0; }
.pt-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pt-row .field { margin: 0; min-width: 0; }
.pt-row .field:first-child { flex: 1 1 200px; }
.pt-row .pt-amt { width: 120px; }
.pt-result { margin-top: 12px; font-size: 13px; }
.pol-hist { font-size: 13px; display: grid; }
.ph-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ph-row:last-child { border-bottom: 0; }
.ph-when { font-size: 12px; color: var(--ink-soft); white-space: nowrap; padding-top: 1px; }
.ph-what { min-width: 0; }
.ph-what .faint { display: block; font-size: 12.5px; }
@media (max-width: 1000px) { .pol-lower { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
.pl-board { padding: 16px; }
.pl-title { font-size: 21px; }
.pm { min-width: 0; }
.pm-headrow { display: none; }
.pm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; }
.pm-row > .pm-co { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
.pm-lab { display: block; }
#page-policies .pol-filterbar input { width: 100%; }
#page-policies .pol-filterbar select { flex: 1 1 140px; min-width: 0; }
}
.pol-lower .panel-body { padding: 16px 22px 20px; }
.pm-cell:not(.r-ready) { background: var(--panel); border-color: var(--line); }
.pm-cap { font-variant-numeric: normal; }
.pm-cell.r-off .pm-cap { color: var(--ink-soft); }
@media (max-width: 760px) { .pm-row > .pm-co { justify-content: flex-start; gap: 8px 10px; } .pol-lower .panel-body { padding: 14px 16px 16px; } }
/* ---------- Reputation: trust ladder, review desk, people by risk ---------- */
.rl-board { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; }
.rl-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.rl-step { display: grid; gap: 4px; text-align: left; padding: 14px 14px 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; position: relative; transition: opacity .2s, box-shadow .15s; }
.rl-step::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); }
.rl-step:hover { border-color: var(--line-strong); }
.rl-step.on { background: var(--ts); border-color: var(--t); box-shadow: inset 0 0 0 1px var(--t); }
.rl-step.dim { opacity: .45; }
.rl-n { font-size: 28px; font-weight: 750; line-height: 1.05; color: var(--ti); }
.rl-l { font-weight: 650; font-size: 13.5px; }
.rl-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--t) 18%, transparent); overflow: hidden; margin: 4px 0 2px; }
.rl-bar i { display: block; height: 100%; background: var(--t); }
.rl-r { font-size: 12px; }
.rp-desk, #page-reputation > .panel { margin-bottom: 18px; }
.rp-desk .panel-body { padding: 14px 22px 22px; }
.rp-body { padding: 14px 22px 8px; }
.rp-body .pol-filterbar { margin-bottom: 10px; }
.rp-body .pol-filterbar input, .rp-body .pol-filterbar select { font-family: inherit; font-size: 13px; padding: 7px 11px; border-radius: 9px; }
.rp-list { display: grid; }
.rp-row { display: grid; grid-template-columns: 34px minmax(160px, 1.3fr) minmax(0, 1.4fr) 150px auto; gap: 14px; align-items: center; padding: 11px 6px 11px 12px; border-bottom: 1px solid var(--line); position: relative; }
.rp-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); opacity: .9; }
.rp-row.t-neutral::before { opacity: 0; }
.rp-row:last-child { border-bottom: 0; }
.rp-who { display: grid; gap: 1px; min-width: 0; }
.rp-who b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-who .faint { font-size: 12px; }
.rp-state { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-pts { display: grid; gap: 5px; font-size: 13px; }
.rp-bar { height: 5px; border-radius: 3px; background: var(--lapis-soft); overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--lapis); }
.rp-acts { display: flex; gap: 6px; justify-content: flex-end; }
@media (hover: hover) { .rp-acts .btn { opacity: .55; transition: opacity .15s; } .rp-row:hover .rp-acts .btn, .rp-acts .btn:focus-visible { opacity: 1; } }
details.fold { padding: 0; }
details.fold > summary { list-style: none; cursor: pointer; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary > span { display: grid; gap: 2px; }
details.fold > summary .faint { font-size: 12.5px; }
details.fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: 4px; }
details.fold[open] > summary::after { transform: rotate(-135deg); }
details.fold[open] > summary { border-bottom: 1px solid var(--line); }
details.fold > .panel-body { padding: 18px 22px; }
@media (max-width: 1000px) { .rl-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-row { grid-template-columns: 34px minmax(0, 1fr) 130px; } .rp-state { grid-column: 2 / -1; } .rp-acts { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 760px) {
.rl-board { padding: 16px; }
.rl-ladder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rl-n { font-size: 22px; }
.rp-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; }
.rp-pts, .rp-state, .rp-acts { grid-column: 2 / -1; }
.rp-desk .panel-body, .rp-body, details.fold > .panel-body { padding-left: 14px; padding-right: 14px; }
.rp-body .pol-filterbar input { width: 100%; }
.rp-body .pol-filterbar select { flex: 1 1 140px; min-width: 0; }
}
.rp-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin: 6px 0 12px; background: var(--panel); border-radius: 12px; font-size: 13.5px; }
/* ---------- Audit: investigation console ---------- */
#page-audit .au-tabs { display: flex; gap: 0; margin: 0; padding: 0 2px; }
#page-audit .au-tabs .queue-tab { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--ink-soft); margin-right: -1px; font-size: 13.5px; }
#page-audit .au-tabs .queue-tab .n { background: none; color: var(--ink); font-family: inherit; font-size: 20px; font-weight: 750; padding: 0; min-width: 0; }
#page-audit .au-tabs .queue-tab.has .n { color: var(--crit); background: none; }
#page-audit .au-tabs .queue-tab.active { background: var(--panel); color: var(--ink); position: relative; z-index: 1; }
#page-audit .au-tabs .queue-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--panel); }
#page-audit .au-panel { border-radius: 0 16px 16px 16px; }
#page-audit .au-panel[hidden] { display: none; }
.au-tools { padding: 12px 22px 4px; display: grid; gap: 10px; }
.au-tools .pol-filterbar { margin: 0; }
.au-tools .pol-filterbar input, .au-tools .pol-filterbar select { font-family: inherit; font-size: 13px; padding: 7px 11px; border-radius: 9px; }
.ac-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ac-row + .ac-row { margin-top: 8px; }
.ac-time { gap: 0; display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; width: max-content; max-width: 100%; }
.ac-t { border: 0; background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 12.5px; padding: 6px 12px; cursor: pointer; border-right: 1px solid var(--line); }
.ac-t:last-child { border-right: 0; }
.ac-t.on { background: var(--ink); color: var(--paper, #fff); }
.au-list { padding: 4px 22px 14px; }
.timeline { display: grid; gap: 4px; }
.tl-day { display: grid; }
.tl-day-h { position: sticky; top: 0; z-index: 1; background: var(--card); font-size: 12.5px; font-weight: 650; color: var(--ink-soft); padding: 12px 0 6px; border-bottom: 1px solid var(--line); }
.tl-ev { display: grid; grid-template-columns: 48px 14px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); align-items: start; }
.tl-ev:last-child { border-bottom: 0; }
.tl-time { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--t); margin-top: 6px; box-shadow: 0 0 0 3px var(--ts); }
.tl-ev.sev-high { background: linear-gradient(90deg, var(--crit-soft), transparent 70%); border-radius: 8px; }
.tl-what { font-size: 13.5px; line-height: 1.45; }
.tl-meta { font-size: 12px; margin-top: 2px; }
.tl-raw { margin-top: 4px; font-size: 12.5px; }
.tl-raw summary { cursor: pointer; color: var(--lapis-ink, var(--lapis)); width: max-content; }
.tl-raw-b { margin-top: 6px; padding: 10px 12px; background: var(--panel); border-radius: 10px; display: grid; gap: 4px; max-width: 560px; }
.tl-raw-b .tl { display: flex; justify-content: space-between; gap: 14px; }
.tl-raw-b .tl span:first-child { color: var(--ink-soft); white-space: nowrap; }
.tl-raw-b .tl span:last-child { text-align: right; word-break: break-word; min-width: 0; }
.ms-row { display: grid; grid-template-columns: 48px minmax(140px, 200px) minmax(0, 1fr) 130px; gap: 14px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); align-items: start; }
.ms-row:last-child { border-bottom: 0; }
.ms-who { display: grid; gap: 1px; min-width: 0; }
.ms-who .faint { font-size: 12px; }
.ms-body { font-size: 13px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ms-row:hover .ms-body { -webkit-line-clamp: unset; }
.ms-del { justify-self: end; text-align: right; }
.ms-err { font-size: 11.5px; margin-top: 3px; }
#notifBar .pl-bar { margin: 4px 0 10px; }
@media (max-width: 760px) {
#page-audit .au-tabs .queue-tab { padding: 10px 12px; flex: 1 1 0; }
.au-tools, .au-list { padding-left: 14px; padding-right: 14px; }
.au-tools .pol-filterbar input { width: 100%; }
.au-tools .pol-filterbar select { flex: 1 1 140px; min-width: 0; }
.ms-row { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 10px; }
.ms-body, .ms-del { grid-column: 2; }
.ms-del { justify-self: start; text-align: left; }
}
#notifStatusFilter { font-family: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); }
.tl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tl-meta .tl-raw { margin: 0; }
.tl-meta .tl-raw[open] { flex-basis: 100%; }
.tl-sub { font-size: 13px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.tl-sub:last-child { border-bottom: 0; }
/* ---------- Team & Access: people with role chips, role × action matrix ---------- */
.ta-board { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; }
.ta-worries { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
#page-access > .panel { margin-bottom: 18px; }
#accessUsers { padding: 4px 22px 10px; }
.ta-people { display: grid; }
.ta-row { display: grid; grid-template-columns: 34px minmax(170px, 1.2fr) minmax(0, 1.3fr) 170px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ta-row:last-child { border-bottom: 0; }
.ta-row.is-off { opacity: .55; }
.ta-who { display: grid; gap: 1px; min-width: 0; cursor: default; }
.ta-who b { font-weight: 650; }
.ta-who .faint { font-size: 12px; }
.ta-roles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ta-role { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 650; background: var(--lapis-soft); color: var(--lapis-ink, var(--lapis)); }
.ta-role.r-owner, .ta-role.r-admin { background: var(--ink); color: var(--paper, #fff); }
.ta-role.r-viewer { background: var(--neutral-soft); color: var(--ink-soft); }
.ta-role.r-finance { background: var(--good-soft); color: var(--good-ink); }
.ta-role.r-executive { background: var(--warn-soft); color: var(--warn-ink); }
.ta-plus { color: var(--ink-soft); font-size: 12px; }
.ta-can { display: grid; gap: 5px; font-size: 12.5px; }
.ta-meter { height: 5px; border-radius: 3px; background: var(--lapis-soft); overflow: hidden; }
.ta-meter i { display: block; height: 100%; background: var(--lapis); }
.ta-scope { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.ta-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (hover: hover) { .ta-acts .btn { opacity: .55; transition: opacity .15s; } .ta-row:hover .ta-acts .btn, .ta-acts .btn:focus-visible { opacity: 1; } }
#accessRoles { padding: 0; }
.rm-scroll { overflow-x: auto; }
.rm { display: grid; min-width: max-content; padding: 0 0 10px; }
.rm-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(var(--rm-cols), minmax(104px, 1fr)); align-items: center; padding: 0 22px; }
.rm-row:not(.rm-head):hover { background: var(--panel); }
.rm-head { position: sticky; top: 0; background: var(--card); padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); align-items: end; z-index: 1; }
.rm-role { display: grid; gap: 1px; justify-items: center; text-align: center; font: inherit; font-size: 13px; padding: 6px 4px; border: 0; border-radius: 9px; background: none; color: var(--ink); }
button.rm-role { cursor: pointer; }
button.rm-role:hover { background: var(--lapis-soft); }
.rm-role .faint { font-size: 11.5px; }
.rm-k { font-size: 13px; padding: 7px 0; }
.rm-k .faint { font-size: 12px; }
.rm-see .rm-c b { font-size: 15px; }
.rm-group { padding: 14px 22px 4px; font-size: 12.5px; font-weight: 650; color: var(--ink-soft); border-top: 1px solid var(--line); }
.rm-c { display: grid; place-items: center; padding: 7px 0; }
.rm-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.rm-c.on .rm-dot { background: var(--lapis); border-color: var(--lapis); }
@media (max-width: 1100px) { .ta-row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); } .ta-can, .ta-scope { grid-column: 2 / span 1; } .ta-acts { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 760px) {
.ta-board { padding: 16px; }
#accessUsers { padding: 4px 14px 10px; }
.ta-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; }
.ta-roles, .ta-can, .ta-scope, .ta-acts { grid-column: 2 / -1; }
.rm-row { grid-template-columns: minmax(170px, 1.4fr) repeat(var(--rm-cols), 76px); padding: 0 14px; }
.rm-group { padding-left: 14px; }
}
.rm { min-width: 860px; }
.rm-row { grid-template-columns: minmax(240px, 1.6fr) repeat(var(--rm-cols), minmax(92px, 1fr)); }
@media (min-width: 1101px) { .ta-row { grid-template-columns: 34px minmax(170px, 1.2fr) minmax(0, 1.1fr) 160px minmax(0, 1fr) 372px; } .ta-acts { flex-wrap: nowrap; } }
@media (max-width: 760px) { .rm { min-width: 720px; } }
/* ---------- Administration: control centre ---------- */
.ad-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ad-tile { display: grid; gap: 3px; text-align: left; padding: 16px 18px 15px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; position: relative; transition: border-color .15s; }
.ad-tile::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); }
.ad-tile:hover { border-color: var(--line-strong); }
.ad-k { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.ad-v { font-size: 22px; font-weight: 750; color: var(--ti); letter-spacing: -.01em; }
.ad-s { font-size: 12.5px; }
#page-admin .ad-tabs { display: flex; gap: 0; margin: 0; padding: 0 2px; }
#page-admin .ad-tabs .queue-tab { padding: 11px 18px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--ink-soft); margin-right: -1px; font-size: 13.5px; }
#page-admin .ad-tabs .queue-tab.active { background: var(--panel); color: var(--ink); position: relative; z-index: 1; }
#page-admin .ad-tabs .queue-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--panel); }
#page-admin .admin-sec > .panel, #page-admin .admin-sec > .ad-two > .panel { border-radius: 0 16px 16px 16px; margin: 0; }
#page-admin .ad-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
#page-admin .ad-two > .panel + .panel { border-radius: 0 16px 16px 0; border-left: 0; }
#page-admin .ad-two > .panel:first-child { border-radius: 0 0 0 16px; }
.ad-panel { padding: 0; }
.ad-sec { padding: 20px 24px 22px; border-bottom: 1px solid var(--line); }
.ad-sec:last-child { border-bottom: 0; }
.ad-sec-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ad-sec-h h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
.ad-sec-h .faint { font-size: 13px; max-width: 760px; }
.ad-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ad-swt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ad-swt.on { background: var(--card); }
.ad-swt-t { display: grid; gap: 1px; min-width: 0; }
.ad-swt-t .faint { font-size: 12px; }
.ad-swb { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-soft); padding: 4px; cursor: pointer; white-space: nowrap; border-radius: 8px; }
span.ad-swb { cursor: default; }
.ad-sw { width: 34px; height: 20px; border-radius: 10px; background: var(--line-strong); position: relative; transition: background .2s; flex: none; }
.ad-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.ad-swt.on .ad-sw { background: var(--good); }
.ad-swt.on .ad-sw i { transform: translateX(14px); }
.ad-swt.on .ad-swb { color: var(--good-ink); }
.ad-rem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.ad-rem-l .field { max-width: 420px; }
.ad-rem-r .rem-status { margin: 0; border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.ad-sub { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.ad-sub-h { display: grid; gap: 2px; margin-bottom: 12px; }
.ad-sub-h .faint { font-size: 13px; }
.ad-narrow { max-width: 720px; }
.ad-panel-tools { display: flex; justify-content: flex-end; padding: 16px 24px 0; margin-bottom: -44px; position: relative; z-index: 1; }
.ad-pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ad-pool { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; background: var(--card); }
.ad-pool-top { display: grid; gap: 8px; }
.ad-pool-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ad-pool-fig .faint { font-size: 12.5px; }
.ad-bar { display: block; height: 6px; border-radius: 3px; background: var(--lapis-soft); overflow: hidden; }
.ad-bar i { display: block; height: 100%; background: var(--lapis); }
.ad-pool-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
.ad-pool-fields .field { margin: 0; }
.ad-pool-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.ad-pool-acts, .ad-co-acts { display: flex; gap: 6px; }
.ad-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ad-co { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; background: var(--card); }
.ad-co.no-pool { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
.ad-co-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ad-co-h > div { display: grid; gap: 1px; }
.ad-co-h .faint { font-size: 12px; }
.ad-co-pool { margin: 0; }
.ad-co-pool select { width: 100%; }
.ad-co.no-pool select { border-color: var(--crit); }
.ad-cats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ad-cat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--panel); }
.ad-x { border: 0; background: none; color: var(--ink-soft); font-size: 15px; line-height: 1; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; }
.ad-x:hover { background: var(--crit-soft); color: var(--crit-ink); }
.ad-jobs { display: grid; }
.ad-job { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ad-job:last-child { border-bottom: 0; }
.ad-job > div { display: grid; gap: 2px; min-width: 0; }
.ad-job .faint { font-size: 12.5px; }
.ad-job .btn { flex: none; }
@media (max-width: 1100px) { .ad-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-rem { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
#page-admin .ad-two { grid-template-columns: minmax(0, 1fr); gap: 14px; }
#page-admin .ad-two > .panel, #page-admin .ad-two > .panel + .panel, #page-admin .ad-two > .panel:first-child { border-radius: 16px; border-left: 1px solid var(--line); }
}
@media (max-width: 760px) {
.ad-board { gap: 8px; }
.ad-tile { padding: 12px 14px 12px 16px; }
.ad-v { font-size: 18px; }
#page-admin .ad-tabs { overflow-x: auto; }
#page-admin .ad-tabs .queue-tab { padding: 10px 12px; font-size: 12.5px; white-space: nowrap; }
.ad-sec { padding: 16px 14px 18px; }
.ad-panel-tools { margin-bottom: 0; padding: 14px 14px 0; }
.ad-pools, .ad-cos { grid-template-columns: minmax(0, 1fr); }
.ad-pool-fields { grid-template-columns: minmax(0, 1fr); }
.ad-job { flex-wrap: wrap; }
}
/* ---------- Monthly Report: an executive document ---------- */
#reportPanel { padding: 0; overflow: hidden; }
.rp-doc { display: grid; }
.rp-cover { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px; padding: 30px 32px 28px; background: linear-gradient(135deg, var(--lapis-soft), var(--card) 70%); border-bottom: 1px solid var(--line); }
.rp-kick { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; color: var(--lapis-ink, var(--lapis)); }
.rp-month { margin: 8px 0 12px; font-size: 44px; font-weight: 750; letter-spacing: -.025em; line-height: 1.02; }
.rp-summary { margin: 0; font-size: 16px; line-height: 1.6; max-width: 62ch; color: var(--ink); }
.rp-health { display: flex; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; align-self: start; }
.rp-factors { flex: 1; min-width: 0; }
.rp-factor { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px dotted var(--line-strong); }
.rp-factor:last-child { border-bottom: 0; }
.rp-recs { margin: 22px 32px 0; padding: 16px 20px; border-radius: 14px; background: var(--warn-soft); border-left: 3px solid var(--warn); }
.rp-recs h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--warn-ink); }
.rp-recs ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.rp-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 22px 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp-fig { display: grid; gap: 3px; padding: 14px 16px 14px 0; }
.rp-fig + .rp-fig { padding-left: 16px; border-left: 1px solid var(--line); }
.rp-fk { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.rp-fv { font-size: 22px; font-weight: 750; }
.rp-fig.t-crit .rp-fv { color: var(--crit-ink); }
.rp-fig.t-warn .rp-fv { color: var(--warn-ink); }
.rp-fs { font-size: 12px; }
.rp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; padding: 0 32px; }
.rp-two > .rp-sec { padding-left: 0; padding-right: 0; }
.rp-sec { padding: 22px 32px; }
.rp-doc > .rp-sec, .rp-two { border-top: 1px solid var(--line); margin-top: 22px; }
.rp-doc > .rp-sec + .rp-sec, .rp-two + .rp-sec, .rp-sec + .rp-two, .rp-two + .rp-two { margin-top: 0; }
.rp-sec h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.rp-act { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.rp-act b { font-size: 16px; }
.rp-cats { display: grid; gap: 12px; }
.rp-cat { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; }
.rp-cat-m { display: grid; gap: 6px; }
.rp-cat-l { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.rp-cat-l .faint { font-size: 12.5px; }
.rp-up { display: grid; }
.rp-up-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rp-up-row:last-child { border-bottom: 0; }
.rp-up-row.late .rp-up-d b { color: var(--crit-ink); }
.rp-up-d, .rp-up-w { display: grid; gap: 1px; min-width: 0; }
.rp-up-d .faint, .rp-up-w .faint { font-size: 12px; }
.rp-up-a { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.rp-attn { display: grid; gap: 8px; }
.rp-attn-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; }
.rp-attn-h { display: flex; justify-content: space-between; gap: 10px; }
.rp-attn-c { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-sec .report-list { padding: 0; margin: 0; }
@media (max-width: 1100px) { .rp-cover { grid-template-columns: minmax(0, 1fr); } .rp-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-fig:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 860px) { .rp-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
.rp-cover { padding: 20px 16px; gap: 16px; }
.rp-month { font-size: 32px; }
.rp-summary { font-size: 15px; }
.rp-health { flex-wrap: wrap; }
.rp-recs, .rp-figs { margin-left: 16px; margin-right: 16px; }
.rp-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rp-fig, .rp-fig + .rp-fig { padding: 12px 10px 12px 0; border-left: 0; }
.rp-sec, .rp-two { padding-left: 16px; padding-right: 16px; }
.rp-up-row { grid-template-columns: 74px minmax(0, 1fr); }
.rp-up-a { grid-column: 2; }
}
@media print {
.rp-cover { background: none; padding: 0 0 18px; }
.rp-recs { background: none; border: 1px solid #ccc; }
.rp-two { break-inside: avoid; }
.rp-sec { break-inside: avoid; }
}
/* ---------- Contributions: capacity board ---------- */
.ct-alerts { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
#contribBody { padding: 16px 22px 22px; }
.ct-tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ct-tank { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); position: relative; }
.ct-tank::before { content: ""; position: absolute; left: 0; top: 18px; width: 3px; height: 36px; border-radius: 0 3px 3px 0; background: var(--t); }
.ct-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ct-h > div { display: grid; gap: 1px; min-width: 0; }
.ct-h b { font-size: 15px; font-weight: 700; }
.ct-h .faint { font-size: 12px; }
.ct-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ct-free { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ct-free .faint { font-size: 12.5px; }
.ct-tank.t-crit .ct-free .m-int, .ct-tank.t-crit .ct-free .m-dec { color: var(--crit-ink); }
.ct-bar { height: 12px; border-radius: 6px; background: var(--ts, var(--lapis-soft)); overflow: hidden; outline-offset: 2px; }
.ct-tank.t-good .ct-bar { background: var(--lapis-soft); }
.ct-bar i { display: block; height: 100%; background: var(--lapis); border-radius: 6px 0 0 6px; }
.ct-tank.t-warn .ct-bar i { background: var(--warn); }
.ct-tank.t-crit .ct-bar i { background: var(--crit); }
.ct-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.ct-acts { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.ct-fold { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 14px; }
.ct-fold > .tbl-wrap { padding: 0 6px; }
.ct-fold > #contribTableFoot { padding: 0 16px 6px; }
@media (max-width: 760px) {
#contribBody { padding: 12px 14px 16px; }
.ct-tanks { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Active Loans: due board ---------- */
.lb-view { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 14px 22px 0; }
.lb-wrap[hidden], .lt-wrap[hidden] { display: none; }
.lb-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 22px 22px; align-items: start; }
.lb-lane { background: var(--panel); border-radius: 14px; padding: 12px; display: grid; gap: 10px; border-top: 3px solid var(--t); }
.lb-lh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.lb-n { font-weight: 750; color: var(--ti); }
.lb-lh .faint { margin-left: auto; font-size: 12px; }
.lb-cards { display: grid; gap: 8px; }
.lb-card { display: grid; gap: 7px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lb-card:hover, .lb-card:focus-visible { border-color: var(--lapis); box-shadow: 0 0 0 1px var(--lapis); outline: none; }
.lb-h { display: grid; gap: 1px; min-width: 0; }
.lb-h b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-h .faint { font-size: 12px; }
.lb-next { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 650; }
.lb-next .faint { font-size: 12.5px; font-weight: 500; }
.lb-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.lb-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.lb-f .faint { font-size: 12px; }
.lb-empty { font-size: 12.5px; padding: 6px 2px; }
@media (max-width: 1200px) { .lb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.lb-view { margin: 12px 14px 0; }
.lb-board { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 16px; }
}
@media (min-width: 1201px) { .lb-board { grid-template-columns: var(--lb-cols, repeat(4, minmax(0, 1fr))); } }
/* ---------- Overview lower half ---------- */
.ov-alerts { grid-column: span 7; }
.ov-lower .ov-fund { grid-column: span 5; }
.ov-lower .ov-alerts:has(+ .ov-fund[style*="none"]) { grid-column: 1 / -1; }
.ov-ev { grid-template-columns: 44px 12px minmax(0, 1fr); padding: 8px 0; }
.ov-attn { display: grid; gap: 8px; padding: 12px 22px 18px; }
.ov-attn-row { display: grid; gap: 6px; text-align: left; padding: 12px 14px 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; position: relative; }
.ov-attn-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t); }
button.ov-attn-row { cursor: pointer; }
button.ov-attn-row:hover { border-color: var(--lapis); }
.ov-attn-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-attn-c { display: flex; gap: 4px; flex-wrap: wrap; }
.ov-attn-r { font-size: 12.5px; }
@media (max-width: 1000px) { .ov-alerts, .ov-lower .ov-fund { grid-column: 1 / -1; } }
/* The signed-in name lives in the sidebar footer; the header repeats it only
when that footer is out of sight (collapsed rail, phone layout). */
@media (min-width: 1001px) { html:not([data-rail="collapsed"]) .topbar .who { display: none; } }
/* ---------- Employees: grouped list, one-row toolbar ---------- */
#empTable tr.emp-grp td { background: var(--panel); padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
#empTable tr.emp-grp td b { font-weight: 650; }
#empTable tr.emp-grp td .faint { margin-left: 4px; }
#empTable tr.emp-grp.g-overdue td, #empTable tr.emp-grp.g-restricted td { box-shadow: inset 3px 0 0 var(--crit); }
#empTable tr.emp-grp.g-nobank td, #empTable tr.emp-grp.g-unverified td { box-shadow: inset 3px 0 0 var(--warn); }
#empTable tr.emp-grp.g-can td { box-shadow: inset 3px 0 0 var(--good); }
.emp-list > .panel-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.emp-list > .panel-head .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emp-list > .panel-head .toolbar input, .emp-list > .panel-head .toolbar select { font-family: inherit; font-size: 13px; padding: 7px 11px; border-radius: 9px; }
.emp-list > .panel-head .toolbar #bulkBtn { margin-left: auto; }
@media (max-width: 760px) { .emp-list > .panel-head .toolbar #bulkBtn { margin-left: 0; } .emp-list > .panel-head .toolbar input { width: 100% !important; } }
@media (min-width: 761px) { .emp-list > .panel-head .toolbar input { width: 190px !important; } }
/* =====================================================================
Sheets: every form and decision, one language.
head: what this is about · body: calm fields · ledger: before → after
foot: the one action, named with its amount. Danger sheets carry a red
band and say what cannot be undone. Big editors open as drawers.
===================================================================== */
.modal-bg { background: color-mix(in srgb, var(--ink) 38%, transparent); }
.modal.sheet { padding: 0; width: min(520px, 94vw); max-height: min(92vh, 860px); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 24px 60px -18px rgba(12, 20, 40, .38), 0 2px 6px rgba(12, 20, 40, .08); }
.modal.sheet.sh-wide { width: min(680px, 95vw); }
.modal.sheet > h3, .sheet .sh-head h3 { margin: 0; padding: 0; border: 0; }
.sh-head { position: relative; padding: 22px 64px 16px 26px; border-bottom: 1px solid var(--line); background: var(--card); }
.sh-kick { font-size: 12.5px; font-weight: 650; color: var(--lapis-ink, var(--lapis)); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-head h3 { font-size: 21px; font-weight: 750; letter-spacing: -.015em; line-height: 1.2; margin-top: 4px !important; color: var(--ink); }
.sh-meta { margin-top: 4px; font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; }
.sh-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sh-x:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }
.sh-body { padding: 18px 26px 22px; overflow-y: auto; flex: 1 1 auto; display: grid; gap: 16px; align-content: start; }
.sh-body > .field, .sh-sec .field { margin: 0; }
.sh-sec { display: grid; gap: 12px; }
.sh-sec + .sh-sec { padding-top: 16px; border-top: 1px dashed var(--line); }
.sh-lab { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sh-lab .faint { font-weight: 500; }
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sheet .field label { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 6px; display: block; text-transform: none; letter-spacing: 0; font-family: inherit; }
.sheet .field label .muted, .sheet .field label .faint { font-weight: 500; color: var(--ink-soft); }
.sheet .field input, .sheet .field select, .sheet .field textarea, .sheet textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); color: var(--ink); font: inherit; font-size: 14.5px; transition: border-color .15s, box-shadow .15s; }
.sheet textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.sheet .field input:focus, .sheet .field select:focus, .sheet textarea:focus { outline: none; border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.sheet .field-hint { font-size: 12.5px; margin-top: 6px; line-height: 1.5; color: var(--ink-soft); }
.sheet .field-hint b { font-family: inherit; font-weight: 650; }
/* the amount is the decision: big, with its currency */
.sh-money { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.sh-money:focus-within { border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.sh-money input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: none !important; padding: 2px 0 !important; min-height: 0 !important; font-size: 30px !important; font-weight: 750; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: normal; }
.sh-money input::placeholder { color: var(--line-strong); }
.sh-money .cur { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.sh-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.qchip b { font-weight: 700; }
.qchip:hover { border-color: var(--lapis); }
.qchip.on { background: var(--lapis-soft); border-color: var(--lapis); color: var(--lapis-ink, var(--lapis)); }
/* segmented choice (method, mode) - backed by a real